<template>
  <div class="box">
    <!-- <div class="middle"></div> -->
    <div class="left">
      <div class="rLogin">
        <div class="titles">
          <div class="title">欢迎登陆</div>
          <div class="title">靖安乡村民宿民宿端</div>
        </div>
      </div>
      <div class="loginForm">
        <div
          style="
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            margin-top: 104px;
            margin-bottom: 80px;
          "
        >
          <!-- <img
            src="@/assets/nanchang.png"
            alt=""
            style="width: 56px; height: 56px"
          /> -->
          <span
            style="
              font-size: 50px;
              font-weight: 600;
              letter-spacing: 2px;
              color: rgba(0, 0, 0, 1);
            "
            >靖安乡村民宿</span
          >
          <span
            style="
              font-size: 80px;
              font-weight: 600;
              letter-spacing: 2px;
              color: rgba(9, 101, 98, 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"
              color="rgba(9, 101, 98, 1)"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="policeNum">
        <div class="leftContent">
          <span></span>
        </div>
        <div class="rigthContent">
          <span
            ><a
              target="_blank"
              href="https://beian.mps.gov.cn/#/query/webSearch"
            >
              赣公网安备36092502000028号</a
            >
          </span>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>
            <a
              target="_blank"
              href="https://beian.miit.gov.cn/#/Integrated/index"
            >
              赣ICP备2023009877号-2</a
            >
          </span>
        </div>
      </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) => {
  // router.push({
  //   path: `/seniorCelebrity/order`,
  // });
  // sessionStorage.setItem("sidevarItem", 1);
  // store.commit("indexUp", 1);
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;

      let data = {
        adminName: ruleForm.user,
        password: ruleForm.pass,
      };
      let res;
      try {
        res = await store.dispatch("login", data);
      } catch (e) {
        console.log(e);
      }
      console.log(res);
      // sessionStorage.setItem("name", ruleForm.pass);
      if (res == "success") {
        router.push({ path: `/seniorCelebrity/order` });
        store.commit("indexUp", "/seniorCelebrity/order");
        sessionStorage.setItem("sidevarItem", "/seniorCelebrity/order");
        ElMessage({
          type: "success",
          showClose: true,
          message: "登录成功",
          center: true,
        });
      } else {
        loading.value = false;
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.data.message,
          center: true,
        });
      }
    } 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: 100%;
    height: 100%;
    border-radius: 18px;
    display: flex;
    align-items: center;
    // flex-direction: row-reverse;
    // background-image: url(@/assets/login2.png);
    background-size: 110% 116%;
    // background-position: -19px -28px;
    .loginForm {
      min-width: 600px;
      flex: 1;
      height: 740px;
      // background-color: #fff;
      border-radius: 18px 0 0 18px;

      .el-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .el-form-item {
          width: 420px;
          height: 60px;
          margin-bottom: 30px;

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

          .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: 796px;
      height: 100%;
      // border-radius: 0 18px 18px 0;
      background-image: url("@/assets/login.png");
      background-repeat: no-repeat;
      background-position: -150px 0;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      .titles {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .title:nth-child(1) {
        font-size: 80px;
        font-weight: 600;
        letter-spacing: 10px;
        margin-bottom: 20px;
      }
      .title:nth-child(2) {
        font-size: 40px;
        font-weight: 600;
        letter-spacing: 10px;
      }
    }
    .policeNum {
      position: absolute;
      bottom: 10px;
      width: 100vw;
      display: flex;
      .leftContent {
        span {
          display: block;
          width: 796px;
        }
      }
      .rigthContent {
        min-width: 600px;
        width: calc(100vw - 796px);
        text-align: center;
        font-size: 12px;
        span:not(:nth-child(2)) {
          a {
            color: #000;
          }
          cursor: pointer;
        }
        span:not(:nth-child(2)):hover {
          a {
            color: #539391;
          }
        }
      }
    }
  }
}
</style>
