<template>
    <div class="bg_wrap login-modal">
      <div class="login_box" :class="{'animated shake' : errorMsg}">
        <i class="iconfont icon-shanchu iconClose" @click="close"></i>
        <p class="errorMsg">{{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="getCode" :class="{'color1 not-allowedClick':isSend}" @click="sendCode">{{count | returnCount}}</a>
        </div>
        <a href="javascript:void(0)" class="btn mBtn loginBtn" @click="toLogin">登录</a>

        <!--<p class="other_way ">-->
          <!--<span>社交账号登录</span>-->
          <!--<a href="javascript:void(0)" class="icon_wx" @click="wxLogin">-->
            <!--<i class="iconfont icon-gongzhonghao"></i>-->
          <!--</a>-->
        <!--</p>-->
      </div>
    </div>

</template>
<script>
  export default {
    name: '',
    data () {
      return {
        errorMsg:'',
        phoneError:'',
        codeError:'',
        status:0 ,//0登录 1注册
        isSend:false,
        count:'获取短信验证码',
        form:{
          phone:'',
          code:''
        },
        isLogin:false,
        baseInfo:'',
        userPage:''
      }
    },
    methods:{
      close(){
        this.$emit("closeLogin");
        this.form.phone='';
        this.form.code='';
        this.isLogin=false;
        this.errorMsg='';
        this.phoneError='';
        this.codeError='';
        this.isSend=false;
        this.count='获取短信验证码';
      },
      wxLogin(){
          afterWxLoginUrl(this.baseInfo);
      },
      /**
       * 登录
       * */
      toLogin(){
        if(this.loginVerify() && !this.isLogin){
          this.isLogin=true;
          Cookie.remove('data');
          phoneLogin(this.form).then(data=>{
            this.isLogin=false;
            if(data.returnCode == '200'){
              Cookie.set("data", JSON.stringify(data.data),{path:'/'});
              this.$router.push("/userInfo/"+this.baseInfo);
              if(this.userPage){
                this.$router.go(0);
              }
            }else {
              Toast(data.returnMsg);
            }
          })
        }
      },

      /**
       * 登录验证
       * */
      loginVerify(){
        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.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;
          sendSms(this.form.phone).then(data=>{
            if(data.returnCode == '200'){
              console.log(data.returnMsg);
            }
          });
          this.count = 60;
          this.countDown();
        }
      },
      countDown(){
        var _this = this;
        if(_this.count > 0){
          _this.count --;
          setTimeout(_this.countDown, 1000);
        }else{
          _this.count = '获取短信验证码';
          _this.isSend = false;
        }
      },
    },
    mounted(){
    },
    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 = '';
        }
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../pages/login/login.styl"
  .login-modal{
    background rgba(0, 0, 0, 0.46)
    position fixed
    top 0
    width 100%
    height 100%
    left 0
    top 0
    z-index 100
    .login_box{
      .iconClose{
        position absolute
        right 20px
        top 20px
        font-size 24px
        color #ccc
        cursor pointer
      }
    }
    &.loginModal{
      .iconClose{
        display none
      }
    }
  }
</style>
