<script lang="ts" setup>
import * as R from 'ramda'
import {z} from "zod";
import {useLogicStore} from "@/pages-login/store/module/logic";
import {LoginType} from "@/constant/enums";
import {appLoginPost} from "@/service";
import {debounce} from "throttle-debounce";
import Config from "@/config";
import {useConfigStore, useUserStore} from "@/store";

const {t} = useI18n()
const userStore = useUserStore();
const configStore = useConfigStore()
const logicStore = useLogicStore()

const FormSchema = z.string()
    .min(1, {message: t('pages-login.prompt.password')})

function checkForm(): boolean {
  const validateFormField = FormSchema.safeParse(logicStore.loginForm.password)
  console.log('validateFormField', validateFormField)
  if (!validateFormField.success) {
    const formatted = validateFormField.error.format()

    R.path(['_errors', 0], formatted) && uni.showToast({
      title: R.path(['_errors', 0], formatted),
      icon: 'none',
    })
  }

  return validateFormField.success;
}

const btnLoading = ref(false)

async function submit() {
  try {
    const params = {
      email: '',
      phone: '',
      password: logicStore.loginForm.password,
      type: logicStore.loginForm.type === 'email' ? LoginType.EMAIL : LoginType.ACCOUNT,
      userPort: 2, // 商户端登录
    }
    logicStore.loginForm.type === 'email' ? params.email = logicStore.loginForm.email : params.phone = logicStore.loginForm.phone
    console.log('params42', params)
    btnLoading.value = true
    const res = await appLoginPost({
      body: params,
    })
    btnLoading.value = false
    console.log('res', res)
    await uni.showToast({title: t('pages-login.login-successfully'), icon: "none"});
    userStore.token = res.data.token;
    nextTick(() => {
      userStore.getUserInfo();
    })

    const pages = getCurrentPages()

    console.log('pages.length', pages.length)
    setTimeout(() => {
      uni.switchTab(
          {
            url: Config.indexPath
          })
    }, 1000);
  } catch (e) {
    btnLoading.value = false
  }
}

// 提交
const handleSubmit = R.when(checkForm, debounce(Config.debounceLongTime, submit, {
  atBegin: true
}))


function navigateTo(url: string) {
  logicStore.resetRegisterForm()
  uni.navigateTo({url});
}

</script>

<template>
  <view>
    <navbar/>
    <view class="pt-60rpx px-27rpx">
      <view class="text-50rpx lh-50rpx text-#14181B font-bold">
        {{ t('pages-login.login.title') }}
      </view>
      <view class="mt-30rpx text-28rpx lh-28rpx text-#999 font-bold">
        {{ t('pages-login.login.description') }}
      </view>
      <view class="mt-80rpx">
        <view class="">
          <view class="text-32rpx lh-32rpx text-#14181B">{{ t("pages-login.sign-up.password") }}</view>
          <view
              class="mt-24rpx flex px-30rpx items-center h-98rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
            <wd-input
                v-model.trim="logicStore.loginForm.password"
                :cursorSpacing="20"
                :focus-when-clear="false"
                :maxlength="20"
                :placeholder="t('common.enterPassword')"
                clearable
                custom-class="flex-1"
                no-border
                placeholderStyle="font-size: 32rpx;color: #999;"
                show-password
            >
            </wd-input>
          </view>
        </view>
        <view class="mt-40rpx">
          <wd-button :loading="btnLoading" block custom-class="!h-108rpx !text-36rpx font-bold !rounded-16rpx"
                     loading-color="#000" @click="handleSubmit">
            {{ t('pages-login.login.title') }}
          </wd-button>
        </view>
        <view class="flex-center-sb mt-60rpx">
          <text class="text-32rpx text-#333 underline" @click="navigateTo('/pages-login/pages/sign-up/index')">
            {{ t('pages-login.sign-up.title') }}
          </text>
          <text class="text-32rpx text-#CE7138 lh-34rpx underline"
                @click="navigateTo('/pages-login/pages/forget-password/index')">
            {{ t('pages-login.login.forgotPassword') }}
          </text>
        </view>
      </view>
    </view>
  </view>

</template>

<style lang="scss">

page {
  background-color: #fff;
}
</style>
