<template>
	<div class="deep-mining">
		<div class="side-nav">
			<div
				v-for="(item, index) in activeTab"
				:key="index"
				class="tab-item"
				:class="{ active: index === activeIndex }"
				@click="activeIndex = index"
			>
				{{ item }}
				<span v-if="index === activeIndex" class="arrow"></span>
			</div>
		</div>
		<div class="main" v-if="activeIndex === 0">
			<div class="left">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">本次制裁实体清单列表</div>
					<div class="right-group">
						<div class="btn">
							<img src="../../assets/数据库按钮.png" alt="" />
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<div class="left-main">
					<div class="filter-bar">
						<el-select v-model="searchDomain" placeholder="全部领域" class="domain-select">
							<el-option label="全部领域" value="" />
							<el-option label="集成电路" value="集成电路" />
							<el-option label="人工智能" value="人工智能" />
						</el-select>
						<el-input v-model="searchText" placeholder="搜索实体" class="search-input">
							<template #suffix>
								<el-icon class="el-input__icon"><Search /></el-icon>
							</template>
						</el-input>
					</div>
					<div class="entity-tree custom-scrollbar">
					<div class="tree-group" v-for="group in entityList" :key="group.id">
						<div class="group-header" @click="toggleGroup(group)">
							<el-icon class="arrow-icon" :class="{ expanded: group.expanded }">
								<CaretRight />
							</el-icon>
							<span class="group-name">{{ group.name }}</span>
							<span class="group-count">{{ group.count }}家</span>
						</div>
						<div class="group-children custom-scrollbar" v-show="group.expanded">
							<div
								class="entity-item"
								v-for="item in group.children"
								:key="item.id"
								:class="{ active: activeEntityId === item.id }"
								@click="selectEntity(item)"
							>
								<div class="item-icon">
									<img :src="defaultTitle" alt="" class="item-img">
								</div>
								<span class="item-name">{{ item.name }}</span>
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
			<div class="right">
				<div class="title-com custom-right-header">
					<div class="toggle-group">
						<div 
							class="toggle-btn" 
							:class="{ active: rightActiveTab === 'supplyChain' }"
							@click="rightActiveTab = 'supplyChain'"
						>
							<img :src="rightActiveTab === 'supplyChain' ? icon01Active : icon01" alt="">
							<span>供应链</span>
						</div>
						<div 
							class="toggle-btn" 
							:class="{ active: rightActiveTab === 'equity' }"
							@click="rightActiveTab = 'equity'"
						>
							<img :src="rightActiveTab === 'equity' ? icon02Active : icon02" alt="">
							<span>股权</span>
						</div>
					</div>
					<div class="right-group">
						<div class="rule-checkbox" v-if="rightActiveTab === 'equity'">
							<el-checkbox v-model="is50PercentRule" size="large">50%规则涉及实体</el-checkbox>
						</div>
						<el-select v-model="filterType" placeholder="全部类型" class="header-select">
							<el-option label="全部类型" value="" />
						</el-select>
						<el-select v-model="filterDomain" placeholder="全部领域" class="header-select last-select">
							<el-option label="全部领域" value="" />
						</el-select>
						<div class="btn">
							<img src="../../assets/数据库按钮.png" alt="" />
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
				</div>
				<div class="right-echarts">
					<div class="chart-wrapper">
						<div class="chart-controls">
							<div class="control-btn"><img :src="echartsIcon01" /></div>
							<div class="control-btn"><img :src="echartsIcon02" /></div>
							<div class="control-btn"><img :src="echartsIcon03" /></div>
						</div>
						<div class="chart-legend">
							<div class="legend-item"><span class="dot blue"></span>已被制裁实体</div>
							<div class="legend-item"><span class="dot grey"></span>未被制裁实体</div>
						</div>
						<div ref="chartRef" class="chart-container"></div>
						
						<div class="node-popup" v-if="selectedNode">
							<div class="popup-header">
								<img :src="defaultTitle" class="popup-icon" />
								<span class="popup-title">{{ selectedNode.name.replace(/\n/g, '') }}</span>
								<el-icon class="close-icon" @click="selectedNode = null"><Close /></el-icon>
							</div>
							<div class="popup-body">
								<div class="tag-row">
									<span class="red-dot"></span>
									<span class="red-text">2025年7月15日 《实体清单》</span>
								</div>
								<div class="desc">
									因获取和试图获取美国原产物品以支持中国军事和国防相关空间领域活动以及中国量子技术能力而被列入。
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onUnmounted } from "vue";
import * as echarts from "echarts";
import { ArrowLeft, ArrowRight, Search, CaretRight, Close, CircleCheckFilled } from "@element-plus/icons-vue";
import defaultTitle from "../../assets/default-icon2.png";
import icon01 from "./assets/icon01.png"
import icon02 from "./assets/icon02.png"
import icon01Active from "./assets/icon01-active.png"
import icon02Active from "./assets/icon02-active.png"
import echartsIcon01 from "./assets/echartsIcon01.png"
import echartsIcon02 from "./assets/echartsIcon02.png"
import echartsIcon03 from "./assets/echartsIcon03.png"
import company from "./assets/company.png"
import companyActive from "./assets/company-active.png"

