<template>
  <div class="container">
    <div class="login_box">
      <slot name="loginLogo"></slot>
      <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="phoneSendCode">{{count | returnCount}}</a>
      </div>
      <a href="javascript:void(0)" class="btn loginBtn" @click="toPhoneLogin">登录</a>
    </div>
    <p class="other_way hide">
      <span>社交账号登录</span>
      <a href="javascript:void(0)" class="icon_wx">
        <i class="iconfont icon-gongzhonghao"></i>
      </a>
    </p>
  </div>

</template>
<script>
  export default {
    name: '',
    data () {
      return {
        errorMsg:'',
        phoneError:'',
        codeError:'',
        form:{
          phone:'',
          code:''
        },
        isSend:false,
        count:'获取短信验证码',
        isLogin:false,
        pageUrl:'/wx/mine'
      }
    },
    methods:{
      /**
       * 登录
       * */
      toPhoneLogin(){
        if(this.phoneLoginVerify() && !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:'/'});
              window.location.href=this.pageUrl;
            }else {
              Toast(data.returnMsg);
            }
          })
        }
      },
      /**
       * 登录验证
       * */
      phoneLoginVerify(){
        if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
          Toast('请输入正确的手机号');
          this.phoneError = '请输入正确的手机号';
          this.codeError == '';
          return false;
        }
        if(!this.form.code){
          Toast('请输入短信验证码');
          this.codeError = '请输入短信验证码';
          return false;
        }
        return true;
      },
      /**
       * 获取验证码
       * */
      phoneSendCode(){
        if(!this.isSend) {
          if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
            Toast('请输入正确的手机号');
            this.phoneError = '请输入正确的手机号';
            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() {
      var url=getUrlParam('redirectUrl');
      if(url){
        this.pageUrl=url;
      }else {
        this.pageUrl='/wx/mine';
      }

    },
    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 "../../assets/stylus/colorConfig.styl"
  color=#ee644d
  .container{
    position absolute
    width 100%
    height 100%
    overflow hidden
  }
  #canvas{
    width: 80%!important;
    height: auto!important;
  }
  .login_box{
    width 100%
    height 400px
    padding 0px 1.1rem
    box-sizing border-box
    background #fff
    border-radius 4px
    .luckytrip{
      display block
      width 8.625rem
      margin 2.65rem auto 3.4rem
    }
    .errorMsg{
      position absolute
      width 100%
      top 25px
      left 0
      text-align center
      font-size 14px
      color errorColor
    }
    .input_wrap{
      height 60px
      line-height 60px
      border-bottom 1px solid border_color
      font-size 14px
      .areaCode{
        position relative
        display inline-block
        width 110px
        color subheadColor
        &:after{
          content ''
          position absolute
          width 1px
          height 20px
          top 20px
          right 20px
          background #eeeeee
        }
        i{
          margin-left 5px
          font-size 12px
        }
      }
      .getCode{
        color mainColor
      }
      &.errorCss{
        border-color errorColor
        color errorColor
        .areaCode{
          color errorColor
          &:after{
            background errorColor
          }
        }
        input{
          color errorColor
        }
        ::-moz-placeholder {
          color errorColor;
        }
        ::-webkit-input-placeholder {
          color errorColor
        }
        :-ms-input-placeholder {
          color errorColor
        }
      }
    }
    .loginBtn{
      height 48px
      line-height 48px
      margin-top 30px
      border-radius 4px
    }
  }
  .other_way{
    position absolute
    width 100%
    bottom 3.5rem
    text-align center
    span{
      display block
      font-size 14px
      color #b4b4b4
    }
    .icon_wx{
      display block
      i{
        display inline-block
        margin-top 14px
        padding 7px
        font-size 30px
        border 1px solid border_color
        border-radius 100%
        color #cccccc
      }
    }
  }
</style>
