<template>
	<div class="introduction-wrap">
		<div class="page-left">
			<div class="box1" v-loading="box1Params.loading">
				<AnalysisBox title="主要指令" :showAllBtn="false">
					<template #header-btn>
						<div class="mind-bnt" @click="onDecreeMindMap()">
							<div class="mind-icon">
								<img src="./assets/images/edit-line.png" alt="">
							</div>
							<div class="mind-text">思维导图</div>
						</div>
					</template>
					<div class="analysis-box">
						<div class="analysis-top">
							<el-select v-model="areaType" :empty-values="[null, undefined]" @change="onMainContentData()"
								style="width: 200px;">
								<el-option label="全部领域" value="" />
								<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
							<div style="flex: auto; width: 20px;"></div>
							<!-- <el-switch v-model="isHighlight" />
							<div style="margin-left: 6px;">高亮实体</div> -->
							<div class="select-input">
								<el-input v-model="commandWord" @keyup.enter="onMainContentData()" style="width: 100%; height: 100%;"
									:prefix-icon="Search" placeholder="指令搜索" clearable @clear="onMainContentData()" />
							</div>
						</div>
						<div class="analysis-content">
							<!-- 遍历文档章节 -->
							<el-empty v-if="!contentList?.length" style="padding: 80px 0 96px;" description="暂无数据" :image-size="100" />
							<div v-for="(section, index) in contentList" :key="index" class="section">
								<div class="section-header">
									<div class="section-title text-align-justify" v-html="section.content"></div>
									<!-- <div class="section-icon">
										<img src="./assets/images/open-icon.png" alt="" />
									</div> -->
								</div>
								<!-- 渲染一级列表 -->
								<div class="numbered-list">
									<div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item">
										<div class="list-item-dot">{{ itemIndex + 1 }}.</div>
										<div class="list-item-word" v-html="item.content"></div>

										<!-- 渲染二级列表 -->
										<div v-if="item.slaver" class="sub-list">
											<div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item">
												<div class="sub-item-dot">({{ subIndex + 1 }})</div>
												<div class="sub-item-word" v-html="subItem.content"></div>

												<!-- 渲染三级列表 -->
												<div v-if="subItem.slaver" class="sub-sub-list">
													<div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex"
														class="sub-sub-item">
														<div class="sub-sub-item-dot">{{ ALPHABET[subSubIndex % 26] }}.</div>
														<div class="sub-sub-item-word" v-html="subSubItem.content"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="page-right">
			<div class="box3" v-loading="orgInfo.loading">
				<AnalysisBox title="执行机构" :showAllBtn="false">
					<div class="box3-top" v-if="orgInfo.list?.length">
						<div class="organization-list">
							<div class="organization-item" v-for="item in orgInfo.list" :key="item.id">
								<ActionButton @click="handleOrganization(item)" :name="item.obb" :type="item.id == orgInfo.node.id ? 'active' : 'normal'" />
							</div>
						</div>
						<div class="box3-top-top">
							<div class="left">
								<img :src="orgInfo.node.logo || DefaultIcon2" alt="" />
							</div>
							<div class="right">
								<div class="name text-click-hover" @click="handleToInstitution()">{{ orgInfo.node.name + " >" }}</div>
								<div class="ename">{{ orgInfo.node.ename }}</div>
							</div>
						</div>
						<div class="box3-top-bottom">
							<div class="box3-top-bottom-header">
								<div class="icon">
									<img src="./assets/images/box3-icon1.png" alt="" />
								</div>
								<div class="text">{{ "关键人物" }}</div>
							</div>
							<div class="box3-top-bottom-main">
								<el-empty v-if="!orgInfo.node.leaders?.length" style="width:100%; height:100%;" description="暂无数据" :image-size="60" />
								<div class="box3-top-bottom-item" v-for="(item, index) in orgInfo.node.leaders" :key="index">
									<div class="box3-top-bottom-item-left">
										<img :src="item.avatar || DefaultIcon1" alt="" />
									</div>
									<div class="box3-top-bottom-item-right">
										<div class="name one-line-ellipsis text-click-hover" @click="handleClickUser(item)">{{ item.name }}
										</div>
										<div class="position">{{ item.job }}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="organization-button" @click="handleClickToolBox()">
							<div class="button-text">查看政令执行情况</div>
							<el-icon size="16">
								<Right />
							</el-icon>
						</div>
					</div>
					<el-empty v-else style="padding: 98px 0 138px;" description="暂无数据" :image-size="100" />
				</AnalysisBox>
			</div>
			<div class="box4" v-loading="box4Params.loading">
				<AnalysisBox title="相关实体" :showAllBtn="false">
					<div v-if="box4Params.list?.length" class="left-bottom-main">
						<div v-for="(item, index) in box4Params.list" :key="index" class="main-box">
							<div class="icon">
								<img style="width: 100%; height: 100%;" :src="item.imgUrl || defaultCom" alt="" />
							</div>
							<div class="name one-line-ellipsis text-click-hover" @click="handleSearch(item)">{{ item.name }}</div>
							<div class="type">{{ item.entityType }}</div>
						</div>
					</div>
					<el-empty v-else style="padding: 60px 0 100px;" description="暂无数据" :image-size="100" />
				</AnalysisBox>
			</div>
		</div>

		<el-dialog v-model="mindParams.isShow" width="1400px" top="8vh" class="viewpoint-dialog" destroy-on-close>
			<template #header>
				<div class="viewpoint-header">
					<div class="viewpoint-title">政令举措思维导图</div>
				</div>
			</template>
			<div class="viewpoint-body" v-loading="mindParams.loading">
				<MindGraph v-if="mindParams.isData" ref="refMindGraph"></MindGraph>
				<el-empty v-else style="height: 100%;" description="暂无数据" :image-size="100" />
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import router from "@/router";
import { Search } from '@element-plus/icons-vue'
import MindGraph from "@/views/decree/com/MindGraph.vue"
import { getDecreeOrganization } from "@/api/decree/introduction";
import { getDecreeRelatedEntity, getDecreeMainContent, getDecreeMindMap } from "@/api/decree/background";
import { getDecreehylyList } from "@/api/decree/home";
import ActionButton from '@/components/base/ActionButton/index.vue'
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
import { onNumToChinese } from "@/views/marketAccessRestrictions/utils/index"

