<template>
	<div class="module-header-wrapper">
		<div class="nav-content">
			<div class="nav-left" :class="{ 'flex-start': isShowSearchBar }">
				<div class="icon">
					<img v-show="!isShowSearchBar" src="@/assets/icons/overview/logo.png" alt="" />
					<img v-show="isShowSearchBar" src="@/assets/icons/overview/logo-white.png" alt="" />
				</div>
				<SearchBar v-show="isShowSearchBar" />
				<div class="title-box" v-show="!isShowSearchBar">
					<!-- <div class="title-box" v-if="false"> -->
					<div class="title" v-for="(item, index) in homeTitleList" :key="index"
						@mouseenter="handleShowMenu(index, true)" @click="handleClickTitle(item, index)">
						<div class="text text-title-1-show" :class="{ textActive: homeActiveTitleIndex === index }">
							{{ item.name }}
						</div>
						<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
					</div>
				</div>
			</div>

			<div class="nav-right">
				<div class="info-box" @click="handleClickToolBox">
					<div class="mail">
						<img src="@/assets/icons/overview/mail.png" alt="" />
					</div>
					<div class="user">
						<img src="@/assets/icons/overview/user.png" alt="" />
					</div>
					<div class="name text-regular">{{ "管理员" }}</div>
				</div>
			</div>
			<div class="menu-box" v-show="isShowMenu" @mouseenter="handleHoverMenu(true)"
				@mouseleave="handleHoverMenu(false)">
				<div class="menu-content">
					<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item, 1)">
						<div class="icon">
							<img :src="item.icon" alt="" />
						</div>
						<div class="title" :class="{ 'active-title': item.active }">{{ item.title }}</div>
					</div>
				</div>
			</div>
			<div class="tool-box" v-show="isShowTool" @mouseenter="handleHoverTool(true)"
				@mouseleave="handleHoverTool(false)">
				<div class="menu-content">
					<div class="menu-item" v-for="(item, index) in toolList" :key="index" @click="handleToModule(item, 2)">
						<div class="icon">
							<img :src="item.icon" alt="" />
						</div>
						<div class="title">{{ item.title }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, watchEffect, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { getPersonType } from "@/api/common/index";
import SearchBar from "@/components/layout/SearchBar.vue";

import Menu1 from "@/assets/icons/overview/menu1.png";
import Menu2 from "@/assets/icons/overview/menu2.png";
import Menu3 from "@/assets/icons/overview/menu3.png";
import Menu4 from "@/assets/icons/overview/menu4.png";
import Menu5 from "@/assets/icons/overview/menu5.png";
import Menu6 from "@/assets/icons/overview/menu6.png";
import Menu7 from "@/assets/icons/overview/menu7.png";
import Menu8 from "@/assets/icons/overview/menu8.png";
import Menu9 from "@/assets/icons/overview/menu9.png";
import Menu10 from "@/assets/icons/overview/menu10.png";
import Menu11 from "@/assets/icons/overview/menu11.png";
import Menu12 from "@/assets/icons/overview/menu12.png";
import Tool1 from './tool1.svg'
import Tool2 from './tool2.svg'
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const store = useWrittingAsstaintStore();
let isShowSearchBar = computed(() => {
	return store.isShowSearchBar;
});
const router = useRouter();
const route = useRoute()

const personTypeList = ref([]);

// 获取人物类别
const handleGetPersonType = async () => {
	try {
		const res = await getPersonType();
		console.log("res", res);
		if (res.code === 200) {
			personTypeList.value = res.data;
		} else {
			personTypeList.value = [];
		}
		window.sessionStorage.setItem("personTypeList", JSON.stringify(personTypeList.value));
	} catch (error) { }
};

// 概览页标题列表
const homeTitleList = ref([

	{
		name: "首页",
		path: "/ZMOverView",
		disabled: false
	},

	{
		name: "中美科技博弈",
		path: "/billHome",
		disabled: false
	},
	{
		name: "智能工具",
		path: "/chat",
		disabled: false
	},
	{
		name: "数据资源库",
		path: "/dataLibrary",
		disabled: false
	}
]);

const homeActiveTitleIndex = ref(0);

const isShowMenu = ref(false);
const handleShowMenu = (index, isShow) => {
	if (index === 1) {
		isShowMenu.value = isShow;
		isShowTool.value = false;
	} else if (index === 2) {
		isShowMenu.value = false
		isShowTool.value = isShow;
	} else {
		isShowMenu.value = false
		isShowTool.value = false;
	}
};

const handleHoverMenu = isShow => {
	isShowMenu.value = isShow;
};

const menuList = ref([
	// {
	// 	title: "中美科技博弈概览",
	// 	icon: Menu1,
	// 	path: "/ZMOverView"
	// },
	{
		title: "科技法案",
		icon: Menu2,
		path: "/billHome",
		active: false
	},
	{
		title: "科技政令",
		icon: Menu3,
		path: "/decree",
		active: false
	},
	{
		title: "美国科技智库",
		icon: Menu4,
		path: "/thinkTank",
		active: false
	},
	{
		title: "出口管制",
		icon: Menu5,
		path: "/exportControl",
		active: false
	},
	{
		title: "科研合作限制",
		icon: Menu6,
		path: "/cooperationRestrictions",
		active: false
	},
	{
		title: "投融资限制",
		icon: Menu7,
		path: "/finance",
		active: false
	},
	{
		title: "市场准入限制",
		icon: Menu8,
		path: "/marketAccessRestrictions",
		active: false
	},
	{
		title: "规则限制",
		icon: Menu9,
		path: "/ruleRestrictions",
		active: false
	},
	{
		title: "美国科技人物观点",
		icon: Menu10,
		path: "/technologyFigures",
		active: false
	},
	{
		title: "美国主要创新主体动向",
		icon: Menu11,
		path: "/innovationSubject",
		active: false
	},
	{
		title: "美国科研资助体系",
		icon: Menu12,
		path: "/scientificFunding",
		active: false
	}
]);

const isShowTool = ref(false);

const handleHoverTool = isShow => {
	isShowTool.value = isShow;
};


const toolList = ref([
	{
		title: "智能问答",
		icon: Tool1,
		path: "/chat"
	},
	{
		title: "智能写报",
		icon: Tool2,
		path: "/writtingAsstaint"
	},
])

const handleToModule = (item, index) => {
	window.sessionStorage.setItem('homeActiveTitleIndex', index)
	if (index === 1) {
		homeActiveTitleIndex.value = index
		item.active = true
		router.push({
			path: item.path
		})
	} else {
		const curRoute = router.resolve({
			path: item.path,
			query: {
				titleIndex: 2
			}
		});
		window.open(curRoute.href, "_blank");
	}

	isShowMenu.value = false
	isShowTool.value = false
};

const handleClickTitle = (item, index) => {

	if (index === 0 || index === 3) {
		window.sessionStorage.setItem('homeActiveTitleIndex', index)
		homeActiveTitleIndex.value = index
		router.push(item.path)
	}
};

const handleClickToolBox = () => {
	ElMessage.warning("当前功能正在开发中，敬请期待！");
};

onMounted(() => {
	handleGetPersonType();
	if (route.query.titleIndex) {
		homeActiveTitleIndex.value = Number(route.query.titleIndex)
	} else {
		homeActiveTitleIndex.value = Number(window.sessionStorage.getItem('homeActiveTitleIndex'))

	}
});

onUnmounted(() => {
	window.sessionStorage.removeItem('homeActiveTitleIndex')
})
</script>

<style lang="scss" scoped>
.module-header-wrapper {
	width: 100%;
	// height: 64px;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	background: linear-gradient(180deg, rgba(246, 250, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
	padding: 12px 0;

	.nav-content {
		width: 1600px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		align-items: flex-start;

		.nav-left {
			display: flex;
			align-items: center;

			&.flex-start {
				align-items: flex-start;

				.icon {
					flex-shrink: 0;
					width: 48px;
					height: 48px;
					border-radius: 50%;
					background: rgb(5, 95, 194);
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 29px;
						height: 30px;
					}
				}
			}

			.icon {
				width: 29px;
				height: 30px;
				margin-right: 17px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title-box {
				display: flex;
				gap: 30px;

				.title {
					cursor: pointer;
					position: relative;

					&:hover {
						.text {
							color: var(--color-main-active);
						}
					}

					.text {
						color: var(--text-primary-80-color);
					}

					.textActive {
						color: var(--color-main-active);
					}

					.bottom-line {
						position: absolute;
						bottom: -15px;
						width: 90%;
						height: 20px;
						margin-top: 9px;

						&::after {
							display: block;
							content: "";
							width: 50%;
							height: 4px;
							background: var(--color-main-active);
							position: absolute;
							bottom: 2px;
							left: 0;
							right: 0;
							margin: 0 auto;
						}
					}
				}
			}
		}

		.nav-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 21px;

			.info-box {
				height: 40px;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.mail {
					width: 32px;
					height: 32px;
					margin-right: 14px;
					cursor: pointer;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.user {
					width: 32px;
					height: 32px;
					margin-right: 11px;
					cursor: pointer;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					width: 48px;
					height: 30px;
					color: var(--text-primary-80-color);
				}
			}
		}

		.menu-box {
			// position: absolute;
			// z-index: 999999999;
			// width: 713px;
			// height: 413px;
			// top: 52px;
			// left: 0;
			// box-sizing: border-box;
			// border-radius: 10px;
			// backdrop-filter: blur(10px);
			// -webkit-backdrop-filter: blur(10px);
			// box-shadow: 0px 8px 32px 0px rgba(31, 38, 135, 0.15);
			// background: rgba(255, 255, 255, 0.25);
			// backdrop-filter: blur(10px);
			// -webkit-backdrop-filter: blur(10px);
			// border: 1px solid rgba(255, 255, 255, 0.3);
			// background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
			// box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
			position: absolute;
			z-index: 999999;
			width: 713px;
			height: 413px;
			top: 52px;
			left: -2px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			backdrop-filter: blur(30px);
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.8);

			.menu-content {
				width: 562px;
				height: 348px;
				margin-top: 8px;
				margin-left: 72px;
				display: flex;
				flex-wrap: wrap;

				.menu-item {
					margin-top: 36px;
					width: 280px;
					height: 24px;
					display: flex;
					cursor: pointer;

					&:hover {
						.title {
							color: var(--color-main-active);
							font-size: 20px;
						}
					}

					.icon {
						width: 24px;
						height: 24px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						margin-left: 16px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}

					.active-title {
						color: var(--color-main-active) !important;
						font-size: 20px !important;
					}
				}
			}
		}

		.tool-box {
			position: absolute;
			z-index: 999999;
			width: 273px;
			height: 171px;
			top: 52px;
			left: 300px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			backdrop-filter: blur(30px);
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.8);

			.menu-content {
				width: 562px;
				height: 348px;
				margin-top: 8px;
				margin-left: 72px;

				.menu-item {
					margin-top: 36px;
					width: 280px;
					height: 24px;
					display: flex;
					cursor: pointer;



					&:hover {
						.title {
							color: var(--color-main-active);
							font-size: 20px;
						}
					}

					.icon {
						width: 24px;
						height: 24px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						margin-left: 16px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 18px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
					}

					.active-title {
						color: var(--color-main-active) !important;
						font-size: 20px !important;
					}
				}
			}
		}
	}
}
</style>
