<template>
	<div class="introduction-wrap">
		<div class="page-left">
			<div class="box1">
				<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%;"
									:suffix-icon="Search" placeholder="指令搜索" />
							</div>
						</div>
						<div class="analysis-content">
							<!-- 遍历文档章节 -->
							<el-empty v-if="!contentList?.length" style="padding: 60px 0;" 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="subItem.content"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>
		<div class="page-right">
			<div class="box3">
				<AnalysisBox title="执行机构" :showAllBtn="false">
					<div class="box3-top">
						<div class="organization-list">
							<div class="organization-item" v-for="item in organizationInfo.list" :key="item.id">
								<ActionButton @click="handleOrganization(item)" :name="item.obb"
									:type="item.id == organizationInfo.node.id ? 'active' : 'normal'" />
							</div>
						</div>
						<div class="box3-top-top" @click="handleToInstitution()">
							<div class="left">
								<img :src="organizationInfo.node.logo || DefaultIcon2" alt="" />
							</div>
							<div class="right">
								<div class="name">{{ organizationInfo.node.name + " >" }}</div>
								<div class="ename">{{ organizationInfo.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">
								<div class="box3-top-bottom-item" v-for="(item, index) in organizationInfo.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>
				</AnalysisBox>
			</div>
			<div class="box4">
				<AnalysisBox title="相关实体" :showAllBtn="false">
					<el-empty v-if="!entityList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
					<div class="left-bottom-main">
						<div v-for="(item, index) in entityList" :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">{{ item.name }}</div>
							<div class="type">{{ item.entityType }}</div>
						</div>
					</div>
				</AnalysisBox>
			</div>
		</div>

		<el-dialog v-model="isTreeDialog" 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">
				<MindGraph ref="refMindGraph"></MindGraph>
			</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"

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 = []
		console.error("获取科技领域数据失败:", error);
	}
};

// 主要指令
const isHighlight = ref(false);
const commandWord = ref("");
const contentList = ref([
	// {
	// 	content: "建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划建立美国人工智能出口计划",
	// 	slaver: [
	// 		{
	// 			content: '在本命令发布之日起 90 天内，商务部长应与国务卿及科学技术政策办公室（OSTP）主任协商，建立并实施美国人工智能出口计划（计划），以支持美国全栈人工智能出口软件包的开发和部署。'
	// 		},
	// 		{
	// 			content: '商务部长应公开征集由行业主导的联盟提案，以纳入该计划。公开征集要求每项提案必须：',
	// 			slaver: [
	// 				{
	// 					content: '包含一套全栈人工智能技术包，涵盖：',
	// 					slaver: [
	// 						{
	// 							content: 'AI 优化的计算机硬件（如芯片、服务器和加速器）、数据中心存储、云服务和网络，以及这些设备是否以及在多大程度上在美国制造的描述；'
	// 						},
	// 						{
	// 							content: '数据管道和标签系统；'
	// 						},
	// 						{
	// 							content: '人工智能模型与系统；'
	// 						},
	// 						{
	// 							content: '采取措施保障人工智能模型和系统的安全性和网络安全；'
	// 						},
	// 						{
	// 							content: '针对特定用例的人工智能应用（如软件工程、教育、医疗保健、农业或交通运输）；'
	// 						}
	// 					]
	// 				},
	// 				{
	// 					content: '确定出口参与者的具体目标国家或区域集团；'
	// 				},
	// 				{
	// 					content: '描述一个业务和运营模型，以在高层次上说明哪些实体将建设、拥有和运营数据中心及相关基础设施；'
	// 				},
	// 				{
	// 					content: '联邦激励和支持机制请求的细节；'
	// 				},
	// 				{
	// 					content: '遵守所有相关的美国出口管制制度、出境投资法规和终端用户政策，包括美国法典第 50 编第 58 章及商务部工业与安全局的相关指导。'
	// 				}
	// 			]
	// 		},
	// 		{
	// 			content: '商务部要求提案须在公开征集后不超过 90 天内提交，并应滚动考虑提案纳入项目。'
	// 		},
	// 		{
	// 			content: '商务部长应与国务卿、国防部长、能源部长及 OSTP 主任协商，评估提交的纳入计划提案。商务部长与国务卿、国防部长、能源部长及 OSTP 主任协商后选定的提案，将被指定为优先 AI 出口包，并通过优先访问本命令第 4 节指定的工具予以支持，符合适用法律。'
	// 		}
	// 	]
	// },
	// {
	// 	content: "动员联邦融资工具",
	// 	slaver: [
	// 		{
	// 			content: '经济外交行动小组（EDAG），于 2024 年 6 月 21 日总统备忘录中成立，由国务卿主持，并与商务部长和美国贸易代表协商，并根据 2019 年《通过外交倡导美国企业法案》（公共法 116-94 J 部分第七章）第 708 条（CABDA）所述，应协调联邦融资工具的动员，以支持优先的人工智能出口方案。'
	// 		},
	// 		{
	// 			content: '我将根据 CABDA α 第 708 (c) (3) 条授权小企业管理局局长和 OSTP 主任任命各自执行部门和机构的高级官员担任 EDAG 。'
	// 		}
	// 	]
	// }
]);
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 onMainContentData = async () => {
	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 = `(${simpleNumToChinese(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 = []
		console.error("获取主要指令数据失败:", error);
	}
};
// 搜索高亮效果
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) })
	}
}
// 数字转中文（支持 0-99 整数）
const simpleNumToChinese = (num) => {
	// 1. 基础校验：只处理 0-99 的整数
	if (!Number.isInteger(num) || num < 0 || num > 99) return '100';
	// 2. 定义基础字符
	const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
	const tenChar = '十';
	// 3. 核心转换逻辑
	if (num < 10) {
		// 0-9 直接返回对应字符
		return singleChars[num];
	} else if (num === 10) {
		// 10 特殊处理
		return tenChar;
	} else if (num < 20) {
		// 11-19：十 + 个位（如十一、十九）
		return tenChar + singleChars[num - 10];
	} else {
		// 20-99：十位 + 十 + 个位（个位为0则省略，如二十、二十九）
		const ten = Math.floor(num / 10); // 十位数字
		const unit = num % 10; // 个位数字
		return singleChars[ten] + tenChar + (unit === 0 ? '' : singleChars[unit]);
	}
}

// 思维导图
const isTreeDialog = ref(false);
const refMindGraph = ref(null);
const onDecreeMindMap = async () => {
	let labelCfg = {
		position: 'left',
		offset: -20,
		style: {
			fontWeight: "normal",
			fontSize: 16,
			textAlign: 'left',
			autoWrap: true
		}
	}
	isTreeDialog.value = true;
	try {
		let res = await getDecreeMindMap({ id: route.query.id });
		console.log("思维导图", res);
		if (res.code === 200) {
			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)
		}
	} catch (error) {
		console.error("获取思维导图数据失败:", error);
	}
}

// 对象数组去重
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 entityList = ref([]);
const onRelatedEntityData = async () => {
	try {
		const res = await getDecreeRelatedEntity({ id: route.query.id });
		console.log("相关实体", res);
		if (res && res.code === 200) {
			entityList.value = res.data;
		} else {
			entityList.value = []
		}
	} catch (error) {
		entityList.value = []
		console.error("获取相关实体数据失败:", error);
	}
};

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

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

						.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: #374151;

						.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 16px;
				}

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

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

					.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>