<template>
	<div class="data-library-wrapper">
		<div class="data-library-main">
			<div class="data-library-sider">
				<div class="sider-item-box" v-for="(item, index) in siderList" :key="index">
					<div class="sider-item" @click="handleSiderItem(item)">
						<div class="sider-icon">
							<img :src="item.icon" alt="" />
						</div>
						<div class="sider-name text-compact-bold" :class="{ 'sider-name-active': item.active }">
							{{ item.name }}
						</div>
						<div class="sider-arrow" v-if="item.children && item.children.length">
							<img v-if="!item.isExpanded" src="./assets/icons/arrow-down.svg" alt="" />
							<img v-else src="./assets/icons/arrow-up.svg" alt="" />
						</div>
					</div>
					<div class="sider-second-item-box" v-if="item.isExpanded">
						<div class="sider-second-item text-compact" :class="{ 'sider-second-item-acitve': val.active }"
							v-for="(val, idx) in item.children" :key="idx" @click="handleSiderSecondItem(val)">
							{{ val.name }}
						</div>
					</div>
				</div>
			</div>
			<div class="data-library-content">
				<div class="tab-box">
					<div class="tab-item" :class="{ 'tab-item-active': tab.active }" v-for="(tab, index) in openedTabList"
						:key="index" @click="handleClickTab(tab)">
						<div class="text text-tip-1" :class="{ 'text-active': tab.active }">{{ tab.meta.title }}</div>
						<el-tooltip content="关闭当前标签" placement="top">
							<div class="icon" @click.stop="handleCloseCurTab(tab, index)">
								<img v-if="!tab.active" src="./assets/icons/close.svg" alt="" />
								<img v-else src="./assets/icons/close-active.svg" alt="" />
							</div>
						</el-tooltip>
					</div>
				</div>
				<div class="main-box">
					<router-view v-slot="{ Component }">
						<!-- <keep-alive :include="tagsViewStore.cachedViews">
              <component :is="Component" :key="route.fullPath" />
            </keep-alive> -->
						<keep-alive>
							<component :is="Component" :key="route.fullPath" />
						</keep-alive>
					</router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import Icon1 from "./assets/icons/sider-icon1.svg";
import Icon2 from "./assets/icons/sider-icon2.svg";
import Icon3 from "./assets/icons/sider-icon3.svg";
import Icon4 from "./assets/icons/sider-icon4.svg";
import Icon6 from "./assets/icons/sider-icon6.svg";
import Icon7 from "./assets/icons/sider-icon7.svg";
import Icon9 from "./assets/icons/sider-icon9.svg";
import Icon10 from "./assets/icons/sider-icon10.svg";
import Icon12 from "./assets/icons/sider-icon12.svg";
import Icon13 from "./assets/icons/sider-icon13.svg";

import { useRouter, useRoute } from "vue-router";
import useTagsViewStore from "@/stores/tagsView.js";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const tagsViewStore = useTagsViewStore();
tagsViewStore.loadVisitedViewFromLocalStorage()

// 在路由全局守卫中处理
router.beforeEach((to, from, next) => {
	// 路由允许添加标签（排除掉隐藏的布局页如 /404, /login 等）
	if (to.path.indexOf("dataLibrary") > -1) {
		tagsViewStore.addView({
			path: to.path,
			name: to.name, // 对应组件的 name，用于缓存
			meta: { ...to.meta },
			active: true
		});
	}
	next();
});

