<template>
  <div class="box">
    <!-- <div class="middle"></div> -->
    <div class="left">
      <div class="loginForm">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 90px;
            margin-bottom: 60px;
          "
        >
          <img
            src="@/assets/nanchang.png"
            alt=""
            style="width: 75px; height: 75px; margin: 0 20px 0 0"
          /><span
            style="
              font-size: 50px;
              font-weight: 600;
              letter-spacing: 0px;
              color: rgba(0, 0, 0, 1);
            "
            >校园报修管理系统</span
          >
        </div>

        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <div class="title">欢迎登录校园报修管理系统</div>
          <el-divider />
          <el-form-item label="" prop="user">
            <el-input
              :prefix-icon="User"
              v-model="ruleForm.user"
              placeholder="请输入登录名"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="" prop="pass">
            <el-input
              :prefix-icon="Lock"
              show-password
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
              placeholder="请输入登录密码"
            />
          </el-form-item>
          <el-checkbox v-model="checked" class="remeberPwd el-form-item"
            >记住密码</el-checkbox
          >
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              @click="submitForm(ruleFormRef)"
              color="rgba(0, 185, 170, 1)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="rLogin">
        <img src="@/assets/login3.png" alt="" />
      </div>
    </div>
  </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 } from "element-plus";
import { JSEncrypt } from "jsencrypt"; // 加密密码
import adminApi from "@/api/admin.js";
import { useStore } from "vuex";
import axios from "axios";

const router = useRouter();
const api = ref("");
const store = useStore();
const loading = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  user: "",
  pass: "",
});
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) {
      loading.value = true;
      let data = {
        account: ruleForm.user,
        password: ruleForm.pass,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/login/Login",
        data: data,
      });

      console.log(res);
      if (res.data.code == 200) {
        if (checked.value) {
          localStorage.setItem("user", ruleForm.user);
          localStorage.setItem("pass", ruleForm.pass);
        } else {
          localStorage.removeItem("user", ruleForm.user);
          localStorage.removeItem("pass", ruleForm.user);
        }
        sessionStorage.setItem("token", res.data.data.token);
        sessionStorage.setItem("userhead", res.data.data.userhead);
        sessionStorage.setItem("schoolId", res.data.data.schoolId);
        sessionStorage.setItem("username", res.data.data.userName);
        sessionStorage.setItem("sidevarItem", 1);
        store.commit("indexUp", 1);
        store.commit("userName", ruleForm.user);
        store.commit("passWord", ruleForm.user);
          router.push({
            path: `/repairs/home`,
          });
        ElMessage({
          type: "success",
          showClose: true,
          message: "登录成功",
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: "登录失败",
          center: true,
        });
        loading.value = false;
      }
    } else {
      return false;
    }
  });
};
const Enters = (e) => {
  // console.log("按键:", e.key);
  if (e.key == "Enter") {
    submitForm(ruleFormRef.value);
  }
};
onMounted(() => {
  api.value = store.state.user.api;
  if (localStorage.getItem("pass") && localStorage.getItem("user")) {
    ruleForm.user = localStorage.getItem("user");
    ruleForm.pass = localStorage.getItem("pass");
    checked.value = true;
  }
  if (localStorage.getItem("user")) {
    ruleForm.user = localStorage.getItem("user");
  }
  document.addEventListener("keyup", Enters);
});
onUnmounted(() => {
  document.removeEventListener("keyup", Enters);
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background: url(@/assets/bg.png);
  // background-size: cover;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // .middle {
  //   width: 1180px;
  //   height: 740px;
  //   position: absolute;

  // }
  .left {
    // box-shadow: 39px 30px 58px 0px rgba(8, 53, 115, 0.55);

    // width: 1180px;
    // height: 740px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    // background-image: url(@/assets/login2.png);
    background-size: 110% 116%;
    background-position: -19px -28px;

    .loginForm {
      width: 497px;
      height: 740px;
      // background-color: #fff;
      // border-radius: 18px 0 0 18px;

      .el-form {
        width: 500px;
        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;
          // margin: 10px 0 0 0;
        }

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

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

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

            .el-input {
              height: 60px;

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

                .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: 12px;
            }
          }

          .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;
      }
    }
  }
}
</style>
