<template>
  <div id="pages">
    <div class="main bg bg01" v-if="page == 0">
      <h5><img id="logo" src="../../static/images/login/logo.png" alt=""></h5>
      <p><img id="title" src="../../static/images/login/title.png" alt=""></p>

<!--        <mt-field placeholder="手机号" v-model="pwd_login.usercode"></mt-field>-->
<!--        <mt-field placeholder="获取验证码" v-model="pwd_login.usercode"></mt-field>-->

<!--        <mt-field placeholder="图形验证" v-model="pwd_login.img_valid" v-if="step > 0"-->
<!--                  @keyup.enter.native="pwd_login_confirm">-->
<!--          <img :src="valImgSrc" @click="changeValImg" height="23" width="55">-->
<!--        </mt-field>-->
        <ul class="white_cube" >
          <li class="form-group">
            <input type="text" class="form-control" id="sms_username" placeholder="请输入手机号"
                   ref="sms_username"
                   style="border: 1px solid rgb(221, 221, 221);">
          </li>
          <li class="form-group">
            <input type="text" class="form-control" id="uservalid_sms" placeholder="请输入右侧图形码"
                   ref="imgValid"
                   style="border: 1px solid rgb(221, 221, 221);">
            <img id="imgValidcode2"
                 :src="valImgSrc"
                 title="看不清？刷一下试试！" @click="changeValImg"/>
          </li>
          <li class="form-group item">
            <input type="password" class="form-control" id="userValid" placeholder="请输入验证码"
                   ref="sms_valid"
                   @keyup.13="smsLoginBtn"
                   style="border: 1px solid rgb(221, 221, 221);">
            <mu-button color="success" id="valid_btn" @click.navtive="valid_btn">获取验证码</mu-button>
          </li>
        </ul>

      <mt-button type="primary" class="pwd_login_confirm" @click.navtive="smsLoginBtn">登录</mt-button>

    </div>


    <div class="version" :style="{ top: bodyHeight - 30 + 'px' }">
      V {{version}}
    </div>
  </div>
</template>

