<template>
  <div
    style="background-size: 100% 100%"
    :class="prefixCls"
    class="relative w-full h-full px-4 loginBg"
  >
    <img class="logo" src="/src/assets/images/systemLogo.png" :onerror="imgOnError" />
    <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">
          <div v-if="ifCustom" class="my-auto"> </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="login-form-box">
            <h2
              class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left system-name"
            >
              天空地一体化地质灾害监测系统
            </h2>
            <div class="login-form-wrapper">
              <div
                :class="`${prefixCls}-form`"
                class="relative w-full px-5 py-8 mx-auto my-auto 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"
              >
                <a-tabs v-model:activeKey="activeKey">
                  <a-tab-pane key="1" tab="账号登录"><LoginForm /></a-tab-pane>
                  <a-tab-pane key="2" tab="验证码登录"><MobileForm /></a-tab-pane>
                </a-tabs>
              </div>
              <div class="version"><span>当前版本号:V1.0.4</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import LoginForm from './CustomLoginForm.vue';
  import MobileForm from './CustomMobileForm.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  // import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  // import { useLocaleStore } from '/@/store/modules/locale';
  import { getPlatForm } from '/@/api/oem/index';
  import defaultShowLogoImg from '/@/assets/svg/login-bg.svg';
  import defaultShowLogoDarkImg from '/@/assets/svg/login-bg-dark.svg';
  import { useTitle } from '@vueuse/core';
  import { createLocalStorage } from '/@/utils/cache';

  import url from '/src/assets/images/logo-demo.png';

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
  });
  const { title } = useGlobSetting();
  const defaultTitle = ref('');
  const defaultLogo = ref('');
  const logoUrl = ref('');
  const activeKey = ref('1');

  // const userStore = useUserStore();
  const storage = createLocalStorage();

  onMounted(async () => {
    console.log('title', title);

    let res = storage.get('platformInfo');
    if (res === '' || res === null) {
      res = await getPlatForm();
    }
    logoUrl.value = res?.background;
    defaultTitle.value = res?.name || title;
    defaultLogo.value = res?.logo;
    let link = (document.querySelector("link[rel*='icon']") ||
      document.createElement('link')) as HTMLLinkElement;
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = res?.icon ?? '/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
    let defaultLogoBg = document.createElement('style');
    let defaultLogoDarkBg = document.createElement('style');
    if (logoUrl.value !== undefined) {
      //企业自定义
      ifCustom.value = false;
      //默认图片
      defaultLogoBg.innerHTML = `.vben-login::before{
      background-image:url("");
      position:absolute;
    }`;
      //切换黑暗模式图片
      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
      background-image:url("");
      opacity: 0;
      position:absolute;
    }`;
    } else {
      logoUrl.value = 'url(' + defaultShowLogoImg + ')';
      //默认图片
      defaultLogoBg.innerHTML = `.vben-login::before{
      background-image:url(${defaultShowLogoImg});
      opacity: 0;
      position:absolute;
    }`;
      //切换黑暗模式图片
      defaultLogoDarkBg.innerHTML = `html[data-theme='dark'] .vben-login::before{
      background-image:url(${defaultShowLogoDarkImg});
      opacity: 0;
      position:absolute;
    }`;
    }
    document.head.appendChild(defaultLogoBg);
    document.head.appendChild(defaultLogoDarkBg);
  });

  // const userStore = useUserStore();

  const ifCustom = ref(true);
  // const getLogo = computed(() => {
  //   return userStore.platInfo?.logo;
  // });
  // const getTitle = computed(() => {
  //   // 设置icon
  //   let link = (document.querySelector("link[rel*='icon']") ||
  //     document.createElement('link')) as HTMLLinkElement;
  //   link.type = 'image/x-icon';
  //   link.rel = 'shortcut icon';
  //   link.href = userStore.platInfo?.icon ?? '/favicon.ico';
  //   document.getElementsByTagName('head')[0].appendChild(link);
  //   // logoUrl.value = userStore.platInfo?.background;
  //   // if (logoUrl.value !== undefined) {
  //   //   ifCustom.value = false;
  //   // } else {
  //   //   logoUrl.value = 'url(' + defaultShowLogoImg + ')';
  //   // }
  //   return userStore.platInfo?.name ?? title;
  // });
  // const globSetting = useGlobSetting();
  const { prefixCls } = useDesign('login');
  // const { t } = useI18n();
  // const localeStore = useLocaleStore();
  // const showLocale = localeStore.getShowPicker;
  // const title = computed(() => globSetting?.title ?? '');

  onMounted(() => {
    useTitle('XX地质灾害监测数据支撑系统');
  });

  const imgOnError = (e) => {
    let img = e.srcElement;
    img.src = url;
    img.onerror = null; //防止闪图
  };
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-login';
  @logo-prefix-cls: ~'@{namespace}-app-logo';
  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
  @dark-bg: #293146;

  .system-name {
    font-size: 30px;
    font-family: Alimama ShuHeiTi;
    font-weight: bold;
    color: #fdfeff;
    padding-left: 35px;
    margin-bottom: 20px;
  }

  .login-form-box {
    padding-top: 200px;
    margin-left: 260px;
  }

  .loginBg {
    background: url('../../../assets/images/login/loginBg.png') no-repeat;
  }

  .vben-countdown-input,
  .ant-input-group-addon {
    box-shadow: inset 0 0 6px 2px #16c0ff;
    min-width: 101px !important;
    width: 101px;
    margin-top: 0.2604rem;
    background: transparent;
    border: none;
    color: #fff;
    border-radius: 2px;
  }

  :deep(.ant-input-group-addon) {
    padding: 0;
    height: 38px !important;
  }

  :deep(.login-form-wrapper) {
    position: relative;
    width: 470px !important;
    height: 492px !important;
    padding: 48px 58px 0 9px;
    background: ~"url('/@/assets/images/login/login-form-wrapper.png')" no-repeat;

    :deep(.vben-login-form) {
      margin-left: 0 !important;
      padding: 0 !important;
    }

    .ant-tabs {
      left: 7px !important;

      .ant-tabs-tab {
        color: rgba(0, 0, 0, 0) !important;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .ant-tabs-tab-active {
        // color: #ffe076 !important;
        color: rgba(0, 0, 0, 0) !important;
        background: linear-gradient(0deg, #deae06 0%, #fff 85.59570313%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .ant-tabs-ink-bar {
        background-color: #ffe076 !important;
      }

      .ant-tabs-bar {
        border-bottom: 0 solid #f0f0f0 !important;
      }

      .ant-tabs-nav {
        color: #c6ecff !important;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        left: 15px;
      }
    }

    .version {
      position: absolute;
      left: 50%;
      bottom: 15px;
      color: #00cdef;
      opacity: 0.6;
      transform: translateX(-50%);
      font-size: 14px;
    }

    .ant-input-password {
      width: 307px;
      margin-top: 0.2604rem;
      background: transparent;
      border: none;
      color: #fff;
      box-shadow: inset 0 0 6px 2px #16c0ff;
      border-radius: 2px;
    }

    #account,
    #phoneNumber,
    #code {
      // box-shadow: inset 0px 0px 6px 2px #16c0ff;
      min-width: 263px !important;
      width: 307px;
      margin-top: 0.2604rem;
      background: transparent;
      border: none;
      color: rgb(255, 255, 255);
      border-radius: 2px;
    }

    #code {
      min-width: 200px !important;
      width: 200px;
    }

    input#account:-webkit-autofill,
    input#account:-webkit-autofill:hover,
    input#account:-webkit-autofill:focus,
    input#password:-webkit-autofill,
    input#password:-webkit-autofill:hover,
    input#password:-webkit-autofill:focus,
    input#phoneNumber:-webkit-autofill,
    input#phoneNumber:-webkit-autofill:hover,
    input#phoneNumber:-webkit-autofill:focus {
      -webkit-text-fill-color: white !important;
      box-shadow: 10px 10px 10px 10px rgb(176 122 122 / 0%) !important;
    }

    #password {
      min-width: 263px !important;
      width: 307px;
      margin-top: 0.2604rem;
      background: transparent;
      border: none;
      color: rgb(255, 255, 255);
      border-radius: 2px;
    }
  }

  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-position: 100%;
      // background-image: url(/@/assets/svg/login-bg.svg);
      background-repeat: no-repeat;
      background-size: auto 100%;
      content: '';

      @media (max-width: @screen-xl) {
        display: none;
      }
    }

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

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

      img {
        width: 32px;
      }
    }

    .container {
      .@{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;
    }

    :deep(.ant-divider-inner-text) {
      font-size: 12px;
      color: @text-color-secondary;
    }
  }

  .logo {
    display: flex;
    position: fixed;
    float: left;
    height: 2.5rem;
    top: 90px;
    left: 150px;

    &.logo {
      margin-right: 1rem;
      opacity: 1;
    }
  }
</style>
