<template>
  <el-form
    :label-position="'right'"
    label-width="120px"
    :model="accountForm"
    :rules="formRules"
    ref="accountRef"
    style="max-width: 90%">
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="accountForm.phone" @input="phoneChange" />
    </el-form-item>
    <el-form-item label="账号" prop="account">
      <el-input v-model="accountForm.account" disabled />
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <div class="msg-code">
        <el-input v-model="accountForm.code" placeholder="请输入" style="860px"> </el-input>
        <div class="yzm_img">
          <el-button
            type="primary"
            :disabled="countDown > 0"
            @click.prevent="getMsgCode()"
            style="width: 100%; height: 34px">
            {{ countDown > 0 ? countDown + "秒后再次获取" : "发送验证码" }}
          </el-button>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, onBeforeMount, onMounted, computed } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import { validatePhone } from "@/services/rules.js";
const props = defineProps({});
const accountForm = reactive({
  phone: "",
  account: "",
  code: "",
});

const formRules = reactive({
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { validator: validatePhone, trigger: "blur" },
  ],
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

const countDown = ref(0);
const countDownTimer = ref(null);

const accountRef = ref(null);
const emit = defineEmits(["action"]);
const submitForm = () => {
  if (!accountRef) return;

  accountRef.value.validate((valid, fields) => {
    if (valid) {
      axios
        .post("/v1/api/user/forget/pwd/check", { phone: accountForm.phone, code: accountForm.code })
        .then(({ data }) => {
          if (data.code == 200) {
            emit("action", accountForm);
          } else {
            ElMessage.error(data.data);
          }
        });
    }
  });
};

const clearForm = () => {
  if (!accountRef) return;
  accountRef.value.resetFields();
};

const setForm = (data) => {
  Object.assign(accountForm, data);
};

const getMsgCode = () => {
  if (accountForm.account) {
    axios.post("/v1/api/user/sms/verifyCode", { phone: accountForm.phone }).then(({ data }) => {
      if (data.code == 200) {
        countDownAction();
      } else {
        ElMessage.error(data.data);
      }
    });
  } else {
    ElMessage.error("该手机号未注册，请核对手机号！");
  }
}; // 获取验证码
const countDownAction = () => {
  countDown.value = 60;

  if (countDownTimer.value) {
    clearInterval(countDownTimer.value);
  }

  countDownTimer.value = setInterval(() => {
    if (countDown.value > 0) {
      countDown.value--;
    } else {
      clearInterval(countDownTimer.value);
    }
  }, 1000);
};

const phoneChange = () => {
  if (accountForm.phone.length > 10) {
    accountRef.value.validateField("phone").then((valid) => {
      if (valid) {
        axios.get(`/v1/api/user/phoneToAccount?phone=${accountForm.phone}`).then((res) => {
          if (res.data.code == 200) {
            accountForm.account = res.data.data || "";
          } else {
            ElMessage.error(res.data.data);
          }
        });
      }
    });
  }
};

onBeforeMount(() => {});

onMounted(() => {});

defineExpose({ submitForm, clearForm, setForm });
</script>

<style lang="scss" scoped>
.msg-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .yzm_img {
    flex: 1;
    margin-left: 20px;
  }
}
</style>
