<template>
<div>
  <div class="loginPage" @keyup.enter="login">

    <div class="loginLogo">
        <img src="./imgs/CTCCLoginLogo.jpg">
    </div>
    <div class="loginMain">
      <div class="loginForm">
        <p class="formHead">
          {{tipTitle}}
        </p>
        <el-form :rules="rules" ref="ruleForm" :model="queryParams">
          <!--账号登录-->
          <div class="accountLogin" v-if="LoginWay">
            <el-form-item prop="loginId">
              <el-input v-model="queryParams.loginId" placeholder="请输入用户名"></el-input>
              <i class="el-icon-s-custom login-icon"></i>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="queryParams.password" type="password" placeholder="请输入密码"></el-input>
              <i class="el-icon-key login-icon"></i>
            </el-form-item>
            <el-row>
              <el-col :span="14">
                <el-form-item class="verCodeInput" prop="captcha">
                  <el-input v-model="queryParams.captcha" placeholder="请输入验证码"></el-input>
                  <i class="el-icon-s-grid login-icon"></i>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <img :src="imgURL" @click="getCaptcha" style="width: 115px;height: 48px;">
              </el-col>
            </el-row>
          </div>
          
          <el-form-item>
            <el-checkbox :class="{unlockZJ:zj}" v-model="queryParams.fourALogin"  v-if="fourALoginCheck&&(LoginWay || zj)">统一认证</el-checkbox>
            <router-link to="/forgetPsw" class="forgetPsw" v-show="platform||forgetPsw">忘记密码？</router-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="loginBtn" @click="login">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <p
      class="copyRight"
      style="position: absolute;width:100%;margin-top: 340px;color:#959595;text-align: center;font-size: 14px;"
    >
      {{copyRight}}
      <span v-show="copyRight">版权所有</span>
    </p>
  </div>
  
</div>

</template>

