<template>
  <el-input
    v-model="smsCode"
    size="large"
    placeholder="短信验证码"
    clearable
  >
    <template #prefix>
      <svg-icon
        icon-class="message"
        class="el-input__icon input-icon"
      />
    </template>
    <template #append>
      <el-button type="primary" style="width: 100px" @click="getCaptchaSms">
        <count-down v-if="counting" v-slot="{ totalSeconds }" :time="60000" @end="counting=false">
          {{ totalSeconds }} 秒
        </count-down>
        <span v-else>
          发送短信
        </span>
      </el-button>
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { captchaSmsWithCaptchaImage } from '/@/api/login.js'
import { ResultData, SmsCaptcha } from '/@/utils/interface'
import CountDown from '@chenfengyuan/vue-countdown'
import { ElMessage } from 'element-plus'


const emit = defineEmits(['update:modelValue', 'error'])
const counting = ref(false)

const props = defineProps({
  modelValue: {
    required: true,
    type: String,
    default: ''
  },
  verify: {
    type: Function,
    default: () => Promise.resolve()
  }
})
const smsCode = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

// 发送短信验证码
function getCaptchaSms() {
  if (!props.verify) {
    return
  }

  if (counting.value) {
    return
  }

  props.verify().then((params: SmsCaptcha) => {
    captchaSmsWithCaptchaImage({
      uuid: params.uuid,
      telNo: params.telNo,
      code: params.captcha
    }).then((res: ResultData) => {
      ElMessage.success(res.msg)
      counting.value = true
    }).catch(() => {
      emit('error')
    })
  })
}

</script>

<style scoped lang="scss">
:deep(.el-input-group__append) {
  color: #014A9F;border:1px solid #014A9F;
  background-color: #fff;
}

.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 0px;
}
</style>