<template>
	<div class="index-layout">
		<t-head-menu class="menu" v-model="menuValue">
			<template #logo>
				<div
					v-if="owner"
					class="owner"
					v-popup:config="popupUserStore.config"
					@mouseenter="popupUserStore.user.value = owner"
				>
					<img
						class="avatar ir-pixelated"
						:class="(<any>ImageType)[owner.profile.avatarType]"
						:src="UserAPI.getAvatarURL(owner.profile)"
						alt="avatar"
					/>
					<div class="name">夜雨</div>
				</div>
			</template>
			<t-menu-item to="/?p=0" :value="Menu.INDEX">主页</t-menu-item>
			<t-menu-item
				:href="SettingMapper.getDomainLink(SettingKey.DOMAIN_GIT)"
				:value="Menu.GIT" target="_blank"
			>开源项目</t-menu-item>
			<t-menu-item to="/about" :value="Menu.ABOUT">关于</t-menu-item>
			<template #operations v-if="SettingMapper.is(SettingKey.ENABLE_LOGIN)">
				<login-menu v-if="showUser" />
			</template>
		</t-head-menu>
		<router-view :key="route.name!" />
	</div>
</template>

<script lang="ts" setup>
import { deviceStore, ImageType, SettingKey, SettingMapper, UserAPI, UserView } from "timi-web";
import LoginMenu from "@/components/LoginMenu.vue";
import { popupUserStore } from "timi-tdesign-pc";

// 个人信息
const owner = ref<UserView>();
onMounted(async () => owner.value = await UserAPI.view(1));

// 路由
enum Menu {
	INDEX = "INDEX",
	GIT = "GIT",
	ABOUT = "ABOUT"
}

const regexMenu: {
	[key: string]: Menu
} = {
	"ArticleIndex|ArticleDetail": Menu.INDEX,
	"About": Menu.ABOUT
};

const route = useRoute();
const menuValue = ref();

const syncMenuRouter = (routerName?: string) => {
	if (routerName) {
		for (const item in regexMenu) {
			if (new RegExp(item).test(routerName as string)) {
				menuValue.value = regexMenu[item];
				break;
			}
		}
	}
};
watch(() => route.name, (routerName) => syncMenuRouter(routerName as string));
onMounted(() => syncMenuRouter(route.name as string));

// 登录
const showUser = computed(() => !deviceStore.isPhone.value);
</script>

<style lang="less" scoped>
.index-layout {

	.menu {
		top: 0;
		z-index: 12;
		position: sticky;
		background: rgba(255, 255, 255, .8);
		border-bottom: var(--tui-border);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);

		.owner {
			height: calc(100% - .5rem);
			margin: 0 1rem 0 0;
			padding: .25rem;
			display: flex;
			align-items: center;

			.avatar {
				height: 100%;
			}

			.name {
				font-size: 1rem;
				margin-left: 1rem;
			}
		}
	}
}
</style>
