<template>
  <div :class="prefixCls" class="relative w-full h-full px-4">
    <AppLocalePicker
      class="absolute text-white top-4 right-4 enter-x xl:text-gray-600"
      :showText="false"
      v-if="!sessionTimeout && showLocale"
    />
    <AppDarkModeToggle class="absolute top-3 right-7 enter-x" v-if="!sessionTimeout" />

    <span class="-enter-x xl:hidden">
      <AppLogo :alwaysShowTitle="true" />
    </span>

    <div class="container relative h-full py-2 mx-auto sm:px-10">
      <div class="flex h-full">
        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
          <AppLogo v-if="false" class="-enter-x" />
          <div class="my-auto my-auto-left" style="text-align: center">
            <img
              :alt="title"
              style="margin-left: 25%"
              src="../../../assets/svg/login-box-bg.svg"
              class="w-1/2 -mt-16 -enter-x"
            />
            <div class="mt-10 font-medium text-white -enter-x">
              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
            </div>
            <div class="mt-5 font-normal text-white text-md dark:text-gray-500 -enter-x">
              {{ t('sys.login.signInDesc') }}
            </div>
            <div class="appcode">
              <div class="appcodeItem" v-for="item in getAppList" :key="item.name">
                <div class="item">
                  <span>NEW</span>
                  <div class="itemTitle">{{ item.name }}</div>
                  <div class="coderList">
                    <div class="qecodeItem" v-for="items in item.appList" :key="items.url">
                      <QrCode
                        :value="items.url"
                        :options="{ margin: 2 }"
                        class="QrCode enter-x flex justify-center xl:justify-start"
                        :width="100"
                      />
                      <div class="title">
                        {{ items.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
          <div
            :class="`${prefixCls}-form`"
            class="flex relative w-full px-5 py-8 mx-auto my-auto px-5 py-8 rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
          >
            <div style="width: 100%">
              <div class="LoginFormclass">
                <LoginForm />
              </div>
              <div class="newList">
                <div
                  class="newItem"
                  v-for="item in newList"
                  :key="item.title"
                  @click="handleClick(item.link)"
                  :title="item.title"
                >
                  {{ item.time }}
                  <div class="new">NEWS</div>
                  {{ item.title }}
                </div>
              </div>
            </div>
            <ForgetPasswordForm />
            <RegisterForm />
            <MobileForm />
            <QrCodeForm />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { AppLogo } from '/@/components/Application';
  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
  import LoginForm from './LoginForm.vue';
  import ForgetPasswordForm from './ForgetPasswordForm.vue';
  import RegisterForm from './RegisterForm.vue';
  import MobileForm from './MobileForm.vue';
  import QrCodeForm from './QrCodeForm.vue';
  import { QrCode } from '/@/components/Qrcode/index';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useLocaleStore } from '/@/store/modules/locale';
  // import Icon from '/@/components/Icon/src/Icon.vue';

  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 ?? '');
  const { getAppList } = localeStore;
  const newList = [
    {
      time: '2024/04/17',
      title: '4DKanKanのUpdate',
      link: 'https://apps.4dkankan.jp/news/view/10/',
    },
    {
      time: '2024/02/15',
      title: '4DKanKanのUpdate',
      link: 'https://apps.4dkankan.jp/news/view/9/',
    },
    {
      time: '2023/09/19',
      title: 'iOS 17対応について',
      link: 'https://apps.4dkankan.jp/news/view/8/',
    },
    // {
    //   time: '2023/07/07',
    //   title: '4DKanKan®シリーズ、7月7日よりTJMデザインでの取扱いスタート',
    //   link: 'https://apps.4dkankan.jp/news/view/7/',
    // },
    // {
    //   time: '2022/11/01',
    //   title: '建設DX展に出展いたします',
    //   link: 'https://apps.4dkankan.jp/news/view/6/',
    // },
  ];
  function handleClick(link: string) {
    window.open(link);
  }
  defineExpose({
    getAppList,
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-login';
  @logo-prefix-cls: ~'@{namespace}-app-logo';
  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
  @dark-bg: #293146;

  html[data-theme='dark'] {
    .@{prefix-cls} {
      background-color: @dark-bg;

      &::before {
        background-image: url(/@/assets/svg/login-bg-dark.svg);
      }

      .ant-input,
      .ant-input-password {
        background-color: #232a3b;
      }

      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
        border: 1px solid #4a5569;
      }

      &-form {
        background: transparent !important;
      }

      .app-iconify {
        color: #fff;
      }
    }

    input.fix-auto-fill,
    .fix-auto-fill input {
      -webkit-text-fill-color: #c9d1d9 !important;
      box-shadow: inherit !important;
    }
  }

  .@{prefix-cls} {
    min-height: 100%;
    overflow: hidden;
    @media (max-width: @screen-xl) {
      background-color: #293146;

      .@{prefix-cls}-form {
        background-color: #fff;
      }
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin-left: -48%;
      background-image: url(/@/assets/svg/login-bg.svg);
      background-position: 100%;
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: '';
      @media (max-width: @screen-xl) {
        display: none;
      }
    }

    .@{logo-prefix-cls} {
      position: relative;
      top: 12px;
      height: 30px;

      &__title {
        font-size: 16px;
        color: #fff;
      }

      img {
        width: 32px;
      }
    }

    .container {
      .LoginFormclass {
        width: 100%;
        max-width: 455px;
      }
      .newList {
        width: 100%;
        overflow: hidden;
        .newItem {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          &:hover:after {
            opacity: 1;
            transform: translateX(0%);
          }
          cursor: pointer;
          padding-top: 20px;
          border-bottom: 1px solid #cdcccd;
          width: 100%;
          .new {
            display: inline-block;
            padding: 5px 10px;
            background-color: #8cefee;
          }
          &:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            opacity: 0.4;
            background: #121212;
            transition: all 0.3s;
            transform: translateX(-100%);
          }
        }
      }
      .my-auto-left {
        position: relative;
        left: -100px;
        @media (max-width: @screen-2xl) {
          left: -60px;
        }
      }
      .my-auto {
        .appcode {
          margin: 40px auto;
          width: 590px;
          display: flex;
          justify-content: space-between;
          text-align: center;
          &Item {
            display: flex;
            justify-content: space-between;
            text-align: center;
          }
          span {
            font-size: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 28px;
          }
          .item {
            text-align: center;
            &Title {
              width: 214px;
              height: 50px;
              padding: 11px 0;
              background: #8defef;
              border-radius: 25px;
              font-size: 20px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 28px;
              text-align: center;
              margin: 12px auto;
            }
            .coderList {
              .qecodeItem {
                .QrCode {
                  border-radius: 4px;
                  overflow: hidden;
                }
                .title {
                  padding: 4px 5px;
                  font-size: 14px;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 500;
                  color: #333333;
                  line-height: 20px;
                  width: 100px;
                  height: 28px;
                  background: #8defef;
                  border-radius: 14px;
                }
              }
            }
          }
          .coderList {
            display: flex;
            justify-content: space-between;
            width: 254px;
            @media (max-width: @screen-2xl) {
              width: 234px;
            }
          }
          img {
            width: 150px;
            padding: 2px;
            background: #fff;
          }
          .title {
            text-align: center;
            margin-top: 10px;
            background: rgb(130, 166, 230);
            padding: 5px;
            border-radius: 3px;
            color: #fff;
            font-size: 20px;
          }
        }
      }
      .@{logo-prefix-cls} {
        display: flex;
        width: 60%;
        height: 80px;

        &__title {
          font-size: 24px;
          color: #fff;
        }
        img {
          width: 48px;
        }
      }
    }

    &-sign-in-way {
      .anticon {
        font-size: 22px;
        color: #888;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }

    input:not([type='checkbox']) {
      min-width: 360px;

      @media (max-width: @screen-xl) {
        min-width: 320px;
      }

      @media (max-width: @screen-lg) {
        min-width: 260px;
      }

      @media (max-width: @screen-md) {
        min-width: 240px;
      }

      @media (max-width: @screen-sm) {
        min-width: 160px;
      }
    }

    .@{countdown-prefix-cls} input {
      min-width: unset;
    }

    .ant-divider-inner-text {
      font-size: 12px;
      color: @text-color-secondary;
    }
  }
</style>