const route = useRoute();

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

// 科技领域
const areaType = ref("");
const areaList = ref([]);
const handleGetAreaList = async () => {
	try {
		const res = await getDecreehylyList();
		console.log("行业领域列表", res);
		if (res.code === 200 && res.data) {
			areaList.value = res.data;
		} else {
			areaList.value = []
		}
	} catch (error) {
		areaList.value = []
	}
};

// 主要指令
const isHighlight = ref(false);
const commandWord = ref("");
const contentList = ref([]);
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
const box1Params = reactive({
	loading: false,
})
const onMainContentData = async () => {
	box1Params.loading = true;
	try {
		const keyword = commandWord.value;
		const res = await getDecreeMainContent({ id: route.query.id, keyword, domainId: areaType.value });
		console.log("主要指令", res);
		if (res && res.code === 200) {
			contentList.value = res.data || [];
			contentList.value.forEach((item, index) => { item.content = `(${onNumToChinese(index + 1)}) ${item.content}` })
			if (keyword) {
				let word = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
				contentList.value.forEach(item => { onHighlight(word, item) })
			}
		} else {
			contentList.value = []
		}
	} catch (error) {
		contentList.value = []
	}
	box1Params.loading = false;
};
// 搜索高亮效果
const onHighlight = (word, row) => {
	row.content = String(row.content).replace(new RegExp(word, "gi"), (match) => {
		return `<span class="highlight">${match}</span>`;
	});
	if (row.slaver?.length) {
		row.slaver.forEach(item => { onHighlight(word, item) })
	}
}

