<template>
  <div class="wx-container container">
    <div class="bg"></div>
    <div class="login_box">
      <i class="iconfont icon-shanchu iconClose"v-show="type!='user'" @click="close"></i>
      <a href="/wx"><img src="../../assets/images/luckytrip1.png" alt="" class="luckytrip"></a>
      <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" v-fixedInput="">
      </div>
      <div class="input_wrap flex-box" :class="{'errorCss' : codeError}">
        <input type="text" class="flex codeInput" placeholder="请输入短信验证码" v-model="form.code" v-fixedInput="">
        <a href="javascript:void(0)" class="getCode" :class="{'color1 not-allowedClick':isSend}" @click="phoneSendCode">{{count | returnCount}}</a>
      </div>
      <a href="javascript:void(0)" class="btn loginBtn" @click="toPhoneLogin">登录</a>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';
  export default {
    name: '',
    props:{
      type:''
    },
    data () {
      return {
        errorMsg:'',
        phoneError:'',
        codeError:'',
        form:{
          phone:'',
          code:''
        },
        isSend:false,
        count:'获取验证码',
        isLogin:false,
        baseInfo:''
      }
    },
    methods:{
      close(){
        this.$emit("closeLogin");
      },
      /**
       * 登录
       * */
      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:'/'});
              this.$parent.isLogin=true;
              this.$router.push("/wx/userInfo/"+this.baseInfo);
            }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() {
    },
    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"
  color=#ee644d
  .container{
    position fixed
    width 100%
    height 100%
    top 0px
    left 0
    z-index 9999
    overflow hidden
    .bg{
      position absolute
      width 100%
      height 100%
      top 0px
      left 0
      background rgba(0, 0, 0, 0.47)
    }
  }
  #canvas{
    width: 80%!important;
    height: auto!important;
  }
  .login_box{
    position absolute
    width 84%
    max-width 400px
    height 350px
    top 40%
    left 50%
    transform translate(-50%,-40%)
    padding 0px 24px
    box-sizing border-box
    background #fff
    border-radius 4px
    .iconClose{
      position absolute
      right 10px
      top 10px
      font-size 24px
      color #ccc
    }
    .luckytrip{
      display block
      width 55%
      margin 2.6rem auto 2em
    }
    .errorMsg{
      position absolute
      width 100%
      top 25px
      left 0
      text-align center
      font-size 14px
      color color
    }
    .input_wrap{
      position relative
      width 100%
      height 60px
      line-height 60px
      border-bottom 1px solid border_color
      font-size 14px
      .areaCode{
        position relative
        display inline-block
        width 110px
        flex 0 0 110px
        font-size 12px
        color subheadColor
        &:after{
          content ''
          position absolute
          width 1px
          height 18px
          top 21px
          right 20px
          background #eeeeee
        }
        i{
          margin-left 5px
          font-size 12px
        }
      }
      .getCode{
        width 80px
        flex 0 0 80px
        text-align center
        font-size 13px
        flex-shrink 0
        color mainColor
      }
      &.errorCss{
        border-color color
        color color
        .areaCode{
          color color
          font-size 12px
          &:after{
            background color
          }
        }
        input{
          color color
        }
        ::-moz-placeholder {
          color color;
        }
        ::-webkit-input-placeholder {
          color color
        }
        :-ms-input-placeholder {
          color color
        }
      }
    }

    .loginBtn{
      margin-top 30px
    }

  }
  .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 #b4b4b4
        border-radius 100%
        color subheadColor
      }
    }
  }
</style>
