<template>
  <div class="HomeView">
    <div class="login">
      <!-- 登录切换 -->
      <div class="Switch">
        <div class="Switch-content" @click="fuSWitch">
          <img
            v-if="refSwitch"
            class="Switchimg"
            src="../assets/switchEmail.png"
            alt=""
          />
          <img v-if="!refSwitch" class="Switchimg" src="../assets/switchvx.png" alt="" />
        </div>
      </div>
      <!-- 标题 -->
      <div v-if="!refSwitch" class="container">
        <div class="title">欢迎登录</div>
        <div class="striping"></div>
        <div class="input-Email">
          <img class="Emailimg" src="../assets/Email.png" alt="" />
          <div class="vertical"></div>
          <el-input
            type="Email"
            size="large"
            class="input-text"
            v-model="refEmail"
            placeholder="请输入邮箱或用户名"
            @keydown.enter.native="EmailLogin"
          />
        </div>
        <div class="input-Password">
          <img class="Passwordimg" src="../assets/Password.png" alt="" />
          <div class="vertical"></div>
          <el-input
            type="Password"
            size="large"
            class="input-text"
            v-model="refpassword"
            show-password
            placeholder="请输入密码"
            @keydown.enter.native="EmailLogin"
          />
        </div>
        <div class="login-btn" @click="EmailLogin">登录</div>
      </div>
      <!-- 微信登录 -->
      <div v-if="refSwitch" class="container">
        <div class="title">微信小程序登录</div>
        <div class="striping"></div>
        <img class="qrcode" :src="Qrcode.qrcode" alt="" />
        <div class="qrcode-text">使用微信小程序扫描二维码登录</div>
      </div>
    </div>
    <div class="register" v-if="!refSwitch">
    <div class="register-content">
      <div class="register-text">还没有账号？</div>
      <div class="register-btn" @click="register">注册</div>
    </div>
    <div class="register-content">
      <div class="register-text">已有账号？</div>
      <div class="register-btn" @click="forgetPassword">忘记密码？</div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { getVxQrcode, getScanResult, login, getOtp} from "@/api/account"; // 导入登录接口
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { tokenStore, UserStore } from '@/stores/notice'
import { setStorage , getStorage } from '@/utils/storage.js';
import { goEasyLink } from '@/utils/goeasy.js';
import { ElLoading } from "element-plus";
const router = useRouter();
const refname = ref("");
const refEmail = ref(""); // 邮箱
const refpassword = ref(""); // 密码
const refSwitch = ref(false); // 登录切换/true:微信登录/false:邮箱登录
const Qrcode = ref(""); // 二维码
const token = tokenStore()
const user = UserStore()
const info  = ref({})
// 登录
function EmailLogin() {
  // // 邮箱验证
  // const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  // if (!emailRegex.test(refEmail.value)) {
  //   ElMessage.error("请输入有效的邮箱地址");
  //   return;
  // }
  // 密码验证
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,16}$/;
  if (!passwordRegex.test(refpassword.value)) {
    ElMessage.error("密码必须包含大小写字母和数字，长度6-16位");
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: "登录中.....",
    background: "rgba(0, 0, 0, 0.7)",
  });

  login({
    userNameOrEmail: refEmail.value,
    // email: refEmail.value,
    password: refpassword.value,
  }).then((res) => {
    token.setToken(res.token);
    setStorage("token", res.token);
    setStorage("email", refEmail.value);
    setStorage("password", refpassword.value);
    user.setUser(res);
    setStorage("user", res);
    info.value = res
    getOtp().then((res) => {
      const data = {
        id: String(info.value.id),
        avatar: info.value.headerIcon,
        nickname: info.value.nickName,
        key: res,
      }
      goEasyLink(data).then(() => {
      loading.close();
      router.push("/nav");
    }).catch((err) => {
      ElMessage.error("登录失败:"+err.content);
      loading.close();
    });
    }).catch((err) => {
      loading.close();
    });
  }).catch((err) => {
    loading.close();
  });
}
// 登录切换
let vxloginstatus;
function fuSWitch() {
  refSwitch.value = !refSwitch.value;
  if (refSwitch.value) {
    vxloginstatus = setInterval(checkLogin, 2000);
  } else {
    console.log("邮箱登录");
    clearInterval(vxloginstatus);
  }
}
function register() {
  router.push("/emailRegistration");
}
function forgetPassword() {
  router.push("/forgetPassword");
}
// 获取二维码
function fetchQrcode() {
  getVxQrcode().then((res) => {
    Qrcode.value = res;
  });
}
//查询微信扫码是否成功
function checkLogin() {
  getScanResult(Qrcode.value.uuid).then((res) => {
    if (res.token) {
      token.setToken(res.token);
      setStorage("token", res.token);
      user.setUser(res);
      setStorage("user", res);
      pollstop();
      router.push("/nav");
    }
  });
}
function pollstop() {
  clearInterval(vxloginstatus);
}
// 轮询查询登录状态
let pollInterval;

watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});

onMounted(() => {
  refEmail.value = getStorage("email");
  refpassword.value = getStorage("password");
  // 初始化获取二维码
  fetchQrcode();
  // 设置每两分钟轮询一次
  pollInterval = setInterval(fetchQrcode, 90000);
});

onUnmounted(() => {
  // 清除轮询
  clearInterval(pollInterval);
  clearInterval(vxloginstatus);
});
</script>

<style scoped>
.HomeView {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/bg.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.login {
  width: 627px;
  height: 514px;
  background-image: linear-gradient(180deg, #dbf0f1, #ffffff);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #4fcacd;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register {
  width: 627px;
  height: 40px;
  display: flex;
  justify-content:space-between;
}
.register-text {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-right: 10px;
}
.register-content{
  display: flex;
}
.register-btn {
  font-size: 18px;
  color: #5fdbde;
  font-weight: bold;
  margin-right: 10px;
  cursor: pointer;
}

.Switch {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: end;
}
.Switch-content {
  width: 110px;
  height: 110px;
  margin-top: 7px;
  margin-right: 8px;
}
.Switchimg {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 36px;
  color: #333333;
  font-weight: bold;
  margin-top: -31px;
}
.striping {
  width: 68px;
  height: 3px;
  background-color: #0aaeab;
  margin-top: 10px;
}
.qrcode {
  width: 200px;
  height: 200px;
  margin-top: 50px;
}
.qrcode-text {
  color: #333333;
  font-size: 18px;
  margin-top: 40px;
}
.input-Email {
  width: 488px;
  height: 71px;
  border-radius: 4px;
  background-color: #f4f4f4;
  border: 1px solid #e4e4e4;
  margin-top: 43px;
  display: flex;
  align-items: center;
}
.Emailimg {
  width: 28.7px;
  height: 22.2px;
  margin-left: 25px;
  margin-right: 25px;
}
.vertical {
  width: 1px;
  height: 38px;
  background-color: #d9d9d9;
  margin-right: 25px;
}
.input-text {
  width: 360px;
  height: 38px;
  border: none;
  background-color: #0aaeab00;
  font-size: 20px;
  color: #999999;
}
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  background-color: transparent !important;
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}
.input-text:focus {
  outline: none; /* 移除默认蓝色边框 */
}
.input-Password {
  width: 488px;
  height: 71px;
  border-radius: 4px;
  background-color: #f4f4f4;
  border: 1px solid #e4e4e4;
  margin-top: 33px;
  display: flex;
  align-items: center;
}
.Passwordimg {
  width: 26.4px;
  height: 29.3px;
  margin-left: 25px;
  margin-right: 25px;
}
.login-btn {
  width: 487px;
  height: 70px;
  border-radius: 4px;
  background-image: linear-gradient(0deg, #4fcacd, #5fdbde);
  margin-top: 38px;
  color: #ffffff;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
  font-weight: Medium;
  box-shadow: 0px 5px 15px rgba(15, 101, 98, 0.43);
}
</style>
