<template>
  <div class="login">
    <div class="left">
      <div class="logo">
        <img src="/login/img_logo1.png" class="img" alt="" />
      </div>
    </div>
    <div class="right">
      <div class="main">
        <div style="width: 100%">
          <div class="welcome">欢迎登录~</div>
          <div class="title">胜德体育科技MES管理系统</div>
          <el-form :model="loginForm" ref="loginRef" :rules="loginRules">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="clickLogin">
                <template #prepend>
                  <img class="icon" src="/login/icon_account.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="bottom20" prop="password" @keyup.enter.native="clickLogin">
              <el-input v-model="loginForm.password" show-password placeholder="请输入密码">
                <template #prepend>
                  <img class="icon" src="/login/icon_lock.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="bottom20" prop="isRemember">
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button @click="clickLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="logo2">
      <img class="img2" src="/login/img_logo2.png" alt="" />
    </div>
    <div class="explain">Copyright© 福清市胜德科技有限公司 版权所有</div>
  </div>
</template>

<script setup>
import useUserStore from "/src/store/modules/user";
import { encrypt, decrypt } from "/src/utils/jsencrypt";
import Cookies from "js-cookie";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const router = useRouter();
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  tenantId: "000000",
});
const loginRef = ref(null);
const loginRules = ref({
  username: [{ required: true, message: "请输入账号", trigger: ["change", "blur"] }],
  password: [
    { required: true, message: "请输入密码", trigger: ["change", "blur"] },
    { min: 1, message: "密码长度最少为6位", trigger: ["change", "blur"] },
  ],
});
const redirect = ref(undefined);
const getCookie = () => {
  const username = Cookies.get("username-SD");
  const password = Cookies.get("password-SD");
  const rememberMe = Cookies.get("rememberMe-SD");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
    tenantId: "000000",
  };
};
getCookie();
const clickLogin = () => {
  proxy.$refs.loginRef.validate((valid) => {
    if (valid) {
      if (loginForm.value.rememberMe) {
        Cookies.set("username-SD", loginForm.value.username, {
          expires: 30,
        });
        Cookies.set("password-SD", encrypt(loginForm.value.password), {
          expires: 30,
        });
        Cookies.set("rememberMe-SD", loginForm.value.rememberMe, {
          expires: 30,
        });
      } else {
        Cookies.remove("username-SD");
        Cookies.remove("password-SD");
        Cookies.remove("rememberMe-SD");
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          router.push({ path: redirect.value || "/" });
          // 登录刷新
          setTimeout(() => {
            location.reload();
          }, 100);
        })
        .catch(() => {});
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  position: relative;
  background-color: white;
  display: flex;
  width: 100vw;
  height: 100vh;
  .left {
    width: 1100px;
    position: relative;
    background-color: #ff9315;
    .logo {
      position: absolute;
      top: 20px;
      left: 30px;
      z-index: 100;
      .img {
        object-fit: contain;
        width: auto;
        height: auto;
      }
    }
  }
  .right {
    width: calc(100% - 1100px);
    position: relative;
    .main {
      width: 342px;
      position: absolute;
      left: 60px;
      top: 0px;
      bottom: 0px;
      display: flex;
      align-items: center;
      .welcome {
        color: #333333;
        font-size: 14px;
      }
      .title {
        color: #333333;
        font-size: 28px;
        font-weight: bold;
        margin: 24px 0 40px 0;
      }
      .icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }
  }
  .explain {
    color: #999999;
    position: absolute;
    bottom: 20px;
    font-size: 12px;
    font-family: Segoe UI-Regular;
    left: 1160px;
    width: 342px;
    text-align: center;
  }
  .logo2 {
    position: absolute;
    left: 390px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    .img2 {
      width: 680px;
      height: 680px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep(.el-button) {
  background-color: #ff9315;
  width: 100%;
  color: #fff;
  height: 40px;
  border-radius: 0;
  border: none;
}
::v-deep(.el-form-item) {
  margin-bottom: 40px !important;
  height: 36px;
  line-height: 36px;
}
::v-deep(.el-form-item.bottom20) {
  margin-bottom: 20px !important;
}
::v-deep(.el-form-item__error) {
  line-height: 2;
}
::v-deep(.el-input) {
  border: none;
  border-bottom: 1px solid #ccc;
  height: 36px;
  line-height: 36px;
  &::placeholder {
    color: #999999;
    font-size: 12px;
  }
}
::v-deep(.el-form-item__content) {
  height: 36px;
  line-height: 36px;
}
::v-deep(.el-checkbox__label) {
  font-size: 12px;
  color: #666666;
}
::v-deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #ff9315;
}
::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner .el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  color: #ff9315;
  background-color: #ff9315;
  border-color: #ff9315;
}
::v-deep(.el-input-group__prepend) {
  background-color: #fff;
  padding: 0 10px !important;
}
::v-deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0px #fff;
  cursor: default;
  .el-input__inner {
    cursor: default !important;
  }
}
::v-deep(.el-input-group__prepend) {
  box-shadow: 0 0 0 0px #fff;
  cursor: default;
  .el-input-group__prepend {
    cursor: default !important;
  }
}
::v-deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: 0 0 0 0 #fff inset;
  border-bottom: 1px solid var(--el-color-danger);
}
::v-deep(.el-form-item.is-error .el-input-group__prepend) {
  box-shadow: 0 0 0 0 #fff inset;
  border-bottom: 1px solid var(--el-color-danger);
}
</style>
