<template>
  <div class="login-contain">
    <div class="login-content">
      <div class="login-box">
        <LoginForm />
        <ForgetPasswordForm />
        <RegisterForm />
        <MobileForm />
        <QrCodeForm />
      </div>
      <div class="source">
        {{ VITE_GLOB_APP_TECHINICAL_SUPPORT }}
      </div>
    </div>
    <div class="login-bg">
      <div class="project-name">
        {{ VITE_GLOB_APP_TITLE }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
  import { useGlobSetting } from '@/hooks/setting';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useLocaleStore } from '@/store/modules/locale';
  import { computed } from 'vue';
  import ForgetPasswordForm from './ForgetPasswordForm.vue';
  import LoginForm from './LoginForm.vue';
  import MobileForm from './MobileForm.vue';
  import QrCodeForm from './QrCodeForm.vue';
  import RegisterForm from './RegisterForm.vue';
  import { getAppEnvConfig } from '@/utils/env';

  const { VITE_GLOB_APP_TITLE, VITE_GLOB_APP_TECHINICAL_SUPPORT } = getAppEnvConfig();

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });

  const globSetting = useGlobSetting();
  const { prefixCls } = useDesign('login');
  const { t } = useI18n();
  const localeStore = useLocaleStore();
  const showLocale = localeStore.getShowPicker;
  const title = computed(() => globSetting?.title ?? '');
</script>
<style lang="less" scoped>
  @font-face {
    font-family: myFirstFont;
    src: url('@/assets/icons/庞门正道标题体3.0.ttf');
  }
  .login-contain {
    display: flex;
  }
  .login-content {
    width: 50%;
    height: 100vh;
    background: linear-gradient(
      270deg,
      rgba(226, 235, 248, 0.6) 0%,
      rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(10px);
    .login-box {
      width: 20vw;
      height: 40vh;
      margin: 22vh auto;
      border-radius: 10px;
      border: 1px solid #bbbcbd;
      background: #fff;
      font-family: 'Courier New', Courier, monospace;
    }
    .source {
      width: 100%;
      margin: auto;
      text-align: center;
      position: absolute;
      bottom: 20px;
    }
  }
  .login-bg {
    width: 50%;
    height: 100vh;
    background: url('@/assets/images/login-bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .project-name {
    font-size: 60px;
    color: #fff;
    word-wrap: break-word;
    width: 700px;
    margin: 10vh 0 0 5vw;
    font-family: myFirstFont;
  }
</style>
