<template>
  <div class="container">
      <div class="bg_wrap">
        <div class="login_box bindingPhone" :class="{'animated shake' : errorMsg && !isRightPhone}">
          <slot name="bindPhoneInfo"></slot>
          <h4 >绑定手机号</h4>
          <p class="errorMsg" :class="{'codetip':isRightPhone}">{{errorMsg}}</p>
          <div class="input_wrap flex-box" :class="{'errorCss' : phoneError}">
            <span class="areaCode">中国 +86 <i class="iconfont icon-arrow-down"></i></span>
            <input type="text" class="flex" placeholder="手机号" v-model="form.phone">
          </div>
          <div class="input_wrap flex-box" :class="{'errorCss' : codeError}">
            <input type="text" class="flex" placeholder="请输入短信验证码" v-model="form.code">
            <a href="javascript:void(0)" class="sendCode" :class="{'color1 not-allowedClick':isSend}" @click="sendCode">{{count | returnCount}}</a>
          </div>
          <a href="javascript:void(0)" class="btn loginBtn" @click="toLogin">确定</a>
        </div>
      </div>
  </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 && this.userStatus){
                this.$router.push("/userInfo/"+this.userKey+"/"+this.userStatus);
              }else {
                this.$router.push('/mine');
              }
            }else {
              this.errorMsg=data.returnMsg;
              this.codeError = this.errorMsg;
            }
          })
        }
      },
      /**
       * 登录验证
       * */
      loginVerify(){
        this.isRightPhone = false;
        if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
          this.errorMsg = '请输入正确的手机号';
          this.phoneError = this.errorMsg;
          this.codeError == '';
          return false;
        }
        if(!this.form.code){
          this.errorMsg = '请输入短信验证码';
          this.codeError = this.errorMsg;
          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)){
            this.errorMsg = '请输入正确的手机号';
            this.phoneError = this.errorMsg;
            this.codeError == '';
            return false;
          }
          this.isSend = true;
          sendSmsByBindingPhone(this.form.phone).then(data=>{
            if(data.returnCode == '200'){
              this.isRightPhone = true ;
              this.count = 60;
              this.errorMsg='为了您的个人信息安全，我们已将验证码发送至'+this.form.phone+' ，请在10分钟内完成账户验证';
              this.countDown();
            } else {
              this.errorMsg = data.returnMsg;
              this.codeError = this.errorMsg;
              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 "login.styl"
.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>
