<template>
    <div class="max-big-box">
      <img class="login-img" src="~@/assets/images/logo.png">
      <p class="title-p">卫勤战备物资智能调配管理系统</p>
      <div class="login-big-box">
        <p class="login-title">欢迎登陆</p>
        <!--用户名输入-->
        <div class="user-input-box" :class="{'input-border-a':userInputType,'input-border-b':!userInputType,'input-border-error':errorMessage==1}">
          <img v-if="userInputType" src="~@/assets/images/icon_31.png">
          <img v-else src="~@/assets/images/icon_31_1.png">
          <input type="text" placeholder="请输入用户名"
                 maxlength="12" v-model="userName"
                 @focus="focusInput('user')" @blur="blurInput('user')">
        </div>
        <!--密码输入-->
        <div class="password-input-box" :class="{'input-border-a':passwordInputType,'input-border-b':!passwordInputType,'input-border-error':errorMessage==2}">
          <img v-if="passwordInputType" src="~@/assets/images/icon_32.png">
          <img v-else src="~@/assets/images/icon_32_1.png">
          <!--passwordType字段控制密码显示与否 true为密码模式  false为显示密码模式-->
          <input v-if="passwordType" type="password" placeholder="请输入密码" v-model="password" @focus="focusInput('password')" @blur="blurInput('password')">
          <input v-else type="text" placeholder="请输入密码"
                 maxlength="16" v-model="password"
                 @focus="focusInput('password')" @blur="blurInput('password')">
          <div class="img-click-box cursor_pointer" @click = passwordShow>
            <img v-if="passwordType" src="~@/assets/images/icon_30_1.png">
            <img v-else src="~@/assets/images/icon_30.png">
          </div>
        </div>
        <!--验证码输入-->
        <div class="code-input-box">
          <div class="code-input-min-box" :class="{'input-border-a':codeInputType,'input-border-b':!codeInputType,'input-border-error':errorMessage==3}">
            <img v-if="codeInputType" src="~@/assets/images/icon_33.png">
            <img v-else src="~@/assets/images/icon_33_1.png">
            <input type="text" placeholder="请输入验证码"
                   maxlength="4" v-model="validationCode"
                   @focus="focusInput('code')" @blur="blurInput('code')">
          </div>
          <img class="code-right-min-box cursor_pointer" :src="imgCode" @click="captchaImage()">
          <!--<div class="code-right-min-box cursor_pointer" @click="refreshCode">-->
            <!--<s-identify :identifyCode="identifyCode"></s-identify>-->
          <!--</div>-->
        </div>
        <p class="bottom-button button_null_1" @click="loginClick">登录</p>
        <div class="messageText-p" v-if="errorMessage!=0">
          <img src="~@/assets/images/icon_29.png">
          <p>您输入的{{errorMessage==1?"账号":(errorMessage==2?"密码":(errorMessage==3?"验证码":""))}}有误，请重新输入!</p>
        </div>
      </div>
    </div>
</template>

