<template>
  <div class="custom-logwireLogin-Container">
    <div class="form-wrapper">
      <!-- 登录表单 -->
      <form id="loginForm" class="login-form">
        <div id="error">{{errorMsg}}</div>
        <div class="form-container">
          <div class="loginForm-title"></div>
          <div class="form-item">
            <div class="form-item-icon"><img src="../../assets/img/user_icon.png" alt=""></div>
            <span class="separator"></span>
            <input type="text" name="username" v-model="username" id="username" placeholder="请输入用户名">
          </div>
          <div class="form-item">
            <div class="form-item-icon"><img src="../../assets/img/password_icon.png" alt=""></div>
            <span class="separator"></span>
            <input type="password" name="password" v-model="password" id="password" placeholder="请输入密码">
          </div>
          <div class="verificationcode" v-if="isCaptcha">
            <input type="text" class="verificationcode" name="verificationcode" v-model="verificationcode"
                   placeholder="输入验证码">
            <img v-bind:src="captchaImg" @click="getCaptcha()"/>
          </div>
          <div class="forget" v-if="passwordRecoverEnabled">
            <span class="forget_txt"><a href="/#/passwordRecover"> 忘记密码</a></span>
          </div>
          <div class="form-item">
            <button type="button" name="button" @click="login()" id="loginBtn" class="login-btn">登录</button>
            <a id="res" style="display: none" href="/#"></a>
          </div>
        </div>
      </form>
    </div>
    <!-- 登录背景图 -->
    <div class="loginBG-content">
      <img src="../../assets/img/login_bg.png" class="custom_image"/>
      <!-- 动效部分 -->
      <div class="animation-rect">
        <img class="rect" src="../../assets/img/rect.png" alt="rect">
        <img class="rect" src="../../assets/img/rect.png" alt="rect">
        <img class="rect" src="../../assets/img/rect.png" alt="rect">
      </div>
      <!-- 线条渐变 -->
      <div class="animation-line-1"><img src="../../assets/img/line.png" alt="line"></div>
      <div class="animation-line-2"><img src="../../assets/img/line.png" alt="line"></div>
      <div class="animation-line-3"><img src="../../assets/img/line.png" alt="line"></div>
      <div class="animation-line-4"><img src="../../assets/img/line.png" alt="line"></div>
      <div class="animation-line-5"><img src="../../assets/img/line.png" alt="line"></div>
      <!-- Logo动画 -->
      <div class="company-logo-outer">
        <img class="company-logo" src="../../assets/img/logo_bg.png" alt="Logo背景">
        <img class="company-logoText" src="../../assets/img/logo_text.png" alt="Logo文字">
        <img class="company-logoBase" src="../../assets/img/logo_base.png" alt="Logo基座">
      </div>
      <!-- 向下传输  -->
      <div class="transfer-down">
        <div class="transfer-down-box"><img src="../../assets/img/leftBox.png" alt="向下传输"></div>
      </div>
      <!-- 向右传输 -->
      <div class="transfer-right">
        <div class="transfer-right-box"><img src="../../assets/img/rightBox.png" alt="向右传输"></div>
      </div>
    </div>
    <!-- 登录页脚 -->
    <div class="login-footer">
      <span> &copy; 上海开尔唯国际物流有限公司
        <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="">沪ICP备16042816号-1</a>
      </span>
    </div>
  </div>
</template>

