<template>
  <div class="login-page scrollbar-box" v-show="showType">
    <!--<img class="logo-img" src="@/assets/ZDimages/logo@1x.png">-->
    <img class="logo-img" :src="rectangleLogo" >
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/image/login/title_icon.png">
      </div>
    </div>
    <div class="form-box">
      <p class="form-title-p">登录</p>
      <el-form ref="loginForm" :model="loginForm" class="login-form">
        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/image/login/icon_dl_zh.png" alt="">
          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin()">
        </div>
        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/image/login/icon_dl_mm.png" alt="">
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin()">
        </div>
        <p class="text-p">{{text}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
            <img src="@/assets/image/login/icon_dl_yzm.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin()">
          </div>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </div>
        <el-form-item>
          <el-button
            class="form-button-p"
            :loading="loading"
            size="medium"
            height="50"
            @click.native.prevent="handleLogin()"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
  </div>
</template>

<script>
  import md5 from 'js-md5';
  import Cookies from "js-cookie";
  import { login,authInfo,getCodeImg,getConfigByType,configInfo} from "@/api/login";
  import {Decrypt} from "@/utils/secret";
  import { setToken,getToken,removeToken } from '@/utils/auth'
  export default {
    name: "Login",
    data() {
      return {
        codeUrl: "",
        cookiePassword: "",
        type:1,
        loginForm: {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
          uuid: "",
        },
        loading: false,
        // 验证码开关
        captchaOnOff: true,
        // 注册开关
        register: false,
        redirect: undefined,
        text:"",
        userTypeCode:"",
        rectangleLogo:localStorage.getItem('rectangleLogo'),
        //手机登录
        loginType:1,
        loginFormTwo:{
          username:"",
          password:"",
        },
        loginRulesTwo:{
          username: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
          ],
          password: [
            { required: true, message: "请输入验证码", trigger: "blur" },
            { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        textTwo:"",
        codeNum:"",
        codeButtonType:true,
        showType:false,
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      let self = this;
      if(getToken()){
        this.$set(this,'showType',false);
        Promise.all([
          this.getExploitConfig(),
          this.fullScreen(),
        ]).then((result)=>{
          setTimeout(function(){
            self.$router.push({path:'/home'});
          },300);
        }).catch((error) => {})
      }else{
        this.$set(this,'showType',true);
        this.getCode();
      }
    },
    mounted(){
      this.configInfo();
    },
    methods: {
      //获取公共配置数据
      configInfo(){
        let self = this;
        configInfo({ type: '1,2,3' }).then(response => {
          let list = JSON.parse(response.data)
          let newData = {};
          list.forEach((item) => {
            let obj = JSON.parse(item.configValue)
            newData = {...newData,...obj}
          })
          setTimeout(function(){
            self.$set(self,'rectangleLogo',newData.rectangleLogo);
            localStorage.setItem('schoolName',newData.schoolName)
            localStorage.setItem('circularLogo',newData.circularLogo)
            localStorage.setItem('rectangleLogo',newData.rectangleLogo)
            localStorage.setItem('videoCover',newData.videoCover)
            localStorage.setItem('setSmartAlarmType',newData.smartLock)
          },200);
        });
      },
      //获取开发配置
      getExploitConfig(){
        getConfigByType({ category: 2, configType: 5 }).then(response => {
          let obj = JSON.parse(response.data.configValue);
          //判定http或者https
          let urlText = window.location.href.split('://')[0]+'://';
          let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
          if(outerNet){//外网
            //MQTT地址
            localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
            //PC端回跳地址
            localStorage.setItem('pcUrl',urlText+obj.pcExtranetUrl)
            localStorage.setItem('fileBrowseEnvironment',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
            localStorage.setItem('fileBrowseEnvironmentExtranet',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
          }else{
            //MQTT地址
            localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
            //MQTT账号
            localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
            //MQTT密码
            localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
            //PC端回跳地址
            localStorage.setItem('pcUrl',urlText+obj.pcIntranetUrl)
            localStorage.setItem('fileBrowseEnvironment',urlText+Decrypt(obj.fileBrowseEnvironment))
            localStorage.setItem('fileBrowseEnvironmentExtranet',urlText+Decrypt(obj.fileBrowseEnvironmentExtranet))
          }
        });
      },
      getCode() {
        getCodeImg().then(res => {
          this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
          if (this.captchaOnOff) {
            this.codeUrl = "data:image/gif;base64," + res.data.image;
            this.loginForm.uuid = res.data.uuid;
          }
        });
      },
      handleLogin() {
        let self = this;
        //账号登录
        if(this.loginForm.username.length<1){
          this.text = "*请输入账号";
          this.userTypeCode = "1";
          return
        }else if(this.loginForm.password.length<1){
          this.text = "*请输入密码";
          this.userTypeCode = "2";
          return
        }else if(!this.loginForm.code||this.loginForm.code.length<1){
          this.text = "*请输入验证码";
          this.userTypeCode = "3";
          return
        }
        this.text = "";
        this.userTypeCode = "";
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username", this.loginForm.username, { expires: 30 });
              Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
              Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove('rememberMe');
            }
            this.login(this.loginForm);
          }
        });
      },
      login(userInfo){
        localStorage.setItem('entranceJumpType','SCHOOL');
        let self = this;
        const account = userInfo.username.trim()
        const password = md5(userInfo.password);
        const code = userInfo.code
        const uuid = userInfo.uuid
        const userType = userInfo.userType
        login(account, password, code, uuid, userType).then(res => {
          if(res.code == 200){
            if(res.data.userType != 4){
              this.text = "* 非校级大屏账号,无权登录本系统.";
              this.loading = false;
              this.getCode();
            }else{
              localStorage.setItem('userId',res.data.userId);
              localStorage.setItem('schoolToken',res.data.token);
              setToken(res.data.token)
              //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
              localStorage.setItem('userType',res.data.userType)
              //等待配置与字段获取到后跳转
              Promise.all([
                this.getExploitConfig(),
                this.fullScreen(),
              ]).then((result)=>{
                setTimeout(function(){
                  self.$router.push({path:'/home'});
                },300);
              }).catch((error) => {})
            }
          }else{
            if(res.code == 5007){
              this.userTypeCode = "4";
            }else if(res.code == 500){
              this.userTypeCode = "5";
            }
            this.text = res.message;
            this.loading = false;
            this.getCode();
          }
        });
      },
      //全屏
      fullScreen() {
        var element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      },
      //退出全屏
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      },
    },
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-page{
    height: 100%;
    width:100%;
    background-image: url("../assets/image/login/icon_dl_bbg.png");
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: relative;
    *{
      margin:0;
    }
    .logo-img{
      position: absolute;
      top:41px;
      left:71px;
      width:350px;
      height:77px;
    }
    .title-img-box{
      position: absolute;
      top:104px;
      left:50%;
      margin-left:-810px;
      width:1620px;
      height:325px;
      div{
        position: relative;
        img{
          width:1620px;
          height:325px;
        }
        p{
          position: absolute;
          top:102px;
          right:412px;
          width:68px;
          height:36px;
          line-height:36px;
          text-align: center;
          background: #0045AF;
          color:#fff;
          font-size:18px;
          border-radius:70px;
        }
      }
    }
    .form-box{
      width:933px;
      height:736px;
      background-image: url("../assets/image/login/img_dlk_bg.png");
      background-size: 100%;
      background-repeat:no-repeat;
      position: absolute;
      top:410px;
      left:50%;
      margin-left:-466px;
      .form-title-p{
        line-height:73px;
        font-size:33px;
        text-align: center;
        color:#fff;
        font-weight:700;
      }
      .username-input-box-code:hover{
        box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
      }
      .username-input-box-code{
        border: 1px solid #FF6A6A!important;
      }
      .username-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .username-input-box{
        width:659px;
        height:85px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 40px auto 32px;
        display: flex;
        overflow: hidden;
        img{
          height:28px;
          width:28px;
          margin:27px;
        }
        input:-webkit-autofill {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:22px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:22px;
        }
      }
      .password-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .password-input-box{
        width:659px;
        height:85px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 0 auto;
        display: flex;
        overflow: hidden;
        img{
          height:28px;
          width:28px;
          margin:27px;
        }
        input:-webkit-autofill {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:22px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:22px;
        }
      }
      .text-p{
        width:659px;
        height:85px;
        line-height: 85px;
        margin: 0 auto;
        font-size: 22px;
        font-family: Microsoft YaHei;
        color: #DC1616;
      }
      .code-input-box{
        width:659px;
        height:85px;
        display: flex;
        margin: 0 auto;
        .code-input-left-box:hover{
          box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
        }
        .code-input-left-box{
          width:453px;
          height:85px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img{
            height:28px;
            width:28px;
            margin:27px;
          }
          input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
          }
          input{
            flex:1;
            border:none;
            outline:none;
            background-color: transparent !important;
            color: #dedede;
            font-size:22px;
          }
          ::placeholder{
            color:#999999 ;
            font-size:22px;
          }
        }
        .login-code{
          width:170px;
          height:70px;
          margin:8px 0 0 34px;
          img {
            width:170px;
            height:70px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
      .form-button-p{
        font-size:22px!important;
        display: block!important;
        width:659px!important;
        height: 85px!important;
        background: #0045AF!important;
        color:#fff!important;
        border:none!important;
        border-radius: 10px!important;
        margin:48px auto 0!important;
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:22px;
      line-height:62px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }
</style>