const activeTab = ref(["实体穿透分析", "重点实体识别"]);
const activeIndex = ref(0);
const rightActiveTab = ref("supplyChain");

const searchDomain = ref("");
const searchText = ref("");
const filterType = ref("");
const filterDomain = ref("");
const activeEntityId = ref("");
const currentEntityName = ref("");
const is50PercentRule = ref(true);

const entityList = ref([
	{
		id: "group1",
		name: "企业",
		count: 13,
		expanded: true,
		children: [
			{ id: "1", name: "北京复旦微电子技术有限公司" },
			{ id: "2", name: "上海复旦微电子股份有限公司" },
			{ id: "3", name: "深圳复旦微电子有限公司" },
			{ id: "4", name: "上海复控华龙微系统技术有限公司" },
			{ id: "5", name: "上海富伟迅捷数字技术有限公司" },
			{ id: "6", name: "中芯国际集成电路制造有限公司" },
			{ id: "7", name: "上海复旦微电子（香港）有限公司" },
			{ id: "8", name: "华科供应链（香港）有限公司" },
			{ id: "9", name: "华科物流（香港）有限公司" },
			{ id: "10", name: "长沙网迅电子科技有限公司" },
			{ id: "11", name: "香港 DEMX 有限公司" },
			{ id: "12", name: "北京天一辉远生物技术有限公司" },
			{ id: "13", name: "上海索辰信息技术有限公司" }
		]
	},
	{
		id: "group2",
		name: "科研机构",
		count: 2,
		expanded: false,
		children: [
			{ id: "14", name: "中国科学院微电子研究所" },
			{ id: "15", name: "国家超级计算中心" }
		]
	}
]);

const toggleGroup = (group) => {
	group.expanded = !group.expanded;
};

const selectEntity = (item) => {
	activeEntityId.value = item.id;
	currentEntityName.value = item.name;
	initChart();
};

const formatEntityName = (name) => {
	if (!name) return '';
	if (name.length > 8) {
		const mid = Math.ceil(name.length / 2);
		return name.slice(0, mid) + '\n' + name.slice(mid);
	}
	return name;
};

const chartRef = ref(null);
const chartInstance = ref(null);
const selectedNode = ref(null);

const initChart = () => {
	if (!chartRef.value) return;
	
	if (chartInstance.value) {
		chartInstance.value.dispose();
	}

	chartInstance.value = echarts.init(chartRef.value);

	let option = {};
	
	if (rightActiveTab.value === 'supplyChain') {
		option = getSupplyChainOption();
	} else {
		option = getEquityOption();
	}

	chartInstance.value.setOption(option);
	
	chartInstance.value.on('click', (params) => {
		if (params.dataType === 'node') {
			selectedNode.value = params.data;
		} else {
			selectedNode.value = null;
		}
	});
	
	chartInstance.value.getZr().on('click', (params) => {
		if (!params.target) {
			selectedNode.value = null;
		}
	});
};

