<template>
  <div class="login-bg">
    <NuxtLink to="/" class="logo"><img src="@/assets/img/logo.svg"></NuxtLink>
    <div class="login-from">
      <div class="el-form-wrap">
        <el-form ref="loginform" :model="loginuser" label-width="0px" :rules="rules">
          <div class="text-wrapper_title flex-row">
            <h1>你好</h1>
            <h2>欢迎来到合晶芯城<a href="javascript:;" v-if="codeLoginFalg" @click="codeLoginFalg=!codeLoginFalg">使用密码登录</a><a href="javascript:;" v-if="!codeLoginFalg" @click="codeLoginFalg=!codeLoginFalg">使用验证码登录</a></h2>
          </div>
          <el-form-item prop="mobile" class="inp-wrap">
            <el-input v-model="loginuser.mobile" placeholder="请输入手机号码" :prefix-icon="User" />
          </el-form-item>
          <el-form-item prop="code" class="inp-wrap" v-if="codeLoginFalg">
            <el-input v-model="loginuser.code" placeholder="请输入验证码" :prefix-icon="ChatDotSquare" maxlength="6" />
            <a href="javascript:;" class="send-code" v-if="!sendCodeShow && codeCountdown!=0">{{ codeCountdown }}</a>
            <a href="javascript:;" class="send-code" @click="getCodeFun" v-else>{{sendBtnText}}</a>
          </el-form-item>
          <el-form-item prop="password" class="inp-wrap" v-else>
            <el-input v-model="loginuser.password" type="password" show-password data="passworedtype" placeholder="请输入密码" @keyup.enter.native="login" :prefix-icon="Lock" />
          </el-form-item>
          <el-form-item class="mt25">
            <el-button class="btn_main" :disabled="loginBtn" @click="login">
              登录
            </el-button>
          </el-form-item>
          <el-form-item class="forget-pass">
            没有账号？<NuxtLink to="register" class="nuxtLink mainColor">去注册</NuxtLink>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
definePageMeta({
  layout: "login-default",
});
let pageTitle: any = ref("HOTKING-登录");
useHead(() => ({
  title: pageTitle.value,
}));
import { Lock, User, ChatDotSquare } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus/lib/components";
import { rules } from "~/domain/Login";
import { useLogin } from "~/api/login/loginService";
import { useAll } from "~/api/pubAll/service";
const { sendSMS } = useAll();
const loginService = useLogin();
const route = useRoute();
const email = route.query.email;
const loginBtn = ref(false);
const loginBtnTimer = ref(1);
const user = useUserStore();
user.value.adminTitle = '合晶芯城-登录中心';
let codeCountdown = ref(0);
let sendCodeShow = ref(true);
let sendBtnText = ref("获取验证码");
const sendCodeFalg: any = useCookie("sendCodeFalg");
const sendCodePhone: any = useCookie("sendCodePhone");
const savePhone: any = useCookie("savePhone", {
  maxAge: 60 * 60 * 24 * 30,
});
const tokenKey: any = useCookie("tokenKey");
const userInfo: any = useCookie("userInfo");
let checkedPass = ref(false);
const codeLoginFalg = ref(true);
const signupRequestCheck = ref(false);
const loginuser = ref({
  mobile: "",
  password: "",
  code: "",
  loginType: "",
});

const loginform = ref<FormInstance | undefined>();

onMounted(() => {
  if (email) {
    loginuser.value.mobile = email as any;
  }
  if (savePhone.value) {
    loginuser.value.mobile = savePhone.value;
  }
  // if (sendCodePhone.value != 0 && sendCodePhone.value) {
  //   sendCodeShow.value = false;
  //   codeCountdown.value = sendCodeFalg.value;
  //   loginuser.value.username = sendCodePhone.value
  //   let intervalID = setInterval(function () {
  //     codeCountdown.value--;
  //     sendCodeFalg.value = codeCountdown.value;
  //     if (codeCountdown.value <= 0) {
  //       sendCodeShow.value = true;
  //       clearInterval(intervalID);
  //     }
  //   }, 1000);
  // }
});
async function getCodeFun() {
  if (!sendCodeShow.value) {
    return; 
  }
  if (!loginuser.value.mobile) {
    return ElMessage.error("请输入手机号码！");
  }
  sendCodeShow.value = false;
  sendBtnText.value = "发送中...";
  const res: any = await sendSMS(loginuser.value.mobile as any);
  if (res.httpCode == 200) {
    sendBtnText.value = "获取验证码";
    ElMessage.success("发送成功");
    codeCountdown.value = 60;
    sendCodeFalg.value = codeCountdown.value;
    sendCodePhone.value = loginuser.value.mobile;
    let intervalID = setInterval(function () {
      codeCountdown.value--;
      sendCodeFalg.value = codeCountdown.value;
      if (codeCountdown.value <= 0) {
        sendCodeShow.value = true;
        clearInterval(intervalID);
      }
    }, 1000);
  } else {
    sendCodeShow.value = true;
    sendBtnText.value = "获取验证码";
  }
}
async function login() {
  loginBtn.value = true;
  if (!loginform.value) return;
  await loginform.value.validate(async (valid: any, fields: any) => {
    if (valid) {
      let a = {
        mobile: loginuser.value.mobile,
        code: loginuser.value.code,
        loginType: "smsCode",
      };
      let b = {
        mobile: loginuser.value.mobile,
        password: loginuser.value.password,
      };
      let params;
      let res: any = null
      if (codeLoginFalg.value) {
        params = a;
        res = await loginService.codeLogin(params);
      } else {
        params = b;
        res = await loginService.login(params);
      }
      
      if (res.httpCode==200) {
        ElMessage.success("登录成功");
        savePhone.value = loginuser.value.mobile;
        let token = res.data.modifyTime.replace(/access-token:/g, '')
        user.value.isLogin = token;
        tokenKey.value = token;
        userInfo.value = res.data
        user.value.userInfo = res.data
        user.value.regOpen = false;
        if (route.query.redirect) {
          navigateTo(route.query.redirect as string);
        } else {
          navigateTo("/home/user");
        }
      }
    }
  });
  const timer = setInterval(() => {
    loginBtnTimer.value--;
    if (loginBtnTimer.value <= 0) {
      clearInterval(timer);
      loginBtn.value = false;
      loginBtnTimer.value = 1;
    }
  }, 1000);
}
</script>
<style scoped lang="scss">
.login-from {
  padding: 0;
  margin: 0;
}
/** 主按钮样式 */
.btn_main {
  width: 100% !important;
  height: 44px !important;
  box-shadow: 2px 10px 16px 0px #d0e4ff;
  border-radius: 38px 38px 38px 38px !important;
  border: unset !important;
}
:deep(.el-button.is-disabled) {
  opacity: 0.4 !important;
  color: #fff;
  background-color: $mainColor !important;
  border: unset !important;
}
</style>
