<template>
	<div id="app">
		<div class="pro-wrapper">
			<div class="home-page">
				<ModuleHeader/>
				<div class="main-container">
					<router-view />
				</div>
			</div>
			<div class="right-btn" @click="handleClickToolBox">
				<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" @click="handleClickToolBox">
				<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 { useRouter } from "vue-router";
import { useRoute } from "vue-router";
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";
import { ElMessage } from "element-plus";

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

const handleClickTitle = item => {
	if (item.name === "主要国家科技动向感知" || item.name === "主要国家竞争科技安全") {
		ElMessage.warning("当前功能正在开发中，敬请期待！");
	}
};

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

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 {
			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%);

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

				.nav-left {
					height: 64px;
					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;
					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;
							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: 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: 999999;
					width: 713px;
					height: 413px;
					top: 64px;
					left: 0;
					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;
							}
						}
					}
				}
			}
		}

		.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;
		z-index: 10000000000000;

		.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;
			cursor: pointer;

			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>
