<template>
  <el-input type="number" v-model="value" disabled>
    <template slot="append">
      <span @click="getCode()" class="yzm">{{ msg }}</span>
    </template>
  </el-input>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    url: {
      type: String
    }
  },
  data() {
    return {
      msg: '获取验证码',
      time: 60,
      flag: true
    };
  },
  methods: {
    getCode() {
      if (this.flag) {
        this.ajax({url: this.url}).then((response) => {
          this.$modal.msgSuccess('验证码发送成功');
          //一分钟倒计时
          var countdown = setInterval(() => {
            this.time--;
            if (this.time == 0) {
              this.flag = true;
              this.msg = '获取短信';
              this.time = 60;
              clearInterval(countdown);
            } else {
              this.flag = false;
              this.msg = '重新获取(' + this.time + ')';
            }
          }, 1000);
        });
      }
    }
  }
};
</script>