const getSupplyChainOption = () => {
	const centerName = formatEntityName(currentEntityName.value);
	const nodes = [
		{ id: '0', name: centerName, category: 0, symbol: 'image://' + companyActive, x: 550, y: 400, symbolSize: 50, label: { fontSize: 16, fontWeight: 'bold', color: '#055FC2' } },
		{ id: '1', name: '上海华虹（集团）\n有限公司', category: 0, symbol: 'image://' + companyActive, x: 100, y: 300 },
		{ id: '2', name: '南京芯全信息科技\n有限公司', category: 1, symbol: 'image://' + company, x: 250, y: 300 },
		{ id: '3', name: '上海伟测半导体科\n技股份有限公司', category: 0, symbol: 'image://' + companyActive, x: 400, y: 250 },
		{ id: '4', name: '上海宏测半导体科\n技有限公司', category: 0, symbol: 'image://' + companyActive, x: 400, y: 100 },
		{ id: '5', name: '德耐尔节能科技\n（上海）股份有限\n公司', category: 0, symbol: 'image://' + companyActive, x: 250, y: 100 },
		{ id: '6', name: '台湾积体电路制造\n股份有限公司', category: 1, symbol: 'image://' + company, x: 550, y: 250 },
		{ id: '7', name: '江苏长电科技股份\n有限公司', category: 0, symbol: 'image://' + companyActive, x: 700, y: 250 },
		{ id: '8', name: '杭州士兰微电子股\n份有限公司', category: 0, symbol: 'image://' + companyActive, x: 850, y: 300 },
		// Customers
		{ id: '9', name: '上海复微迅捷数字\n技术有限公司', category: 0, symbol: 'image://' + companyActive, x: 200, y: 600 },
		{ id: '10', name: '上海索辰信息技术\n有限公司', category: 0, symbol: 'image://' + companyActive, x: 400, y: 600 },
		{ id: '11', name: '上海复旦微电子\n（香港）有限公司', category: 0, symbol: 'image://' + companyActive, x: 600, y: 600 },
		{ id: '12', name: '上海华岭集成电路\n技术股份有限公司', category: 1, symbol: 'image://' + company, x: 800, y: 600 },
		{ id: '13', name: '上海复旦通讯股份\n有限公司', category: 1, symbol: 'image://' + company, x: 950, y: 600 },
	];
	
	const nodeCategoryMap = nodes.reduce((acc, node) => {
		acc[node.id] = node.category;
		return acc;
	}, {});

	const links = [
		{ source: '1', target: '0', value: '供应商' },
		{ source: '2', target: '0', value: '供应商' },
		{ source: '3', target: '0', value: '供应商' },
		{ source: '4', target: '3', value: '供应商' },
		{ source: '5', target: '3', value: '供应商' },
		{ source: '6', target: '0', value: '供应商' },
		{ source: '7', target: '0', value: '供应商' },
		{ source: '8', target: '0', value: '供应商' },
		{ source: '0', target: '9', value: '客户' },
		{ source: '0', target: '10', value: '客户' },
		{ source: '0', target: '11', value: '客户' },
		{ source: '0', target: '12', value: '客户' },
		{ source: '0', target: '13', value: '客户' },
	];

	return {
		tooltip: { show: false },
		series: [
			{
				type: 'graph',
				layout: 'none',
				symbolSize: 36,
				roam: true,
				label: {
					show: true,
					position: 'bottom',
					formatter: '{b}',
					fontSize: 12,
					lineHeight: 16
				},
				edgeSymbol: ['none', 'arrow'],
				edgeSymbolSize: [4, 8],
				edgeLabel: {
					position: 'middle',
					offset: [0, 13],
					fontSize: 12,
					fontWeight: 400,
					fontFamily: 'Microsoft YaHei',
					lineHeight: 16,
					show: true,
					formatter: '{c}',
					color: 'rgba(170, 173, 177, 1)',
					backgroundColor: 'rgba(234, 236, 238, 1)',
					padding: [4, 8],
					borderRadius: 20
				},
				data: nodes.map(node => ({
					...node,
					label: {
						color: node.category === 0 ? '#055FC2' : '#5F656C',
						...node.label
					}
				})),
				links: links.map(link => {
					const isSanctioned = nodeCategoryMap[link.source] === 0 && nodeCategoryMap[link.target] === 0;
					return {
						...link,
						lineStyle: {
							color: isSanctioned ? 'rgba(100, 180, 255, 1)' : 'rgb(180, 181, 182)',
							width: 1,
							curveness: 0
						},
						label: isSanctioned ? {
							show: true,
							formatter: '{c}',
							backgroundColor: 'rgba(231, 243, 255, 1)',
							color: 'rgba(50, 150, 250, 1)',
							borderRadius: 20,
							padding: [4, 8],
							fontSize: 12,
							fontWeight: 400,
							fontFamily: 'Microsoft YaHei',
							lineHeight: 16
						} : undefined
					};
				}),
			}
		]
	};
};

