<template>
  <div class="login-code">
    <el-button
      class="x_btns login-code-img"
      size="default"
      type="primary"
      style="width: 100%"
      @click.prevent="getCode"
      :disabled="isDisabled"
    >
      <span>{{ buttonName }}</span>
    </el-button>
  </div>
</template>

<script setup>
import { getCodeImg } from "@/api/login";

const props = defineProps({
  mobile: String,
});

const disabled = ref(true);
const buttonName = ref("获取验证码");
const isDisabled = ref(false);
const time = ref(60);

const { proxy } = getCurrentInstance();

function getCode() {
  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
  if (!reg.test(props.mobile))
    return proxy.$modal.msgError("请输入正确的手机号码");
  isDisabled.value = true;
  let interval = setInterval(function () {
    buttonName.value = time.value + "后重新发送";
    --time.value;
    if (time.value < 0) {
      buttonName.value = "重新发送";
      time.value = 60;
      isDisabled.value = false;
      clearInterval(interval);
    }
  }, 1000);
  getCodeImg({ mobile: props.mobile })
    .then((res) => {})
    .catch(() => {
      isDisabled.value = false;
      clearInterval(interval);
    });
}
</script>

<style lang="scss" scoped>
.login-code {
  width: 30%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login-code-img {
  height: 36px;
}
</style>