<template>
	<div id="app">
		<div class="pro-wrapper">
			<div class="home-page">
				<div class="navbar">
					<div class="nav-left">
						<div class="icon">
							<img src="@/assets/icons/overview/logo.png" alt="" />
						</div>
						<div class="title-box">
							<div
								class="title"
								:aria-disabled="item.disabled"
								v-for="(item, index) in homeTitleList"
								:key="index"
								@mouseenter="handleShowMenu(index, true)"
								@mouseleave="handleShowMenu(index, false)"
							>
								<div class="text" :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="search-box">
							<div class="input"><el-input type="text" v-model="searchText" @keyup.enter="handleSearch" /></div>

							<div class="icon" @click="handleSearch">
								<img src="@/assets/icons/overview/search.png" alt="" />
							</div>
						</div>
						<div class="info-box" aria-disabled="true">
							<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">{{ "管理员" }}</div>
						</div>
					</div>
				</div>
				<div class="menu-box" v-if="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)">
							<div class="icon">
								<img :src="item.icon" alt="" />
							</div>
							<div class="title">{{ item.title }}</div>
						</div>
					</div>
				</div>
				<div class="main-container">
					<router-view />
				</div>
			</div>
			<!-- <div class="content-page" v-if="!isCurrentOverview">
				<div class="navbar">
					<div class="nav-brand">
						<div class="brand-icon">
							<img src="@/assets/icons/header-logo.png" alt="" />
						</div>
						<div class="brand-text" @click="handleToHome">
							<div class="text-ch">某方向风险监测预警系统</div>
						</div>
					</div>
					<div class="user-info">
						<div class="email">
							<img src="@/assets/icons/header-icon.png" alt="" />
						</div>
						<div class="avator">
							<img src="@/assets/icons/header-avator.png" alt="" />
						</div>
						<span class="user">管理员</span>
					</div>
				</div>
				<div class="main-container">
					<router-view />
				</div>
			</div> -->

			<div class="right-btn" aria-disabled="true">
				<div class="item">
					<div class="icon">
						<img src="@/assets/icons/overview/domain.png" alt="" />
					</div>
					<div class="text">{{ "领域" }}</div>
				</div>
				<div class="item">
					<div class="icon">
						<img src="@/assets/icons/overview/element.png" alt="" />
					</div>
					<div class="text">{{ "要素" }}</div>
				</div>
			</div>

			<div class="tool-box" aria-disabled="true">
				<div class="tool-item">
					<img src="@/assets/icons/tool-item-icon1.png" alt="" />
				</div>
				<div class="tool-item">
					<img src="@/assets/icons/tool-item-icon2.png" alt="" />
				</div>
				<div class="tool-item">
					<img src="@/assets/icons/tool-item-icon3.png" alt="" />
				</div>
				<div class="tool-item">
					<img src="@/assets/icons/tool-item-icon4.png" alt="" />
				</div>
			</div>

			<!-- <div class="ai-btn" @click="openAiBox">
				<div class="icon">
					<img src="@/assets/icons/ai-icon.png" alt="" />
				</div>
				<div class="text">智能问答</div>
			</div> -->

			<div class="ai-dialog" v-if="isShowAiBox">
				<AiBox @close="closeAiBox" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { Monitor, House, User, Location, Document, Bell, Message, ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import Breadcrumb from "@/components/BreadCrumb/index.vue";
import AiBox from "./components/AiBox.vue";
import { getPersonType } from "@/api/common/index";
// import { useDraggable } from "@vueuse/core";

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";

const router = useRouter();
const route = useRoute();

// const target = ref(null);

// const { x, y, isDragging } = useDraggable(target, {
// 	initialValue: { x: 1770, y: 800 },
// 	onStart: () => console.log("开始拖动"),
// 	onEnd: () => console.log("结束拖动")
// });

// const style = computed(() => ({
// 	position: "absolute",
// 	left: `${x.value}px`,
// 	top: `${y.value}px`,
// 	cursor: isDragging.value ? "grabbing" : "grab"
// }));

const handleToHome = () => {
	router.push({
		path: "/ZMOverView"
	});
	isCurrentOverview.value = true;
};

const isShowAiBox = ref(false);

const closeAiBox = () => {
	isShowAiBox.value = false;
};

const openAiBox = () => {
	isShowAiBox.value = true;
};

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 isCurrentOverview = computed(() => {
	if (route.path === "/ZMOverView") {
		return true;
	} else {
		return false;
	}
});

// 概览页标题列表
const homeTitleList = ref([
	{
		name: "中美科技博弈",
		path: "/ZMOverView",
		disabled: false
	},
	{
		name: "主要国家科技动向感知",
		path: "",
		disabled: true
	},
	{
		name: "主要国家竞争科技安全",
		path: "",
		disabled: true
	}
]);

const homeActiveTitleIndex = ref(0);

const isShowMenu = ref(false);
const handleShowMenu = (index, isShow) => {
	if (index === 0) {
		isShowMenu.value = isShow;
	}
};

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

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

const handleToModule = item => {
	const curRoute = router.resolve({
		path: item.path
	});
	window.open(curRoute.href, "_blank");
};

const searchText = ref("");

const handleSearch = () => {
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {
			searchText: searchText.value
		}
	});
	window.open(curRoute.href, "_blank");
};

onMounted(() => {
	handleGetPersonType();
});
</script>

<style>
/* 全局样式重置 */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.el-popover {
	width: 100%;
	font-family: "Microsoft YaHei";
	color: rgba(95, 101, 108, 1);
	font-style: Regular;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: justify;
}

.el-popper[data-popper-placement^="top"] > .el-popper__arrow:before {
	display: none;
}
</style>