// 思维导图
const refMindGraph = ref(null);
const mindParams = reactive({
	isData: true,
	loading: false,
	isShow: false,
})
const onDecreeMindMap = async () => {
	mindParams.loading = true;
	mindParams.isData = true;
	let labelCfg = {
		position: 'left',
		offset: -20,
		style: {
			fontWeight: "normal",
			fontSize: 16,
			textAlign: 'left',
			autoWrap: true
		}
	}
	mindParams.isShow = true;
	try {
		let res = await getDecreeMindMap({ id: route.query.id });
		console.log("思维导图", res);
		if (res.code === 200 && res.data) {
			let nodes = []
			let edges = []
			let obj = {}

			let list = onUniqueArray(Object.values(res.data || {}).flat(1), 'sectionId')
			list.forEach((item, index) => {
				nodes.push({ id: `node-${item.orderNum}-${item.sectionId}`, label: item.textZh, maxWidth: 600, labelCfg, layer: 1 })
				if (item.execAgent?.length) {
					item.execAgent.forEach((label, num) => {
						if (!obj[label]) {
							obj[label] = `${index}-${num}`
							nodes.push({ id: `node-${obj[label]}`, label, layer: 0 })
						}
						edges.push({ id: `edge-${index}-${num}`, source: `node-${obj[label]}`, target: `node-${item.orderNum}-${item.sectionId}` })
					})
				} else {
					edges.push({ id: `edge-${index}`, source: `root-virtual`, target: `node-${item.orderNum}-${item.sectionId}` })
				}
			})
			setTimeout(() => { refMindGraph.value.onMindGraphData(nodes, edges) }, 100)
		} else {
			mindParams.isData = false
		}
	} catch (error) {
		mindParams.isData = false
	}
	mindParams.loading = false
}

// 对象数组去重
const onUniqueArray = (list, key = 'id') => {
	const obj = {};
	return list.reduce((total, item) => {
		if (!obj[String(item[key])]) {
			obj[String(item[key])] = true;
			total.push(item);
		}
		return total;
	}, []);
}

// 相关实体
const box4Params = reactive({
	loading: false,
	list: [],
})
const onRelatedEntityData = async () => {
	box4Params.loading = true;
	try {
		const res = await getDecreeRelatedEntity({ id: route.query.id });
		console.log("相关实体", res);
		if (res && res.code === 200) {
			box4Params.list = res.data;
		} else {
			box4Params.list = []
		}
	} catch (error) {
		box4Params.list = []
	}
	box4Params.loading = false;
};
const handleSearch = (item) => {
	window.sessionStorage.setItem("curTabName", `搜索-${item.name}`);
	const curRoute = router.resolve({
		path: "/searchResults",
		query: {searchText: item.name}
	});
	window.open(curRoute.href, "_blank");
};

// 执行机构
const orgInfo = reactive({
	loading: false,
	list: [],
	node: { id: "", obb: "", logo: "", name: "", ename: "", leaders: [] },
})
const handleGetOrgnization = async () => {
	orgInfo.loading = true
	try {
		const res = await getDecreeOrganization({ id: route.query.id });
		console.log("执行机构", res);
		if (res.code === 200 && res.data?.length) {
			orgInfo.list = res.data;
			orgInfo.node = res.data[0];
		}
	} catch (error) {
		orgInfo.node = { id: "", obb: "", logo: "", name: "", ename: "", leaders: [] };
	}
	orgInfo.loading = false;
};
// 切换执行机构
const handleOrganization = (node) => {
	orgInfo.node = node;
};
// 跳转机构主页
const handleToInstitution = () => {
	const curRoute = router.resolve({
		path: "/institution",
		query: {
			id: orgInfo.node.id
		}
	});
	window.open(curRoute.href, "_blank");
};
// 跳转人员详情
const handleClickUser = item => {
	window.sessionStorage.setItem('curTabName', item.name)
	const routeData = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(routeData.href, "_blank");
	
};