const siderList = ref([
	{
		name: "科技法案",
		icon: Icon1,
		active: false,
		isExpanded: false,
		children: [
			{
				name: "国会法案",
				path: "/dataLibrary/countryBill",
				active: false
			},
			{
				name: "州法案",
				path: "/dataLibrary/stateBill",
				active: false
			}
		]
	},
	{
		name: "科技政令",
		path: "/dataLibrary/dataDecree",
		icon: Icon2,
		active: false,
		isExpanded: false,
		children: []
	},
	{
		name: "美国科技智库",
		path: "/dataLibrary/dataThinkTank",
		icon: Icon3,
		active: false,
		isExpanded: false,
		children: []
	},
	{
		name: "出口管制",
		icon: Icon4,
		active: false,
		isExpanded: false,
		children: [
			{
				name: "实体清单",
				path: "/dataLibrary/dataEntityList",
				active: false
			},
			{
				name: "实体清单事件",
				path: "/dataLibrary/dataEntityListEvent",
				active: false
			},
			{
				name: "商业管制清单",
				path: "/dataLibrary/dataCommerceControlList",
				active: false
			},

			{
				name: "商业管制清单事件",
				path: "/dataLibrary/dataCommerceControlListEvent",
				active: false
			}
		]
	},
	{
		name: "投融资限制",
		icon: Icon6,
		active: false,
		isExpanded: false,
		children: [
			{
				name: "SDN清单",
				path: "/dataLibrary/sDNList",
				active: false
			},
			{
				name: "涉军企业清单",
				path: "/dataLibrary/mREList",
				active: false
			},
			{
				name: "SDN清单事件",
				path: "/dataLibrary/sDNListEvent",
				active: false
			},
			{
				name: "涉军企业清单事件",
				path: "/dataLibrary/mREListEvent",
				active: false
			}
		]
	},
	{
		name: "市场准入限制",
		icon: Icon7,
		active: false,
		isExpanded: false,
		children: [
			{
				name: "337调查",
				path: "/dataLibrary/case337",
				active: false
			},
			{
				name: "232调查",
				path: "/dataLibrary/case232",
				active: false
			},
			{
				name: "301调查",
				path: "/dataLibrary/case301",
				active: false
			}
		]
	},
	{
		name: "科技人物",
		path: "/dataLibrary/dataTechnologyFigures",
		icon: Icon9,
		active: false,
		isExpanded: false,
		children: []
	},
	{
		name: "重要实体",
		icon: Icon10,
		active: false,
		isExpanded: false,
		children: [
			{
				name: "科技企业",
				path: "/dataLibrary/dataCompany",
				active: false
			},
			{
				name: "研究型大学",
				path: "/dataLibrary/researchUniversity",
				active: false
			},
			{
				name: "重点实验室",
				path: "/dataLibrary/keyLab",
				active: false
			},
			{
				name: "政府机构",
				path: "/dataLibrary/dataInstitution",
				active: false
			}
		]
	},
	{
		name: "新闻",
		path: "/dataLibrary/dataNews",
		icon: Icon12,
		active: false,
		isExpanded: false,
		children: []
	},
	{
		name: "风险信号",
		path: "/dataLibrary/dataRiskSignal",
		icon: Icon13,
		active: false,
		isExpanded: false,
		children: []
	},
]);

const handleSiderItem = item => {
	siderList.value.forEach(val => {
		val.active = false;
		val.isExpanded = false;
		if (val.children && val.children.length) {
			val.children.forEach(vall => {
				vall.active = false;
			});
		}
	});
	item.isExpanded = true;
	item.active = true;

	if (item.path) {
		router.push({
			path: item.path
		});
	} else {
		item.children[0].active = true;
		router.push({
			path: item.children[0].path
		});
	}
};

const handleSiderSecondItem = item => {
	siderList.value.forEach(item => {
		if (item.children.length) {
			item.children.forEach(val => {
				val.active = false;
			});
		}
	});
	item.active = true;
	router.push({
		path: item.path
	});
};

const openedTabList = computed(() => {
	return tagsViewStore.visitedViews;
});

const handleClickTab = tab => {
	tagsViewStore.visitedViews.forEach(val => {
		val.active = false;
	});
	tab.active = true;
	router.push({
		path: tab.path
	});
	siderList.value.forEach(val => {
		val.active = false;
		val.isExpanded = false;
		if (val.children && val.children.length) {
			val.children.forEach(vall => {
				vall.active = false;
			});
		}
	});

	siderList.value.forEach(val => {
		if (!val.children.length) {
			if (val.name === tab.meta.title) {
				val.active = true;
				return;
			}
		} else {
			val.children.forEach(vall => {
				if (vall.name === tab.meta.title) {
					vall.active = true;
					val.active = true;
					val.isExpanded = true;
					return;
				}
			});
		}
	});
};

const timer = ref(null);