<script>
  window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
  require('materialize-css')
  import {Base64} from "js-base64";
  import {captchaConfig, passwordRecover, captcha, userLogin} from "../api/apiList"

  export default {
    data() {
      return {
        errorMsg: '',
        isCaptcha: false,
        captchaImg: '',
        passwordRecoverEnabled: false,
        username: '',
        password: '',
        captchaSign: '',
        verificationcode: '',
        captchaTimestamp: ''
      };
    },
    name: 'app',
    //  页面加载之前
    created() {
    },
    //  页面加载后
    mounted() {
      this.getConfig();
      this.getCaptcha();
      this.getPasswordRecoverEnabled();
    },
    methods: {
      //获取是否验证码配置
      getConfig() {
        let res = captchaConfig();
        res.then((data) => {
          this.isCaptcha = data.data.required;
        })
      },
      //获取是否忘记密码配置
      getPasswordRecoverEnabled() {
        let res = passwordRecover();
        res.then((data) => {
          this.passwordRecoverEnabled = data.data.passwordRecoverEnabled;
        })
      },
      //获取验证码
      getCaptcha() {
        let res = captcha();
        res.then((data) => {
          this.captchaImg = "data:image/png;base64," + data.data.captcha;
          this.captchaSign = data.data.sign;
          this.captchaTimestamp = data.data.timestamp;
        })
      },
      ascii_to_hex(str) {
        var arr1 = [];
        for (var n = 0, l = str.length; n < l; n++) {
          var hex = Number(str.charCodeAt(n)).toString(16);
          arr1.push(hex);
        }
        return arr1.join('');
      },
      login() {
        let base64 = Base64.encode(this.password);
        let pass = "{encrypted}" + this.ascii_to_hex(base64)
        let res = userLogin(this.username, pass, this.captchaSign, this.verificationcode, this.captchaTimestamp);
        res.then(data => {
          console.log(data.messageType)
          if ('success' == data.messageType) {
            console.log(data)
            if (data.data.forcePasswordReset == true) {
              parent.window.location = "/#/ForcePasswordReset"
            } else {
              parent.window.location = "/";
            }
          } else {
            this.errorMsg = data.message
            this.getCaptcha();
          }
        })
      }
    },
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .custom-logwireLogin-Container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(45deg, #DFE2ED, #F7F7FA);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .custom-logwireLogin-Container .loginBG-content {
    width: 1644px;
    height: 930px;
    min-width: 1644px;
    min-height: 930px;
    overflow: hidden;
    position: relative;
  }

  .custom-logwireLogin-Container .loginBG-content .custom_image {
    width: 100%;
    height: 100%;
  }

  .custom-logwireLogin-Container .loginBG-content .company-logo-outer {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 620px;
    top: 325px;
    z-index: 1;
  }

  .custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logo {
    position: absolute;
    left: 144px;
    top: 40px;
    z-index: 0;
    opacity: 0;
    animation: rise 6s infinite linear;
  }

  @keyframes rise {
    0% {
      top: 165px;
    }
    25% {
      top: 40px;
      opacity: 1;
    }
    42% {
      z-index: 1;
    }
    60% {
      top: 40px;
      opacity: 1;
      z-index: 1;
    }
    100% {
      opacity: 0;
      z-index: 0;
    }
  }

  .custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logoText {
    position: absolute;
    left: 150px;
    top: 90px;
    z-index: 2;
    opacity: 0;
    animation: L 6s infinite linear;
  }

  @keyframes L {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    90% {
      opacity: 0;
    }
  }

  .custom-logwireLogin-Container .loginBG-content .company-logo-outer .company-logoBase {
    position: absolute;
    left: -32px;
    top: 70px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-rect {
    width: 70px;
    height: 80px;
    position: absolute;
    left: 222px;
    top: 450px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-rect .rect {
    position: absolute;
    opacity: 0.8;
    bottom: 50%;
    animation: rect 1.5s infinite linear;
  }

  @keyframes rect {
    0% {
      opacity: 0.8;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }
  }

  .custom-logwireLogin-Container .loginBG-content .animation-rect .rect:nth-child(2) {
    bottom: 60%;
    opacity: 0.6;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-rect .rect:last-child {
    bottom: 70%;
    opacity: 0.4;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-1,
  .custom-logwireLogin-Container .loginBG-content .animation-line-2,
  .custom-logwireLogin-Container .loginBG-content .animation-line-3,
  .custom-logwireLogin-Container .loginBG-content .animation-line-4,
  .custom-logwireLogin-Container .loginBG-content .animation-line-5 {
    position: absolute;
    animation: line 2.5s infinite linear;
  }

  @keyframes line {
    0% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-1 {
    left: 235px;
    top: 275px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-2 {
    left: 810px;
    top: 235px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-3 {
    left: 300px;
    top: 800px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-4 {
    left: 725px;
    top: 700px;
  }

  .custom-logwireLogin-Container .loginBG-content .animation-line-5 {
    left: 1010px;
    top: 590px;
  }

  .custom-logwireLogin-Container .loginBG-content .transfer-down {
    width: 150px;
    height: 110px;
    position: absolute;
    left: 592px;
    top: 395px;
    overflow: hidden;
    border-top-left-radius: 25%;
  }

  .custom-logwireLogin-Container .loginBG-content .transfer-down .transfer-down-box {
    width: 150px;
    height: 70px;
    position: absolute;
    left: -50%;
    top: -34%;
    animation: transferDown 3s infinite linear;
  }

  @keyframes transferDown {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(35px, 20px, 0);
      -moz-transform: translate3d(35px, 20px, 0);
      -ms-transform: translate3d(35px, 20px, 0);
      -o-transform: translate3d(35px, 20px, 0);
      transform: translate3d(35px, 20px, 0);
    }
  }

  .custom-logwireLogin-Container .loginBG-content .transfer-right {
    width: 160px;
    height: 115px;
    position: absolute;
    left: 838px;
    top: 370px;
    clip-path: polygon(0 0, 63% 0, 100% 28%, 100% 100%, 0 100%);
  }

  .custom-logwireLogin-Container .loginBG-content .transfer-right .transfer-right-box {
    width: 150px;
    height: 70px;
    position: absolute;
    left: -105%;
    top: 8%;
    animation: transferRight 5s infinite linear;
  }

  @keyframes transferRight {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(70px, -40px, 0);
      -moz-transform: translate3d(70px, -40px, 0);
      -ms-transform: translate3d(70px, -40px, 0);
      -o-transform: translate3d(70px, -40px, 0);
      transform: translate3d(70px, -40px, 0);
    }
  }

  .custom-logwireLogin-Container .form-wrapper {
    width: 404px;
    background: #FFFFFF;
    box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 35px 40px;
    position: absolute;
    z-index: 99;
    top: 50%;
    transform: translateY(-50%);
  }

  @media screen and (min-width: 1280px) {
    .custom-logwireLogin-Container .form-wrapper {
      right: 2%;
    }
  }

  @media screen and (max-width: 1280px) {
    .custom-logwireLogin-Container .form-wrapper {
      right: 2%;
    }
  }

  @media screen and (min-width: 1600px) {
    .custom-logwireLogin-Container .form-wrapper {
      right: 8%;
    }
  }

  .custom-logwireLogin-Container .form-wrapper .login-form {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form #error {
    color: red;
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .loginForm-title {
    text-shadow: 2px 3px 16px rgba(0, 0, 0, 0.06);
    background-image: url('../../assets/img/cw_logo.png');
    height: 30%;
    width: 100%;
    background-position: center;
    background-repeat: space;
    background-size: 163px;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item {
    margin: 16px 0;
    height: 40px;
    height: 42px;
    background: #F3F4F8;
    box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    display: flex;
    align-items: center;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item .separator {
    width: 1px;
    height: 10px;
    /*box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);*/
    /*border-left: 2px solid #CCCCCC;*/
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item input {
    border: none;
    width: 100%;
    height: 100%;
    background: #F3F4F8;
    padding-left: 8px;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item input:focus-visible {
    outline: none !important;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item input:internal-autofill-selected {
    background: #F3F4F8 !important;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .verificationcode {
    height: 42px;
    display: flex;
    align-items: center;
    border: none;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .verificationcode input {
    padding-left: 15px;
    width: 215px;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .verificationcode img {
    padding-left: 12px;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .forget {
    margin: 10px;
    font-size: 10pt;
    display: flex;
    justify-content: flex-end;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .forget span a {
    cursor: pointer;
    color: black;
    text-decoration: none;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .forget span a:hover {
    color: red;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form input {
    margin: 16px 0;
    height: 42px;
    background: #F3F4F8;
    align-items: center;
  }

  .custom-logwireLogin-Container .form-wrapper .login-form .form-item .login-btn {
    width: 100%;
    height: 42px;
    font-size: 18px;
    font-weight: 400;
    line-height: 42px;
    color: #FFFFFF;
    margin-bottom: 5px;
    box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    border: none;
    background: #203993;
    cursor: pointer;
  }

  .custom-logwireLogin-Container .form-wrapper .other-login-method {
    font-size: 16px;
    margin-top: 10%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .custom-logwireLogin-Container .form-wrapper .other-login-method .other-method-title {
    display: flex;
    align-items: center;
  }

  .custom-logwireLogin-Container .form-wrapper .other-login-method .other-method-title .separator {
    width: 8px;
    box-shadow: 2px 3px 16px 0px rgba(0, 0, 0, 0.06);
    border-top: 2px solid #434343;
  }

  .custom-logwireLogin-Container .form-wrapper .other-login-method .other-login-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .custom-logwireLogin-Container .login-footer {
    position: absolute;
    bottom: 5%;
    left: 50%;
    z-index: 99;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 400;
    color: #262626;
    line-height: 17px;
    white-space: nowrap;
  }

</style>
