<template>
  <div class="login-bg">
    <div class="flex items-center md:justify-end justify-center mt-[17px] mr-[24px]">
      <DigitalWatch class="" />
    </div>
    <SvgComponent :content="titleSvg" class="md:h-[156px] mt-[95px] w-full" />
    <div class="login-form-wrapper md:w-[622px] md:h-[419px] aspect-[1.48/1] w-full mx-auto mt-[87px]">
      <form class="w-full h-full flex flex-col items-center md:pt-[126px] pt-[21.5rem]" @submit="handleSubmit">
        <div class="form-item px-[71px] w-full">
          <div class="input-bg w-full md:h-[48px] h-[6rem] flex items-center px-[18px]">
            <SvgIcon name="avatar" class="text-[#00D5FF] mr-[13px] w-[3.5rem]! h-[3.5rem]! md:w-[16px]! md:h-[16px]!" />
            <input
              type="text"
              v-model="formData.username"
              placeholder="请输入账号"
              class="flex-1 md:h-[48px] h-[6rem]  text-white placeholder:text-[#666666] focus:outline-none focus:border-[#29F1FA] bg-transparent text-[3rem] md:text-[100%]" />
          </div>
          <div class="input-bg w-full md:h-[48px] h-[6rem] flex items-center px-[18px] md:mt-[20px] mt-[5rem]">
            <SvgIcon :name="showPassword ? 'eye' : 'password'" class="text-[#00D5FF] mr-[13px] cursor-pointer w-[3.5rem]! h-[3.5rem]! md:w-[16px]! md:h-[16px]!" @click="togglePasswordVisibility" />
            <input
              :type="showPassword ? 'text' : 'password'"
              v-model="formData.password"
              placeholder="请输入密码"
              class="flex-1 md:h-[48px] h-[6rem]  text-white placeholder:text-[#666666] focus:outline-none focus:border-[#29F1FA] bg-transparent text-[3rem] md:text-[100%]" />
          </div>
          <button type="submit" class="w-full md:h-[48px] h-[6rem] bg-[#2A8EFE] text-[#fff] md:text-[18px] text-[3rem] font-700 border-submit md:mt-[48px] mt-[6rem]">登录</button>
          <p class="text-[#657295] mt-[10px] text-center md:text-[14px] text-[2.5rem]">如忘记账号密码，请联系管理员：18845000222</p>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import SvgComponent from "@/components/SvgComponent.vue";
  import SvgIcon from "@/components/svg-icon/SvgIcon.vue";
  import { postLoginUrl } from "@/api/fetchUrl";
  import { useRouter } from "vue-router";
  import { postRequest } from "@/api/customFetch";
  import { useUserStore } from "@/store/user";
  import DigitalWatch from "@/components/watch/DigitalWatch.vue";
import { usePlatformType } from "@/utils/device";


  const router = useRouter();
  const userStore = useUserStore();

  const titleSvg = ref("");
  const getTitleSvg = async () => {
    const { default: svg } = await import("/src/assets/svg-img/login-title.svg?raw");
    titleSvg.value = svg;
  };

  // 添加密码显示状态控制
  const showPassword = ref(false);
  const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value;
  };

  // 添加表单数据
  const formData = ref({
    username: "",
    password: "",
  });

  // 处理表单提交
  const handleSubmit = async (e: Event) => {
    e.preventDefault();

    // 表单验证
    if (!formData.value.username || !formData.value.password) {
      // 这里可以添加你的提示组件
      alert("请输入账号和密码");
      return;
    }

    try {
      postRequest(
        postLoginUrl(),
        { account: formData.value.username, password: formData.value.password },
        { headers: { "content-type": "application/json; charset=utf-8" } },
      ).then((resp) => {
        if (resp.code === 200) {
          if(resp.result == 401){
            alert("账号或密码错误");
          }else{
            // 登录成功，存储token
            const { accessToken, refreshToken } = resp.result as { refreshToken: string; accessToken: string };
            userStore.setAccessToken(accessToken);
            userStore.setRefreshToken(refreshToken);
            const {isMobile} = usePlatformType()
            // 跳转到首页
            if(isMobile){
              router.push('/app')
            }else{
              router.push("/");
            }
          }
        } else {
          // 登录失败提示          
          alert(resp.message || "登录失败");
        }
      });
    } catch (error) {
      console.error("登录请求失败:", error);
      alert("登录失败，请稍后重试");
    }
  };

  onBeforeMount(() => {
    getTitleSvg();
    const { isWechat } = usePlatformType();
    if (isWechat) {
      formData.value.username = "superadmin"
      formData.value.password = "123456"
      handleSubmit(new Event("submit"));
    }
  });
</script>

<style lang="scss" scoped>
  .login-bg {
    width: 100vw;
    height: 100vh;
    background-image: url("/images/login-bg.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: auto;
  }

  .login-form-wrapper {
    background-image: url("@/assets/svg-img/login-border.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .input-bg {
    background-image: url("@/assets/svg-img/login-input.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .border-submit {
    clip-path: polygon(0 15px, 10px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
  }
</style>