onMounted(() => {
	handleGetAreaList();
	onMainContentData();
	handleGetOrgnization();
	onRelatedEntityData();
});
</script>

<style lang="scss" scoped>
.analysis-content {
	:deep(span.highlight) {
		background-color: #ffff00;
	}
}

.introduction-wrap {
	display: flex;
	width: 1600px;
	padding: 16px 0;
	gap: 16px;

	.page-left {
		width: 20px;
		flex: auto;

		.box1 {
			.mind-bnt {
				background-color: var(--color-primary-10);
				height: 28px;
				border-radius: 14px;
				display: flex;
				align-items: center;
				padding: 0 16px;
				cursor: pointer;

				.mind-icon {
					width: 16px;
					height: 13px;
					font-size: 0px;

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

				.mind-text {
					color: var(--color-primary-100);
					font-family: Source Han Sans CN;
					font-size: 16px;
					line-height: 16px;
					margin-left: 6px;
				}
			}

			.analysis-box {
				display: flex;
				flex-direction: column;

				.analysis-top {
					font-family: var(--font-family-base);
					padding: 0 20px;
					color: var(--text-primary-65-color);
					height: 60px;
					display: flex;
					align-items: center;

					.select-input {
						background-color: var(--el-fill-color-blank);
						border-radius: var(--el-border-radius-base);
						box-shadow: 0 0 0 1px var(--el-border-color) inset;
						box-sizing: border-box;
						margin-left: 20px;
						width: 200px;
						height: 32px;
					}
				}
			}

			.analysis-content {
				:deep(.el-scrollbar__bar.is-vertical) {
					right: 0px;
					width: 4px;
					background: transparent;
					border-radius: 2px;

					&>div {
						background: #c5c7c9;
						opacity: 1;
					}

					&>div:hover {
						background: #505357;
					}
				}

				.section {
					padding: 0 20px;

					.section-header {
						display: flex;
						padding: 12px 16px;
						align-items: center;
						background-color: rgba(247, 248, 249, 1);
						border-radius: 2px;

						.section-title {
							font-size: 18px;
							line-height: 30px;
							letter-spacing: 1px;
							width: 20px;
							flex: auto;
							font-weight: bold;
							color: var(--text-primary-80-color);
							font-family: Source Han Sans CN;
						}

						.section-icon {
							width: 16px;
							height: 16px;
							margin-left: 16px;

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

					.numbered-list {
						margin-bottom: 12px;
						font-size: 16px;
						line-height: 1.7;
						color: var(--text-primary-80-color);
						font-family: Source Han Sans CN;
						font-size: 16px;

						.list-item {
							position: relative;

							.list-item-dot {
								position: absolute;
								left: 50px;
								top: 10px;
							}

							.list-item-word {
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding: 10px 16px 10px 68px;
							}
						}
					}

					.sub-list {
						.sub-item {
							position: relative;

							.sub-item-dot {
								position: absolute;
								left: 66px;
								top: 10px;
							}

							.sub-item-word {
								border-bottom: 1px solid rgba(234, 236, 238, 1);
								padding: 10px 16px 10px 90px;
							}
						}
					}

					.sub-sub-list {
						border-bottom: 1px solid rgba(234, 236, 238, 1);

						.sub-sub-item {
							position: relative;

							.sub-sub-item-dot {
								position: absolute;
								left: 82px;
								top: 6px;
							}

							.sub-sub-item-word {
								padding: 6px 16px 6px 100px;
							}
						}

					}
				}
			}
		}
	}

	.page-right {
		width: 520px;
		display: flex;
		flex-direction: column;
		gap: 16px;

		.box3 {
			.box3-top {
				margin-top: 2px;
				padding: 0 22px 20px;
				border-bottom: 1px solid rgba(234, 236, 238, 1);

				.organization-list {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 16px;
					gap: 8px 8px;
				}

				.organization-button {
					height: 36px;
					background-color: var(--color-primary-100);
					color: var(--bg-white-100);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 6px;
					cursor: pointer;

					.button-text {
						margin-right: 8px;
						font-family: Microsoft YaHei;
						font-size: 16px;
						line-height: 16px;
					}
				}

				.box3-top-top {
					height: 88px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 4px;
					background: rgba(247, 248, 249, 1);
					display: flex;
					align-items: center;

					.left {
						width: 64px;
						height: 64px;
						margin-left: 17px;
						font-size: 0px;

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

					.right {
						width: 20px;
						flex: auto;
						margin-left: 15px;

						.name {
							height: 26px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}

						.ename {
							margin-top: 6px;
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
				}

				.box3-top-bottom {
					height: 193px;

					.box3-top-bottom-header {
						height: 40px;
						display: flex;
						padding-top: 14px;
						box-sizing: border-box;
						gap: 12px;

						.icon {
							margin-top: 5px;
							width: 14px;
							height: 14px;

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

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

					.box3-top-bottom-main {
						margin-top: 2px;
						height: 130px;
						overflow: hidden;
						overflow-y: auto;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.box3-top-bottom-item {
							margin-top: 12px;
							height: 48px;
							width: 200px;
							display: flex;
							justify-content: flex-start;

							.box3-top-bottom-item-left {
								width: 48px;
								height: 48px;
								border-radius: 24px;
								overflow: hidden;

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

							.box3-top-bottom-item-right {
								margin-left: 8px;
								width: 144px;

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

								.position {
									margin-top: 1px;
									width: 144px;
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}
				}
			}

			.box3-bottom {
				.box3-bottom-header {
					height: 59px;
					display: flex;

					.header-icon {
						margin-left: 22px;
						margin-top: 27px;
						width: 16px;
						height: 16px;

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

					.header-title {
						margin-left: 12px;
						margin-top: 23px;
						height: 24px;
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}
				}

				.box3-bottom-main {
					width: 510px;
					height: 440px;
					overflow: hidden;
					overflow-y: auto;

					:deep(.el-timeline) {
						padding: 8px 0px 0px 25px !important;
					}

					:deep(.el-timeline-item__node) {
						border: 4px solid var(--color-main-active) !important;
						background-color: #fff;
					}

					:deep(.el-timeline-item) {
						padding-bottom: 12px !important;
					}

					:deep(.el-timeline-item__timestamp) {
						color: var(--color-main-active) !important;
						font-family: Microsoft YaHei !important;
						font-size: 16px !important;
						font-weight: 600 !important;
						padding-top: 0px !important;
					}

					.timeline-content {
						color: var(--text-primary-65-color);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 26px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.box4 {
			.left-bottom-main {
				padding: 20px;

				.main-box {
					height: 48px;
					border-radius: 50px;
					border: 1px solid rgb(234, 236, 238);
					background-color: rgba(247, 248, 249, 1);
					margin-bottom: 12px;
					padding: 0 15px;
					display: flex;
					align-items: center;

					.icon {
						width: 24px;
						height: 24px;
						font-size: 0px;
					}

					.name {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						flex: auto;
						width: 20px;
						margin: 0 10px;
					}

					.type {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(95, 101, 108);
					}
				}
			}
		}
	}

	// 修改element-plus弹出框样式
	:deep(.viewpoint-dialog) {
		padding: 0;
		border-radius: 4px;

		.el-dialog__body {
			padding: 0;
		}

		.el-dialog__header {
			padding: 0;
			margin: 0;
			position: relative;
			height: 48px;
		}

		.el-dialog__headerbtn {
			top: 50%;
			transform: translateY(-50%);
			right: 12px;
		}

		.viewpoint-header {
			height: 48px;
			display: flex;
			align-items: center;
			padding: 0 24px;
			border-bottom: 1px solid rgb(234, 236, 238);
		}

		.viewpoint-title {
			font-size: 16px;
			font-weight: 700;
			font-family: "Microsoft YaHei";
			line-height: 24px;
		}

		.viewpoint-body {
			padding: 16px;
			height: 77vh;
		}
	}
}
</style>