<template>
  <div class="container">
      <section>
        <div class="item_wrap">
          <label>手机号</label>
          <p><input type="tel" class="" placeholder="请输入手机号" v-model="form.phone"></p>
        </div>
        <div class="item_wrap input_wrap">
          <label>验证码</label>
          <p><input type="text" class="code_input" v-model="form.code" placeholder="请输入验证码"></p>
          <span class="sendCode" @click="sendCode" :class="{color2:isSend }">{{count | returnCount}}</span>
        </div>
        <div class="btn-wrap">
          <div class="btn" @click="toLogin">绑定手机号</div>
        </div>

        <p class="error_tip" v-html="errorMsg"></p>
      </section>
  </div>

</template>
<script>
  export default {
    name: '',
    data () {
      return {
          loading:false,
          errorMsg:'',
          phoneError:'',
          codeError:'',
          status:0 ,//0登录 1注册
          isSend:false,
          isRightPhone:false,
          count:'获取短信验证码',
          form:{
              phone:'',
              code:'',
          },
        prevPageUrl:'',
        userKey:'',
        userStatus:''
      }
    },
    methods:{
      /**
       * 登录
       * */
      toLogin(){
        if(this.loginVerify() && !this.loading){
          this.loading=true;
          userBindPhoneNumber(this.form.phone,this.form.code).then(data=>{
            this.loading=false;
            if(data.returnCode == '200'){
              if(this.prevPageUrl){
                location.href=this.prevPageUrl;
              }else if(this.userKey=='user' && this.userStatus=='sign-in'){
                this.$router.push('/wx/mine');
              }else {
                this.$router.push("/wx/userInfo/"+this.userKey);
              }
            }else {
              Toast(data.returnMsg);
            }
          })
        }
      },
      /**
       * 登录验证
       * */
      loginVerify(){
        this.isRightPhone = false;
        if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
          Toast('请输入正确的手机号');
          return false;
        }
        if(!this.form.code){
          Toast('请输入短信验证码');
          return false;
        }
        return true;
      },
      /**
      * 获取验证码
      * */
      sendCode(){
        if(!this.isSend){
          this.isRightPhone = false;
          this.codeError = '';
          this.errorMsg = '';
          if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
            Toast('请输入正确的手机号');
            return false;
          }
          this.isSend = true;
          sendSmsByBindingPhone(this.form.phone).then(data=>{
            if(data.returnCode == '200'){
              this.isRightPhone = true ;
              this.count = 60;
              this.errorMsg='为了您的个人信息安全，我们已将验证码发送至<span style="color: #fd8a81">'+this.form.phone+'</span> ，请在10分钟内完成账户验证';
              this.countDown();
            } else {
              this.isSend = false;
            }
          });
        }
      },
      countDown(){
        var _this = this;
        if(_this.count > 0){
          _this.count --;
          setTimeout(_this.countDown, 1000);
        }else{
          _this.count = '获取短信验证码';
          _this.isSend = false;
        }
      }
    },
    mounted(){
      var urlParam=urlParse();
      if(Object.keys(urlParam).length>0){
        this.userKey=urlParam.key;
        this.userStatus=urlParam.status;
        this.prevPageUrl=urlParam.redirectUrl;
      }
    },
    created() {
    },
    filters:{
        returnCount:function (count) {
            if(count >= 0){
              return count + "s后重发";
            }else {
              return count;
            }
        }
    },
    computed: {
      phone() {
        return this.form.phone
      },
      code() {
        return this.form.code
      }
    },
    watch:{
      phone:function(newValue,oldValue){
        if(newValue){
          this.phoneError = '';
          this.errorMsg = '';
        }
      },
      code:function(newValue,oldValue){
        if(newValue){
          this.codeError = '';
          this.errorMsg = '';
        }
      },
    },
    destroyed: function () {
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
.error_tip{
  line-height 20px
  margin-top 60px
  padding 0 20px
  font-size 12px
  color subheadColor
  span{
    color #fe7065
  }
}
.bg_wrap .bindingPhone{
  padding 20px 30px
  h4{
    text-align center
    margin-bottom 25px
    font-size 18px
    color subheadColor
  }
  .errorMsg{
    position relative
    height 66px
    top 20px
    &.codetip{
      text-align center
      line-height 20px
      top 0px
      font-weight normal
      font-size 14px
      color subheadColor
    }
  }
}
</style>
