<template>
  <div class="login-container">
    <div class="background-image"></div>
    <div class="login-box">
      <header style="width: 100%; display: flex; justify-content: flex-start">
        <h2 style="margin-left: 24px">食堂系统管理</h2>
        <!-- <ToggleTheme /> -->
      </header>
      <main lass="p_24px">
        <div class="p_24px login-form-box">
          <h2>欢迎登录</h2>
          <n-config-provider :theme="null">
            <n-form
              ref="formRef"
              :model="formData"
              :rules="rules"
            >
              <n-form-item path="phoneNumber">
                <n-input
                  v-model:value="formData.phoneNumber"
                  placeholder="请输入用户名"
                  clearable
                />
              </n-form-item>
              <n-form-item path="password">
                <n-input
                  v-model:value="formData.password"
                  placeholder="请输入密码"
                  type="password"
                  show-password-on="mousedown"
                  clearable
                />
              </n-form-item>
              <n-form-item>
                <n-button
                  :loading="loading"
                  type="primary"
                  block
                  @click="handleLogin"
                >
                  登录
                </n-button>
              </n-form-item>
            </n-form>
          </n-config-provider>
        </div>
      </main>
      <footer class="p_24px">
        Copyright © {{ dayjs().year() }}
      </footer>
    </div>
  </div>
</template>
<script setup lang="tsx">
  import api from "@/axios";
  import dayjs from "dayjs";
  import { useNotification, type FormInst } from "naive-ui";

  const notification = useNotification();
  import { useRouter } from "vue-router";

  const router = useRouter();
  import { useTestStore } from "@/stores/test";
  import { encryptStr } from "@/utils/rsaUtil";
  import { ref, reactive } from "vue";
  import { INDEX_ROUTER } from "@/config/constant";

  const userTest = useTestStore();
  const formRef = ref<FormInst>();
  const loading = ref(false);
  const formData = reactive({
    phoneNumber: "13575128214",
    password: "123456"
  });

  const rules = {
    phoneNumber: [
      { required: true, message: "请输入用户名", trigger: ["blur", "input"] }
    ],
    password: [
      { required: true, message: "请输入密码", trigger: ["blur", "input"] },
      { min: 6, message: "密码不能少于 6 位", trigger: ["blur", "input"] }
    ]
  };

  const handleLogin = async () => {
    await formRef.value?.validate();
    try {
      loading.value = true;
      userTest.testToken("4561323GSILSELDGMSLG");
      router.push('/index').then(() => {
        notification["success"]({
          content: "登录成功",
          // meta: `欢迎【${userInfo.name}】来到本系统`,
          duration: 2500,
          keepAliveOnHover: true
        });

      });
    } catch (e) {

    } finally {
      loading.value = false;
    }
    // try {
    //   loading.value = true;
    //   const encryptedText = encryptStr(formData.password);
    //   const resp = await api.post<TokenInfo>("/login/management", {
    //     phoneNumber: formData.phoneNumber,
    //     password: encryptedText,
    //   });
    //   userStore.setTokenInfo(resp.data as TokenInfo);
    //   // const userInfo = await userStore.refreshUserInfo();
    //   // startSSE();
    //   router.push(INDEX_ROUTER.path).then(() => {
    //     notification["success"]({
    //       content: "登录成功",
    //       // meta: `欢迎【${userInfo.name}】来到本系统`,
    //       duration: 2500,
    //       keepAliveOnHover: true,
    //     });
    //   });
    // } catch (e) {
    //   userStore.resetUserInfo();
    // } finally {
    //   loading.value = false;
    // }
  };
</script>

<style scoped>
  html,
  body {
    box-sizing: border-box;
  }

  .p_24px {
    padding: 24px;
  }

  .login-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* PC 端让内容靠右 */
  }

  /* 背景图片 (PC端) */
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("@/assets/background-34eb3d2b.jpg") no-repeat center center /
      cover;
    z-index: -1;
  }

  .login-box {
    box-sizing: border-box;
    width: 75%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .login-form-box {
    max-width: 768px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 12px;
  }

  /* 响应式：移动端 */
  @media (max-width: 768px) {
    .background-image {
      display: none;
      /* 手机端不显示背景图 */
    }

    .login-container {
      justify-content: center;
      /* 居中显示 */
    }

    .login-box {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
