<template>
  <div>
    <!--标题-->
    <ToPBarNormal :title="title"></ToPBarNormal>
    <!--提示信息-->
    <div class="result-cont">
      <p style="padding:10px">我们已经给您的手机号<a> +86 {{mobile}} </a>发送了一条验证短信，请及时查看。</p>
      <div class="phone_edit">
        <group>
          <x-input placeholder="请输入短信验证码" v-model="code">
            <span slot="right" v-show="selected" class="phone_vcode" @click="_getCode"><a>重新发送</a></span>
            <span slot="right" v-show="!selected" class="phone_vcode">重新发送({{second}}s)</span>
          </x-input>
        </group>
      </div>
      <div style="margin-top: 20px;background: #ccc" class="login-exit" v-show="!code">完成</div>
      <div style="margin-top: 20px" class="login-exit" @click="_ok" v-show="code">完成</div>
    </div>
  </div>
</template>

<script>
  import ToPBarNormal from '../../../components/topBar/TopBarNormal'
  import {XInput, Group} from 'vux'

  export default {
    components: {
      ToPBarNormal,
      XInput,
      Group
    },
    name: "sms",
    data() {
      return {
        title: '请输入短信验证码',
        code: '',
        mobile: '',
        second: 59,
        selected: false
      }
    },
    mounted() {
      this._getQuery();
    },
    methods: {
      _getQuery() {
        this.mobile = this.$route.query.mobile;
        this.selected = false;
        this.second = 59;
        this._count();
      },
      //提示
      _msg(msg) {
        this.$vux.toast.show({
          type: 'text',
          width: '10em',
          text: msg,
          time: 1000
        });
      },
      //完成
      _ok() {
        this.$store.dispatch('SystemManage/changeBindMobile', this.code).then(() => {
          if (this.$store.state.SystemManage.model) {
            this._msg('修改成功');
            this.$router.go(-2);
          }
        });
      },
      //发送验证码
      _getCode() {
        this.selected = false;
        this.second = 59;
        let data = {
          mobile: this.mobile,
          module: 'bindChangeMobile'
        };
        this.$store.dispatch('SystemManage/getCode', data).then(() => {
          if (this.$store.state.SystemManage.model) {
            this._count();
          } else {
            this._msg('验证码发送失败');
          }
        });
      },
      //计数
      _count() {
        let second = this.second;
        if (second === 0) {
          this.selected = true;
          this.second = 59;
          return;
        }
        setTimeout(() => {
          this.second = second - 1;
          this._count();
        }, 1000)
      },
    }
  }
</script>
