<template>
  <div class="login">
    <div class="left">
      <div class="logo">
        <img src="/login/img_logo1.png" class="img" alt="" />
      </div>
      <div class="bjImg"></div>
    </div>
    <div class="right">
      <div class="main">
        <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 class="explain">Copyright© 福清市胜德体育塑胶制品有限公司 版权所有</div>
    </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 {
  background-color: white;
  display: flex;
  width: 100vw;
  height: 100vh;
  .left {
    width: 40%;
    position: relative;
    .bjImg {
      background-image: url("/login/img_bj1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 99;
      width: 100%;
      height: 100%;
    }
    .logo {
      position: absolute;
      top: 20px;
      left: 30px;
      z-index: 100;
      .img {
        object-fit: contain;
        width: auto;
        height: auto;
      }
    }
  }
  .right {
    position: relative;
    width: 60%;
    padding-bottom: 20px;
    .main {
      width: 320px;
      margin: 24vh 0 0 12vw;
      .welcome {
        color: #333333;
        font-size: 14px;
      }
      .title {
        color: #333333;
        font-size: 31px;
        font-weight: bold;
        margin: 10px 0 40px 0;
      }
      .icon {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }
    .explain {
      color: #999999;
      position: absolute;
      left: 10vw;
      bottom: 20px;
    }
  }
}
::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>
