<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-19 09:50:45
-->
<template>
  <div id="login">
    <div class="login-content-wrap">
      <div class="login-logo"><img src="./images/logo-login.svg" /></div>
      <div class="login-con">
        <div class="login-img">
          <div class="content"></div>
        </div>
        <div class="login-wrap">
          <p>账号登录</p>
          <div class="login-user" :class="{ 'select-border': change.user }">
            <img class="user-icon" src="./images/user.svg" />
            <input
              type="text"
              class="user-input"
              placeholder="请输入账号"
              v-model="userInfo.username"
              @focus="reduceBorder('user')"
              @blur="addBorder('user')" />
            <span class="warning" v-show="warning.user">账号不能为空</span>
          </div>
          <div
            class="login-user user-mt"
            :class="{ 'select-border': change.pass }">
            <img class="user-icon" src="./images/password.svg" />
            <input
              type="password"
              class="user-input"
              placeholder="请输入密码"
              v-model="userInfo.password"
              v-show="!selectEye"
              @focus="reduceBorder('pass')"
              @blur="addBorder('pass')" />
            <input
              type="text"
              class="user-input"
              placeholder="请输入密码"
              v-model="userInfo.password"
              v-show="selectEye"
              @focus="reduceBorder('pass')"
              @blur="addBorder('pass')" />
            <img
              class="password-eye"
              src="./images/open.svg"
              @click="selectEyes"
              v-show="selectEye" />
            <img
              class="password-eye"
              src="./images/close.svg"
              @click="selectEyes"
              v-show="!selectEye" />
            <span class="warning" v-show="warning.pass">密码不能为空</span>
          </div>
          <div
            class="login-user login-valid"
            :class="{ 'select-border': change.valid }">
            <img class="user-icon" src="./images/valid.svg" />
            <input
              type="text"
              class="user-input"
              placeholder="请输入验证码"
              v-model="userInfo.captchaCode"
              @focus="reduceBorder('valid')"
              @blur="addBorder('valid')" />
            <img
              class="valid-img"
              :src="codeSrc"
              alt="暂无验证码"
              @click="reloadCaptcha" />
            <span class="warning" v-show="warning.valid">验证码不能为空</span>
          </div>
          <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  export default {
    data () {
      return {
        // 用户名
        selectIcon: true,
        // 用户名
        selectEye: false,
        userInfo: {
          // 用户名
          username: "",
          // 密码
          password: "",
          // 重定向地址
          redirectUrl: "",
          // 验证码key
          captchaKey: "",
          // 验证码值
          captchaCode: "",
        },
        //边框
        change: {
          user: false,
          pass: false,
          valid: false
        },
        // 提示语
        warning: {
          user: false,
          pass: false,
          valid: false,
        },
        // 验证码图片地址
        codeSrc: ""
      };
    },
    mounted () {
      this.initPage();
      this.userInfo.redirectUrl = localStorage.getItem("dj-location");
      this.reloadCaptcha()
      let self = this;
      document.onkeydown = function (e) {
        //按下回车提交
        let key = window.event.keyCode;
        //事件中keycode=13为回车事件
        if (key == 13) {
          self.goHome();
        }
      };
    },
    methods: {
      // 更新验证码
      /**
       * @description: 更新验证码
       * @author: renchao
       */
      reloadCaptcha () {
        axios.get(window._config.services.management + "/management/captcha?format=json").then(res => {
          if (res.data.status === 1) {
            this.userInfo.captchaKey = res.data.content['dubhe.captcha']
            this.codeSrc = res.data.content.image
          }
        })
      },
      // 初始化
      /**
       * @description: 初始化
       * @author: renchao
       */
      initPage () {
        let userInfo =
          localStorage.getItem("userInfo") &&
          JSON.parse(localStorage.getItem("userInfo"));
        if (userInfo) {
          this.userInfo.username = userInfo.username;
          this.userInfo.password = userInfo.password;
        }
      },
      /**
       * @description: goHome
       * @author: renchao
       */
      goHome () {
        if (this.userInfo.username && this.userInfo.password) {
          axios
            .post(
              window._config.services.management + "/management/cas/login",
              this.userInfo
            )
            .then((response) => {
              if (response.data.status === 1) {
                if (response.data.content.location) {
                  window.location.href = response.data.content.location;
                }
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error(error.message);
            });
        } else {
          return
        }
      },
      /**
       * @description: selectEyes
       * @author: renchao
       */
      selectEyes () {
        this.selectEye = !this.selectEye;
      },

      //获取焦点
      /**
       * @description: 获取焦点
       * @param {*} type
       * @author: renchao
       */
      reduceBorder (type) {
        this.change[type] = true
      },
      /**
       * @description: addBorder
       * @param {*} type
       * @author: renchao
       */
      addBorder (type) {
        //失去焦点
        switch (type) {
          case "user":
            this.change.user = false;
            if (!this.userInfo.username) {
              this.warning.user = true;
            } else {
              this.warning.user = false;
            }
            break;
          case "pass":
            this.change.pass = false;
            if (!this.userInfo.password) {
              this.warning.pass = true;
            } else {
              this.warning.pass = false;
            }
            break;
          case "valid":
            this.change.valid = false;
            if (!this.userInfo.captchaCode) {
              this.warning.valid = true;
            } else {
              this.warning.valid = false;
            }
            break;
          default:
            break;
        }
      }
    },
  };
</script>
<style lang="scss" scoped>
  input::placeholder {
    color: #878787;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
  }
  #login {
    width: 100vw;
    height: 100vh;
    background: url("./images/login-bg.png") no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: relative;
    .login-content-wrap {
      position: absolute;
      left: 50%;
      top: calc(50% + 10px);
      transform: translate(-50%, -50%);
    }
    .login-logo {
      height: 70px;
      width: 100%;
      text-align: center;
      position: absolute;
      top: -140px;
    }
    .login-logo img {
      height: 100%;
    }
    .login-con {
      margin: 0 auto;
      width: 936px;
      height: 450px;
      .login-img {
        width: 456px;
        height: 450px;
        float: left;
        box-sizing: border-box;
        padding: 126px 86px;
        background-color: #fff;
        position: relative;
        &:after {
          content: "";
          display: inline-block;
          width: 1px;
          height: calc(100% - 96px);
          background-image: linear-gradient(#fff, #9aa4c8, #fff);
          position: absolute;
          right: 0;
          top: 48px;
        }
        .content {
          width: 100%;
          height: 100%;
          background: url("./images/login-img.svg") no-repeat;
        }
      }
      .login-wrap {
        width: 480px;
        height: 450px;
        float: left;
        box-sizing: border-box;
        padding: 48px 56px;
        background: #ffffff;
        p {
          width: 80px;
          font-size: 20px;
          font-weight: 500;
          color: #333333;
          line-height: 26px;
          position: relative;
          &:after {
            content: "";
            display: inline-block;
            height: 2px;
            width: 74px;
            background-color: #cf8933;
            position: absolute;
            bottom: -4px;
            left: 2px;
          }
        }
      }
    }
    .login-user {
      width: 100%;
      height: 40px;
      border: 1px solid #e5e5e5;
      box-sizing: border-box;
      margin-top: 34px;
      border-radius: 2px;
      position: relative;
      .user-icon {
        float: left;
        margin: 10px auto auto 10px;
        width: 28px;
        height: 18px;
      }
      .user-input {
        width: 80%;
        float: left;
        font-size: 16px;
        outline: 0;
        border: none;
        color: #4a4a4a;
        height: 38px;
        line-height: 40px;
      }
      .password-eye {
        float: right;
        width: 16px;
        height: 16px;
        margin-right: 12px;
        margin-top: 13px;
        cursor: pointer;
      }
      .warning {
        font-size: 12px;
        color: red;
        position: absolute;
        left: 0;
        bottom: -18px;
      }
    }
    .login-valid {
      width: 60%;
      .valid-img {
        width: 50%;
        position: absolute;
        right: -66%;
        top: 2px;
        cursor: pointer;
      }
    }
    .user-mt {
      margin-top: 26px;
    }
    .select-border {
      border: 1px solid rgba(0, 113, 255, 1);
    }
    .login-btn {
      width: 100%;
      height: 48px;
      background: #74a3f5;
      border-radius: 2px;
      margin: 0 auto;
      margin-top: 40px;
      font-size: 20px;
      font-weight: 500;
      line-height: 48px;
      text-align: center;
      color: #fff;
      cursor: pointer;
    }
    .reserved-con {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 18px;
      background-color: #4971ca;
    }
  }
</style>