<template>
	<div class="main-header" id="main-header">
		<div class="left">
			<img
				class="logo"
				src="@/assets/images/logo.png"
				@click="onNavItemClick({ path: '/' })"
			/>
		</div>
		<div class="center">
			<div
				v-for="v in navList1"
				:key="v.path"
				class="nav-item"
				:class="{
					active:
						v.path === '/'
							? activePath === v.path
							: new RegExp(`^${v.path}`).test(activePath)
				}"
				@click="onNavItemClick(v)"
			>
				<span>{{ $t(v.name) }}</span>
			</div>
		</div>
		<div class="right">
			<div
				class="icon"
				v-for="v in navList2"
				:key="v.path"
				:class="{ active: new RegExp(`^${v.path}`).test(activePath) }"
				@click="onNavItemClick(v)"
			>
				<svg-icon :name="activePath === v.path ? v.active_icon : v.icon" size="22" />
			</div>
			<el-popover
				ref="profilePopover"
				placement="bottom-end"
				trigger="click"
				:show-arrow="false"
				popper-style="width: 24rem; padding: 0; border-radius: 0; right: 2rem; top: 10rem;"
				v-if="userInfo.userId"
			>
				<template #reference>
					<el-badge :value="unReadCount" :hidden="unReadCount < 1">
						<div class="icon"><svg-icon name="user_0" size="22" /></div>
					</el-badge>
				</template>
				<template #default>
					<div class="profile-content">
						<div class="info">
							<img src="@/assets/images/profile-content-bg.jpg" alt="" />
							<div class="content">
								<div class="profile"></div>
								<div class="name">
									{{ $t('MainHeader.HiName', { name: userInfo.username }) }}
								</div>
							</div>
						</div>
						<div class="nav-item" @click="onMyWardrobe">
							<div class="icon"><svg-icon name="my_wardrobe" size="18" /></div>
							<div class="label">{{ $t('MainHeader.MyWardrobe') }}</div>
						</div>
						<el-badge
							:value="unReadCount"
							class="nav-item badge"
							:offset="[10, 0]"
							:hidden="unReadCount < 1"
						>
							<div class="nav-item flex" @click="onNotifications">
								<div class="icon"><svg-icon name="notifications" size="14" /></div>
								<div class="label">{{ $t('MainHeader.Notifications') }}</div>
							</div>
						</el-badge>
						<div class="nav-item" @click="onSettings">
							<div class="icon"><svg-icon name="settings" size="16" /></div>
							<div class="label">{{ $t('MainHeader.Settings') }}</div>
						</div>
						<div class="hr"></div>
						<div class="nav-item logout" @click="onLogout">
							<div class="icon"><svg-icon name="logout" size="20" /></div>
							<div class="label">{{ $t('Login.logoff') }}</div>
						</div>
					</div>
				</template>
			</el-popover>
			<div class="login" @click="onLogin" v-else>{{ $t('Login.login') }}</div>
			<div class="language" @click="onLanguageClick">
				<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
				<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ElMessageBox } from 'element-plus'
	import { computed, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import myEvent from '@/utils/myEvent'
	import { useI18n } from 'vue-i18n'
	import { useUserInfoStore } from '@/stores/userInfo'
	import { useGlobalStore } from '@/stores/global'
	import { setUserLanguage } from '@/api/user'

	const { t, locale } = useI18n()
	const userInfoStore = useUserInfoStore()
	const GLOABL = useGlobalStore()
	const router = useRouter()
	const route = useRoute()
	const userInfo = computed(() => userInfoStore.state.userInfo)
	const activePath = computed(() => route.path)
	const unReadCount = computed(() => GLOABL.state.unReadMessageCount)
	const navList1 = ref([
		{
			name: 'MainHeader.Home',
			path: '/'
		},
		{
			name: 'MainHeader.CollectionStory',
			path: '/collectionStory'
		},
		{
			name: 'MainHeader.Brand',
			path: '/brand'
		},
		{
			name: 'MainHeader.DigitalItem',
			path: '/digitalItem'
		}
	])
	const navList2 = ref([
		{
			icon: 'cart_0',
			active_icon: 'cart_1',
			path: '/shoppingCart',
			login: true
		}
	])
	const onNavItemClick = (v: any) => {
		const path = v.path
		if (v.login && !userInfoStore.state.token) {
			return onLogin()
		}
		if (path === activePath.value) return
		router.push(path)
	}
	const onLogin = () => {
		myEvent.emit('openLoginDialog')
	}
	const profilePopover = ref(null)
	const hideProfilePopover = () => {
		profilePopover.value?.hide()
	}
	const onMyWardrobe = () => {
		hideProfilePopover()
		router.push('/wardrobe')
	}
	const onNotifications = () => {
		hideProfilePopover()
		router.push('/notifications')
	}
	const onSettings = () => {
		hideProfilePopover()
		router.push('/settings')
	}
	const onLogout = () => {
		hideProfilePopover()
		ElMessageBox.confirm(t('Login.logOffTip'))
			.then(() => {
				userInfoStore.logout(true)
			})
			.catch(() => {})
	}
	const onLanguageClick = () => {
		locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
		localStorage.setItem('language', locale.value)
		console.log(locale.value)
		const localeMap: Record<string, string> = {
			ENGLISH: 'en',
			CHINESE_SIMPLIFIED: 'zh-CN'
		}
		setUserLanguage(localeMap[locale.value])
	}
</script>

<style lang="less" scoped>
	#main-header {
		height: var(--header-height);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background: #ffffff;
		padding: 0 9rem;
		border-bottom: 0.1rem solid #c4c4c4;
		user-select: none;
		> .left {
			> .logo {
				width: auto;
				height: 4rem;
			}
		}
		> .right {
			> * {
				cursor: pointer;
			}
			> .icon {
				width: 2.4rem;
				height: 2.4rem;
			}
			> .login {
				font-size: 1.6rem;
			}
			> .profile {
				width: 4rem;
				height: 4rem;
				border-radius: 50%;
				background: #f5f5f5;
			}
			> .language {
				font-family: KaiseiOpti-Regular;
				font-size: 1.6rem;
				color: #c2c2c2;
				> .active {
					color: #232323;
					font-family: KaiseiOpti-Medium;
				}
			}
		}
		> .center,
		> .right {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 2.6rem;
		}

		> .center {
			position: absolute;
			height: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			.nav-item {
				height: 100%;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				> span {
					padding: 0 1rem;
					line-height: 2.4rem;
					font-size: 1.6rem;
					color: #232323;
					border-bottom: 0.1rem solid transparent;
				}
				&.active {
					> span {
						border-bottom-color: #232323;
						font-weight: 700;
					}
				}
			}
		}
	}
	.profile-content {
		width: 100%;
		> .info {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 2rem;
			> img {
				width: 100%;
				height: auto;
			}
			> .content {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				gap: 1rem;
				> .profile {
					width: 5rem;
					height: 5rem;
					border-radius: 50%;
					background: #cfcfcf;
				}
				> .name {
					font-size: 1.4rem;
					color: #232323;
				}
			}
		}
		> .hr {
			margin: 1.2rem 1rem;
			border-top: 0.1rem solid #c4c4c4;
		}
		.nav-item {
			margin-left: 2rem;
			margin-bottom: 1.2rem;
			display: flex;
			align-items: center;
			height: 2rem;
			user-select: none;
			cursor: pointer;
			column-gap: 1rem;
			&.badge {
				margin: 0;
			}
			> .icon {
				width: 2rem;
				height: 2rem;
				//	margin-right: 1rem;
			}
			> .label {
				font-family: KaiseiOpti-Regular;
				font-size: 1.2rem;
				color: #585858;
			}
		}
		> .logout {
			> .label {
				font-family: KaiseiOpti-Medium;
				font-size: 1.4rem;
				color: #232323;
			}
		}
	}
</style>