<script>
    import { Message } from 'element-ui';
    import SIdentify  from '../components/sidentify'
    import { captchaImage , login } from '@/api/userApi'
    export default {
        name: "login",
        components: { SIdentify },
        data () {
          return {
            userInputType:false,      //控制用户input选中状态
            passwordInputType:false,  //控制密码input选中状态
            codeInputType:false,      //控制验证码input选中状态
            passwordType:true,        //控制密码显示隐藏状态
            userName:"",
            password:"",
            validationCode:"",
            errorMessage:0,
            imgCode:"",
          }
        },

        created(){
          this.captchaImage();
        },
        mounted() {

        },
        methods: {
          //登录
          async loginClick () {
            console.log("123",new Date());
            let self = this;
            let newMessage = {};
            if(this.userName==""){
              this.errorMessage = 1;
              newMessage = Message({
                type:"error",
                message: "请输入账号"
              });
              return
            }
            if(this.password==""){
              this.errorMessage = 2;
              newMessage = Message({
                type:"error",
                message: "请输入密码"
              });
              return
            }
            if(this.validationCode.length!=4){
              this.errorMessage = 3;
              newMessage = Message({
                type:"error",
                message: "请输入验证码"
              });
              return
            }
            const obj = {
              username: self.userName,
              password: self.password,
              uuid: self.uuid,
              code: self.validationCode,
            };
            const { data } = await login(obj);
            if(data.code==200){
              this.errorMessage =0;
              localStorage.setItem('token',data.token);
              this.$router.push({
                path: '/',
              })
            }else{
              this.captchaImage();
            }
          },
          //获取验证码
          async captchaImage () {
            let self = this;
            const { data } = await captchaImage();
            console.log(data)
            if(data.code==200){
              self.uuid = data.data.uuid;
              self.imgCode = "data:image/jpg;base64,"+data.data.img;
            }
          },
          //密码可见开关
          passwordShow(){
            this.passwordType = !this.passwordType;
          },
          //焦点获取事件
          focusInput(item){
            console.log("+",item);
            if(item==='user'){
              this.userInputType = true;
            }else if(item==='password'){
              this.passwordInputType = true;
            }else if(item==='code'){
              this.codeInputType = true;
            }
          },
          //失去焦点事件
          blurInput(item){
            if(item==='user'){
              this.userInputType = false;
            }else if(item==='password'){
              this.passwordInputType = false;
            }else if(item==='code'){
              this.codeInputType = false;
            }
          },

          //前端验证码部分
          randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
          },
          //刷新验证码
          refreshCode() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
          },
          makeCode(o, l) {
            for (let i = 0; i < l; i++) {
              this.identifyCode += this.identifyCodes[
                this.randomNum(0, this.identifyCodes.length)
                ];
            }
            console.log(this.identifyCode);
          },
        }
    }
</script>

<style scoped lang="stylus">
.max-big-box
  height:100%;
  width:100%;
  background:url("../../static/img/back_1.png") no-repeat;
  -webkit-background-size: 100% 100%
  background-size: 100% 100%
  overflow hidden
  .login-img
    display block
    height:90px;
    width:90px;
    margin:38px auto 0;
  .title-p
    line-height:105px;
    color:$color_ff;
    text-shadow: 5px 5px 5px #000;
    font-size:$font_50;
  .login-big-box
    height:307px;
    width:454px;
    background:url("~@/assets/images/min_back_05.png") no-repeat;
    -webkit-background-size: 100% 100%
    background-size: 100% 100%
    margin:100px auto 0;
    position: relative
    .login-title
      line-height:44px;
      color:$color_ff;
      font-size:$font_20;
    .user-input-box
      width:255px;
      height:34px;
      border-radius:2px;
      margin:40px auto 14px;
      display flex
      img
        height:20px;
        width:20px;
        margin:7px;
    .password-input-box
      width:255px;
      height:34px;
      border-radius:2px;
      margin:0 auto 14px;
      display flex
      img:nth-child(1)
        height:20px;
        width:20px;
        margin:7px;
      input
        flex:1;
      .img-click-box
        width:42px;
        height:34px;
        img
          height:20px;
          width:20px;
          margin:7px 11px;
    .code-input-box
      width:255px;
      height:34px;
      margin:0 auto 24px;
      display flex
      .code-input-min-box
        width:168px;
        height:34px;
        border-radius:2px;
        margin-right:5px;
        display flex
        img
          height:20px;
          width:20px;
          margin:7px;
      .code-right-min-box
        width:82px;
        height:34px;
        background $color_ff;
    .bottom-button
      height:30px;
      width:92px;
      line-height:30px;
      margin:0 auto;
      color:$color_ff;
      font-size:$font_14
    .messageText-p
      position:absolute
      left:100px
      top:56px
      width:300px;
      height:28px;
      display flex
      img
        height:18px;
        width:18px;
        margin:5px 7px 0 0;
      p
        flex:1;
        color:$theme3;
        font-size:$font_12;
        line-height:28px;
        text-align left
  .input-border-error
    border:1px solid $theme3 !important;
  .input-border-a
    border:1px solid $border_2;
  .input-border-b
    border:1px solid $border_1;
input
  color:$color_ff;
::-webkit-input-placeholder
  color: $border_1;
::-moz-placeholder
  color: $border_1;
::-ms-input-placeholder
  color: $border_1;

</style>