const getEquityOption = () => {
	const centerName = formatEntityName(currentEntityName.value);
	const nodes = [
		{ id: '0', name: centerName, category: 0, symbol: 'image://' + companyActive, x: 550, y: 350, symbolSize: 50, label: { fontSize: 16, fontWeight: 'bold', color: '#055FC2' } },
		
		// Shareholders (Top)
		{ id: '1', name: '上海复芯凡高集成\n电路技术有限公司', category: 0, symbol: 'image://' + companyActive, x: 150, y: 50 },
		{ id: '2', name: '中信证券股份有限\n公司-嘉实上证科创\n板芯片交易型开...', category: 1, symbol: 'image://' + company, x: 350, y: 50 },
		{ id: '3', name: '上海复旦复控科技\n产业控股有限公司', category: 0, symbol: 'image://' + companyActive, x: 550, y: 50 },
		{ id: '4', name: '香港中央结算（代\n理人）有限公司', category: 1, symbol: 'image://' + company, x: 750, y: 50 },
		{ id: '5', name: '中国农业银行股份\n有限公司-南方军工\n改革灵活配置混...', category: 1, symbol: 'image://' + company, x: 950, y: 50 },

		// Investments (Bottom)
		{ id: '6', name: '上海复龙鸿芯微系\n统技术有限公司', category: 0, symbol: 'image://' + companyActive, x: 50, y: 650 },
		{ id: '7', name: '上海复微迅捷数字\n技术有限公司', category: 0, symbol: 'image://' + companyActive, x: 200, y: 650 },
		{ id: '8', name: '上海索辰信息技术\n有限公司', category: 0, symbol: 'image://' + companyActive, x: 350, y: 650 },
		{ id: '9', name: '上海复旦微电子\n（香港）有限公司', category: 0, symbol: 'image://' + companyActive, x: 500, y: 650 },
		{ id: '10', name: '北京复旦微电子技\n术有限公司', category: 0, symbol: 'image://' + companyActive, x: 650, y: 650 },
		{ id: '11', name: '深圳复旦微电子有\n限公司', category: 0, symbol: 'image://' + companyActive, x: 800, y: 650 },
		{ id: '12', name: '上海华岭集成电路\n技术股份有限公司', category: 1, symbol: 'image://' + company, x: 950, y: 650 },
		{ id: '13', name: '上海复旦通讯股份\n有限公司', category: 1, symbol: 'image://' + company, x: 1100, y: 650 },
	];

	const links = [
		{ source: '1', target: '0', value: '持股51%', isSanctioned: true },
		{ source: '2', target: '0', value: '持股12%', isSanctioned: false },
		{ source: '3', target: '0', value: '持股19%', isSanctioned: true },
		{ source: '4', target: '0', value: '持股12%', isSanctioned: false },
		{ source: '5', target: '0', value: '持股12%', isSanctioned: false },
		
		{ source: '0', target: '6', value: '持股85%', isSanctioned: true },
		{ source: '0', target: '7', value: '持股60%', isSanctioned: true },
		{ source: '0', target: '8', value: '持股54%', isSanctioned: true },
		{ source: '0', target: '9', value: '持股51%', isSanctioned: true },
		{ source: '0', target: '10', value: '持股51%', isSanctioned: true },
		{ source: '0', target: '11', value: '持股51%', isSanctioned: true },
		{ source: '0', target: '12', value: '持股15%', isSanctioned: false },
		{ source: '0', target: '13', value: '持股12%', isSanctioned: false },
	];

	return {
		tooltip: { show: false },
		series: [
			{
				type: 'graph',
				layout: 'none',
				symbolSize: 36,
				roam: true,
				label: {
					show: true,
					position: 'bottom',
					formatter: '{b}',
					fontSize: 12,
					lineHeight: 16
				},
				edgeSymbol: ['none', 'arrow'],
				edgeSymbolSize: [4, 8],
				edgeLabel: {
					position: 'middle',
					offset: [0, 13], 
					fontSize: 12,
					fontWeight: 400,
					fontFamily: 'Microsoft YaHei',
					lineHeight: 16,
					show: true,
					formatter: '{c}',
					color: 'rgba(170, 173, 177, 1)',
					backgroundColor: 'rgba(234, 236, 238, 1)',
					padding: [4, 8],
					borderRadius: 20
				},
				data: nodes.map(node => ({
					...node,
					label: {
						color: node.category === 0 ? '#055FC2' : '#5F656C',
						...node.label
					}
				})),
				links: links.map(link => {
					return {
						...link,
						lineStyle: {
							color: link.isSanctioned ? 'rgba(100, 180, 255, 1)' : 'rgb(180, 181, 182)',
							width: 1,
							curveness: 0
						},
						label: link.isSanctioned ? {
							show: true,
							formatter: '{c}',
							backgroundColor: 'rgba(231, 243, 255, 1)',
							color: 'rgba(50, 150, 250, 1)',
							borderRadius: 20,
							padding: [4, 8],
							fontSize: 12,
							fontWeight: 400,
							fontFamily: 'Microsoft YaHei',
							lineHeight: 16
						} : undefined
					};
				}),
			}
		]
	};
};

