<template>
  <div id="particles-js">
    <div class="loginmodel">
      <div class="login-logo">
        <img :src="loginTitleUrl" class="titleImg" />
      </div>
      <div class="login-box">
        <p>登录您的账户</p>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <el-form-item prop="loginName">
            <el-input
              type="text"
              v-model.trim="loginForm.loginName"
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              class="name"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-tooltip v-model="capsTooltip" content="已开启大写" placement="top" manual>
              <el-input
                type="password"
                v-model.trim="loginForm.password"
                class="pwd"
                ref="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter.native="enterProjectList"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item prop="verifyCode">
            <el-input
              v-model.trim="loginForm.verifyCode"
              placeholder="请输入验证码"
              prefix-icon="el-icon-key"
              @keyup.enter.native="enterProjectList"
            ></el-input>
            <img :src="imgSrc" alt="验证码" @click="changeCode()" class="codeImg" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btn"
              @click="enterProjectList"
              :loading="isLoading"
              :disabled="isLoading"
            >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这俩是背景特效相关的js
import { particlesJS } from "~static/libs/particles.min";
import { name, obj } from "~static/libs/app.js";
export default {
  data() {
    return {
      loginTitleUrl: "./static/img/common/login_title.png",
      loginForm: {
        loginName: "",
        password: "",
        verifyCode: "",
      },
      loginFormRules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "验证码错误", trigger: "blur" },
        ],
      },
      imgSrc: "", //验证码图片
      capsTooltip: false,
      isLoading: false, //是否正在加载中
    };
  },
  created() {
    this.getCode();
  },
  mounted() {
    //绘制背景特效
    particlesJS(name, obj);
  },
  methods: {
    async getCode() {
      try {
        let baseURL = this.$http.baseURL.base;
        let res = await this.$http.post(
          this.$http.api.getCode,
          {},
          {},
          baseURL
        );
        this.imgSrc = res;
      } catch (err) {
        console.log(err);
      }
    },
    changeCode() {
      this.loginForm.verifyCode = "";
      this.getCode();
    },
    enterProjectList() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("输入验证失败");
        this.isLoading = true;
        let baseURL = this.$http.baseURL.base;
        let res = await this.$http.post(
          this.$http.api.login,
          this.loginForm,
          {},
          baseURL
        );
        if (!res) {
          this.isLoading = false;
          this.$message.error("登录超时");
          this.changeCode();
        } else {
          if (res.statusCode === 200) {
            const { accessToken, refreshToken } = res.data;
            this.$storage.saveToken(accessToken.tokenContent);
            this.$storage.saveItem("expireTime", accessToken.expires);
            this.$storage.saveItem("refreshToken", refreshToken.tokenContent);
            try {
              let baseURL = this.$http.baseURL.base;
              let { data, statusCode, message } = await this.$http.post(
                this.$http.api.getUserInfo,
                {},
                {},
                baseURL
              );
              if (statusCode === 200) {
                let { loginName, organizeName } = data.admin;
                this.$storage.saveItem("organizeName", organizeName);
                this.$storage.saveItem("loginName", loginName);
                this.$message.success(message);
                this.isLoading = false;
                this.$router.push("/Project");
              } else {
                this.isLoading = false;
                this.$message.error(message);
                this.changeCode();
              }
            } catch (err) {
              this.isLoading = false;
            }
          } else {
            this.isLoading = false;
            this.$message.error(res.message);
            // this.changeCode();
          }
        }
      });
    },
    checkCapslock({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if (
          (shiftKey && key >= "a" && key <= "z") ||
          (!shiftKey && key >= "A" && key <= "Z")
        ) {
          this.capsTooltip = true;
        } else {
          this.capsTooltip = false;
        }
      }
      if (key === "CapsLock" && this.capsTooltip === true) {
        this.capsTooltip = false;
      }
    },
  },
};
</script>
<style>
.btn.el-button,
.login-box .el-input {
  margin-left: 120px;
  width: 340px;
  height: 37px;
  border-radius: 4px;
}
.login-box .el-input .el-input__inner {
  text-align: left!important;
}
.login-box .name {
  margin-top: 20px;
}
.login-box .btn {
  color: white;
  line-height: 37px;
  font-size: 20px;
  padding: 0;
}
.login-box .focusing {
  outline-width: 0;
}

.login-box .el-form-item__error {
  left: 135px;
}
</style>

<style lang="less" scoped>
@modelWidth: 580px;
.loginmodel {
  z-index: 100;
  position: relative;
  height: 100%;
}
.login-logo {
  min-height: 32%;
  max-height: 40%;
  padding-top: 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  img {
    max-width: @modelWidth;
    // width: 100%;
    // height: 78px;
  }
}
.login-box {
  margin: 40px auto 0;
  width: @modelWidth;
  height: 340px;
  background-color: rgba(252, 252, 252, 1);
  border-radius: 8px;
  overflow: hidden;
  p {
    margin-top: 45px;
    text-align: center;
    font-size: 21px;
    color: #686868;
  }
  .codeImg {
    position: absolute;
    height: 36px;
    right: 134px;
    top: 2px;
    vertical-align: middle;
  }
}
</style>