<!--
 * @Description: 登录组件-短验登录
 * @Version: 1.0
 参数
 props: {
  // 配置json文件
  configJson: { type: Object,
    default: () => {} },
  // 手机号码
  phoneNum: { type: String },
  // 验证码倒计时参数(字段名称请不要修改)
  verifyUnit: { type: Object,
    default: () => {} },
 }
 事件
 beforeLoginHttp // 登录相关接口请求前个性化处理
 afterLoginHttp // 登录相关接口response个性化处理
 VerifyCodeCallback // 短验登录结果(回调给业务使用)
 verifyTimerCallback // 验证码倒计时结果回调
 smsLoginCallback // 短验登录接口回调
 * @Autor: peixiaoyong
 * @Date: 2021-11-25 14:25:37
 * @LastEditors: peixiaoyong
 * @LastEditTime: 2021-12-23 19:41:57
-->
<template>
  <view class="verify-layout">
    <input
      class="verify-input"
      v-model="codeContent"
      @input="onVerifyCodeInput()"
      type="text"
      placeholder="请输入短信验证码"
      autocomplete="off"
    />
    <text class="get-code" :class="[verifyEnable ? 'get-code-active' : '']" @click="getVerifyCode()">
      {{ verifyText }}
    </text>
  </view>
</template>

<script>
import timerMixins from './timer-mixins'
export default {
  name: 'asp-mp-code-input',
  props: {
    verifyCode: {
      type: String,
      default: ''
    },
    verifyLength: {
      type: Number,
      default: 6
    },
    verifyCodeCallback: {
      type: Function,
      default: undefined
    },
    countLength: {
      type: Number,
      default: 60
    }
  },
  mixins: [timerMixins],
  data () {
    return {
      codeContent: '',
      verifyEnable: true,
      verifyText: '获取验证码'
    }
  },
  watch: {},
  mounted () {},
  created () {},
  beforeDestory () {
    this.clearCountDown()
  },
  methods: {
    async getVerifyCode () {
      // 倒计时
      if (!this.isCountDown()) {
        this.isStartCountDown()
      }
      // 业务回调:如调用验证码接口
      this.verifyCodeCallback()
    },
    async handleCoutDown () {
      if (this.count <= 0) {
        this.clearCountDown()
        this.verifyEnable = true
        this.verifyText = '获取验证码'
      } else {
        this.verifyEnable = false
        this.verifyText = `${this.count}s后重新获取`
      }
    },
    onVerifyCodeInput () {
      if (this.codeContent.length > this.verifyLength) {
        this.codeContent = this.codeContent.slice(0, this.verifyLength)
      }
      this.$emit('update:verifyCode', this.codeContent)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './asp-mp-code-input.scss';
</style>
