<template>
  <div id="login">
    <form>
      <div class="box" @submit.prevent>
        <h2>欢迎登录青橙校园管理端</h2>
        <div class="input-box">

          <input type="text" placeholder="账户" v-model="userAccount"/>
        </div>
        <div class="input-box">

          <input class="password" :type="type" placeholder="密码" v-model="userPassword"/>
<!--          <div @click="showPwd">-->
<!--            <img src="../assets/login/hidePassword.png" v-show="!showPassword" alt=""/>-->
<!--            <img src="../assets/login/showPassword.png" v-show="showPassword" alt=""/>-->
<!--          </div>-->
        </div>
        <div class="error-messages" v-if="userPassword && passwordErrors.length">
          <!--        <div class="error-messages" v-if="false">-->
          <div v-for="error in passwordErrors" :key="error" class="error-message">
            {{ error }}
          </div>
        </div>
        <div class="btn-box">
          <div>
            <button @click="onLogin" type="button" :disabled="!isFormValid">登录</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>


<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref, computed, watch} from 'vue'
import {userStore} from "../store/userStore.ts";
import myAxios from "../api/myAxios";
import {message} from "ant-design-vue";

const store = userStore()
const router = useRouter()

//默认闭眼图标
// let showPassword = ref(false)
//登录密码隐藏
let type = ref('password')
const userAccount = ref('');
const userPassword = ref('');

/*
* 验证
* */

const passwordErrors = ref<string[]>([]);

const validatePassword = () => {
  const errors: string[] = [];
  const password = userPassword.value;

  if (password.length < 6 || password.length > 11) {
    errors.push('密码长度需为6到11位');
  }
  if (!/[A-Z]/.test(password)) {
    errors.push('必须包含大写字母');
  }
  if (!/[a-z]/.test(password)) {
    errors.push('必须包含小写字母');
  }
  if (!/[0-9]/.test(password)) {
    errors.push('必须至少包含一个数字');
  }

  passwordErrors.value = errors;
};
// const validatePassword = () => {
//   passwordErrors.value = []; // 直接设置为空数组
//   // 注释原有验证逻辑
// };

const isFormValid = computed(() => {
  return userAccount.value.trim() !== '' &&
      userPassword.value !== '' &&
      passwordErrors.value.length === 0;
});

// const isFormValid = computed(() => {
//   return userAccount.value.trim() !== '' &&
//       userPassword.value !== ''
//   // && passwordErrors.value.length === 0
// });

watch(userPassword, validatePassword);

/**
 * 登录
 */
const onLogin = async () => {
  try {
    const res: any = await myAxios.post(
        "/userInfo/login",
        {
          userAccount: userAccount.value,
          userPassword: userPassword.value
        },
        {
          headers: {
            'Content-Type': 'application/json',
            'AfterScript': 'required-script'
          }
        }
    );

    console.log(res)
    if (res.code === 1 && res?.data) {
      localStorage.setItem('token', res.data);

      myAxios.defaults.headers.common['Authorization'] = res.data;
      await store.getLoginUser();
      if (store.loginUser) {
        router.push('/index');
        message.success('登录成功');
      } else {
        message.error('获取用户信息失败');
      }
    } else {
      message.error(`登录失败：${res.message}`);
    }
  } catch (error) {
    console.error('Login error:', error);
    message.error('登录失败，请稍后再试');
  }
}
/**
 * 显示密码
 */
// const showPwd = () => {
//   showPassword.value = !showPassword.value
//   if (showPassword.value == false) {
//     type.value = 'password'
//   } else {
//     type.value = 'text'
//   }
// }
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#login::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/Login.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
  z-index: -1;
}

.box {
  z-index:1;
  width: 450px;
  height: 350px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  background: rgba(50, 50, 50, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background-image: url('../assets/Login.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.7;
}

.box > h2 {
  color: #fff;
  margin-bottom: 30px;
}

.box .input-box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.box .input-box input {
  letter-spacing: 1px;
  font-size: 14px;
  box-sizing: border-box;
  width: 250px;
  height: 35px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.7);
  outline: none;
  padding: 0 12px;
  transition: 0.2s;
}

.box .input-box .eye {
  float: right;
  position: relative;
  bottom: 32px;
  right: -210px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.box .input-box img {
  float: right;
  position: relative;
  bottom: 32px;
  right: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.box .input-box input:focus {
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.box .btn-box {
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.box .btn-box > a {
  outline: none;
  display: block;
  width: 250px;
  text-align: end;
  text-decoration: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.box .btn-box > a:hover {
  color: rgba(255, 255, 255, 1);
}

.box .btn-box > div {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .btn-box > div > button {
  outline: none;
  margin-top: 10px;
  display: block;
  font-size: 14px;
  border-radius: 5px;
  transition: 0.2s;
}

.box .btn-box > div > button:nth-of-type(1) {
  width: 250px;
  height: 35px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(217, 224, 231, 0.5);
}

.box .btn-box > div > button:nth-of-type(2) {
  width: 120px;
  height: 35px;
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(64, 149, 229, 0.5);
}

.box .btn-box > div > button:hover {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgb(249, 249, 208);
  color: #000;
}

@media (max-width: 1440px) {
  .container {
    width: 28%;
  }
}

@media (max-width: 1366px) {
  .container {
    width: 30%;
  }
}

@media (max-width: 1280px) {
  .container {
    width: 33%;
  }

  .agileheader h1 {
    font-size: 41px;
  }

  .container h2 {
    font-size: 27px;
  }
}

@media (max-width: 1080px) {
  .container {
    width: 49%;
  }
}


.error-messages {
  width: 250px;
  margin: -8px 0 10px 0;
}

.error-message {
  color: #ff0000;
  font-size: 12px;
  line-height: 1.5;
}

/* 禁用按钮样式 */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: rgba(217, 224, 231, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

button:disabled:hover {
  background: rgba(217, 224, 231, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

</style>
