<script setup>
import "./layout.css"
import "@/assets/table.css"
import Context from "./layout.js"
import ctxRef from "@/utils/ctx_ref.js";
import { provide, ref } from "vue";
import BasicLayout from "@/layouts/BasicLayout.vue";
import TMenubar from "@/components/ui/TMenubar.vue";
import TMenuAccordion from "@/components/ui/TMenuAccordion.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TTabView from "@/components/ui/TTabView.vue";
import TTabs from "@/components/ui/TTabs.vue";
import TTab from "@/components/ui/TTab.vue";

const ctx = ctxRef(new Context())

provide("$popupLayout", false)

const mainMenuVisible = ref(false)
const showMainMenu = () => {
	const mainMenu = document.querySelector(".main-menu")
	mainMenuVisible.value = !mainMenuVisible.value
	if (mainMenuVisible.value) {
		mainMenu.style.display = "block"
	} else {
		mainMenu.style.display = "none"
	}
}

</script>

<template>
	<BasicLayout>
		<!-- 顶部导航 -->
		<div class="top-nav">
			<TMenubar>
				<template #start>
					<a href="" class="inline-block sm:hidden"
						:class="{ 'bg-gray-200': mainMenuVisible, '!bg-transparent': !mainMenuVisible }"
						@click.prevent="showMainMenu"><i class="icon bars"></i></a>
					<a href="/dashboard" class="hidden sm:flex">
						<div class="flex gap-[8px] items-center">
							<span class="title-icon text-[24px] text-[#1e65ff]"></span>
							<span class="font-bold text-[24px]">Faven.</span>
						</div>
						<!-- <i class="ui icon cloud" v-if="ctx.teaCommon.teaLogoFileId == 0"></i><img
							v-if="ctx.teaCommon.teaLogoFileId > 0" :src="'/ui/image/' + ctx.teaCommon.teaLogoFileId"
							style="width: auto;height: 1.6em" alt="Logo" class="dark:invert" /> &nbsp; {{ ctx.teaTitle
						}}&nbsp;<sup v-if="ctx.teaCommon.teaShowVersion">v{{ ctx.teaVersion }}</sup><sup
							v-if="ctx.teaFrontMode == 'proxy'">front:{{ ctx.teaFrontMode }}</sup> &nbsp; -->
					</a>
				</template>
				<template #end>
					<div class="flex flex-wrap items-center">
						<a href="/messages" class="item" :class="{ active: ctx.teaMenu == 'message' }"><span
								:class="{ 'blink': ctx.globalMessageBadge > 0 }" class="flex items-center gap-0.5"><i
									class="icon bell mr-1"></i><span class="hidden sm:inline-block">消息({{
										ctx.globalMessageBadge }}) </span></span></a>
						<a href="/settings/profile" class="item" :class="{ active: ctx.teaMenu == 'settings' }">
							<i class="icon setting mr-1"></i><span class="hidden sm:inline-block">设置</span>
						</a>
						<a href="/" class="item" v-show="ctx.teaShowIndexPage">
							<i class="icon home"></i><span class="hidden sm:inline-block">&nbsp;首页</span>
						</a>
						<a href="/docs" class="item" :class="{ active: ctx.teaMenu == 'docs' }"><i
								class="icon file mr-1"></i><span class="hidden sm:inline-block">文档</span></a>
						<a href="/settings/profile" class="item">
							<i class="icon user mr-1" v-if="ctx.teaUserAvatar.length == 0"></i>
							<img class="avatar" alt="" :src="ctx.teaUserAvatar" v-if="ctx.teaUserAvatar.length > 0" />
							<span class="hidden sm:inline-block">{{ ctx.teaCommon.teaUsername }}</span>
						</a>
						<!-- color scheme -->
						<a href="" class="item" v-tooltip.bottom="'切换亮色/暗色风格'" @click.prevent="ctx.changeColorScheme()">
							<i class="pi pi-moon" v-if="ctx.currentColorScheme == 'dark'"></i>
							<i class="pi pi-sun" v-if="ctx.currentColorScheme == 'light'"></i>
							<span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'dark'">暗色</span>
							<span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'light'">亮色</span>
						</a>
						<a :href="ctx.$url('logout')" class="item" title="安全退出登录"><i
								class="icon sign out mr-1"></i><span class="hidden sm:inline-block">退出</span></a>
					</div>
				</template>
			</TMenubar>
		</div>

		<!-- 左侧主菜单 -->
		<div class="main-menu">
			<div>
				<div class="pb-20">
					<TMenuAccordion :items="ctx.menuItems" style="width: 11em"></TMenuAccordion>
				</div>
				<TDivider layout="vertical" class="divider"></TDivider>
			</div>
		</div>

		<!-- 右侧主操作栏 -->
		<div class="main" :class="{ 'opacity-30': mainMenuVisible }">
			<!-- 操作菜单 -->
			<div class="mb-4 -mt-3">
				<TTabView v-if="ctx.teaTabbar.length > 1" code="RANDOM" :value="ctx.tabValue" @change="ctx.changeTab">
					<TTabs>
						<TTab v-for="(item, index) in ctx.teaTabbar" :code="item.url"
							@click="ctx.clickTab($event, item)" :disabled="item.isDisabled && !item.isActive">
							<!-- TODO, right, title, icon, subName -->
							<!-- right:item.isRight, title: item.isTitle, icon: item.icon != null && item.icon.length > 0-->

							<var class="not-italic">
								<span>{{ item.name }}</span>
								<span v-if="item.subName.length > 0">({{ item.subName }})</span>
								<i class="icon small" :class="item.icon"
									v-if="index == 0 && item.icon != null && item.icon.length > 0"></i>
							</var>
							<var class="not-italic" v-if="item.isTitle && typeof ctx.node == 'object'">{{ ctx.node.name
							}}</var>
						</TTab>
					</TTabs>
				</TTabView>
			</div>

			<!-- 功能区 -->
			<div class="main-box md:mb-0">
				<RouterView :key="$route.fullPath"></RouterView>
			</div>

			<!-- 底部 -->
			<div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
				v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length == 0">
				<a class="item" title="点击进入检查版本更新页面">{{ ctx.teaName }} v{{ ctx.teaVersion }}</a>
			</div>
			<div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
				v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length > 0" v-html="ctx.teaPageFooterHTML"></div>
		</div>
	</BasicLayout>
