<template>
	<header class="main-header" v-scroll-progress>
		<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
		<div class="center-nav">
			<div class="nav-item" v-for="item in navList" :key="item.name">
				<down-menu :title="item.name" v-if="item.children">
					<router-link :to="child.path" v-for="child in item.children" :key="child.path">
						{{ child.name }}
					</router-link>
				</down-menu>
				<router-link class="link hover-bottom-animation" :to="item.path" v-else>
					{{ item.name }}
					<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
				</router-link>
			</div>
		</div>
		<div class="right">
			<down-menu title="English">
				<router-link class="link" to="/">English</router-link>
				<router-link class="link" to="/zh-cn">简体中文</router-link>
				<router-link class="link" to="/zh-tw">繁體中文</router-link>
			</down-menu>
			<span class="">
				<span class="iconfont icon-wode"></span>
				<span>My Account</span>
			</span>
		</div>
	</header>
</template>
<script setup lang="ts">
	import { ref, onMounted, onUnmounted, computed } from 'vue'
	import DownMenu from './down-menu.vue'

	import { useRoute } from 'vue-router'
	const route = useRoute()
	console.log(route)

	const navList = ref([
		{
			name: 'Home',
			path: '/'
		},
		{
			name: 'About Us',
			path: '/about-us'
		},
		{
			name: 'Our Solutions',
			path: '',
			children: [
				{
					name: 'AiDA 3.1',
					path: '/aida'
				},
				{
					name: 'Mixi',
					path: '/mixi'
				}
			]
		},
		{
			name: 'Communities',
			path: '',
			children: [
				{
					name: 'Events',
					path: '/events'
				},
				{
					name: 'User Stories',
					path: '/user-stories'
				},
				{
					name: 'Help Centre',
					path: '/help-centre'
				}
			]
		},
		{
			name: 'Media',
			path: '/media'
		},
		{
			name: 'Contact Us',
			path: '/contact-us'
		}
	])
</script>
<style lang="less" scoped>
	.main-header {
		position: fixed;
		width: 100%;
		height: 85px;
		padding: 15px 30px;
		box-sizing: border-box;
		top: 0;
		left: 0;
		z-index: 10000;
		transition: background-color 0.2s linear;
		&.active {
			background-color: #0a0a0a;
		}
		display: flex;
		justify-content: space-between;
		align-items: center;
		> .logo {
			height: 100%;
			width: auto;
			img {
				width: auto;
				height: 100%;
			}
		}
		> .center-nav {
			display: flex;
			align-items: center;
			justify-content: center;
			> .nav-item {
				position: relative;
				> .link {
					margin: 0 14px;
					color: #fff;
					font-size: 15px;
					text-decoration: none;
					line-height: 37px;
					display: inline-block;

					> .iconfont {
						opacity: 0.5;
						font-size: 10px;
						margin-left: 5px;
					}
				}
				> .child {
					position: absolute;
					bottom: 0;
					visibility: hidden;
					width: 250px;
					height: auto;
					padding: 10px 0;
					box-sizing: border-box;
					border: 1px solid #e1e1e1;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					transform: translateY(calc(100% + 5px));
					> .child-link {
						display: inline-block;
						padding: 10px 15px;
						color: #000;
						font-size: 15px;
						text-decoration: none;
						text-align: left;
						&:hover {
							opacity: 0.5;
						}
					}
				}
				&:hover > .child {
					animation: child-show 0.2s linear both;
				}
				@keyframes child-show {
					0% {
						visibility: hidden;
						// opacity: 0;
					}
					100% {
						// opacity: 1;
						transform: translateY(100%);
						visibility: visible;
					}
				}
			}
		}
		> .right {
			display: flex;
			align-items: center;
			justify-content: center;
			> span {
				margin: 0 14px;
				color: #fff;
				font-size: 15px;
				text-decoration: none;
				line-height: 37px;
				display: inline-block;
				position: relative;
			}
		}
	}
</style>
