<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: 104px;
            margin-bottom: 121px;
          "
        >
          <img
            src="@/assets/nanchang.png"
            alt=""
            style="width: 56px; height: 56px"
          /><span
            style="
              font-size: 38px;
              font-weight: 500;
              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"
        >
          <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)"
              >登录</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 publicKey =
      //   "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDMOcPB06u5yKyQsPjfVWiWgbEIrd14kiXNNihciaVKb6HnkQvq7zpQuZ80WEX94spnUMI3iOAl/GmIvHrpGwcbB4hJbznm+PajiwnUSPuCCXA68YJF640cJKb/8KeM7WVz69OFkIEPHhVxOy4FFF5QWe/kt6zOZ19HmE+ak+5x/QIDAQAB";
      // let encryptor = new JSEncrypt(); // 新建JSEncrypt对象
      // encryptor.setPublicKey(publicKey); // 设置公钥
      // let rsaPassWord = encryptor.encrypt(ruleForm.pass); // 对密码进行加密
      // console.log(rsaPassWord);
      // let logincontent = {
      //   number: ruleForm.user,
      //   password: ruleForm.pass,
      // };
      let data = new FormData();
      data.set("number", ruleForm.user);
      data.set("password", ruleForm.pass); //前面的key记得对应！
      // let res = await adminApi.adminLogin(data);
      let res = await axios({
        method: "post",
        url: api.value + "/carBook/adminlogin.action",
        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.pass);
        }
        sessionStorage.setItem("token", res.data.access_token);
        sessionStorage.setItem("username", res.data.data[0].number);
        sessionStorage.setItem("sidevarItem", 9);
        store.commit("indexUp", 9);
        store.commit("userName", res.data.data[0].number);
        store.commit("passWord", res.data.data[0].password);
        router.push({
          path: `/schoolBus/busquery`,
        });
        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/login.png);
  background-size: cover;
  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;
        .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;
      img {
        width: 683px;
        align-self: flex-end;
      }
    }
  }
}
</style>