</template>

<style scoped lang="postcss">
.title-icon {
	width: 1em;
	height: 1em;
	mask-image: var(--svg);
	--svg: url(@/assets/icon/title.svg);
	background-color: currentColor;
	display: inline-block;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

:deep(td a),
:deep(.comment a),
:deep(form a) {
	color: var(--p-primary-color);
}

:deep(td a:hover),
:deep(.comment a:hover),
:deep(.form a:hover) {
	color: var(--p-primary-700);
}

.top-nav {
	border-radius: 0 !important;
	position: fixed;
	width: 100%;
	z-index: 1000;
	overflow-x: auto;
	border: 0 !important;

	.red {
		color: var(--p-red-500) !important;
	}

	.hover-span {
		span {
			display: none;
		}

		font-size: 0.8em;
	}

	.hover-span:hover {
		span {
			display: inline;
		}
	}

	.item {
		@apply flex items-center gap-0.5;
	}
}

.top-nav .p-menubar {
	border-top: 0;
	border-radius: 0;
}

@media screen and (max-width: 768px) {
	.top-nav {
		position: relative !important;
		width: 100%;
	}

	.main {
		position: relative !important;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		padding-left: 1em;
		padding-right: 1em;
	}

	.main-menu {
		display: none;
	}
}

.main-menu {
	position: fixed;
	left: 0.8em;
	top: 4.6em;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 10;
	width: 13em;
	background: #edeff4;

	.divider {
		position: fixed;
		top: 4em;
		bottom: 1em;
		left: 11.5em;
	}
}

.dark .main-menu {
	background: black;
}

.top-nav a {
	@apply px-4 py-2;
}

.top-nav a:hover {
	@apply bg-gray-100 dark:bg-gray-700 rounded-md;
}

.hover-span,
.hover-span a {
	@apply flex items-center gap-2;
}

:deep(.p-panelmenu) {
	width: 10em;
}

p.comment em,
div.comment em {
	font-style: italic;
}

:deep(.p-message) {
	@apply py-1;
}

:deep(th.width6) {
	width: 6em !important;
}

:deep(th.width10) {
	width: 10em !important;
}

:deep(span.disabled) {
	@apply text-gray-500;
}

/** footer **/
.footer a,
.footer :deep(a) {
	@apply text-white;
}

.main {
	padding-bottom: 1em;
	font-family: Source Han Sans SC;
}

.main-box {
	background-color: var(--p-content-background);
	padding: 30px;
	min-height: calc(100vh - 100px);
}

:deep(.p-menu-item-link) {
	font-weight: 400;
	font-size: 14px;
	line-height: 14px;
	color: rgba(49, 49, 49, 1);
	padding: 12px 20px;
}

:deep(.p-menu-list) {
	padding: 10px 10px;
}

:deep(.p-menu-item-link.on) {
	text-decoration: none;
}

:deep(.t-active-item) {
	color: rgba(30, 101, 255, 1) !important;
}
</style>
<style lang="postcss">
.dark {

	td a:hover,
	.comment a:hover,
	.form a:hover {
		color: var(--p-primary-200);
	}
}
</style>