<!-- views/login/Login.vue -->
<template>
  <div class="box">
    <div class="left">
      <div class="loginForm">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            /* justify-content: center; */
            margin-top: 90px;
            margin-bottom: 20px;
          "
        >
          <span
            style="
              font-size: 20px;
              letter-spacing: 0px;
              color: rgba(0, 0, 0, 0.6);
              width: 420px;
            "
            >WELCOME</span
          >
          <span
            style="
              font-size: 45px;
              font-weight: 600;
              width: 420px;
              letter-spacing: 0px;
              color: rgba(0, 0, 0, 1);
            "
            >欢迎登录</span
          >
          <span
            style="
              font-size: 45px;
              font-weight: 600;
              width: 420px;
              letter-spacing: 0px;
              color: rgba(0, 0, 0, 1);
            "
            >校友信息管理系统</span
          >
          <!-- <img src="@/assets/svgs/vue.svg" class="logo vue" alt="Vue logo" />
          <SvgIcon name="vue" color="#000" size="22"></SvgIcon> -->
        </div>

        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="user">
            <el-input
              v-model="ruleForm.user"
              placeholder="请输入登录名"
              autocomplete="off"
            >
              <template #prefix>
                <el-icon class="el-input__icon"
                  ><img
                    style="width: 24px; height: 24px"
                    src="@/assets/img/login_user.png"
                    alt=""
                /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              show-password
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
              placeholder="请输入登录密码"
            >
              <template #prefix>
                <el-icon class="el-input__icon"
                  ><img
                    style="width: 24px; height: 24px"
                    src="@/assets/img/login_pass.png"
                    alt=""
                /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click="submitForm(ruleFormRef)"
              color="#0095ff"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="rLogin"></div>
    </div>
  </div>
  <div class="login_logo"></div>
  <div class="login_txt"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";

import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";
import { login } from "@/api/login";

const router = useRouter();
const store = useCounterStore();
const { roleList } = storeToRefs(store);

const loginFlag = ref(true);

const loading = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  user: "superAdmin",
  pass: "Ncjti32003",
  role: "",
});
const checked = ref(false); // 记住密码

const rules = reactive({
  user: [{ required: true, message: "请填写用户名", trigger: "blur" }],
  pass: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let data = {
        account: ruleForm.user,
        password: ruleForm.pass,
      };
      const res = await login(data); // 使用封装的 get 方法
      console.log(res, "登录获取数据");
      if (res.code == 200) {
        sessionStorage.setItem("token", res.data.token);
        sessionStorage.setItem("userName", res.data.userName);
        router.push({
          path: `/permission`,
        });
        // 添加路由后跳转到第一个菜单项
        // store.ROLEAdd().then(() => {
        //   router.push({
        //     path: `/home`,
        //   });
        // });
        ElMessage({
          type: "success",
          showClose: true,
          message: res.message,
          center: true,
        });
        loading.value = false;
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.message,
          center: true,
        });
        loading.value = false;
      }
    } else {
      return false;
    }
  });
};

const Enters = (e) => {
  if (e.key == "Enter") {
    submitForm(ruleFormRef.value);
  }
};

onMounted(() => {
  document.addEventListener("keyup", Enters);
});
onUnmounted(() => {
  document.removeEventListener("keyup", Enters);
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-image: url("@/assets/img/login_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* 等比缩放铺满容器，超出部分裁剪，仍不变形 */

  .left {
    border-radius: 18px;
    display: flex;
    align-items: center;
    background-size: 110% 116%;
    background-position: -19px -28px;

    .loginForm {
      width: 557px;
      height: 675px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 30px;
      // border-top-left-radius:  30px;
      // border-bottom-left-radius:  30px;

      .el-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 35px 0;
        border-radius: 16px;
        background: rgba(255, 255, 255, 1);

        .title {
          color: rgba(0, 185, 170, 1);
          font-size: 24px;
        }

        .el-divider {
          width: 85%;
          margin: 20px 0 30px;
        }

        .el-form-item {
          width: 420px;
          height: 60px;
          margin-bottom: 35px;

          :deep(.el-form-item__content) {
            margin-left: 0 !important;

            .el-input {
              height: 60px;

              .el-input__wrapper {
                border-radius: 30px;

                .el-input__prefix {
                  margin: 0 10px 0 12px;
                }
              }

              .el-icon {
                width: 24px;
                height: 24px;

                svg {
                  width: 24px;
                  height: 24px;
                }
              }

              .el-input__inner {
                height: 100%;
                font-size: 24px;
              }
            }

            .el-form-item__error {
              font-size: 16px;
            }

            .el-button {
              width: 100%;
              height: 60px;
              font-size: 24px;
              border-radius: 30px;
            }
          }

          .el-button--primary {
            width: 380px;
          }
        }

        .remeberPwd {
          height: 30px;
          margin-bottom: 30px;

          :deep(.el-checkbox__input) {
            .el-checkbox__inner {
              width: 18px;
              height: 18px;
            }

            .el-checkbox__inner::after {
              width: 6px;
              height: 12px;
              top: -1px;
            }
          }

          :deep(.el-checkbox__label) {
            font-size: 18px;
          }
        }
      }
    }

    .rLogin {
      width: 683px;
      height: 740px;
      border-radius: 0 18px 18px 0;
      display: flex;
      display: none;

      img {
        width: 683px;
        align-self: flex-end;
      }
    }
  }
}
.login_logo {
  position: absolute;
  top: 40px;
  left: 60px;
  width: 100%;
  height: 80px;
  background-image: url("@/assets/img/login_logo.png");
  background-repeat: no-repeat; /* 禁止平铺，只显示一张 */
  background-position: left center; /* 水平+垂直居中（垂直居中可省略，因高度已适配） */
  background-size: auto 100%; /* 核心：高度铺满容器，宽度按原始宽高比自动计算（绝对不变形） */
}
.login_txt {
  position: absolute;
  top: 150px;
  // left: 40px;
  width: 100%;
  height: 75px;
  background-image: url("@/assets/img/login_txt.png");
  background-repeat: no-repeat; /* 禁止平铺，只显示一张 */
  background-position: 12% center; /* 水平+垂直居中（垂直居中可省略，因高度已适配） */
  background-size: auto 100%; /* 核心：高度铺满容器，宽度按原始宽高比自动计算（绝对不变形） */
}
</style>
