<template>
  <view class="flex w-full items-center">
    <u-input type="number" :clearable="false" class="w-full flex-1 ml-30rpx flex-1" v-model="val" :maxlength="maxLength" :placeholder="placeholder"></u-input>
    <view>
      <view @tap="run" class="bg-hex-F4F4F4 rounded-full px-32rpx py-12rpx text-primary text-26rpx"> {{ text }} </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '验证码',
    },
    maxLength: {
      type: Number,
    },
    second: {
      type: Number,
      default: 60,
    },
    btnText: {
      type: String,
      default: '获取验证码',
    },
    disabled: {
      type: [Boolean, Number],
      default: false,
    },
  },
  data() {
    return {
      time: 0,
    };
  },
  computed: {
    text() {
      return this.time > 0 ? this.time + `秒重新获取` : this.btnText;
    },
    val: {
      get() {
        return this.value;
      },
      set(e) {
        this.$emit('input', e);
      },
    },
  },
  methods: {
    getSmsCode() {
      this.$emit('change');
    },
    run() {
      if(this.time>0) return
      this.$emit('run');
    },
    start() {
      this.time = this.second;
      this.timer();
    },
    stop() {
      this.time = 0;
      this.timer();
    },
    timer() {
      if (this.time > 0) {
        this.time--;
        setTimeout(this.timer, 1000);
      }
    },
  },
};
</script>
