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

const props = defineProps({
  areaCode: Array,
});

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

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

//区号
const areaCodeSelect = ref("86");
const areaCode = computed(() => props.areaCode);

const form = reactive({
  mobile: "",
  picCode: "",
  checkCode: "",
});
const rules = {
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (areaCodeSelect.value === "86" && !isMobileNo(value)) {
          callback(new Error("请输入正确的手机号格式"));
        } else if (areaCodeSelect.value !== "86" && isNaN(value.trim())) {
          callback(new Error("请输入正确的手机号格式"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  picCode: [{ required: true, message: "请输入图形验证码", trigger: "blur" }],
  checkCode: [{ required: true, message: "请输入短信验证码", trigger: "blur" }],
};

const isGetNewCode = ref(false);
//获取手机验证码
function checkForm() {
  if (codeStr === "重新获取" && isGetNewCode.value) {
    //引导用户重新输入图形验证码
    ElMessage.warning("重新获取需再次输入图形验证码");
    getCodePic();
    form.picCode = "";
    isGetNewCode.value = true;
    return;
  }

  //检查手机号和图形验证码是否正确
  if (!form.picCode.length) {
    return ElMessage.warning("请输入图形验证码");
  }

  if (areaCodeSelect.value === "86" && !isMobileNo(form.mobile)) {
    return ElMessage.warning("请输入正确的手机号");
  }

  getVerifyCodeHandle({
    VerifyType: 1,
    CaptchaId: picId.value,
    CaptchaCode: form.picCode,
    Mobile: form.mobile,
    TelAreaCode: areaCodeSelect.value,
    Source: 1,
  });
}

defineExpose({
	form,
	validate,
  getCodePic
})
</script>
<template>
  <div class="mobile-model-wrap model-wrap">
    <el-form
      ref="modelForm"
      label-position="right"
      label-width="0px"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="mobile">
        <el-input
          class="input-with-slot"
          type="text"
          v-model="form.mobile"
          auto-complete="off"
          placeholder="请输入手机号"
        >
          <template #prepend>
            <el-select v-model="areaCodeSelect" placeholder="请选择">
              <el-option
                v-for="item in areaCode"
                :key="item.Value"
                :label="item.Name"
                :value="item.Value"
              />
            </el-select>
          </template>
        </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>