// 关闭当前标签页
const handleCloseCurTab = (tab, index) => {
	if (tagsViewStore.visitedViews.length === 1) {
		ElMessage.warning('至少保留一个标签页')
		return
	}
	let activeTab;
	if (!tab.active) {
		tagsViewStore.delView(tab);
	} else {
		siderList.value.forEach(val => {
			val.active = false;
			if (val.children && val.children.length) {
				val.children.forEach(vall => {
					vall.active = false;
				});
			}
		});
		if (index === openedTabList.value.length - 1) {
			tagsViewStore.delView(tab);
			timer.value = setTimeout(() => {
				tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].active = true;
				activeTab = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1];
				router.push({
					path: tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].path
				});

				siderList.value.forEach(val => {
					if (!val.children.length) {
						if (val.name === activeTab.meta.title) {
							val.active = true;
							return;
						}
					} else {
						val.children.forEach(vall => {
							if (vall.name === activeTab.meta.title) {
								vall.active = true;
								val.active = true;
								return;
							}
						});
					}
				});
			});
		} else {
			tagsViewStore.delView(tab);

			tagsViewStore.visitedViews[index].active = true;
			activeTab = tagsViewStore.visitedViews[index];
			router.push({
				path: tagsViewStore.visitedViews[index].path
			});

			siderList.value.forEach(val => {
				if (!val.children.length) {
					if (val.name === activeTab.meta.title) {
						val.active = true;
						return;
					}
				} else {
					val.children.forEach(vall => {
						if (vall.name === activeTab.meta.title) {
							vall.active = true;
							val.active = true;
							return;
						}
					});
				}
			});
		}
	}
};

onMounted(() => {
	const path = route.path;
	console.log(decodeURI(route.fullPath));

	switch (path) {
		case "/dataLibrary/countryBill":
			siderList.value[0].active = true;
			siderList.value[0].isExpanded = true;
			siderList.value[0].children[0].active = true;
			break;
		case "/dataLibrary/stateBill":
			siderList.value[0].active = true;
			siderList.value[0].isExpanded = true;
			siderList.value[0].children[1].active = true;
			break;
		case "/dataLibrary/dataDecree":
			siderList.value[1].active = true;
			break;
		case "/dataLibrary/dataThinkTank":
			siderList.value[2].active = true;
			break;
		case "/dataLibrary/dataEntityList":
			siderList.value[3].active = true;
			siderList.value[3].isExpanded = true;
			siderList.value[3].children[0].active = true;
			break;
		case "/dataLibrary/dataEntityListEvent":
			siderList.value[3].active = true;
			siderList.value[3].isExpanded = true;
			siderList.value[3].children[1].active = true;
			break;
		case "/dataLibrary/dataCommerceControlList":
			siderList.value[3].active = true;
			siderList.value[3].isExpanded = true;
			siderList.value[3].children[2].active = true;
			break;

		case "/dataLibrary/dataCommerceControlListEvent":
			siderList.value[3].active = true;
			siderList.value[3].isExpanded = true;
			siderList.value[3].children[3].active = true;
			break;
		case "/dataLibrary/sDNList":
			siderList.value[4].active = true;
			siderList.value[4].isExpanded = true;
			siderList.value[4].children[0].active = true;
			break;
		case "/dataLibrary/mREList":
			siderList.value[4].active = true;
			siderList.value[4].isExpanded = true;
			siderList.value[4].children[1].active = true;
			break;
		case "/dataLibrary/sDNListEvent":
			siderList.value[4].active = true;
			siderList.value[4].isExpanded = true;
			siderList.value[4].children[2].active = true;
			break;
		case "/dataLibrary/mREListEvent":
			siderList.value[4].active = true;
			siderList.value[4].isExpanded = true;
			siderList.value[4].children[3].active = true;
			break;
		case "/dataLibrary/case337":
			siderList.value[5].active = true;
			siderList.value[5].isExpanded = true;
			siderList.value[5].children[0].active = true;
			break;
		case "/dataLibrary/case232":
			siderList.value[5].active = true;
			siderList.value[5].isExpanded = true;
			siderList.value[5].children[1].active = true;
			break;
		case "/dataLibrary/case301":
			siderList.value[5].active = true;
			siderList.value[5].isExpanded = true;
			siderList.value[5].children[2].active = true;
			break;
		case "/dataLibrary/dataTechnologyFigures":
			siderList.value[6].active = true;
			break;
		case "/dataLibrary/dataCompany":
			siderList.value[7].active = true;
			siderList.value[7].isExpanded = true;
			siderList.value[7].children[0].active = true;
			break;
		case "/dataLibrary/researchUniversity":
			siderList.value[7].active = true;
			siderList.value[7].isExpanded = true;
			siderList.value[7].children[1].active = true;
			break;
		case "/dataLibrary/keyLab":
			siderList.value[7].active = true;
			siderList.value[7].isExpanded = true;
			siderList.value[7].children[2].active = true;
			break;
		case "/dataLibrary/dataInstitution":
			siderList.value[7].active = true;
			siderList.value[7].isExpanded = true;
			siderList.value[7].children[3].active = true;
			break;
		case "/dataLibrary/dataNews":
			siderList.value[8].active = true;
			break;
		case "/dataLibrary/keyLab":
			siderList.value[9].active = true;
			break;
	}
});

