<template>
  <div class="account">
      <div class="header">
        <i class="mintui mintui-back" @click="goUserCenter"></i>
      </div>
      <div class="content" v-if="step == 1">
        <p class="p1">讲堂360</p>
        <p class="p2">手机号绑定</p>
        <div class="form">
          <p>+86</p>
          <input type="tel" v-model="mobile" ref="mobile" maxlength="11">
        </div>
        <div class="account-btn" v-bind:class="{ active: mobile.length == 11 }" @click="sendCode">下一步</div>
        <p class="remark">请绑定手机号，登录后请尽快更改密码。</p>
      </div>

      <div class="content" v-if="step == 2">
        <p class="p3">验证码已发送至</p>
        <div class="p4">
          <p>+86 {{mobile}}</p>
          <p v-if="time>0">({{time}}秒)</p>
          <p class="p5" v-if="time<=0" @click="sendCode">重新发送</p>
        </div>
        <input type="tel" class="flyout" v-model="verifyCode" ref="verifyCode" maxlength="4"/>
        <div class="verify" @click="bulrinput">
          <div>{{verifyCode[0]}}</div>
          <div>{{verifyCode[1]}}</div>
          <div>{{verifyCode[2]}}</div>
          <div>{{verifyCode[3]}}</div>
        </div>
        <div class="account-btn" v-bind:class="{ active: verifyCode.length == 4 }" @click="login">下一步</div>
      </div>
      
      <!--<mt-button class="denglu" type="primary" size="large" @click.native="login()">登录</mt-button>-->
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { getStore, setStore } from '@/utils/storage'
export default {
  name: "login",
  data() {
    return {
      mobile: '',
      step: 1,
      verifyCode: '',
      time: 60,
      timer: '',
      open_id: ''
    };
  },
  methods: {
    bulrinput() {
      this.$refs.verifyCode.focus();
    },
    goUserCenter() {
      this.$router.push('/user')
    },
    sendCode() {
      if(this.mobile.length != 11){
        return;
      }
      if(!this.checkPhone(this.mobile)){
        Toast("手机号格式不正确");
        return;
      }
      let _this = this;
      this.getData("/Member/sendCode",{
        mobile:_this.mobile
      }).then(
        res => {
          if (res.code == 400){
            Toast(res.msg);
          }else{
            Toast(res.msg);
            this.step = 2;
            this.time = 60;
            this.timer = setInterval(function (){
              _this.time--;
              if(_this.time <= 0){
                clearInterval(_this.timer);
              }
            }, 1000)
          }

        },
        err=>{

      });
    },
    login() {
      if(this.verifyCode.length == 4){
          this.getData("/Member/bind",{
            mobile: this.mobile,
            code: this.verifyCode,
            token: getStore("token")
          }).then(
            res => {
              if(res.code!=400){
                Toast(res.msg);
                this.$router.push('/')
              }else{
                Toast(res.msg);
              }
            },
            err=>{

          });
      }else{
        return;
      }

    },

  },
  computed: {
  },
  created(){

  },
  mounted(){

  }
};
</script>

<style lang='scss' scoped>
.account {
  height: 100vh;
  background: white;
  text-align: left;
  .header{
    width: 100%;
    height: 8rem;
    line-height: 8rem;
    margin-bottom: 2rem;
    padding-left: 2rem;
    i{
      color: black;
      font-size: 2rem !important;
    }

  }
  .content{
    width: 100%;
    padding: 0 4rem;
    .p1{
      font-size:1.5rem;
      font-family:STSongti-SC-Bold;
      font-weight:bold;
      color:rgba(81,81,81,1);
      line-height:2.11rem;
    }
    .p2{
      font-size:2.53rem;
      font-family:STSongti-SC-Bold;
      font-weight:bold;
      color:rgba(81,81,81,1);
      line-height:3.52rem;
      margin-bottom: 4rem;
    }
    .p3{
      font-size:2.72rem;
      font-family:STSongti-SC-Bold;
      font-weight:bold;
      color:rgba(81,81,81,1);
      line-height:3.8rem;
    }
    .p4{
      display:flex;
      font-size:1.5rem;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(81,81,81,1);
      line-height:4rem;
      justify-content: space-between;
      .p5{
        color: #26a2ff;
      }
    }
    .form{
      display: flex;
      height: 3rem;
      padding: 0 0 1rem 1rem;
      border-bottom: 0.23rem solid #26a2ff;
      margin-bottom: 3rem;
      p{
        font-size:1.5rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:#26a2ff;
        line-height:2rem;
        letter-spacing:1px;
        margin-right: 3rem;
      }
      input{
        font-size:1.5rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(81,81,81,1);
        line-height:2rem;
      }
    }
    .verify{
      width: 100%;
      display: flex;
      justify-content: center;
      font-size: 2.5rem;
      color:rgba(81,81,81,1);
      margin-bottom: 3rem;
      div{
        width: 3.2rem;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        border-bottom: 2px solid #26a2ff;
        margin-right: 4px;
      }
    }
    .remark{
      font-size: 1.5rem;
      margin-top: 25rem;
    }
  }

}
.flyout{
  position:fixed;
  top: -99999px;
  left: -99999px;
}
  .account-btn{
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    font-size: 2rem;
    color: white;
    background: #26a2ff;
  }
</style>
