<script setup lang="ts">
import {reactive, ref} from 'vue';
import type {FormInstance} from "element-plus";
import {ElMessage} from 'element-plus';
import {debounce} from "@/utils/common.ts";
import {sendCode} from "@/api/user.ts";
import {LoginType, userStore} from "@/stores/user.ts";
import {AuthCodeType} from "@/enums/verification.ts";
import CodeFormItem from "@/components/common/login/component/CodeFormItem.vue";
import AccountFormItem from "@/components/common/login/component/AccountFormItem.vue";
import SubmitFormBtn from "@/components/common/login/component/SubmitFormBtn.vue";

const user = userStore();
const form = reactive({
  phone: '',
  code: '',
});

const ruleFormRef = ref<FormInstance>();

// 登陆
const debouncedSubmitForm = debounce(async function submitForm(formEl: FormInstance | undefined, callBack: () => void) {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const {phone, code} = form;
      try {
        // 调用用户登录方法
        await user.login({phone, code});
      } catch (error) {
        console.error('Login failed:', error);
      }
      // 如果有回调函数，执行回调
      callBack && callBack();
    } else {
      console.error('Form validation failed:', fields);
      // 如果有回调函数，执行回调
      callBack && callBack();
    }
  });
}, 500);

const buttonLoading = ref(false);

const debouncedSendAuthCode = debounce(async function sendAuthCode(sendAuthCodeCallBack: () => void) {
  if (!ruleFormRef.value?.validateField) return;
  await ruleFormRef.value.validateField('phone', async (valid) => {
    if (valid) {
      const {phone} = form;
      await sendCode({phone, type: AuthCodeType.PHONE_LOGIN});
      if (sendAuthCodeCallBack) {
        sendAuthCodeCallBack();
      }
    } else {
      ElMessage.error('请输入正确的手机号码');
    }
  });
}, 500)
// 获取验证码


</script>

<template>
  <div class="bf-login-dialog-box">
    <h1 class="title">验证码登录</h1>
    <div class="bf-login-form">
      <el-form :model="form" ref="ruleFormRef">
        <AccountFormItem prop-name="phone" v-model:phone="form.phone"/>
        <CodeFormItem v-model:code="form.code" @sendAuthCode="debouncedSendAuthCode"/>
        <SubmitFormBtn v-model:button-loading="buttonLoading" @submit-click="debouncedSubmitForm(ruleFormRef, $event)"/>
      </el-form>
      <div class="bf-login-footer-btn">
        <a class="forget-pwd" @click="user.loginType = LoginType.RESET_PASSWORD">忘记密码</a>
        <a class="sign-up" @click="user.loginType = LoginType.REGISTER">立即注册</a>
      </div>
      <div class="bf-login-process">
        <a class="wx-login" @click="user.loginType = LoginType.WECHAT_LOGIN"><img
            src="@/assets/components/common/login/wx-icon.png" style="background: rgba(107, 182, 87, 1);">微信登录</a>
        <a class="SMS-login" @click="user.loginType = LoginType.ACCOUNT_LOGIN"><img
            src="@/assets/components/common/login/account-icon.png">账户登陆</a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
