<template>
  <div>
    <ClientOnly>
      <div class="login-wrapper narrow-scrollbar">
        <div class="login-left">
          <div class="login-header">
            <span v-if="mode === 'light'" @click="goHome">
              <leftLogoLightSvg></leftLogoLightSvg>
            </span>
            <span v-else @click="goHome">
              <leftLogoDarkSvg></leftLogoDarkSvg>
            </span>
            <div class="home" @click="goHome">{{ $t('login.goHome') }}</div>
          </div>
          <div class="login-block">
            <register
              :InvitCode="InvitCode"
              v-if="type === 'register'"
              @go="goBtn"
            />
            <reset-password v-else-if="type === 'reset'" @go="goBtn" />
            <login v-else @go="goBtn" />
          </div>
        </div>
        <div class="login-right">
          <div class="change-current-theme">
            <SwitchLanguage type="login"></SwitchLanguage>
            <ChangeTheme></ChangeTheme>
          </div>
          <div class="right-box">
            <p>{{ $t('login.h2') }}</p>
            <span v-if="mode === 'light'">
              <rightLogoLightSvg></rightLogoLightSvg>
            </span>
            <span v-else>
              <rightLogoDarkSvg></rightLogoDarkSvg>
            </span>
          </div>
        </div>
      </div>
    </ClientOnly>
  </div>
</template>
<script setup lang="ts">
import Login from '@/views/login/Login.vue';
import Register from '@/views/login/Register.vue';
import ResetPassword from '@/views/login/ResetPassword.vue';
import leftLogoLightSvg from '/public/images/svg/login/homeLogo.svg';
import leftLogoDarkSvg from '/public/images/svg/login/leftdarkLogo.svg';
import rightLogoLightSvg from '/public/images/svg/login/favicon-light.svg';
import rightLogoDarkSvg from '/public/images/svg/login/rightdarkLogo.svg';
import { webLogo } from '@/constants/logo';
useHead({
  title: 'Dexfilter | Login',
  link: [webLogo],
});
const route = useRoute();
// 当前主题
const mode = useCurTheme();
const InvitCode = route.params.code + '';
// 如果链接中带了邀请码,切换到注册页面
onMounted(() => {
  if (InvitCode) {
    type.value = 'register';
  }
});
const type = ref(route.query.type);
const router = useRouter();
const goBtn = (val: string) => {
  type.value = val;
};

const goHome = () => {
  router.push({
    path: '/',
  });
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.login-wrapper {
  background-color: var(--td-bg-color-page);
  display: flex;
  min-height: 800px;
  width: 100vw;
  height: 100vh;
  overflow-y: hidden;
  overflow-x: auto;
  .login-right {
    background-color: @td--right-back-color-2;
    width: 50vw;
    min-width: 500px;
    min-height: 100vh;
    .change-current-theme {
      width: 100%;
      height: 70px;
      .dja(flex-end);
      :deep(.theme-change) {
        margin-right: 20px;
      }
    }
    .right-box {
      height: 76%;
      .dja();
      flex-direction: column;
      p {
        font-size: @font-size-xxl;
        white-space: nowrap;
      }
      img {
        padding-top: 10vh;
        width: 260px;
      }
    }
  }
  .login-left {
    position: relative;
    width: 50vw;
    min-width: 500px;
    padding: 0 40px;
    .login-header {
      height: 72px;
      .dja(space-between,center);
      box-sizing: border-box;
      span {
        display: block;
        cursor: pointer;
        width: 150px;
      }
      .home {
        cursor: pointer;
        font-size: 14px;
        color: var(--td-font-white-2);
        line-height: 20px;
      }
    }
    .login-block {
      height: calc(100vh - 20vh);
      .dja();
      flex-direction: column;
      .title {
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: var(--td-text-color-primary);
        line-height: 32px;
        text-align: center;
      }
      .form-container {
        margin-top: 40px;
        width: 70%;
        max-width: 500px;
        &.login-qrcode {
          .bottom-container {
            margin-top: 32px;
          }
        }
        .verification-code {
          .send-verify {
            &.t-button--variant-text {
              color: var(--td-brand-color);
              &.t-is-disabled {
                color: var(--td-text-color-disabled);
              }
            }
          }
        }
        .check-container {
          font-size: 12px;
          .t-checkbox__label {
            color: var(--td-text-color-secondary);
            line-height: 16px;
            font-size: 12px;
          }
          .link {
            color: var(--td-brand-color);
            cursor: pointer;
          }
        }
        .t-input__prefix-icon {
          .t-icon {
            font-size: 20px;
            color: var(--td-text-color-primary);
          }
        }
        .t-is-focused > .t-input__prefix-icon {
          .t-icon {
            color: var(--td-brand-color);
          }
        }
      }
      .t-form-item__submit {
        padding-top: 12px;
      }
      .go-login {
        margin-top: 32px;
        font-size: 14px;
        color: var(--td-text-color-placeholder);
        line-height: 16px;
        span {
          color: var(--td-brand-color);
          cursor: pointer;
        }
      }
    }
  }
}
</style>