<style lang="scss" scoped>
#app {
	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.pro-wrapper {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	.home-page {
		width: 100%;
		height: 100%;
		position: relative;
		.navbar {
			height: 64px;
			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%);
			display: flex;
			justify-content: space-between;
			.nav-left {
				height: 64px;
				margin-left: 161px;
				display: flex;
				.icon {
					margin-top: 17px;
					width: 29px;
					height: 30px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.title-box {
					display: flex;
					height: 64px;
					margin-left: 21px;
					gap: 33px;
					.title {
						height: 64px;
						cursor: pointer;
						&:hover {
							.text {
								color: var(--color-main-active);
							}
						}
						.text {
							height: 39px;
							margin-top: 12px;
							color: rgba(59, 65, 75, 1);
							font-family: YouSheBiaoTiHei;
							font-style: Regular;
							font-size: 30px;
							font-weight: 400;
							line-height: 39px;
							letter-spacing: 0px;
						}
						.textActive {
							color: var(--color-main-active);
						}
						.bottom-line {
							width: 50px;
							height: 4px;
							margin: 0 auto;
							margin-top: 9px;
							background: var(--color-main-active);
						}
					}
				}
			}
			.nav-right {
				display: flex;
				justify-content: flex-end;
				margin-right: 159px;
				gap: 21px;
				.search-box {
					margin-top: 16px;
					width: 300px;
					height: 36px;
					box-sizing: border-box;
					border: 1px solid rgba(231, 243, 255, 1);
					border-radius: 10px;
					background: rgba(231, 243, 255, 1);
					display: flex;
					.input {
						width: 264px;
						height: 36px;
					}
					.icon {
						width: 18px;
						height: 18px;
						margin-left: 9px;
						margin-top: 9px;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
				.info-box {
					height: 64px;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.mail {
						width: 32px;
						height: 32px;
						margin-right: 14px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.user {
						width: 32px;
						height: 32px;
						margin-right: 11px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.name {
						width: 48px;
						height: 30px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
					}
				}
			}
		}
		.menu-box {
			position: absolute;
			z-index: 9999;
			width: 713px;
			height: 413px;
			top: 65px;
			left: 140px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			backdrop-filter: blur(30px);
			background: rgba(255, 255, 255, 0.8);
			.menu-content {
				width: 562px;
				height: 348px;
				margin-top: 20px;
				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;
					}
				}
			}
		}
		.main-container {
			width: 100%;
			height: calc(100vh - 64px);
			position: relative;
			overflow: hidden;
		}
	}
	.content-page {
		width: 100%;
		height: 100%;
		.navbar {
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			color: rgba(10, 18, 30, 1);
			border-bottom: 1px solid #e5e7eb;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			position: relative;
			box-sizing: border-box;
			height: 72px;
			.nav-brand {
				display: flex;
				align-items: center;
				gap: 12px;
				position: absolute;
				left: 160px;

				.brand-icon {
					width: 48px;
					height: 48px;
					img {
						width: 100%;
						height: 100%;
					}
				}

				.brand-text {
					cursor: pointer;
					.text-ch {
						height: 37px;
						color: rgba(10, 18, 30, 1);
						font-family: Microsoft YaHei;
						font-size: 32px;
						font-weight: 700;
						line-height: 37px;
					}

					.text-en {
						color: rgba(10, 18, 30, 1);
						font-family: Microsoft YaHei;
						font-size: 10px;
						font-weight: 400;
						line-height: 13px;
					}
				}
			}

			.user-info {
				display: flex;
				align-items: center;
				gap: 20px;
				padding: 8px 12px;
				border-radius: 6px;
				color: #333;
				position: absolute;
				right: 160px;

				.email {
					width: 20px;
					height: 20px;

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

				.avator {
					width: 32px;
					height: 32px;

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

				.user {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 30px;
				}
			}
		}
		.main-container {
			width: 100%;
			height: calc(100vh - 72px);
			position: relative;
			overflow: hidden;
		}
	}

	.right-btn {
		position: absolute;
		top: 132px;
		right: 0;
		.item {
			width: 108px;
			height: 40px;
			box-sizing: border-box;
			border: 1px solid #fff;
			border-radius: 50px 0px 0px 50px;
			background: rgba(255, 255, 255, 0.65);
			display: flex;
			margin-bottom: 8px;
			cursor: pointer;
			.icon {
				width: 36px;
				height: 36px;
				margin-top: 2px;
				margin-left: 2px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				width: 36px;
				height: 24px;
				color: rgba(59, 65, 75, 1);
				font-family: Source Han Sans CN;
				font-style: Regular;
				font-size: 18px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
				margin-top: 8px;
				margin-left: 10px;
			}
		}
	}

	.tool-box {
		position: absolute;
		top: 400px;
		right: 28px;
		top: 681px;
		width: 62px;
		height: 217px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 0.65);
		box-sizing: border-box;
		padding: 24px 18px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.tool-item {
			width: 24px;
			height: 24px;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.ai-btn {
		position: absolute;
		bottom: 240px;
		right: 10px;
		z-index: 9999;
		cursor: pointer;

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

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

		.text {
			margin-top: -15px;
			height: 24px;
			color: rgba(59, 65, 75, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			text-align: center;
		}
	}
	.ai-dialog {
		position: absolute;
		right: 100px;
		top: 100px;
		z-index: 9999;
	}
}

:deep(.el-input__wrapper) {
	height: 100%;
	box-shadow: none;
	border-radius: 10px;
	background: transparent;
}
:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}

.title[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.info-box[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.right-btn[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.tool-box[aria-disabled="true"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}
</style>
