<template>
	<el-dialog
		class="login-dialog"
		v-model="show"
		header-class="login-dialog-header"
		align-center
		destroy-on-close
		:show-close="false"
		:close-on-press-escape="false"
		:close-on-click-modal="false"
	>
		<div class="login-dialog-content">
			<img class="logo" src="@/assets/images/logo.png" />
			<div class="close" @click="show = false"><svg-icon name="close" /></div>
			<div class="content" v-if="curentTabInfo">
				<div class="header">
					<div class="title" v-if="curentTabInfo.title">
						<div class="icon" @click="onBack"><svg-icon name="back" size="17" /></div>
						<div class="label">{{ $t(curentTabInfo.title) }}</div>
					</div>
					<div class="nav" v-show="!curentTabInfo.title">
						<div
							class="item"
							:class="{
								active: [TabNames.register, TabNames.register_success].includes(
									currentTab
								)
							}"
							@click="currentTab = TabNames.register"
						>
							{{ $t('Login.signup') }}
						</div>
						<div
							class="item"
							:class="{ active: currentTab === TabNames.login }"
							@click="currentTab = TabNames.login"
						>
							{{ $t('Login.login') }}
						</div>
					</div>
				</div>
				<component
					:is="curentTabInfo.component"
					@retrieve-password="currentTab = TabNames.retrieve_password"
					@login="onLogin"
					@register="onRegister"
					@submit-email-code="onSubmitEmailCode"
					@resend-email-code="onResendEmailCode"
					@back="onBack"
					:name="data.name"
					:email="data.email"
					:password="data.password"
				/>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
	import {
		AccountSendLoginCode,
		AccountLogin,
		AccountRegister,
		AccountSendVerifyCode
	} from '@/api/account'
	import { computed, ref, markRaw, watch, onBeforeUnmount } from 'vue'
	import md5 from 'md5'
	import login from './login.vue'
	import register from './register.vue'
	import emailVerify from './email-verify.vue'
	import registerSuccess from './register-success.vue'
	import retrievePassword from './retrieve-password.vue'
	import myEvent from '@/utils/myEvent'
	import { useUserInfoStore } from '@/stores/userInfo'
	import { useRouter } from 'vue-router'
	const router = useRouter()
	const userStore = useUserInfoStore()
	const data = ref({
		name: '',
		email: '',
		password: '',
		type: ''
	})
	const TabNames = {
		login: 'login',
		register: 'register',
		email_verify: 'email_verify',
		register_success: 'register_success',
		retrieve_password: 'retrieve_password'
	}
	const tabList = markRaw([
		{
			name: TabNames.login,
			component: login
		},
		{
			name: TabNames.register,
			component: register
		},
		{
			name: TabNames.email_verify,
			title: 'Login.emailVerification',
			component: emailVerify
		},
		{
			name: TabNames.retrieve_password,
			title: 'Login.retrievePassword',
			component: retrievePassword
		},
		{
			name: TabNames.register_success,
			component: registerSuccess
		}
	])
	const show = ref(false)
	const currentTab = ref(TabNames.login)
	const curentTabInfo = computed(() => tabList.find((v) => v.name === currentTab.value))
	const lastTab = ref('')
	watch(currentTab, (v, o) => (lastTab.value = o))
	const onBack = () => {
		currentTab.value = lastTab.value || TabNames.login
	}
	const open = (type?: string) => {
		currentTab.value = TabNames[type] || TabNames.login
		data.value.name = ''
		data.value.email = ''
		data.value.password = ''
		show.value = true
	}
	myEvent.add('openLoginDialog', open)
	onBeforeUnmount(() => {
		myEvent.remove('openLoginDialog', open)
	})

	const onLogin = async (res: any) => {
		await AccountSendLoginCode({
			email: res.email,
			password: md5(res.password)
		})
		data.value = res
		data.value.type = TabNames.login
		currentTab.value = TabNames.email_verify
	}
	const onRegister = async (res: any) => {
		const value = {
			email: res.email,
			operationType: 'REGISTER'
		}
		await AccountSendVerifyCode(value)
		data.value = res
		data.value.type = TabNames.register
		currentTab.value = TabNames.email_verify
	}
	const onSubmitEmailCode = (code: string) => {
		const value = {
			email: data.value.email,
			password: md5(data.value.password),
			emailVerifyCode: code
		}
		if (data.value.type === TabNames.login) {
			AccountLogin(value).then((v) => {
				userStore.setUserInfo(v)
				show.value = false
				setTimeout(() => {
					router.go(0)
				})
			})
		} else {
			value['username'] = data.value.name
			AccountRegister(value).then((v) => {
				currentTab.value = TabNames.register_success
			})
		}
	}
	const onResendEmailCode = async (callback: () => void) => {
		if (data.value.type === TabNames.login) {
			await onLogin(data.value)
		} else if (data.value.type === TabNames.register) {
			await onRegister(data.value)
		}
		callback()
	}
</script>

<style lang="less">
	.login-dialog-header {
		display: none;
	}
	.el-dialog.login-dialog {
		--el-dialog-border-radius: 0;
		--el-dialog-padding-primary: 0;
		width: 90rem;
		height: 62rem;
		.el-dialog__body {
			width: 100%;
			height: 100%;
		}
	}
	.login-dialog-content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		background: url('@/assets/images/login/bg.jpg') no-repeat center center / 100% 100%;
		> *:not(.content) {
			position: absolute;
		}
		> .bg {
			width: 100%;
			height: 100%;
			display: block;
		}

		> .logo {
			width: auto;
			height: 4rem;
			top: 4rem;
			left: 3rem;
		}
		> .close {
			width: 3rem;
			height: 3rem;
			top: 2rem;
			right: 2rem;
			cursor: pointer;
		}
		> .content {
			width: 34rem;
			height: calc(100% - 10rem);
			margin: 5rem 6rem auto auto;
			display: flex;
			flex-direction: column;
			> .header {
				--padding-bottom: 1.2rem;
				padding-bottom: var(--padding-bottom);
				border-bottom: 0.1rem solid #9f9f9f;
				> div {
					display: flex;
					height: 3rem;
				}
				> .nav {
					> .item {
						user-select: none;
						cursor: pointer;
						flex: 1;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						font-size: 2rem;
						font-family: KaiseiOpti-Regular;
						color: #9f9f9f;
						text-transform: uppercase;
						&.active {
							font-family: KaiseiOpti-Bold;
							color: #232323;

							&::after {
								content: '';
								position: absolute;
								bottom: calc(0rem - var(--padding-bottom) - 0.2rem);
								left: 0;
								width: 100%;
								height: 0;
								border-bottom: 0.4rem solid #232323;
							}
						}
					}
				}
				> .title {
					align-items: center;
					justify-content: center;
					> .icon {
						width: 2.4rem;
						height: 2.4rem;
						cursor: pointer;
						margin-right: 1rem;
					}
					> .label {
						font-family: KaiseiOpti-Bold;
						font-size: 2rem;
						color: #232323;
						text-transform: uppercase;
					}
				}
			}
		}
	}
</style>
