<template>
  <div class="login-out-div">
    <div class="login-image">
      <div class="image-content"></div>
      <div class="source">
        {{ VITE_GLOB_APP_TECHINICAL_SUPPORT }}
      </div>
    </div>
    <div class="login-form">
      <div class="content" :style="{transform: `scale(${ratio})`}">
        <div class="title">
          <div class="title-span">用户登录</div>
          <div class="title-line"></div>
        </div>
        <div class="sub-title">WELCOME TO LOG IN</div>
        <a-form
          class="login-use-form"
          :model="formData"
          :rules="getFormRules"
          ref="formRef"
          @keypress.enter="handleLogin"
        >
          <FormItem name="account">
            <a-input
              size="large"
              v-model:value="formData.account"
              placeholder="请输入账户"
              class=""
              style="height: 61.8px;"
            >
              <template #prefix>
                <div class="icon-div">
                  <div class="account-icon"></div>
                </div>
              </template>
            </a-input>
          </FormItem>
          <FormItem name="password">
            <InputPassword
              size="large"
              visibilityToggle
              v-model:value="formData.password"
              placeholder="请输入密码"
              style="height: 61.8px;"
            >
              <template #prefix>
                <div class="icon-div">
                  <div class="password-icon"></div>
                </div>
              </template>
            </InputPassword>
          </FormItem>
          <div class="control-password">
            <div><a-checkbox v-model:checked="rememberMe">记住密码</a-checkbox></div>
            <div style="cursor: pointer;">忘记密码</div>
          </div>
          <a-form-item>
            <a-button
              size="large"
              block
              @click="handleLogin"
              :loading="loading || loginButtonLoadingStore.getButtonLoading"
              class="login-button"
            >
              立即登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, reactive } from 'vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useI18n } from '@/hooks/web/useI18n';
  import { getAppEnvConfig } from '@/utils/env';
  import {  useFormRules, useFormValid } from './useLogin';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useUserStore } from '@/store/modules/user';
  import { Form, Input } from 'ant-design-vue';
  import { useLoginButtonLoadingStore } from '@/store/modules/loginButtonLoading'

const loginButtonLoadingStore = useLoginButtonLoadingStore()

  const { VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT } = getAppEnvConfig();
  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });
  const { prefixCls } = useDesign('login');
  const { t } = useI18n();

  const FormItem = Form.Item;
  const InputPassword = Input.Password;
  const formData = reactive({
    account: '',
    password: '',
  });
  const loading = ref(false);
  const formRef = ref();
  const rememberMe = ref(false);
  const { getFormRules } = useFormRules();
  const { notification, createErrorModal } = useMessage();
  const userStore = useUserStore();
  const { validForm } = useFormValid(formRef);

  // 分辨率
  const defaultWidth = 1920;
  const ratio = ref(1)
  const updateWindowSize = () => {
    let widthRatio = window.innerWidth / defaultWidth;
    console.log(window.innerWidth,defaultWidth, widthRatio,)
    ratio.value = widthRatio >=1? widthRatio : 1
  };

  onMounted(() => {
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize(); // 初始化视口尺寸
  });

  onUnmounted(() => {
    window.removeEventListener('resize', updateWindowSize);
  });

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      const userInfo = await userStore.login({
        password: data.password,
        account: data.account,
        mode: 'none', //不要默认的错误提示
      });
      console.log(userInfo);
      localStorage.setItem('fireUserLoginName', userInfo.name);
      if (userInfo) {
        localStorage.setItem('userid', userInfo.id); 
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
          duration: 3,
        });
      }
    } catch (error) {
      createErrorModal({
        title: t('sys.api.errorTip'),
        content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
        getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      });
    } finally {
      loading.value = false;
    }
  }
</script>
<style lang="less">
.login-out-div{
  display: flex;
  height: 100vh;
  position: relative;
  user-select: none;
  .login-image{
    height: 100%;
    position: relative;
    .image-content{
      width: calc(1292 / 1920 * 100vw);
      height: 100%;
      object-fit: contain;
      background-image: url('/public/login/login_background.png');
      background-size: 100% 100%;
    }
    .source{
      position: absolute;
      bottom: 0px;
      border-top: 1px solid #207442;
      height: 98px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: AlibabaPuHuiTiR;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
    }
  }
  .login-form{
    position: absolute;
    right: 0px;
    width: calc(628 / 1920 * 100vw);
    min-width: 628px;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
      width: 406.6px;
      transform-origin: center;
      .title{
        width: 100%;
        position: relative;
        height: 36px;
        margin-bottom: 11px;
        .title-span{
          font-family: AlibabaPuHuiTiBold;
          font-weight: bold;
          font-size: 37px;
          color: #333333;
          line-height: 36px;
          background: #ffffff;
          position: absolute;
          top: 0px;
          z-index: 2;
          left: 50%;
          transform: translateX(-50%);
          padding: 0px 25px;
        }
        .title-line{
          width: 100%;
          height: 2px;
          background: #333333;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }
      }
      .sub-title{
        font-family: PingFangSCLight;
        font-weight: 300;
        font-size: 16px;
        color: #333333;
        line-height: 13px;
        display: flex;
        justify-content: center;
        margin-bottom: 57px;
      }
      .login-use-form{
        .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
          border-color: #55d187; 
          box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
        }
        .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):focus {
          border-color: #55d187;
          box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
        }
        .ant-input-affix-wrapper-focused{
          border-color: #55d187;
          box-shadow: 0 0 8px rgba(85, 209, 135, 0.5);
        }
        .ant-form-item{
          margin-bottom: 16px;
        }
        .icon-div{
          height: 33px;
          display: flex;
          align-items: center;
          padding-left: 9px;
          padding-right: 20px;
          border-right: 1px solid #EAEAEA;
          margin-right: 15px;
          .account-icon{
            width: 15px;
            height: 16px;
            background-image: url('/public/login/account.png');
            background-size: 100% 100%; 
          }
          .password-icon{
            width: 15px;
            height: 16px;
            background-image: url('/public/login/password.png');
            background-size: 100% 100%; 
          }
        }
        .control-password{
          display: flex;
          justify-content: space-between;
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 15px;
          color: #878686;
          padding-top: 7px;
          margin-bottom: 62px;
          span{
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 15px;
            color: #878686;
          }
          /* 修改 Checkbox 选中颜色 */
          .ant-checkbox-checked .ant-checkbox-inner {
            background-color: #008B47 !important; /* 选中时的背景色 */
            border-color: #008B47 !important; /* 选中时的边框色 */
          }
          /* 修改 Hover 时的颜色 */
          .ant-checkbox:hover .ant-checkbox-inner {
            border-color: #55d187 !important;
          }
        }
        .login-button{
          height: 65px;
          border-radius: 33px;
          background: linear-gradient(87deg, #008B47, #039D52);
          font-family: Microsoft YaHei Light;
          font-weight: 300;
          font-size: 15px;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>