onBeforeUnmount(() => {
	if (timer.value) {
		clearTimeout(timer.value);
	}
	sessionStorage.setItem('visitedViews', [])
});
</script>

<style lang="scss">
.data-library-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;

	// background: orange;
	.data-library-header {
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 37px 0 24px;
		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%);

		.header-left {
			display: flex;
			gap: 23px;
			align-items: center;

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

				img {
					width: 100%;
					height: 100%;
				}
			}
			.title {
				color: var(--color-primary-100);
			}
		}

		.header-right {
			display: flex;

			.info-box {
				display: flex;
				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;
				}
			}
		}
	}

	.data-library-main {
		height: 100%;
		background: #f7f8f9;
		display: flex;

		.data-library-sider {
			width: 320px;
			background: rgb(255, 255, 255);
			border-right: 1px solid rgba(234, 236, 238, 1);

			.sider-item {
				height: 54px;
				padding: 0 26px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				display: flex;
				gap: 12px;
				align-items: center;
				cursor: pointer;

				.sider-name {
					width: 207px;

					&:hover {
						color: var(--color-primary-100);
					}
				}

				.sider-name-active {
					color: var(--color-primary-100);
				}
			}

			.sider-second-item {
				height: 54px;
				padding: 15px 24px 15px 60px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);
				cursor: pointer;

				&:hover {
					background: var(--color-primary-10);
					color: var(--color-primary-100);
				}
			}

			.sider-second-item-acitve {
				background: var(--color-primary-10);
				color: var(--color-primary-100);
				border-right: 4px solid var(--color-primary-100);
			}
		}

		.data-library-content {
			width: 1600px;

			.tab-box {
				width: 1600px;
				height: 48px;
				background: rgba(255, 255, 255);
				border-bottom: 2px solid var(--bg-black-5);
				display: flex;
				overflow: hidden;

				.tab-item {
					// height: 46px;
					white-space: nowrap;
					/* 强制文字不换行 */
					overflow: hidden;
					/* 隐藏溢出的文字 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					display: flex;
					flex-wrap: nowrap;
					gap: 8px;
					align-items: center;
					padding: 0 12px 0 16px;
					border-bottom: 2px solid var(--bg-white-100);
					cursor: pointer;

					// animation: all ease 0.5s;
					&:hover {
						flex: 0 0 auto;
						/* 不再压缩 */
						/* 或者设定一个固定宽度 */
						/* width: 150px; */
						z-index: 10;
						/* 提高层级 */
						// box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);

						.text {
							// width: 150px;
							color: var(--color-primary-100);
						}
					}

					.text {
						/* 关键属性2: 处理内部文字溢出 */
						white-space: nowrap;
						/* 强制文字不换行 */
						overflow: hidden;
						/* 隐藏溢出的文字 */
						text-overflow: ellipsis;
						/* 显示省略号 */
					}

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

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

						&:hover {
							border-radius: 8px;
							background: var(--color-primary-10);
						}

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

				.tab-item-active {
					border-bottom: 2px solid var(--color-primary-100) !important;
				}
			}

			.main-box {
				width: 1600px;
				height: calc(100% - 48px);
				overflow: hidden;
				overflow-y: auto;
			}

			.select-box {
				width: 1568px;
				height: 112px;
				border-radius: 10px;
				background: rgb(255, 255, 255);
				border: 1px solid var(--bg-black-5);
				margin: 16px auto;
			}

			.info-box {
				margin: 0 auto;
				width: 1568px;
				height: 30px;
				display: flex;
				justify-content: space-between;
			}

			.switch-box {
				width: 160px;
				border-radius: 20px;
				border: 1px solid var(--color-primary-100);
				height: 30px;
				cursor: pointer;

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

			.num-box {
				color: var(--color-red-100);
			}

			.content-box {
				margin: 0 auto;
				margin-top: 16px;
				width: 1568px;
				height: 766px;
				border-radius: 10px;
				background: rgba(255, 255, 255);
				border: 1px solid var(--bg-black-5);
			}
		}
	}
}
</style>
