<script setup lang="ts">
import { loginData, userinfo } from "@/store/store.js";
import YlLoginData from "@/pages/login/login-data.vue";
import YlResetPwd from "@/pages/login/reset-pwd.vue";
import { CaretRight } from "@element-plus/icons-vue";
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import jsEncrypt from "jsencrypt";
import { formatError } from "@/utils/utils.ts";
import { getCookie } from "@/utils/cookie.ts";
const loading = ref(false);
const { runAsync: getPubKey } = useRequest(
  () => myRequest(`/api/user/login?username=${loginData.username}`),
  { manual: true },
);
const { runAsync: login } = useRequest(
  (enPass: string) =>
    myRequest(
      `/api/user/login?username=${loginData.username}&password=${encodeURIComponent(enPass)}&auto=${loginData.autoLogin}`,
      "",
      {},
      "post",
    ),
  {
    manual: true,
  },
);
const toLogin = () => {
  if (!loginData.username) {
    ElMessage.error("获取公钥失败,请填写用户名");
    return;
  }
  loading.value = true;
  getPubKey()
    .then((res) => {
      if (res.code === 200) {
        const encrypt = new jsEncrypt();
        encrypt.setPublicKey(res.data as string);
        const enPwd = encrypt.encrypt(loginData.password);
        login(enPwd as string)
          .then((res) => {
            loading.value = false;
            if (res.code === 200) {
              userinfo.login = true;
              userinfo.token = res.data as string;
            }
            setInterval(
              () => {
                !getCookie("token") && window.location.reload();
              },
              1000 * 60 * 60,
            );
          })
          .catch((err) => {
            loading.value = false;
            ElMessage.error(`登录失败：${formatError(err)}`);
          });
      }
    })
    .catch((err) => {
      loading.value = false;
      ElMessage.error(`获取公钥失败：${formatError(err)}`);
    });
};
</script>

<template>
  <div style="position: absolute; width: 100%; height: 100%">
    <div class="title">用户登录</div>
    <yl-login-data />
    <div class="forget">
      <el-checkbox
        v-model="loginData.autoLogin"
        label="自动登录"
        size="large"
      ></el-checkbox>
      <yl-reset-pwd />
    </div>
    <div class="action-div">
      <el-button
        link
        size="large"
        @click="loginData.login = false"
        :disabled="loading"
        >转到注册<el-icon><CaretRight /></el-icon
      ></el-button>
      <el-button
        type="primary"
        size="large"
        @click="toLogin"
        :disabled="loading"
        >{{ loading ? "登录中。。。" : "登录" }}</el-button
      >
    </div>
  </div>
</template>

<style scoped>
.title {
  position: relative;
  width: 100%;
  margin: 2rem auto;
  text-align: center;
  font-size: 2rem;
  background: linear-gradient(180deg, #ff69b4, #ff69b450);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.forget {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 2rem;
  height: 3rem;
  line-height: 3rem;
}
.action-div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 80%;
  margin: 0 auto;
  height: calc(100% - 27rem);
}
:global(.el-button.is-link) {
  color: #409eff;
}
</style>