<script>
  import axios from 'axios';

  let qs = require('qs');
  import {Button} from 'mint-ui';
  import Vue from 'vue'
  import {Field} from 'mint-ui';
  import {Toast} from 'mint-ui';
  import Global from '../Global.js'

  Vue.component(Field.name, Field);
  Vue.component(Button.name, Button);

  export default {
    data() {
      return {
        version: globalVersion(),
        bodyHeight: 0,
        page: 0,
        step: 1,
        valImgSrc: 'data:image/png;base64, ',//测试用路径
        valid_btn: '获取验证码',
        button_state: false,
        register: {
          usercode: '',
          img_valid: '',
          valid: '',
          pwd: '',
        },
        pwd_login: {
          usercode: '',
          valid: '',
          pwd: '',
          img_valid: '',
        },
        phone_login: {
          usercode: '',
          valid: '',
          img_valid: '',
        },
        forget: {
          usercode: '',
          img_valid: '',
          valid: '',
          pwd: '',
        },
      }
    },
    watch: {
      '$route': function (val) {
        if (val.path == '/login') {
          this.bodyHeight = document.documentElement.clientHeight;
          console.log(this.bodyHeight);
        }
      }
    },
    created() {
      this.overtime = new Date();
      // 如果是手动退出用户
      if (this.$route.query.status == 1) {
        // 刷新验证图
        this.changeValImg();
        // 重置倒计时
        this.overtime = new Date();
      }
      this.bodyHeight = document.documentElement.clientHeight;
    },
    mounted() {
      this.overtime = new Date();
      // 如果是手动退出用户
      if (this.$route.query.status == 1) {
        // 刷新验证图
        this.changeValImg();
        // 重置倒计时
        this.overtime = new Date();
      }
      this.bodyHeight = document.documentElement.clientHeight;
      console.log(this.bodyHeight);
    },
    methods: {
      //            sms 登陆
      smsLoginBtn: function () {
        let sms_username = this.$refs.sms_username.value;
        let sms_valid = this.$refs.sms_valid.value;
        if (!globalValid(sms_username, 2, 17, '手机号', that)) return;
        if (!globalValid(sms_valid, 4, 6, '短信验证码', that)) return;
        this.pwd_login_confirm();
      },
      // 页内跳转
      goPage(e) {
        this.page = e;
        this.changeValImg();
      },
      // 点击验证码切换
      changeValImg() {
        let that = this;
        that.valImgSrc = that.valImgSrc + '?' + Math.random();
      },
      // 获取验证码
      get_phone_valid(usercode, this_valid, type) {
        let img_valid = this_valid;
        let tel = usercode;
        let that = this;
        if (!tel) {
          Toast('手机号码不能为空');
          return false
        }
        if (tel.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (img_valid.length != 4) {
          Toast('图形验证码位数不正确');
          return false
        }
        let url = headapi + 'getCode';
        let param = {
          NAME: tel,
          VALID: img_valid,
          TYPE: type,//（2）（1:注册，2:重置，3:登陆）
        };
        that.button_state = true;
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          let code = json.code;
          if (code == 0) {
            let countdown = 60;
            that.valid_btn = countdown + "秒";
            let timer = setInterval(() => {
              if (countdown == 0) {
                clearInterval(timer);//停止计时器
                that.valid_btn = "重新发送";
                that.button_state = false;
              } else {
                countdown--;
                that.valid_btn = countdown + "秒";
                that.button_state = true
              }
            }, 1000);
            Toast('短信已发送，请注意查收');
          } else {
            that.button_state = false;
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // pwd 登陆
      pwd_login_confirm() {
        const that = this;
        let url = headapi + 'login';
        if (!that.pwd_login.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.pwd_login.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.pwd_login.pwd) {
          Toast('密码不能为空');
          return false
        }
        if (that.pwd_login.pwd.length >= 12 || that.pwd_login.pwd.length < 6) {
          Toast('密码长度不正确');
          return false
        }
        if (!that.pwd_login.img_valid && that.step > 0) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.pwd_login.img_valid.length != 4 && that.step > 0) {
          Toast('图形验证码');
          return false
        }
        let param = {
          VERIFY_NAME: that.pwd_login.usercode,
          VERIFY_CODE: that.pwd_login.pwd,
          LOGIN_TYPE: 1,//（3）（1：密码登陆，2：验证码登陆）
          VALID: that.pwd_login.img_valid,
          STEP: that.step,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.pwd_login.usercode;
            that.$router.push({path: '/'});
          } else {
            that.step++
            that.changeValImg();
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // phone login
      phone_login_confirm() {
        const that = this;
        let url = headapi + 'login';
        if (!that.phone_login.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.phone_login.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.phone_login.img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.phone_login.img_valid.length != 4) {
          Toast('图形验证码');
          return false
        }
        if (!that.phone_login.valid) {
          Toast('短信验证码不能为空');
          return false
        }
        if (that.phone_login.valid.length >= 12 || that.phone_login.valid.length < 6) {
          Toast('短信验证码长度不正确');
          return false
        }

        let param = {
          VERIFY_NAME: that.phone_login.usercode,
          VERIFY_CODE: that.phone_login.valid,
          LOGIN_TYPE: 2,//（3）（1：密码登陆，2：验证码登陆）
          VALID: that.phone_login.img_valid,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.phone_login.usercode;
            that.$router.push({path: '/'});
          } else {
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })
      },
      // 找回密码并登陆
      forget_confirm() {
        const that = this;
        let url = headapi + 'resetPassword';
        if (!that.forget.usercode) {
          Toast('手机号码不能为空');
          return false
        }
        if (that.forget.usercode.length != 11) {
          Toast('手机号长度不正确');
          return false
        }
        if (!that.forget.img_valid) {
          Toast('图形验证码不能为空');
          return false
        }
        if (that.forget.img_valid.length != 4) {
          Toast('图形验证码');
          return false
        }
        if (!that.forget.valid) {
          Toast('短信验证码不能为空');
          return false
        }
        if (that.forget.valid.length >= 12 || that.forget.valid.length < 6) {
          Toast('短信验证码长度不正确');
          return false
        }
        if (!that.forget.pwd) {
          Toast('密码不能为空');
          return false
        }
        if (that.forget.pwd.length >= 12 || that.forget.pwd.length < 6) {
          Toast('密码长度不正确');
          return false
        }
        let param = {
          VERIFY_NAME: that.forget.usercode,
          VERIFY_CODE: that.forget.valid,
          NEWPWD: that.forget.pwd,
        };
        let postdata = qs.stringify(param);
        axios.post(url, postdata).then(function (data) {
          let json = data.data;
          if (json.code == 0) {
            localStorage.usercode = that.forget.usercode;
            that.$router.push({path: '/'});
          } else {
            Toast(json.memo);
          }
        }, function (response) {
          console.info(response);
        })

      },
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../assets/css/comm.css";

  #pages {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    background: url("../../static/images/login/bg.png") top center no-repeat;
    background-size: 100% 100%;
  }

  #logo {
    width: 108px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 20%;
  }
  #title {
    width: 276px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
  }

  /deep/ .mint-cell {
    background: none;
  }

  /deep/ .mint-cell-wrapper {
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 0px;
    margin-bottom: 3px;
  }

  /deep/ .mint-field-core {
    height: 45px;
    line-height: 45px;
    background: none;
    color: #fff;
    text-indent: 20px;
  }

  /deep/ .mint-field-core::placeholder {
    color: #fff;
  }

  /deep/ .mint-field .mint-cell-title {
    width: 70px;
  }

  .valid_btn {
    background: #004B8D;
    width: 97px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }


  .white_cube {
    width: 337px;
    overflow: hidden;
    display: block;
    margin: 0;
    border-radius: 5px;
    float: none;
    padding: 0 25px;
  }
  .form-control-short {
    width: 60% !important;
    float: left;
    border-right: none;
  }
  #sms_login {
    display: block;
  }
  #valid_btn {
    width: 40%;
    float: right;
    height: 45px;
    background: #25CC42;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
    border: none;
    outline: none;
  }
  #valid_btn:hover {
    background: #24c240;
  }
  .form-group {
    width: 100%;
    height: 50px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-bottom: 3px;
  }
  .form-group input {
    width: 100%;
    height: 50px;
    background: rgba(255,255,255,0.4);
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border: none!important;
    outline: none;
    margin-bottom: 3px;
    font-size: 16px;
    text-indent: 27px;
  }
  .form-group input::placeholder {
    color:#000000;
    font-size: 16px;
  }
  .form-group #uservalid_sms {
    width: 60%;
    float: left;
  }
  .form-group #userValid {
    width: 60%;
    float: left;
  }
  .form-group #imgValidcode2 {
    width: 38%;
    height: 50px;
    background: #fff;
    float: right;
  }
  .form-group #valid_btn {
    width: 38%;
    height: 50px;
    background: rgba(255,255,255,0.4);
    float: right;
    text-align: center;
    line-height: 50px;
    color: #E75296;
  }
  .pwd_login_confirm {
    width: 337px;
    height: 50px;
    background: #e75296;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    margin-top: 42px;
    font-family: "PingFang SC";
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
  .pwd_login_confirm /deep/  label {
    word-spacing: 30px;
  }
</style>
