<template>
  <view @click="handleSendVerCode">
    {{ beginning ? time + 's后重新获取' : sendData.text }}
  </view>
</template>

<script>
import { validate } from '@/common/utils/index'
import { IS_DEV } from '@/common/config.js'
export default {
  name: 'benben-input-code',
  props: {
    text: String,
    sendData: {
      type: [Object, Array],
      default: () => {
        return { type: '1', text: '请发送验证码', phone: '15000000000000' }
      },
    },
  },
  data() {
    return {
      beginning: false, // 显示倒计时,@Boolean
      time: 60, // 倒计时60S,@Number
      timer: null, // 计时器,@Function
    }
  },
  methods: {
    handleSendVerCode() {
      let _this = this
      // 从this里结构出来phone
      let {
        sendData: { type, phone },
      } = this
      // 验证手机号strat
      if (!phone) {
        this.$message.info('请输入手机号')
        return false
      }
      if (!validate(phone, 'phone')) {
        this.$message.info('请正确输入手机号')
        return false
      }
      // 验证手机号 end
      // 如果有倒计时，return false
      if (this.beginning) return false
      /**
       * @desc 请求验证码接口
       * @param {Object} {} - 参数
       * @param {Boolean} {}.is_test - 是否是测试环境
       * @param {String} {}.mobile - 手机号
       * @param {String} {}.type - 类型
       */
      this.$api
        .post('/v1/5b5bdc44796e8', {
          is_test: IS_DEV != 0 ? 1 : 0,
          mobile: phone,
          type: type,
        })
        .then((res) => {
          // 改加载状态为false
          // 如果后台返回的code码为1
          if (res.data.code == 1) {
            _this.beginning = true // 显示倒计时

            // 清除倒计时,防抖作用
            clearInterval(_this.timer)
            _this.timer = setInterval(() => {
              if (_this.time == 1) {
                //倒计时结束就清楚这个倒计时
                clearInterval(_this.timer)
                _this.time = 60 // 倒计时60s
                _this.beginning = false // 是否显示倒计时改为false
                return
              }
              _this.time--
            }, 1000)
            // 向用户发送提示
            _this.$message.info('验证码发送成功')
          } else {
            // 如果报错，向用户提示
            _this.$message.info(res.data.msg)
          }
        })
        .catch(function (err) {
          // 接口错误打印错误
          console.log(err)
        })
    },
  },
  created() {},
}
</script>

<style lang="scss" scoped></style>