watch(rightActiveTab, (val) => {
	nextTick(() => {
		initChart();
	});
}, { immediate: true });


onMounted(() => {
	// 默认选中第一个实体
	if (entityList.value.length > 0 && entityList.value[0].children && entityList.value[0].children.length > 0) {
		const firstEntity = entityList.value[0].children[0];
		activeEntityId.value = firstEntity.id;
		currentEntityName.value = firstEntity.name;
	}

	nextTick(() => {
		initChart();
	});
	window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
	if (chartInstance.value) {
		chartInstance.value.dispose();
	}
	window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
	if (chartInstance.value) {
		chartInstance.value.resize();
	}
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.deep-mining {
	width: 1601px;
	margin: 0 auto;
	position: relative;
	// min-height: 800px;
	.side-nav {
		position: absolute;
		top: 27px;
		right: 100%;
		margin-right: 12px;
		display: flex;
		flex-direction: column;
		gap: 16px;
		.tab-item {
			cursor: pointer;
			padding: 4px 20px;
			border-radius: 22px;
			font-size: 16px;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
			color: rgb(95, 101, 108);
			white-space: nowrap;
			display: flex;
			align-items: center;

			&.active {
				background-color: rgb(5, 95, 194);
				color: #fff;

				.arrow {
					display: inline-block;
					width: 0;
					height: 0;
					border-top: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 6px solid #fff;
					margin-left: 8px;
				}
			}
		}
	}
	.main {
		width: 100%;
		padding-top: 16px;
		padding-bottom: 50px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 480px;
			height: 828px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.left-main {
				padding: 0 17px 14px 17px;
				height: calc(100% - 56px);
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				.filter-bar {
					display: flex;
					gap: 12px;
					margin-bottom: 16px;

					.domain-select {
						width: 140px;
					}
					.search-input {
						flex: 1;
					}
				}

				.entity-tree {
					flex: 1;
					overflow-y: auto;
					padding-right: 4px;

					.tree-group {
						// margin-bottom: 16px; 
						border: 1px solid rgb(234, 236, 238);
						border-radius: 4px;
						overflow: hidden;

						.group-header {
							height: 48px;
							padding: 0 12px;
							display: flex;
							align-items: center;
							cursor: pointer;
							user-select: none;
							background-color: #fff;
							border-bottom: 1px solid rgb(234, 236, 238);

							&:hover {
								background-color: #F2F3F5;
							}

							.arrow-icon {
								margin-right: 8px;
								font-size: 14px;
								color: #86909C;
								transition: transform 0.3s;

								&.expanded {
									transform: rotate(90deg);
								}
							}

							.group-name {
								flex: 1;
								font-size: 14px;
								font-weight: 700;
								color: #1D2129;
								font-family: "Microsoft YaHei";
							}

							.group-count {
								font-size: 14px;
								color: #4E5969;
							}
						}

						.group-children {

							.entity-item {
								display: flex;
								align-items: center;
								height: 48px; 
								padding: 0 12px 0 29px;
								cursor: pointer;
								margin-bottom: 0;
								transition: all 0.2s;
								box-sizing: border-box; 
								
								&:hover {
									background-color: #F7F8FA;
								}

								&.active {
									background-color: rgba(5, 95, 194, 0.05);
									border-top: 1px solid rgba(174, 214, 255, 1);
									border-bottom: 1px solid rgba(174, 214, 255, 1);
									
									.item-name {
										color: rgb(5, 95, 194);
										font-weight: 700;
									}
								}

								.item-icon {
									margin-right: 10px;
									display: flex;
									align-items: center;
									flex-shrink: 0;
									
									.item-img {
										width: 24px;
										height: 24px;
										object-fit: contain;
									}
								}

								.item-name {
									font-size: 16px; 
									color: rgb(59, 65, 75);
									font-weight: 400;
									font-family: "Microsoft YaHei";
									line-height: 24px;
									word-break: break-all;

								}
							}
						}
					}
				}
			}
		}
		.right {
			width: 1105px;
			height: 828px;
			background-color: #fff;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			border-radius: 10px;
			.right-echarts {
				width: 100%;
				height: calc(100% - 56px);
				position: relative;
				
				.chart-wrapper {
					width: 100%;
					height: 100%;
					position: relative;
				}
				
				.chart-container {
					width: 100%;
					height: 100%;
				}
				
				.chart-controls {
					position: absolute;
					top: 0px;
					left: 16px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					z-index: 10;
					width: 96px;
					height: 32px;
					padding: 8px 10px;
					background: #fff;
					border-radius: 4px;
					box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
					
					.control-btn {
						width: 14px;
						height: 14px;
						cursor: pointer;
						
						img {
							width: 14px;
							height: 14px;
						}
					}
				}
				
				.chart-legend {
					position: absolute;
					top: 4px;
					right: 23px;
					display: flex;
					gap: 20px;
					z-index: 10;
					
					.legend-item {
						display: flex;
						align-items: center;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: #5F656C;
						
						&:first-child {
							color: #055FC2;
						}
						
						.dot {
							width: 12px;
							height: 12px;
							border-radius: 50%;
							margin-right: 8px;
							
							&.blue {
								background: #055FC2;
							}
							
							&.grey {
								background: rgb(95, 101, 108);
							}
						}
					}
				}
				
				.node-popup {
					position: absolute;
					right: 20px;
					top: 200px;
					width: 320px;
					background: #fff;
					border-radius: 10px;
					box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
					padding: 16px;
					z-index: 20;
					
					.popup-header {
						display: flex;
						align-items: center;
						margin-bottom: 12px;
						padding-bottom: 12px;
						border-bottom: 1px solid rgb(234, 236, 238);
						position: relative;
						
						.popup-icon {
							width: 24px;
							height: 24px;
							margin-right: 8px;
						}
						
						.popup-title {
							font-size: 16px;
							font-weight: 700;
							font-family: "Microsoft YaHei";
							color: rgb(59, 65, 75);
							padding-right: 20px;
						}
						
						.close-icon {
							cursor: pointer;
							font-size: 16px;
							color: #86909C;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
					
					.popup-body {
						.tag-row {
							display: flex;
							align-items: center;
							margin-bottom: 8px;
							
							.red-dot {
								width: 8px;
								height: 8px;
								background: rgb(206, 79, 81);
								border-radius: 50%;
								margin-right: 23px;
							}
							
							.red-text {
								color: rgb(206, 79, 81);
								font-size: 16px;
								font-weight: 400;
								font-family: "Microsoft YaHei";
							}
						}
						
						.desc {
							padding-left: 31px;
							font-size: 16px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							color: rgb(95, 101, 108);
							line-height: 24px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
}

.title-com {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;
	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}
	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}
	.right-group {
		margin-left: auto;
		display: flex;
		align-items: center;
		
		.rule-checkbox {
			margin-right: 20px;
			
			:deep(.el-checkbox__label) {
				font-size: 16px;
				color: #5F656C;
				font-family: "Microsoft YaHei";
			}
			
			:deep(.el-checkbox__inner) {
				border-color: #C9CDD4;
			}
			
			:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
				background-color: #055FC2;
				border-color: #055FC2;
			}
			
			:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
				color: #5F656C;
			}
		}

		.toggle-btns {
			display: flex;
			gap: 8px;
			margin-right: 20px;
			.t-btn {
				height: 28px;
				padding: 1px 8px;
				border: 1px solid transparent;
				border-radius: 4px;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				font-family: "Microsoft YaHei";
				color: rgb(59, 65, 75);
				cursor: pointer;
				box-sizing: border-box;
				border: 1px solid rgb(230, 231, 232);
				&.active {
					color: rgb(5, 95, 194);
					background-color: rgba(246, 250, 255, 1);
					border-color: rgb(5, 95, 194);
				}
			}
		}
		.btn {
			margin-left: 0;
		}
		.time-select {
			width: 120px;
			height: 28px;
			margin-right: 14px;
			:deep(.el-input__wrapper) {
				height: 28px;
				min-height: 28px;
				padding: 0 8px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
			}
			:deep(.el-input__inner) {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}
		}
	}
	.btn {
		width: 92px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		img:first-child {
			margin-right: 4px;
		}
	}
}


.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
	background: #DCDFE6;
	border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}

.title-com.custom-right-header {
	.box, .text {
		display: none;
	}
	
	.toggle-group {
		display: flex;
		background: #fff;
		border: 1px solid #055FC2;
		border-radius: 20px;
		height: 32px;
		overflow: hidden;
		margin-left: 16px;
		
		.toggle-btn {
			height: 100%;
			padding: 4px 16px;
			display: flex;
			align-items: center;
			cursor: pointer;
			transition: all 0.3s;
			font-size: 18px;
			color: rgb(5, 95, 194);
			background: #fff;
			font-weight: 400;
			font-family: "Microsoft YaHei";
			line-height: 24px;
			img {
				width: 14px;
				height: 14px;
				margin-right: 8px;
			}
			
			&.active {
				background: rgb(5, 95, 194);
				color: #fff;
			}
		}
	}
	
	.right-group {
		.header-select {
			width: 120px;
			height: 32px;
			margin-right: 12px;
			
			&.last-select {
				margin-right: 19px;
			}
			
			:deep(.el-input__wrapper) {
				height: 32px;
				min-height: 32px;
				box-shadow: 0 0 0 1px #dcdfe6 inset;
				padding: 0 11px;
			}
			
			:deep(.el-input__inner) {
				height: 32px;
				line-height: 32px;
			}
		}
	}
}
</style>
