<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: {
    // 更新验证码
    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
        }
      })
    },
    // 初始化
    initPage() {
      let userInfo =
        localStorage.getItem("userInfo") &&
        JSON.parse(localStorage.getItem("userInfo"));
      if (userInfo) {
        this.userInfo.username = userInfo.username;
        this.userInfo.password = userInfo.password;
      }
    },
    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
      }
    },
    selectEyes() {
      this.selectEye = !this.selectEye;
    },
    
    //获取焦点
    reduceBorder(type) {
      this.change[type] = true
    },
    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>