<template>
  <div class="login-page scrollbar-box" v-show="showType">
    <!--<img class="logo-img" src="@/assets/image/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="login-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 store from '@/store'
  import Cookies from "js-cookie";
  import {login, authInfo, getCodeImg, getConfigByType, configInfo, getInfo, authGetAllToken} 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: "",
        timer: null,
        codeButtonType: true,
        showType: false,
        deptList:[],
      };
    },
    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);
      //   this.getExploitConfig();
      // } else {
      //   this.$set(this, 'showType', true);
      //   this.getCode();
      // }
      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(token) {
        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))
          }
          this.authGetAllToken(token);
        });
      },
      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;
          }
        });
      },
      authGetAllToken(token) {
        authGetAllToken().then(res => {
          let list = [];
          for(let i=0;i<res.data.length;i++){
            if(i<4){
              list.push(res.data[i]);
            }
            // if(res.data[i].level == 1){
            //   setToken(res.data[i].token);
            //   if(res.data[i].level == 1){
            //     localStorage.setItem('deptId','');
            //   }else{
            //     localStorage.setItem('deptId',res.data[i].deptId);
            //   }
            // }
          }
          localStorage.setItem('setCheckIndex', 0);
          this.getInfo(list,token);
        });
      },
      getInfo(list,token) {
        let self = this;
        getInfo().then(res => {
          let newList = [
            {
              deptId: res.data.userInfo.deptId,
              name: '崇慧楼',
              level: 1,
              token: token,
            }
          ];
          newList = newList.concat(list);
          localStorage.setItem('deptList', JSON.stringify(newList));
          localStorage.setItem('deptName', res.data.userInfo.deptName)
          localStorage.removeItem('deptId');
          localStorage.setItem('buildId','101093843117592803');
          this.fullScreen()
          setTimeout(function () {
            self.$router.push({path: '/home'});
          }, 300);
        });
      },
      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 == 0 || res.data.userType == 1 || res.data.userType == 2 || res.data.userType == 3) {
              this.text = "* 非校级大屏账号,无权登录本系统.";
              this.loading = false;
              this.getCode();
            } else {
              localStorage.setItem('userId', res.data.userId);
              localStorage.setItem('instituteToken', res.data.token);
              setToken(res.data.token)
              //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
              localStorage.setItem('userType', res.data.userType)
              //等待配置与字段获取到后跳转
              this.getExploitConfig(res.data.token);
            }
          } 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();
        }
      },
      /*******************手机登录*******************/
      loginTypeClick(type) {
        if (type != this.loginType) {
          this.loginType = type;
        }
      },
      getCodeOne() {
        if (this.checkPhone(this.loginFormTwo.username)) {
          if (this.codeButtonType) {
            sendCode(this.loginFormTwo.username).then(response => {
              if (response.code != 200) {
                this.textTwo = "*" + response.message;
                if (response.code == 530) {
                  this.textTwo = "*" + response.message;
                }
              } else {
                this.textTwo = "";
                // this.msgSuccess('发送成功');
                this.codeButtonType = false;
                this.time();
              }
            });
          }
        }
      },
      //定时器
      time() {
        let self = this;
        let time = 30;
        self.codeNum = parseInt(time);
        this.timer = window.setInterval(refreshCount, 1000);

        function refreshCount() {
          if (time <= 0) {
            self.codeNum = parseInt(time);
            self.codeButtonType = true;
            window.clearInterval(self.timer);
          } else {
            time--;
            self.codeNum = parseInt(time);
          }
        }
      },
      //手机号验证
      checkPhone(value) {
        if (!value) {
          this.textTwo = '*手机号不能为空哦~';
          return false
        } else {
          const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
          if (reg.test(value)) {
            this.textTwo = '';
            return true
          } else {
            this.textTwo = '*请输入正确的手机号码';
            return false
          }
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    destroyed() {
      //清除定时器
      clearInterval(this.timer);
    }
  };
</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;
    }
    .forgotPasswordBox {
      margin-top: 5px;
      display: flex;
      .forgotPasswordNull {
        flex: 1;
      }
      .forgotPassword {
        text-align: center;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
      }
      .forgotPassword:hover {
        color: #00ffff;
      }
    }
    .logo-img {
      position: absolute;
      top: 29px;
      left: 52px;
      width: 250px;
      height: 55px;
    }
    .title-img-box {
      position: absolute;
      top: 74px;
      left: 50%;
      margin-left: -580px;
      width: 1180px;
      height: 230px;
      div {
        position: relative;
        img {
          width: 1180px;
          height: 230px;
        }
        p {
          position: absolute;
          top: 72px;
          right: 300px;
          width: 50px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background: #0045AF;
          color: #fff;
          font-size: 14px;
          border-radius: 70px;
        }
      }
    }
    .login-form-box {
      width: 680px;
      height: 520px;
      background-image: url("../assets/image/login/img_dlk_bg.png");
      position: absolute;
      top: 290px;
      left: 50%;
      margin-left: -340px;
      .form-title-p {
        line-height: 52px;
        font-size: 24px;
        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: 480px;
        height: 60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 40px auto 32px;
        display: flex;
        overflow: hidden;
        img {
          height: 20px;
          width: 20px;
          margin: 20px;
        }
        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: 16px;
        }
        ::placeholder {
          color: #999999;
          font-size: 16px;
        }
      }
      .password-input-box:hover {
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .password-input-box {
        width: 480px;
        height: 60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 0 auto;
        display: flex;
        overflow: hidden;
        img {
          height: 20px;
          width: 20px;
          margin: 20px;
        }
        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: 16px;
        }
        ::placeholder {
          color: #999999;
          font-size: 16px;
        }
      }
      .text-p {
        width: 480px;
        height: 59px;
        line-height: 59px;
        margin: 0 auto;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #DC1616;
      }
      .code-input-box {
        width: 480px;
        height: 60px;
        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: 330px;
          height: 60px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img {
            height: 20px;
            width: 20px;
            margin: 20px;
          }
          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: 16px;
          }
          ::placeholder {
            color: #999999;
            font-size: 16px;
          }
        }
        .login-code {
          width: 124px;
          height: 50px;
          margin: 6px 0 0 25px;
          img {
            width: 124px;
            height: 50px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
      .form-button-p {
        font-size: 16px !important;
        display: block !important;
        width: 480px !important;
        height: 60px !important;
        background: #0045AF !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        margin: 34px auto 0 !important;
      }
    }
    .introduction-p {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 16px;
      line-height: 44px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }
</style>
