<template>
  <div id="verify-message">
    <el-button type="success" style="width: 86px;height: 33px;padding: 0;margin: 0 0 0 5px;" @click="send">
      <el-link :underline="false" v-show="show" style="color:#fff;">获取验证码</el-link>
      <el-link :underline="false" v-show="!show" style="color:#fff;">{{ count }}s后重新发送验证码</el-link>
    </el-button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'verify-message',
  props: {
    mobile: { type: String },
  },
  components: {},
  data: () => ({
    count: 0,
    show: true,
    timer: null,
  }),
  created() {},
  computed: {},
  methods: {
    ...mapActions(['verifyOperation']),
    async send() {
      if (!this.mobile) {
        this.$message.error('请输入手机号码');
        return;
      }
      this.setTime();
      let result = await this.verifyOperation({ type: 'message', data: { mobile: this.mobile } });
      if (`${result.errcode}` === '0') {
        this.$message.success('短信正在发送中,请耐心等待');
      }
    },
    setTime() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
  },
};
</script>

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