<template>
  <div class="">
    <Input
      :placeholder="placeholder"
      :clearable="clearable"
      :maxlength="maxlength"
      :value="value"
      :type="type"
      @change="handleChange"
    >
      <template #button>
        <div>
          <div
            v-if="smsCount === 60"
            @click="handleClickSendSms"
            class="text-app-blue"
            :class="{ 'text-font-gray': !phoneValid || smsLock }"
          >
            获取验证码
          </div>
          <div v-else class="text-app-blue">已发送 {{ smsCount }} S</div>
        </div>
      </template>
    </Input>
    <div
      class="mt-2 float-right text-sm text-app-blue"
      v-if="voiceActive && sendVoiceFunc"
    >
      <div
        v-if="voiceCount === 60 && !voiceHasSended60Ago"
        class="flex items-center"
        :class="{ 'text-font-gray': voiceLock }"
      >
        收不到验证码？试试
        <span
          class="text-app-blue"
          @click="handleClickSendVoice"
          :class="{ 'text-font-gray': voiceLock }"
          >语音验证</span
        >
      </div>
      <div
        @click="handleClickSendVoice"
        v-else-if="voiceCount === 60 && voiceHasSended60Ago"
        :class="{ 'text-font-gray': voiceLock }"
      >
        获取语音验证
      </div>
      <div v-else>请注意接听语音验证电话 ({{ voiceCount }}) S</div>
    </div>
    <div class="clear-right"></div>
  </div>
</template>

<script lang="ts">
import Vue, { defineComponent } from "vue";
import Input from "@/components/common/Input/index.vue";
export default defineComponent({
  components: {
    Input,
  },
  props: {
    placeholder: String,
    clearable: Boolean,
    value: String,
    type: String,
    handleChange: Function,
    maxlength: Number,
    phone: String,
    sendSmsFunc: Function,
    sendVoiceFunc: {
      type: Function,
      required: false,
    },
    phoneValid: Boolean,
    sendSmsAuto: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      smsCount: 60,
      voiceCount: 60,
      voiceActive: false,
      voiceHasSended60Ago: false,
      smsLock: false,
      voiceLock: false,
      timerId1: 0,
      timerId2: 0,
    };
  },
  mounted() {
    if (this.phoneValid && this.sendSmsAuto) {
      this.handleClickSendSms();
    }
  },
  methods: {
    async handleClickSendSms() {
      if (!this.phoneValid) return;
      if (this.smsLock === true) return;
      this.smsLock = true;
      try {
        await (this.sendSmsFunc && this.sendSmsFunc(this.phone));
      } catch (err) {
        this.smsLock = false;
        return;
      }
      this.smsCount--;
      this.timerId1 = window.setInterval(() => {
        this.smsCount--;
        if (this.smsCount === -1) {
          this.smsCount = 60;
          this.voiceActive = true;
          this.smsLock = false;
          window.clearInterval(this.timerId1);
        }
      }, 1000);
    },
    async handleClickSendVoice() {
      if (!this.phoneValid) return;
      if (this.voiceLock === true) return;
      this.voiceLock = true;
      await (this.sendVoiceFunc && this.sendVoiceFunc(this.phone));
      this.voiceCount--;
      this.timerId2 = window.setInterval(() => {
        this.voiceCount--;
        if (this.voiceCount === -1) {
          this.voiceCount = 60;
          this.voiceLock = false;
          this.voiceHasSended60Ago = true;
          window.clearInterval(this.timerId2);
        }
      }, 1000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timerId1);
    clearInterval(this.timerId2);
  },
});
</script>

<style>
</style>