<script setup>
import { reactive,ref } from "vue"
import { patternEmail } from '@/utils/commonOptions'
import { ElMessage } from 'element-plus'
import { useLogin,useForm } from '@/hooks/login/use-login'

const { modelForm,validate,restValidate } = useForm();

const { 
  getCodePic,
  picSrc,
  picId,
  codeStr,
  codeCountDown,
  countDown,
  getVerifyCodeHandle
} = useLogin()
getCodePic()

const form = reactive({
  email: "",
  picCode: "",
  checkCode: "",
});
const rules = {
   email:[
      {required:true,message:'请输入邮箱',trigger:'blur'},
      {validator:(rule,value,callback)=>{
          if(!patternEmail.test(value)){
              callback(new Error("请输入正确的邮箱格式"))
          }else{
              callback()
          }
      },trigger:'blur'}
  ],
  picCode:[{required:true,message:'请输入图形验证码',trigger:'blur'}],
  checkCode:[{required:true,message:'请输入短信验证码',trigger:'blur'}]
};

//获取邮箱验证码
function checkForm() {
    if(codeStr==='重新获取'&&isGetNewCode.value){
        //引导用户重新输入图形验证码
        ElMessage.warning('重新获取需再次输入图形验证码')
        getCodePic()
        form.picCode = ''
        isGetNewCode.value = true
        return
    }
		
		 //检查手机号和图形验证码是否正确
    if(!form.picCode.length){
      return ElMessage.warning('请输入图形验证码')
        
    }

		if(!patternEmail.test(form.email)){
			return ElMessage.warning('请输入正确的邮箱')
		}

		getVerifyCodeHandle({
			VerifyType:2,
			CaptchaId:picId.value,
			CaptchaCode:form.picCode,
			Email:form.email,
			Source:1
		})
    
}


defineExpose({
	form,
	validate,
  getCodePic
})
</script>
<template>
  <div class="email-model-wrap model-wrap">
    <el-form
      ref="modelForm"
      label-position="right"
      label-width="0px"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="email">
        <el-input
          type="text"
          v-model="form.email"
          auto-complete="off"
          placeholder="请输入邮箱"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="picCode">
        <el-input
          class="input-with-slot"
          type="text"
          v-model="form.picCode"
          auto-complete="off"
          placeholder="请输入图形验证码"
        >
          <template #append>
            <div class="pic-box"  @click="getCodePic">
              <img :src="picSrc" alt="图形验证码" />
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="checkCode" class="code-input">
        <el-input
          type="text"
          v-model="form.checkCode"
          auto-complete="off"
          placeholder="请输入验证码"
        ></el-input>
        <el-button
          type="primary"
          link
          class="code-btn"
          @click="checkForm"
          :disabled="codeCountDown < 60 && codeCountDown > 0"
          >{{ codeStr }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="scss">
@import "./css/formStyle.scss";
</style>
