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

    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              newPhone:'',
              code:'',
              isSend:false,
              count:'发送验证码',
              userInfo:Cookie.get("data") ? JSON.parse(Cookie.get("data")) : '',
              phoneError:'',
              codeError:'',
              errorMsg:''
            }
        },
        methods: {
          /**
           * 手机号验证
           * */
          phoneVerify(){
            if(!this.newPhone || !reg.PhoneReg.test(this.newPhone)){
              Toast('请输入正确的手机号');
              return false;
            }else if(this.newPhone==this.userInfo.phone){
              Toast('新手机号不能与原手机号相同');
              return false;
            }
            return true;
          },


          /**微信发送手机验证码*/
          wxsendCode(){
            var _this=this;
            if(!this.isSend){
              _this.isSend = true;
              if(_this.phoneVerify()){
                _this.count = 60;
                _this.countDown();
                _this.sendSmsToPhone();
              }else {
                _this.isSend = false;
              }
            }
          },
          /**发送手机验证码*/
          sendSmsToPhone(){
            sendSmsReplacePhone(this.newPhone).then(data=>{
              if(data.returnCode==200){
                Toast("验证码发送成功");
              }else {
                Toast(data.returnMsg);
              }
            });
          },
          /**微信修改*/
          wxBindNewPhone(){
            if(!this.newPhone || !reg.PhoneReg.test(this.newPhone)){
              Toast('请输入正确的手机号');
              return false;
            }else if(this.newPhone==this.userInfo.phone){
              Toast('新手机号不能与原手机号相同');
              return false;
            }
            if(!this.code){
              Toast('验证码有误');
              return false;
            }
            this.updatePhone();
          },
          /**确认修改手机号*/
          updatePhone(){
            var formObj={
              "userId":this.userInfo.id,
              "phone":this.newPhone,
              "code":this.code
            }
            updateReplecePhone(formObj).then(data=>{
              if(data.returnCode==200){
                Toast("修改成功");
                loginout().then(data1=>{
                  Cookie.remove("data");
                  Cookie.remove('security_token');
                  this.$router.push(loginUrl);
                });

              }else {
                Toast(data.returnMsg);
              }
            });
          },

          countDown(){
            var _this=this;
            if(_this.count > 0){
              _this.count--;
              setTimeout(_this.countDown, 1000);
            }else{
              _this.count = '发送验证码';
              _this.isSend = false;
            }
          },
        },
        filters: {
          second(val){
            if(typeof val == 'number'){
              return val + 's后重发';
            }
            return val;
          }
        },
        watch:{
          code: function(newValue, oldValue){
            if(this.code){
              this.codeError = '';
            }
          }
        },
        mounted(){
          if(Cookie.get("data")){

          }else {
            this.$router.push(loginUrl)
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>

</style>
