<template>
  <div
    class="verify-btn"
    :class="{'is-disabled': clickVerifyBtn}"
    @click="sendVerify"
    slot="right"
  >{{textTemp}}
  </div>
</template>

<script>
  export default {
    name: 'md-verify-code',
    props: {
      text: {
        type: String,
        default: '获取验证码'
      },
      count: {
        type: Number,
        default: 60
      },
      timerText:{
        type: String,
        default: '重新发送'
      }
    },
    data () {
      return {
        clickVerifyBtn: false,
        textTemp: this.text,
        countTemp: this.count,
        timerTextTemp: this.timerText
      }
    },
    methods: {
      sendVerify () {
        if (!this.clickVerifyBtn) {
          this.clickVerifyBtn = true
          this.textTemp = `${this.timerTextTemp}(${this.countTemp})`
          let timer = setInterval(() => {
            if (this.countTemp <= 0) {
              this.textTemp = this.timerTextTemp
              this.clickVerifyBtn = false
              clearInterval(timer)
              return
            }
            this.countTemp--
            this.textTemp = `${this.timerTextTemp}(${this.countTemp})`
          }, 1000)
        }
      }
    },
    watch: {
      text (val) {
        this.textTemp = val
      },
      count (val) {
        this.countTemp = val
      },
      timerText (val) {
        this.timerText = val
      }
    }
  }
</script>

<style scoped>
  .verify-btn {
    font-size: 14px;
    border: 1px solid #cc444d;
    color: #cc444d;
    border-radius: 4px;
    margin-left: 5px;
    width: 100px;
    text-align: center;
    margin-right: 10px;
  }

  .verify-btn.is-disabled {
    color: #808591;
    border: 1px solid #808591;
  }

  .verify-msg > span {
    color: #ff9e00;
  }
</style>
