<template lang="html">
  <div class="SMS">
    <!-- 验证码 -->
    <flexbox>
      <flexbox-item>
        <div class="flex-demo" :span="6">
          <x-input
          class="smsCodeWrap"
          v-model="smsCode"
          placeholder="请输入验证码"
          required
          :show-clear="true"
          @on-blur="onBlur"
          placeholder-align="left"></x-input>
        </div>
      </flexbox-item>
      <flexbox-item :span="6">
        <div class="ctl-btn">
          <span v-if="!countDownStatus" @click="getCode()">获取验证码</span>
          <span v-else :disabled="countDownStatus" @click="getCode()">{{ countDownDuring }}秒后重新获取</span>
          <x-button mini :disabled="this.smsCode === ''" @click.native="submitCode()">确定</x-button>
        </div>
      </flexbox-item>
    </flexbox>
    <toast v-model="smsCodeMsgShow" :time="1500">{{smsCodeMsg}}</toast>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem, XInput, XButton, Alert, TransferDomDirective as TransferDom, Toast } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Flexbox,
    FlexboxItem,
    XInput,
    XButton,
    Alert,
    Toast
  },
  props: [ 'TYPE' ],
  data () {
    return {
      smsCode: '',
      smsCodeMsg: '验证码发送成功',
      smsCodeMsgShow: false,
      countDownDuring: 60,
      countDownStatus: false
    }
  },
  computed: {
  },
  methods: {
    onBlur () {},
    countDown () {
      this.countDownStatus = true
      // 倒计时 一分钟
      if (this.countDownDuring > 0) {
        var Timer = setInterval(() => {
          this.countDownDuring = this.countDownDuring - 1;
        }, 1000);
      } else {
        this.countDownStatus = true
      }
      setTimeout(() => {
        // 倒计时状态
        clearInterval(Timer)
        this.countDownStatus = false
        this.countDownDuring = 60
      }, 60000)
    },
    getCode () {
      // 获取验证码
      // axios.post('b/auth/pin', { type: this.TYPE })
      //   .then(res => {
      //     if (res.data.ret === 'OK') {
      //       this.smsCodeMsgShow = true
      //       // 激活倒计时
      //       this.countDown()
      //     } else {
      //       this.smsCodeMsgShow = true
      //       this.smsCodeMsg = '出错了'
      //       console.warn(res);
      //     }
      //   })
      //   .catch(err => {
      //     console.error(err);
      //   })
      this.countDown()
    },
    submitCode () {
      // 验证验证码
      this.$emit('handle', this.smsCode)
      this.smsCode = ''
    }
  }
}
</script>

<style lang="less">
.smsCodeWrap {
  font-size: 0.9rem;
  /* border: 1px solid #ccc; */
  padding: 3px 8px!important;
  /* border-radius: 5px */
}
.ctl-btn {
  span {
    display: inline-block;
    padding: 3px 8px;
    background: #f2f2f2;
    font-size: 0.9rem;
    border-radius: 5px;
    color: #45547a;
  }
}
</style>