</style>
<script>
import CryptoJS from 'crypto-js'
import { login, existMessagePlatform, getPublicKey, getCaptchaUrl, to4APage, toUamPage, getLogo } from '@ability/api/login'
//  import {Base64} from 'js-base64';
  export default {
    data() {
      return {
        languageTag:false,
        ssoLoginTag:false,
        zj:false,
        zhejiang:false,
        msgTime:null,
        src:'',
        checked: false,
        public_key:'',
        LoginWay:true,
        tipTitle:"账号登录",
        tipText:"手机快捷登录",
        second:60,
        activeText:'获取验证码',
        disabled:false,
        _LoginWay2: false,
        SMS:false,
        get LoginWay2() {
          return this._LoginWay2;
        },
        set LoginWay2(value) {
          this._LoginWay2=value;
        },
        forgetPsw:false,
        platform:false,
        LoginWay3:false,
        //请求参数
        queryParams: {
          loginId: '',
          password: '',
          captcha: '',
          loginType: 1, //1用户名+密码+图片验证码登录, 2用户名+密码+手机验证码登录, 3手机号码+手机验证码
          checkCode: '',
          mobilePhone: '',
          vulDisposalType: 0, // 漏洞处置登陆标志
          fourALogin: false,//福富4a统一认证标志
        },
        imgURL: '',
        copyRight:'',
        //数据验证
        rules: {
           loginId: [{
             required: true,
             message: '请输入用户名',
             trigger: 'blur'
           }],
           password: [{
             required: true,
             message: '请输入密码',
             trigger: 'blur'
           }],
           captcha: [{
             required: true,
             message: '请输入验证码',
             trigger: 'blur'
           }],
           checkCode: [{
             required: true,
             message: '请输入验证码',
             trigger: 'blur'
           }]
        },
        mobileCheckCodePopoverRules: {
          captcha: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
        },
        updateCountDown:null,
        vulDisposalType : 0,
        info : null,
        mobileCheckCodePopoverVisible: false,
        popoverArrowVisible: false,
        autofocus: false,
        mobileCheckCodePopoverConfirmLoading: false,
        fourALoginCheck:false,
        fourALogin:false,
        bigscreenUrl:""
      }
    },
    methods: {
     messagePlatform:function(){
        existMessagePlatform().then((resp) => {
          if (resp.data.returnCode == '0') {
            if(resp.data.data=="1"){
               this.platform=true;
            }
          }
        });
      },
      
      loginContent : function () {
        var clone = JSON.parse(JSON.stringify(this.queryParams));
        getPublicKey().then((resp) => {
          if (resp.data.returnCode == "0"){
            setMaxDigits(130);
            let {e,modulus} =  resp.data.data;
            let key = new RSAKeyPair(e, "", modulus);
            if(this.fourALogin==true&&this.queryParams.fourALogin==true){
              var srcs = CryptoJS.enc.Utf8.parse(clone.password);
              key = CryptoJS.enc.Utf8.parse('abcdefgabcdefg12');
              var datas = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
              clone.password = datas.toString();
            }else{
              clone.password = encryptedString(key,this.queryParams.password);
            }
          }
        }).then(()=>{
            login(clone).then((resp) => {
            if (resp.data.returnCode == "0") {
              this.dealLoginSuccess(resp.data.data)
            } else if (resp.data.returnCode == "900") {
              this.getCaptcha();
              this.queryParams.captcha = "";
              this.$message.warning(resp.data.returnMsg);
            }else if(resp.data.returnCode == "2013" || resp.data.returnCode == "2015"){
              this.getCaptcha(); //刷新验证码
              this.queryParams.captcha = "";
            }else if(resp.data.returnCode == "800"){
              let userId=resp.data.data;
              this.$router.push({name:"updPassword", params:{id:userId}})
            } else if(resp.data.returnCode == "-1") {
               this.getCaptcha();
               this.queryParams.captcha = "";
               this.$message.error("您当前域名不在服务端允许访问范围内,请联系管理员！");
            }else{
              this.getCaptcha();
              this.queryParams.captcha = "";
              // this.$message.error(resp.data.returnMsg + "");
            }
          }, (error) => {
              this.getCaptcha();
              this.queryParams.captcha = "";
              this.$message.error(error.message);
            })
        })
      },
      dealLoginSuccess(respData){
        var menus = respData.menuTree,
          children = (menus && menus.children) || [],
          path = "";
        this.$store.dispatch("user/setMenuList", menus);
        this.$store.dispatch('user/setSessionStorage',respData)

        if(children.length){          
          path = menus.route || '/404'
          this.$router.push({
            path: path
          })
        } else {
          sessionStorage.setItem("authorization","");
          this.getCaptcha();
          this.$message.warning("没有权限访问其它页面！ 请联系管理员");
        }
      },
      login:function(){
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
              this.loginContent();
          } else {
            return false;
          }
        })
      },
      getCaptcha: function() {
        this.imgURL = getCaptchaUrl() + "?" + new Date().getTime();
      },
    },
    beforeCreate(){
      // var code = this.$route.params.code;
      var code=this.$route.query.code;
      console.log(code)
      var self = this;
      if(code!=undefined&&code!=null&&code!=""&&code!="undefined"){
          to4APage(code).then((resp) => {
            if (resp.data.returnCode == "0") {
              var menus = resp.data.data.menuTree,
                children = (menus && menus.children) || [],
                path = "";
              this.$store.commit("menus", menus);
              this.$store.dispatch('user/setSessionStorage',resp.data.data)
              if(children.length){
                path = children[0].children[0].route
                console.log('path1',path)
                this.$router.push({
                  path: path
                })
              }else{
                this.$message.warning("没有权限访问其它页面！ 请联系管理员");
              }
            }
        }, (error) => {

        })
      }else{
        toUamPage().then((resp) => {
          if (resp.data.returnCode == "0") {
              var openUam= resp.data.data.openUam;
              var openFA = resp.data.data.openFA;
              var socflag = resp.data.data.socflag;
              var url = resp.data.data.urlAddress;
              var key = "abcdefgabcdefg12";
              if(openFA=="true"){
                  this.fourALogin = true
              }
              if(openFA=="true" && socflag=="true"){
                this.fourALoginCheck = true
              }
              if(openUam=="true"){
                key = CryptoJS.enc.Utf8.parse(key)
                var dec = CryptoJS.AES.decrypt(CryptoJS.format.Hex.parse(url), key,{
                  mode: CryptoJS.mode.ECB,
                  padding: CryptoJS.pad.Pkcs7
                })
                var urlAddress = CryptoJS.enc.Utf8.stringify(dec)
                window.location.href=urlAddress;
              }
            }
        }, (error) => {})
      }

      getLogo().then((resp) => {
          if (resp.data.returnCode == "0") {
            // this.src=resp.data.data.loginIconUrl;
            this.src= './imgs/CTCCLoginLogo.jpg'
            this.copyRight=resp.data.data.loginPageName;
          }
        }, (error) => {
          this.$message.error(error.message);
      });
    },
    created: function() {
      this.messagePlatform();
    },
    mounted(){
      this.getCaptcha();
    }
  }
