<template>
  <div class="relative flex-center wh-full min-w-930px">
    <div class="w-440px h-460px z-4 bg-white rounded-24px shadow relative">
      <div class="w-320px absolute right-56px">
        <header class="my-52px">
          <div class="w-full flex justify-center">
            <img class="w-160px ml-[-10px]" src="../../../assets/images/logo-4.png" alt="" />
          </div>
        </header>
        <main>
          <!-- <h2>登录</h2> -->
          <transition name="fade-slide" mode="out-in" appear>
            <component :is="activeModule.component" />
          </transition>
        </main>
      </div>
      <!-- <div class="flex items-center justify-center absolute top-16px right-16px">
        <n-tooltip trigger="hover">
          <template #trigger>
            <img
              v-if="active === 'pwd-login'"
              class="cursor-pointer"
              src="https://wwcdn.weixin.qq.com/node/wwopen/wwopenmng/style/images/independent/logo/WeworkLogoBule$57136f6f.png"
              alt=""
              @click="toggleLoginModule('ww-login')"
            />
            <icon-custom-back
              v-else
              class="w-24px h-24px outline-none cursor-pointer"
              @click="toggleLoginModule('pwd-login')"
            ></icon-custom-back>
          </template>
          {{ active === 'pwd-login' ? '企微登录' : '账密登录' }}
        </n-tooltip>
      </div> -->
    </div>
    <login-bg />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { EnumLoginModule } from '@/enum';
import { LoginBg, PwdLogin, WwLogin } from './components';

type ModulesType = 'pwd-login' | 'ww-login';
const active = ref<ModulesType>('pwd-login');

const modules = {
  'pwd-login': {
    label: EnumLoginModule['pwd-login'],
    component: PwdLogin
  },
  'ww-login': {
    label: EnumLoginModule['ww-login'],
    component: WwLogin
  }
};

const activeModule = computed(() => modules[active.value]);

function toggleLoginModule(module: ModulesType) {
  active.value = module;
}
</script>
<style scoped>
.shadow {
  box-shadow: 0 5px 24px 10px rgba(231, 237, 242, 1);
}

main > h2 {
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #000;
  line-height: 22px;
  padding-bottom: 24px;
}

.right-bg {
  background-image: url('@/assets/images/login-form-bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0;
  color: #fff;
}
</style>
