<template>
  <div>

    <mt-field label="手机号" placeholder="请输入正确的手机号" type="tel" v-model.trim="phone" :attr="{ maxlength: 11 }"></mt-field>

    <mt-field label="验证码" v-model.trim="codeText" :attr="{ maxlength: 6 }">
      <div class="getCode" @click="getCodeHandle">{{timeNum}}</div>
    </mt-field>

    <div style="margin-top: 34px" class="leftRightPadding">
      <mt-button type="danger" size="large" @click="bingUser">绑定</mt-button>
    </div>
  </div>
</template>

<script>
import { sendverificode, bindCustByOpenId } from '@/api/binDing/binDing'

export default {
  name: 'binDing',
  data() {
    return {
      codeText: '',
      phone: '',
      timeText: '获取验证码',
      timeNum: 60,
      clickFlag: true, // 获取验证码按钮是否可以点击
    }
  },
  created() {
    this.timeNum = this.timeText
  },
  methods: {
    getCodeHandle: function () { // 获取验证码事件
      if (!(/^1[3456789]\d{9}$/.test(this.phone))) {  // 先判断手机号是否输入正确
        this.$msgbox('提示', '请输入正确手机号')
      } else {
        if (this.clickFlag) {
          let _this = this
          this.clickFlag = false

          _this.getCode()
          // this.timeText = this.timeNum+'S'
          let Num = 5
          var timer = setInterval(function () {
            _this.timeNum = Num-- + 's'
            if (Num == -1) {
              _this.clickFlag = true
              _this.timeNum = _this.timeText
              Num = 5
              clearInterval(timer)
            }
          }, 1000)
        }
      }
    },
    getCode: function () {  //  获取验证码接口
      let salt = this.$utils.myCommonSalt(32);
      let jsondata = {
        app_id: this.$utils.myVarAppid,
        deviceInfo: this.$utils.myDeviceInfo,
        salt: salt,
        sign_type: "md5",
        phone: this.phone
      }
      jsondata.sign = this.$utils.signObject(jsondata)
      sendverificode(jsondata).then(response => {
        this.$toast({
          message: '获取验证码成功',
          iconClass: 'icon icon-success',
          duration: 1500
        })
      })
    },

    bingUser: function () { // 用户绑定
      let openid = this.$utils.GetOpenid();

      if (!(/^1[3456789]\d{9}$/.test(this.phone))) {  // 先判断手机号是否输入正确
        this.$toast({
          message: '请输入正常手机号',
          duration: 1500
        });
        return
      }
      if (this.codeText.length < 6) {
        this.$toast({
          message: '请输入正常验证码',
          duration: 1500
        });
        return
      }

      let jsondata = {
        phoneNum: this.phone,
        verifyCode: this.codeText,
        openid: openid
      }

      bindCustByOpenId(jsondata).then(data => {
        if (data.code == 0 || data.code == '0') {
          // $.alert('亲，您已绑定成功!', '成功', function () {
          //   var datas = data.data;
          //   var urll = document.referrer;
          //   jsajax.gett(openid, function (n) {
          //     window.location.href = document.referrer;
          //   });
          // });

          this.$messagebox.alert('亲，您已绑定成功!').then(action => {
            this.$router.push({
              path:'selfNav'
            })
          });

        } else {
          if (data.code == 1017 || data.code == '1017') {
            // $.alert('已经绑定过', function () {
            //   var urll = document.referrer;
            //   jsajax.gett(openid, function (n) {
            //     window.location.href = document.referrer;
            //   });
            // });


            this.$messagebox.alert('亲，您已经绑定过!').then(action => {

            });

          } else {
            // $.alert('亲，请重新绑定!', '失败', function () {
            //   return false;
            // });
            this.$toast('亲,绑定失败，请重新绑定!')
          }

        }
      })

    }
  }
}
</script>

<style scoped lang="scss">
  .getCode {
    width: 100px;
    height: 48px;
    line-height: 48px;
    background: #ef4f4f;
    color: #fff;
    text-align: center;
  }
</style>
