<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>
        <div class="sub-title">费县知蒙招采平台</div>
        <div class="title-icon"></div>
        <a-form
          class="login-use-form"
          :model="formData"
          :rules="getFormRules"
          ref="formRef"
          @keypress.enter="handleLogin"
        >
          <FormItem name="account">
            <div class="form-item-span">账号</div>
            <a-input
              size="large"
              v-model:value="formData.account"
              placeholder="请输入账户"
              class=""
              style="height: 56px"
            >
              <template #suffix>
                <div class="user-icon"></div>
              </template>
            </a-input>
          </FormItem>
          <FormItem name="password">
            <div class="form-item-span">密码</div>
            <InputPassword
              size="large"
              visibilityToggle
              v-model:value="formData.password"
              placeholder="请输入密码"
              style="height: 56px"
            >
            </InputPassword>
          </FormItem>
          <a-form-item>
            <a-button
              size="large"
              block
              @click="handleLogin"
              :loading="loading"
              class="login-button"
            >
              登录
            </a-button>
          </a-form-item>
          <div class="agreement">
            登录即代表您已阅读并接受<span>用户服务协议</span>
          </div>
        </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';

  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', //不要默认的错误提示
      });
      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,
        });
        // getTsgzAccessToken().then((res) => {
        //   localStorage.setItem('X-Token-Situation', res.accessToken);
        // });
      }
    } 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%;
      }
    }
    .login-form {
      position: absolute;
      right: 0px;
      width: calc(656 / 1920 * 100vw);
      min-width: 656px;
      height: 100vh;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      .content {
        width: 395px;
        transform-origin: center;
        .title {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 48px;
          color: #000000;
          line-height: 56px;
          margin-bottom: 14px;
        }
        .sub-title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 48px;
          color: #0081FF;
          line-height: 56px;
          margin-bottom: 21px;
        }
        .title-icon{
          width: 53px;
          height: 3px;
          background: #0081FF;
          margin-bottom: 76px;
        }
        .login-use-form {
          .ant-form-item {
            margin-bottom: 24px;
          }
          .form-item-span{
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 14px;
            color: rgba(0,0,0,0.85);
            line-height: 20px;
            margin-bottom: 16px;
          }
          .user-icon{
            width: 20px;
            height: 20px;
            background-image: url('/public/login/login_user_icon.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;
            }
          }
          .login-button {
            margin-top: 25px;
            height: 56px;
            background: #0081FF;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 25px;
          }
          .agreement{
            text-align: center;
            font-family: AppleSystemUIFont;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            line-height: 15px;
            span{
              color: #1890FF;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
