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

const {t} = useI18n()
const logicStore = useLogicStore()
const userStore = useUserStore();
const verificationCodeRef = ref();

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

function checkForm(): boolean {
  const validateFormField = FormSchema.safeParse(logicStore.forgetPasswordForm.loginPwd)
  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;
}

function submit() {
  // verificationCodeRef.value.onOpen()
  codeSubmit()
}

function codeSubmit() {
  // forgetPwdNotLogin
  appUserForgetPwdNotLoginPost({
    body: {
      email: logicStore.forgetPasswordForm.email,
      phone: logicStore.forgetPasswordForm.phone,
      // captcha: data.code,
      // uuid: data.uuid,
      loginPwd: logicStore.forgetPasswordForm.loginPwd,
      userPort: 2, // 登录端口2 商户端
    }
  }).then((res) => {
    uni.showToast({
      title: t('pages-login.prompt.reset-success'),
      icon: 'none',
    })
    logicStore.reset()
    uni.redirectTo({
      url: '/pages-login/pages/index',
    })
  })
}

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


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

// onLoad(R.pipe(() => getUserInfoByEmail(R.pick(['email'], logicStore.registerForm)), R.andThen((res) => {
//   console.log(res)
//   logicStore.forgetPasswordForm = {
//     ...R.pick(['phone', 'areaCode'], res.data),
//     email: logicStore.registerForm.email,
//     loginPwd: '',
//     captcha: "",
//   }
// })))

onLoad(() => {
  // 根据登录信息获取用户信息
  if (logicStore.loginForm.type === 'email' && logicStore.loginForm.email) {
    // 根据邮箱获取用户信息
    appUserGetByEmailPost({
      body: {
        email: logicStore.loginForm.email,
        userPort: 2, // 登录端口2 商户端
      }
    }).then((res: any) => {
      console.log('根据邮箱获取用户信息', res)
      if (res.data) {
        logicStore.forgetPasswordForm.email = res.data.email
        logicStore.forgetPasswordForm.phone = res.data.phone
      }
    })
  } else if (logicStore.loginForm.type === 'phone' && logicStore.loginForm.phone) {
    // 根据手机号获取用户信息
    appUserGetByPhonePost({
      body: {
        phone: logicStore.loginForm.phone,
        userPort: 2, // 登录端口2 商户端
      }
    }).then((res: any) => {
      console.log('根据手机号获取用户信息', res)
      if (res.data) {
        logicStore.forgetPasswordForm.email = res.data.email
        logicStore.forgetPasswordForm.phone = res.data.phone
      }
    })
  }
})

</script>

<template>
  <view>
    <navbar/>
    <view class="pt-64rpx px-27rpx">
      <view class="text-50rpx lh-50rpx text-#14181B font-bold">
        {{ t('pages-login.login.forgotPassword') }}
      </view>
      <view class="mt-30rpx text-28rpx lh-28rpx text-#999 font-bold">
        {{ t('pages-login.forget-password.description') }}
      </view>
      <view class="mt-78rpx">
        <view class="">
          <view class="text-32rpx lh-32rpx text-#14181B">{{ t("common.email") }}</view>
          <view
              class="mt-24rpx flex px-30rpx items-center h-100rpx bg-#EFEFEF rounded-20rpx">
            <image class="shrink-0 mr-12rpx w-30rpx h-30rpx" src="@img-login/103.png"></image>
            <text class="text-28-bold">{{ logicStore.forgetPasswordForm.email }}</text>
          </view>
        </view>
        <view class="mt-36rpx">
          <view class="text-32rpx lh-32rpx text-#14181B">{{ t("pages-login.sign-up.phone-number") }}</view>
          <view
              class="mt-24rpx flex px-30rpx items-center h-100rpx bg-#EFEFEF rounded-20rpx">
            <image class="shrink-0 mr-12rpx w-30rpx h-30rpx" src="@img-login/102.png"></image>
            <text class="text-28-bold">{{ logicStore.forgetPasswordForm.phone }}</text>
          </view>
        </view>
        <view class="mt-36rpx">
          <view class="text-32rpx lh-32rpx text-#14181B">{{ t("pages-login.forget-password.newPassword") }}</view>
          <view
              class="mt-24rpx flex px-30rpx items-center h-100rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
            <wd-input
                v-model.trim="logicStore.forgetPasswordForm.loginPwd"
                :cursorSpacing="20"
                :focus-when-clear="false"
                :maxlength="20"
                :placeholder="t('common.enter')"
                clearable
                custom-class="flex-1"
                no-border
                placeholderStyle="font-size: 28rpx;color: #999;font-weight: bold;line-height: 42rpx;"
                show-password
            >
            </wd-input>
          </view>
        </view>
        <view class="mt-80rpx">
          <wd-button block custom-class="!h-108rpx !text-36rpx font-bold !rounded-16rpx" @click="handleSubmit">
            {{ t('common.continue') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>
<!--  <verification-code ref="verificationCodeRef" @submit="codeSubmit"/>-->
</template>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