</script>
<style scoped>
.loginBtn {
  width: 100%;
  background-color: #428bca;
  color: #fff;
  text-align: center;
  height: 48px;
  font-size: 15px;
}
.unlockZJ{
  display: block;
  width: 100px;
}
.logo-letter{
  position: absolute;
  left: 240px;
  top: 70px;
  height: 55px;
}
.logo-title{
  line-height: 35px;
  font-size: 20px;
  letter-spacing: 8px;
  text-shadow: 1px 0 black;
}
.logo-title-en{
  font-size: 5px;
  text-shadow: 1px 0 black;
}
</style>
<style lang="scss">
.loginForm
  .el-form
    {padding : 0 25px;
    margin: 0 auto;}
    .el-form-item
      {margin: 10px 0}
      .el-input__inner
        {height:48px;
        line-height: 48px;
        padding-left: 48px}
</style>
<style lang="scss" scoped>
.loginPage{
    position :absolute;
    top:0;
    left: 0;
    bottom:0;
    right:0
}
.loginLogo
  {margin: 70px 0 70px 130px}

.loginMain
  {position: absolute;
  height:330px;
  width: 100%;
  background: url("./imgs/loginbg.png") no-repeat 32% top;
  background-color: #000;
  background-size: 627px 330px;}
  .login-icon{
    position: absolute;
    left: 15px;
    top: 12px;
    font-size: 23px;
  }
  .loginForm
    {position: absolute;
    width: 355px;
    height:405px;
    top:50%;
    margin-top: -200px;
    right:20%;
    background: url("./imgs/borderline.png") no-repeat center top,
      url("./imgs/borderline.png") no-repeat center bottom ;
    background-size: 100%;
    background-color: #fff;}
    .formHead
      {margin-top: 40px;
      margin-left: 24px;
      margin-bottom: 20px}
   .el-form
    {padding : 0 25px;
    margin: 0 auto;}
    .el-form-item
      {margin: 10px 0}
      .el-input__inner
        {height:48px;
        line-height: 48px;
        padding-left: 48px}
      .fa-icon
        {color: #b9b9b9;
        position: absolute;
        top:14px;
        width: 20px;
        height: 20px;
        left:15px;}
    .forgetPsw
      {float: right;
      font-size: 12px;
      text-decoration: underline;
      color:#619fee;
      cursor: pointer}
    .verCodeInput
      {position: relative;
      margin: 0 !important}
.formHead {
    position:relative;
}
.formHead .login-language {
    color: #0a0a0a;
    position: absolute;
    right: 20px;
    cursor: pointer;
}
.formHead .login-language .fa-icon{
    width: 16px;
    height: 16px;
}
.loginLogo.iotLogin{
  margin:unset
}
.loginMain.clearBg{
  height: 100%;
  width: 100%;
  background:unset
}
.loginMain .iotLoginBg{
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(./loginbg_gzit.png);
  background-color: #000;
  background-size: 100%;
}
.loginMain .iotLoginBg-titile{
  position: absolute;
  top: 4.9%;
  left: 24%;
  font-size: 2rem;
  color: #737373;
  letter-spacing: 3px;
  font-weight: bold;
}
.loginMain .iotLoginBg-titile-en{
  position: absolute;
  top: 187px;
  left: 31%;
  font-size: 5px;
  color: #fff;
}
</style>

