<template>
  <div class="login-out-div">
    <div class="login-image">
      <div class="image-content"></div>
      <div class="project-name" :style="{ transform: `translateX(-50%) scale(${ratio})` }">{{VITE_GLOB_APP_TITLE}}</div>
    </div>
    <div class="login-form">
      <div class="content" :style="{ transform: `scale(${ratio})` }">
        <div class="title-icon"></div>
        <div class="title">费县违法建设监管平台</div>
        <div class="sub-title">欢迎登陆</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: 56px"
            >
              <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: 56px"
            >
              <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"
              class="login-button"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="company">{{ VITE_GLOB_APP_TECHINICAL_SUPPORT }}</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, VITE_GLOB_APP_TITLE } = 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,
        });
      }
    } 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(1182 / 1920 * 100vw);
        height: 100%;
        object-fit: contain;
        background-image: url('/public/login/login_background.png');
        background-size: 100% 100%;
      }
      .project-name{
        width: 827px;
        height: 95px;
        // width: calc(827 / 1920 * 100vw);
        // height: calc(95 / 1080 * 100vh);
        background-image: url('/public/login/login_project_name.png');
        background-size: 100% 100%;
        position: absolute;
        bottom: 150px;
        left: 50%;
        transform: translateX(-50%);
        font-family: AlibabaPuHuiTi_2_75_SemiBold;
        font-size: 50px;
        color: #FFFFFF;
        line-height: 95px;
        text-shadow: 3px 3px 0px #008D5D;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .login-form {
      position: absolute;
      right: 0px;
      width: calc(740 / 1920 * 100vw);
      min-width: 628px;
      height: 100vh;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      .content {
        width: 392px;
        transform-origin: center;
        .title-icon{
          width: 80px;
          height: 44px;
          background-image: url('/public/login/login_title_icon.png');
          background-size: 100% 100%;
          margin-bottom: 1px;
        }
        .title {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 32px;
          color: #000000;
          line-height: 56px;
        }
        .sub-title {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 26px;
          color: #000000;
          line-height: 56px;
          margin-bottom: 20px;
        }
        .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: 30px;
          }
          .icon-div {
            height: 33px;
            display: flex;
            align-items: center;
            padding-left: 6px;
            padding-right: 17px;
            // border-right: 1px solid #eaeaea;
            .account-icon {
              width: 22px;
              height: 22px;
              background-image: url('/public/login/account.png');
              background-size: 100% 100%;
            }
            .password-icon {
              width: 22px;
              height: 22px;
              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: 56px;
            background: #029956;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 25px;
          }
        }
      }
      .company{
        position: absolute;
        bottom: 37px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        line-height: 22px;
      }
    }
  }
</style>
