<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<!-- 轮播栏目 -->
		<!-- <div class="carousel-list" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
			<img src="./assets/leftbtn.png" alt class="left-btn" @click="prev" :class="{ disabled: startIndex === 0 }" />
			<div class="content">
				<div class="carousel-container" :style="{ transform: `translateX(-${startIndex * (307 + 16)}px)` }">
					<div class="carousel-item" v-for="(item, index) in carouselList" :key="index">
						<div class="item-top">
							<div class="top-img">
								<img
									:src="ele"
									:class="{ img1: index !== 0 }"
									alt
									v-for="(ele, idx) in item.imageList"
									:key="idx"
								/>
							</div>
							<div class="top-num">{{ item.count }}次</div>
						</div>
						<div class="item-title">{{ item.name }}</div>

						<div class="type">
							<AreaTag v-for="(ele, idxx) in item.industryList" :key="idxx" :tagName="ele.industryName"></AreaTag>
						</div>
					</div>
				</div>
			</div>
			<img
				src="./assets/rightbtn.png"
				alt
				class="right-btn"
				@click="next"
				:class="{ disabled: startIndex >= carouselList.length - 5 }"
			/>
		</div> -->

		<!-- 排华联盟分布 -->
		<div class="anti-china">
			<div class="anti-title">
				<div class="title-left">
					<img src="./assets/union.png" alt />
					<div class="left-title">排华联盟分布情况</div>
				</div>
				<div class="title-right">
					<!-- <div class="right-num" :class="{ click: currentAntiType === 'num' }">排华联盟数量</div> -->
					<!-- <div class="right-num" :class="{ click: currentAntiType === 'active' }">排华联盟动态</div> -->
					<button-list :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></button-list>
					<el-select
						v-model="selectedFieldForLatest"
						@change="handleFieldChange"
						placeholder="全部领域"
						class="field-select"
					>
						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>

			<div class="anti-content">
				<div class="content-left">
					<div class="count-box" v-if="activeButtonId === 2">
						<div class="count-box-header">
							<div class="header-left">
								<div class="left-title">国家名称</div>
							</div>
							<div class="header-right">
								<div class="right-num">参与排华联盟</div>
							</div>
						</div>
						<div class="item" v-for="(item, index) in countList" :key="index" @click="handleCountryClick(item)">
							<div class="item-left">
								<img :src="item.image" alt />
								<el-tooltip
									effect="dark"
									:content="item.zhName"
									popper-class="common-prompt-popper"
									placement="top"
									:show-after="500"
								>
									<span>{{ item.zhName }}</span>
								</el-tooltip>
							</div>
							<div class="item-right">{{ item.value }}个</div>
						</div>
					</div>
					<div class="count-box" v-else>
						<div class="count-box-header">
							<div class="header-left">
								<div class="left-title">{{ unionTotalNum }}个联盟数量</div>
							</div>
							<div class="header-right">
								<div class="right-num">{{ unionDynamicCount }}条动态</div>
							</div>
						</div>
						<div
							class="item carousel-item"
							v-for="(item, index) in carouselPageList"
							:key="index"
							@click="handleUnionItemClick(item)"
							:class="{ 'selected-item': currentSelectedUnion && currentSelectedUnion.id === item.id }"
						>
							<div class="item-top">
								<div class="top-img">
									<img
										:src="ele"
										:class="{ img1: idx !== 0 }"
										alt
										v-for="(ele, idx) in item.imageList"
										:key="idx"
									/>
								</div>
								<div class="top-num">{{ item.count }}条</div>
							</div>
							<div class="item-title">{{ item.name }}</div>
						</div>
					</div>
					<div class="page-box">
						<div class="left" @click="handleLeft">
							<img src="./assets/left-icon.png" alt="" />
						</div>
						<div class="center">
							{{ `${currentPage} / ${totalPage}` }}
						</div>
						<div class="right" @click="handleRight">
							<img src="./assets/right-icon.png" alt="" />
						</div>
						<!-- <el-pagination
							background
							layout="prev, pager, next"
							:total="countryTotalNum"
							:page-size="pageSize"
							:pager-count="2"
							v-model:current-page="currentPage"
							size="small"
							@current-change="handleShowCountries"
						/> -->
					</div>
				</div>
				<div class="content-right" id="echartsMap" v-show="activeButtonId === 2"></div>
				<div class="content-right" id="echartsUnionMap" v-show="activeButtonId === 1"></div>
				<!-- <div class="content-right" id="echartsMap"></div> -->
				<!-- <Echarts :option="unionMapOptions" height="510px"></Echarts> -->
			</div>
		</div>

		<!-- 排华联盟最新动态和预警 -->
		<div class="anti-news">
			<div class="news">
				<div class="news-title">
					<div class="title-left">
						<img src="./assets/news.png" alt />
						<span>排华联盟最新动态</span>
					</div>
					<el-select
						v-model="selectUnion"
						placeholder="全部排华联盟"
						class="custom-select"
						:style="{ width: '160px' }"
						@change="handleUnionChange"
					>
						<el-option v-for="item in unionListOption" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="news-content">
					<div class="item" v-for="(item, index) in newsList" :key="index">
						<div class="item-title">
							<img :src="item.image || defaultImg" alt />
							<span @click="handleClick(item)">{{ item.title }}</span>
						</div>
						<el-tooltip
							effect="dark"
							:content="item.content"
							popper-class="common-prompt-popper"
							placement="top"
							:show-after="500"
						>
							<template #content>
								<div class="item-tooltip">
									{{ item.content }}
								</div>
							</template>
							<div class="item-content">{{ item.content }}</div>
						</el-tooltip>
						<div class="item-bottom">
							<div class="bottom-left">
								<!-- <div class="left-item" :class="getTagClass(ele.industryName)" v-for="ele, idx in item.industryList"
									:key="idx">
									<span>{{ ele.industryName }}</span>
								</div> -->
								<AreaTag v-for="(ele, idx) in item.industryList" :key="idx" :tagName="ele.industryName"></AreaTag>
							</div>
							<div class="bottom-right">{{ getTime(item.time) }}</div>
						</div>
					</div>
				</div>
				<simple-pagination
					v-model:current-page="newsCurrentPage"
					:page-size="newsPageSize"
					:total="allNewsList.length"
					@page-change="handleUnionPageChange"
				/>
			</div>
			<div class="warning">
				<div class="warning-title">
					<img src="./assets/warning.png" alt />
					<span>新增排华联盟预警</span>
				</div>
				<div class="warning-content">
					<div class="content-item" v-for="(item, index) in warningList" :key="index">
						<div class="item-title">
							<div class="title-left">
								<div class="img-list">
									<img
										:src="ele.image || defaultImg"
										:class="{ img1: index !== 0 }"
										@error="e => (e.target.src = defaultImg)"
										alt
										v-for="(ele, index) in item.countryList"
										:key="index"
									/>
								</div>
								<div class="left-content">{{ getContent(item.countryList) }}</div>
							</div>
							<div class="title-right">{{ item.statementList?.length }}次合作</div>
						</div>
						<div class="item-content">
							<div
								class="content-list"
								v-for="(ele, idx) in item.statementList"
								:key="idx"
								@click="handleClick(ele)"
							>
								<div class="list-left">
									<!-- <span>{{ getName(ele.industryList) }}</span> -->
									<AreaTag v-if="getName(ele.industryList)" :tagName="getName(ele.industryList)"></AreaTag>
								</div>
								<div class="list-content">{{ ele.summary }}</div>
								<div class="list-time">{{ getTime(ele.stateTime) }}</div>
							</div>
						</div>
					</div>
				</div>
				<simple-pagination
					v-model:current-page="warningCurrentPage"
					:page-size="warningPageSize"
					:total="allWarningList.length"
					@page-change="handleWarningPageChange"
				/>
			</div>
		</div>

		<!-- bottom -->
		<div class="anti-area">
			<div class="area-left">
				<div class="left-title">
					<img src="./assets/union.png" alt />
					<span>排华联盟领域分布</span>
				</div>
				<div class="left-content" ref="leftChartRef"></div>
				<!-- <div style="padding-left: 15px; padding-right: 15px">
					<Echarts :option="leftChartOptions" ref="leftChartRef" height="430px" />
				</div> -->
				<!-- <div class="anti-area-datasource">
					<el-image :src="tipsIcon" class="tips-icon"></el-image>
					数据来源：美国各政府机构官网，数据时间：2025.2至2025.3
				</div> -->
			</div>
			<div class="area-right">
				<div class="right-title">
					<img src="./assets/circle1.png" alt />
					<span>排华联盟国家紧密度</span>
				</div>
				<!-- <div class="right-content" ref="rightChartRef"></div> -->
				<Echarts :option="rightChartOptions" height="430px" />
				<!-- <div class="anti-area-datasource">
					<el-image :src="tipsIcon" class="tips-icon"></el-image>
					数据来源：美国各政府机构官网，数据时间：2025.2至2025.3
				</div> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed, inject, watch, onUnmounted, nextTick } from "vue";
import router from "@/router";
import * as echarts from "echarts";
import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from "@/api/allUnion.js";
import defaultImg from "../../../../assets/images/default-icon2.png";
import mapJson from "./assets/world-asia-center.json";
import { ElMessage } from "element-plus";
import SimplePagination from "@/components/SimplePagination.vue";
import tipsIcon from "./assets/icon-tips.png";
import Echarts from "@/components/Chart/index.vue";
import { link } from "d3";
import { get, union, update } from "lodash";
import ButtonList from "@/components/buttonList/buttonList.vue";
import { fieldOptions, COLORS, countryNameMap, nameMap } from "@/views/ZMOverView/public.js";
import { countryCoordMap } from "@/assets/json/countryCoordMap.js";

const buttonList = ref([
	{
		id: 1,
		text: "联盟动态"
		// disabled: true
	},
	{
		id: 2,
		text: "排华联盟"
	}
]);

const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => {
	activeButtonId.value = id;
	currentPage.value = 1;
	selectedFieldForLatest.value = "";
	if (id == 1) {
		pageSize.value = 8;
	} else {
		pageSize.value = 10;
	}

	nextTick(() => {
		if (id === 1 && unionMyChart.value) {
			unionMyChart.value.resize();
			createUnionChart();
		} else if (id === 2 && myChart.value) {
			myChart.value.resize();
			createChart();
		}
	});
};

const selectedFieldForLatest = ref("");
const handleFieldChange = field => {
	if (activeButtonId.value == 1) {
		getUnionList();
	} else {
		getUnionCountList();
	}
};

const currentPage = ref(1);
const pageSize = ref(8);
const countryTotalNum = ref(0);
const countryTotalList = ref([]);

const totalPage = computed(() => {
	if (activeButtonId.value == 1) {
		return Math.ceil(carouselList.value.length / pageSize.value);
	}
	return Math.ceil(countryTotalNum.value / pageSize.value);
});

const carouselList = ref([]);
const carouselPageList = computed(() => {
	return carouselList.value.slice(
		(currentPage.value - 1) * pageSize.value,
		(currentPage.value - 1) * pageSize.value + pageSize.value
	);
});
const countList = computed(() => {
	return countryTotalList.value.slice(
		(currentPage.value - 1) * pageSize.value,
		(currentPage.value - 1) * pageSize.value + pageSize.value
	);
});

const handleLeft = () => {
	if (currentPage.value === 1) {
		ElMessage.warning("当前已经是第一页!");
		return;
	} else {
		currentPage.value--;
	}
};

const handleRight = () => {
	if (currentPage.value === totalPage.value) {
		ElMessage.warning("当前已经是最后一页!");
		return;
	} else {
		currentPage.value++;
	}
};

const startIndex = ref(0);
const activeDate = inject("activeDate", ref("week"));

// 自动轮播定时器
let autoTimer = null;

const startAutoPlay = isContinue => {
	if (!isContinue) {
		startIndex.value = 0;
	}

	stopAutoPlay();
	if (carouselList.value.length > 5) {
		autoTimer = setInterval(() => {
			next();
		}, 3000); // 每3秒切换一次
	}
};

const stopAutoPlay = () => {
	if (autoTimer) {
		clearInterval(autoTimer);
		autoTimer = null;
	}
};

const next = () => {
	let arr = [...carouselList.value];
	if (startIndex.value < carouselList.value.length - 5) {
		startIndex.value++;
	} else {
		// startIndex.value = 0; // 循环播放
		carouselList.value = [...carouselList.value, ...arr];
		startIndex.value++;
	}
};

const prev = () => {
	if (startIndex.value > 0) {
		startIndex.value--;
	}
};

// const getAreaList = areaList => {
// 	if (areaList && areaList.length > 2) {
// 		const array = areaList.splice(0, 2);
// 		console.log("---areaList", array);
// 		return array;
// 	} else {
// 		return areaList;
// 	}
// };

// const getImageList = imageList => {
// 	if (imageList && imageList.length > 5) {
// 		const array = imageList.splice(0, 5);
// 		return array;
// 	} else {
// 		return imageList;
// 	}
// };

//打压遏制手段分布
const getColorName = tag => {
	const tagColorMap = {
		航空航天: "blue",
		生物科技: "blue",
		集成电路: "blue",
		能源: "green",
		新材料: "green",
		人工智能: "red"
	};

	if (tagColorMap[tag]) return tagColorMap[tag];

	const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
	let hash = 0;
	if (tag) {
		for (let i = 0; i < tag.length; i++) {
			hash = tag.charCodeAt(i) + ((hash << 5) - hash);
		}
	}
	return colors[Math.abs(hash) % colors.length];
};

const getTagClass = tag => {
	if (!tag) return "";
	return `tag-${getColorName(tag)}`;
};

const currentAntiType = ref("num");

// echarts地图的颜色区间
const startColor = [130, 175, 224]; // rgb(130, 175, 224)
const endColor = [5, 95, 194]; // rgb(5, 95, 194)

// 计算颜色插值函数
const getColorByValue = (value, maxValue) => {
	if (maxValue === 0) return `rgb(${startColor.join(",")})`;

	const ratio = value / maxValue;
	const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio);
	const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio);
	const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio);

	return `rgb(${r}, ${g}, ${b})`;
};

/**
 * 根据 value 和 maxValue 生成高饱和度但不刺眼的 RGB 颜色
 * @param {number} value - 当前值（0 到 maxValue）
 * @param {number} maxValue - 最大值
 * @returns {string} RGB 颜色字符串，如 "rgb(255, 0, 0)"
 */
const getColorByValueRandom = (value, maxValue) => {
	if (value === 0 || maxValue === 0) {
		return `rgb(${startColor.join(",")})`; // rgb(130, 175, 224)
	}

	const ratio = Math.min(Math.max(value / maxValue, 0), 1);

	// HSL 参数：从蓝色（低值）到红色（高值）的渐变
	// 色相：240°(蓝) -> 0°(红)，避免 0 和最大值颜色相同
	const h = 240 * (1 - ratio); // value=0 时 h=240(蓝)，value=maxValue 时 h=0(红)
	const s = 100; // 饱和度 100%
	const l = 50; // 亮度 50%

	// HSL 到 RGB 转换
	const hslToRgb = (h, s, l) => {
		s /= 100;
		l /= 100;
		const c = (1 - Math.abs(2 * l - 1)) * s;
		const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
		const m = l - c / 2;
		let r = 0,
			g = 0,
			b = 0;

		if (0 <= h && h < 60) {
			r = c;
			g = x;
			b = 0;
		} else if (60 <= h && h < 120) {
			r = x;
			g = c;
			b = 0;
		} else if (120 <= h && h < 180) {
			r = 0;
			g = c;
			b = x;
		} else if (180 <= h && h < 240) {
			r = 0;
			g = x;
			b = c;
		} else if (240 <= h && h < 300) {
			r = x;
			g = 0;
			b = c;
		} else if (300 <= h && h < 360) {
			r = c;
			g = 0;
			b = x;
		}

		r = Math.round((r + m) * 255);
		g = Math.round((g + m) * 255);
		b = Math.round((b + m) * 255);

		return `rgb(${r}, ${g}, ${b})`;
	};

	return hslToRgb(h, s, l);
};

const chartDom = ref();
const myChart = ref();
const unionChartDom = ref();
const unionMyChart = ref();
const selectedUnionMembers = ref([]);
const allUnionMembers = ref([]);
const currentSelectedUnion = ref(null); // 当前选中的联盟
const currentSelectedCountry = ref(null); // 当前选中的国家

const unionMapOptions = ref({});

function handleUnionItemClick(item) {
	// selectedUnionMembers.value = item.memberList || [];
	console.log("全部联盟成员数据 allUnionMembers =>", allUnionMembers.value);
	// 如果点击的是当前已选中的项，则取消选中
	if (currentSelectedUnion.value && currentSelectedUnion.value.id === item.id) {
		currentSelectedUnion.value = null;
		selectedUnionMembers.value = allUnionMembers.value;
	} else {
		// 选中新的项
		currentSelectedUnion.value = item;
		selectedUnionMembers.value = item.memberList || [];
	}
	nextTick(() => {
		createUnionChart();
	});
}

// ... existing code ...

function createChart() {
	if (!countryTotalList.value || countryTotalList.value.length === 0) {
		console.error("No country data available");
		return;
	}

	const maxValue = Math.max(...countryTotalList.value.map(item => item.value));
	console.log("全部国家数据 countryTotalList =>", countryTotalList.value);

	const processedData = countryTotalList.value.map(item => {
		const color = getColorByValueRandom(item.value, maxValue);
		return {
			...item,
			name: nameMap[item.name] || item.name,
			value: item.value,
			itemStyle: {
				color: color
			},
			emphasis: {
				itemStyle: {
					areaColor: color
				}
			}
		};
	});

	const option = {
		geo: {
			map: "world",
			roam: true,
			zoom: 1.2,
			// center: [104.1954, 35.8617], // 设置地图中心点为中国
			label: {
				show: false
			},
			itemStyle: {
				areaColor: "rgba(231, 243, 255, 1)",
				borderColor: "rgb(130, 175, 224)"
			},
			emphasis: {
				label: {
					show: true,
					color: "#fff"
				},
				itemStyle: {
					areaColor: "#aaa"
				}
			}
		},
		tooltip: {
			trigger: "item",
			formatter: function (params) {
				if (params.seriesType === "scatter" && params.data) {
					return `${params.data.zhName || params.name}: ${params.data.value || 0}`;
				}
				if (params.seriesType === "lines" && params.data) {
					return `${params.data.sourceName} → ${params.data.targetName}: ${params.data.value}个合作`;
				}
				return params.name;
			}
		},
		visualMap: {
			min: 0,
			max: maxValue,
			left: "left",
			top: "bottom",
			text: ["高", "低"],
			calculable: true,
			inRange: {
				color: [`rgb(${startColor.join(",")})`, `rgb(${endColor.join(",")})`]
			},
			textStyle: {
				color: "#fff"
			}
		},
		series: [
			{
				name: "数据值",
				type: "scatter",
				coordinateSystem: "geo",
				geoIndex: 0,
				data: processedData,
				symbolSize: function (val) {
					return Math.max(val.value / 5, 5);
				},
				label: {
					show: false
				}
			}
		]
	};

	if (
		currentSelectedCountry.value &&
		currentSelectedCountry.value.memberRelation &&
		Array.isArray(currentSelectedCountry.value.memberRelation)
	) {
		const relations = currentSelectedCountry.value.memberRelation;
		const sourceCountryName =
			currentSelectedCountry.value.zhName ||
			nameMap[currentSelectedCountry.value.name] ||
			currentSelectedCountry.value.name;

		const sourceCoord = countryCoordMap[sourceCountryName];

		if (!sourceCoord) {
			console.warn(`无法找到源国家 ${sourceCountryName} 的坐标`);
			return;
		}

		console.log("=== 源国家信息 ===");
		console.log("源国家名称:", sourceCountryName);
		console.log("源国家坐标:", sourceCoord);
		console.log("==================");

		const validRelations = relations.filter(relation => {
			return relation.tagetMemberName && relation.tagetMemberCount;
		});

		if (validRelations.length > 0) {
			const maxRelationCount = Math.max(...validRelations.map(r => r.tagetMemberCount));

			const linesData = [];
			const targetPoints = [];

			validRelations.forEach(relation => {
				const targetCountryZhName = relation.tagetMemberName;
				const targetCoord = countryCoordMap[targetCountryZhName];

				if (targetCoord) {
					console.log(`目标国家：${targetCountryZhName}, 坐标:`, targetCoord);

					const ratio = relation.tagetMemberCount / maxRelationCount;
					const r = Math.round(5 + (255 - 5) * ratio);
					const g = Math.round(95 + (77 - 95) * ratio);
					const b = Math.round(194 + (79 - 194) * ratio);
					const lineColor = `rgb(${r}, ${g}, ${b})`;

					const lineWidth = 1 + (relation.tagetMemberCount / maxRelationCount) * 7;

					linesData.push({
						name: `${sourceCountryName} - ${targetCountryZhName}`,
						sourceName: sourceCountryName,
						targetName: targetCountryZhName,
						coords: [sourceCoord, targetCoord],
						value: relation.tagetMemberCount,
						lineStyle: {
							color: lineColor,
							width: Math.round(lineWidth * 10) / 10,
							curveness: 0
						}
					});

					targetPoints.push({
						name: targetCountryZhName,
						value: targetCoord,
						symbolSize: 8 + (relation.tagetMemberCount / maxRelationCount) * 7,
						itemStyle: {
							color: lineColor
						}
					});
				} else {
					console.warn(`无法找到目标国家 ${targetCountryZhName} 的坐标`);
				}
			});

			if (linesData.length > 0) {
				option.series.push({
					name: "关系线",
					type: "lines",
					coordinateSystem: "geo",
					geoIndex: 0,
					zlevel: 1,
					effect: {
						show: false
					},
					lineStyle: {
						color: "#ff4d4f",
						opacity: 0.6,
						width: 2
					},
					data: linesData
				});

				targetPoints.unshift({
					name: sourceCountryName,
					value: sourceCoord,
					symbolSize: 15,
					itemStyle: {
						color: "#ff0000"
					}
				});

				option.series.push({
					name: "国家标记点",
					type: "scatter",
					coordinateSystem: "geo",
					geoIndex: 0,
					zlevel: 2,
					data: targetPoints
				});
			}
		}
	}

	if (myChart.value) {
		myChart.value.setOption(option);
	} else {
		console.error("ECharts instance not initialized");
	}
}

// ... existing code ...

// 处理国家列表项点击事件
// 在 handleCountryClick 中添加调试代码
const handleCountryClick = country => {
	currentSelectedCountry.value = country;
	console.log("=== 点击的国家信息 ===");
	console.log("国家中文名:", country.zhName);
	console.log("国家英文名:", country.name);

	// 检查坐标映射
	const coordFromZhName = countryCoordMap[country.zhName];
	const coordFromEnName = countryCoordMap[country.name];
	const coordFromMappedName = countryCoordMap[nameMap[country.name]];

	console.log("通过中文名获取坐标:", coordFromZhName);
	console.log("通过英文名获取坐标:", coordFromEnName);
	console.log("通过映射名获取坐标:", coordFromMappedName);
	console.log("=====================");

	nextTick(() => {
		createChart();
	});
};

// function initMap() {
// 	chartDom.value = document.getElementById("echartsMap");

// 	if (!chartDom.value) return;
// 	if (myChart.value) myChart.value.dispose();
// 	myChart.value = echarts.init(chartDom.value);
// 	myChart.value.showLoading();

// 	echarts.registerMap("world", mapJson);
// 	createChart();
// 	myChart.value.hideLoading();
// }

function initMap() {
	chartDom.value = document.getElementById("echartsMap");
	unionChartDom.value = document.getElementById("echartsUnionMap");

	if (myChart.value) myChart.value.dispose();
	myChart.value = echarts.init(chartDom.value);
	myChart.value.showLoading();

	if (unionMyChart.value) unionMyChart.value.dispose();
	unionMyChart.value = echarts.init(unionChartDom.value);
	unionMyChart.value.showLoading();

	echarts.registerMap("unionWorld", mapJson);
	echarts.registerMap("world", mapJson);

	createChart();
	createUnionChart();

	myChart.value.hideLoading();
	unionMyChart.value.hideLoading();
}

function createUnionChart() {
	console.log("全联盟成员数据 =>", selectedUnionMembers.value);
	if (!selectedUnionMembers.value || selectedUnionMembers.value.length === 0) return;

	const maxValue = Math.max(...selectedUnionMembers.value.map(item => item.count));
	console.log("全联盟成员数据 maxValue =>", maxValue);
	const processedData = selectedUnionMembers.value.map(item => {
		const color = getColorByValueRandom(item.count, maxValue);
		return {
			name: countryNameMap[item.name.toLowerCase()] || item.name,
			value: item.count,
			itemStyle: {
				color: color
			},
			emphasis: {
				itemStyle: {
					areaColor: color
				}
			}
		};
	});

	console.log("全联盟成员数据 processedData =>", processedData);

	const option = {
		tooltip: {
			trigger: "item",
			formatter: function (params) {
				return `${params.name}: ${params.value || 0}个`;
			}
		},
		visualMap: {
			min: 0,
			max: maxValue,
			left: "left",
			top: "bottom",
			text: ["高", "低"],
			calculable: true,
			inRange: {
				color: [`rgb(${startColor.join(",")})`, `rgb(${endColor.join(",")})`]
			},
			textStyle: {
				color: "#fff"
			}
		},
		series: [
			{
				name: "联盟成员国",
				type: "map",
				roam: "move",
				zoom: 1.2,
				map: "unionWorld",
				nameMap: nameMap,
				emphasis: {
					label: {
						show: true,
						color: "#fff"
					},
					itemStyle: {
						areaColor: "#aaa",
						borderWidth: 1,
						borderColor: "#fff"
					}
				},
				itemStyle: {
					areaColor: "rgba(231, 243, 255, 1)",
					borderColor: "rgb(130, 175, 224)"
				},
				data: processedData
			}
		]
	};
	unionMyChart.value.setOption(option);
}

const newsList = ref([]);

const warningList = ref([]);
const warningCurrentPage = ref(1);
const warningPageSize = ref(5);
const allWarningList = ref([]);
const handleWarningPageChange = page => {
	warningCurrentPage.value = page;
	updateWarningList();
};

const updateWarningList = () => {
	const start = (warningCurrentPage.value - 1) * warningPageSize.value;
	const end = start + warningPageSize.value;
	warningList.value = allWarningList.value.slice(start, end);
};

const getContent = countries => {
	if (countries) {
		let result = "";
		if (countries.length > 1) {
			for (let i = 0; i < countries.length; i++) {
				result += countries[i].name;
				if (i !== countries.length - 1) {
					result += " / ";
				}
			}
		} else if (countries.length === 1) {
			result += countries[0].name;
		}

		return result;
	}
};

const leftChartRef = ref(null);
const leftChartOptions = ref({
	tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
	series: [
		{
			type: "pie",
			radius: [96, 120],
			center: ["50%", "50%"],
			avoidLabelOverlap: true,
			itemStyle: { borderWidth: 0 },
			label: {
				show: true,
				position: "outside",
				alignTo: "edge", // 与官网保持一致
				formatter: ({ name, value, percent }) => `{name|${name}} \n\n{value|${value}项} {percent|${percent}%}`,
				minMargin: 5,
				edgeDistance: 10,
				lineHeight: 18,
				rich: {
					name: {
						fontSize: 16,
						fontFamily: "Microsoft YaHei",
						fontWeight: 700,
						lineHeight: 24,
						color: "rgb(59, 65, 75)"
					},
					value: {
						fontSize: 14,
						fontFamily: "Microsoft YaHei",
						fontWeight: 400,
						lineHeight: 22,
						color: "rgb(95, 101, 108)"
					},
					percent: {
						fontSize: 14,
						fontFamily: "Microsoft YaHei",
						fontWeight: 400,
						lineHeight: 22,
						color: "rgb(95, 101, 108)"
					}
				}
			},
			labelLine: {
				show: true,
				length: 30, // 与官网length逻辑对齐
				length2: 20, // 与官网length2逻辑对齐
				maxSurfaceAngle: 80
			},
			labelLayout: function (params) {
				// 完全复刻官网逻辑，仅修改X轴，不碰Y轴
				const chartWidth = leftChartRef.value?.getWidth() || params.rect.width;
				const isLeft = params.labelRect.x < chartWidth / 2;
				const points = params.labelLinePoints;

				// 仅修改引导线端点X坐标（核心：保留默认Y轴居中）
				points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;

				return {
					labelLinePoints: points
				};
			},
			data: []
		}
	]
});
let leftChart;
const rightChartRef = ref(null);
const rightChartOptions = ref({
	title: {
		// text: 'Basic Graph'
	},
	tooltip: {
		trigger: "item", // 针对Graph的节点/边触发（必配，否则弹框不生效）
		triggerOn: "click",
		formatter: function (params) {
			// params.data 是当前点击节点的完整数据对象
			const { name, value } = params.data;
			// 返回HTML字符串，自由拼接展示内容（支持换行、标签、样式）
			return `
					<div style="text-align: center;">
						<span style="font-size:16px; font-weight: bold; margin-bottom:8px;">${name}</span>
						<span>：${value || 0}</span>
					</div>
				`;
		}
	},
	animationDurationUpdate: 1500,
	animationEasingUpdate: "quinticInOut",
	dataZoom: [
		{
			type: "slider",
			start: 10,
			end: 10
		}
	],
	series: [
		{
			type: "graph",
			layout: "circular",
			circular: {
				rotateLabel: true
			},
			symbolSize: 50,
			roam: true,
			label: {
				show: true
				// position: "outside"
			},
			edgeSymbol: ["circle", ""],
			edgeSymbolSize: [4, 60],
			edgeLabel: {
				fontSize: 20,
				show: true
			},
			data: [],
			links: [],
			lineStyle: {
				opacity: 0.9,
				width: 2,
				curveness: 0.3
			},
			emphasis: {
				focus: "adjacency",
				lineStyle: {
					width: 4
				},
				label: {
					show: true,
					position: "outside",
					fontWeight: "bold",
					fontSize: 16,
					distance: 10
				}
			}
		}
	]
});
let rightChart;

// 联盟领域分布
const initLeftDonut = async () => {
	if (!leftChartRef.value) return;
	if (leftChart) leftChart.dispose();
	leftChart = echarts.init(leftChartRef.value);
	let data = [];

	try {
		const res = await getIndustry();
		if (res && res.code === 200) {
			for (let i = 0; i < res.data.length; i++) {
				let item = {
					name: "",
					value: 0
				};

				item.name = res.data[i].industry;
				item.value = res.data[i].amount;
				item.itemStyle = {
					color: getColor(colors, item.name)
				};
				data.push(item);
			}
		}
	} catch (error) {
		console.error("获取限制领域分布情况接口失败:", error);
	}

	leftChartOptions.value.series[0].data = data.map((d, i) => ({
		...d,
		labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
	}));

	const option = {
		tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
		series: [
			{
				type: "pie",
				radius: [96, 120],
				center: ["50%", "50%"],
				avoidLabelOverlap: true,
				itemStyle: { borderWidth: 0 },
				label: {
					show: true,
					position: "outside",
					alignTo: "edge",
					formatter: ({ name, value, percent }) => `{name|${name}} \n{value|${value}项} {percent|${percent}%}`,
					minMargin: 5,
					edgeDistance: 20,
					lineHeight: 28,
					rich: {
						name: {
							fontSize: 16,
							fontFamily: "Microsoft YaHei",
							fontWeight: 700,
							lineHeight: 24,
							color: "rgb(59, 65, 75)"
						},
						value: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: "rgb(95, 101, 108)"
						},
						percent: {
							fontSize: 14,
							fontFamily: "Microsoft YaHei",
							fontWeight: 400,
							lineHeight: 22,
							color: "rgb(95, 101, 108)"
						}
					}
				},
				labelLine: {
					show: true,
					length: 30,
					length2: 0,
					maxSurfaceAngle: 80
				},
				labelLayout: function (params) {
					const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
					const points = params.labelLinePoints;
					// 导航线终点在标签下方
					const lineY = params.labelRect.y + params.labelRect.height / 2;
					points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
					points[2][1] = lineY;
					points[1][1] = lineY;
					return {
						labelLinePoints: points
					};
				},
				data: data.map((d, i) => ({
					...d,
					labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
				}))
			}
		]
	};
	leftChart.setOption(option);
};

const initRightDonut = async () => {
	// if (!rightChartRef.value) return;
	// if (rightChart) rightChart.dispose();
	// rightChart = echarts.init(rightChartRef.value);
	let data = [];
	let links = [];

	try {
		const res = await getCountryRelation();
		if (res && res.code === 200) {
			for (let i = 0; i < res.data.length; i++) {
				let item = {
					name: res.data[i].country,
					value: res.data[i].amount,
					x: Math.random() * 10,
					y: Math.random() * 10,
					symbolSize: res.data[i].amount * 9,
					// 节点颜色
					itemStyle: {
						color: COLORS[Math.floor(Math.random() * 20)]
					},
					label: {
						show: true,
						// position: "outside",
						fontWeight: "bold",
						fontSize: 14,
						color: "#333",
						distance: 10
					}
				};
				let item1 = {
					name: res.data[i].relationCountry,
					value: res.data[i].amount,
					x: Math.random() * 10,
					y: Math.random() * 10,
					symbolSize: res.data[i].amount * 9,
					label: {
						show: true,
						// position: "outside",
						fontWeight: "bold",
						fontSize: 14,
						color: "#333",
						distance: 10
					}
				};

				// 先判断data中是否包含上述数据
				let index = data.findIndex(ele => ele.name === item.name);
				let index1 = data.findIndex(ele => ele.name === item1.name);
				// 不存在则向data中添加
				if (index === -1) {
					data.push(item);
				}

				if (index1 === -1) {
					data.push(item1);
				}

				let link = {
					source: item.name,
					target: item1.name,
					symbolSize: [5, 20],
					label: {
						show: false
					},
					lineStyle: {
						width: res.data[i].amount,
						curveness: 0.3,
						color: COLORS[Math.floor(Math.random() * 20)]
					}
				};

				links.push(link);
			}
		}
	} catch (error) {
		console.error("获取限制领域分布情况接口失败:", error);
	}

	rightChartOptions.value.series[0].links = links;
	rightChartOptions.value.series[0].data = data;

	console.log("关系紧密图数据 =>", rightChartOptions.value);
	// const option = {
	// 	center: ["40%", "25%"],
	// 	backgroundColor: "transparent",
	// 	animation: true,
	// 	series: [
	// 		{
	// 			type: "graph",
	// 			layout: "none",
	// 			roam: false,
	// 			label: { show: true, position: "inside", color: "#fff", fontWeight: 700 },
	// 			data: data,
	// 			links: links,
	// 			edgeSymbol: ["none", "none"],
	// 			lineStyle: { color: "rgba(207,223,255,0.7)", width: 3 },
	// 			emphasis: { focus: "adjacency" }
	// 		}
	// 	]
	// };
	// rightChart.setOption(option);
};

const getColor = (colors, name) => {
	const index = colors.findIndex(i => i.name === name);
	if (index !== -1) {
		return colors[index].value;
	} else {
		return "rgba(105, 177, 255, 1)";
	}
};

const colors = [
	{
		name: "集成电路",
		value: "rgba(105, 177, 255, 1)"
	},
	{
		name: "新一代通信网络",
		value: "rgba(135, 232, 222, 1)"
	},
	{
		name: "人工智能",
		value: "rgba(255, 192, 105, 1)"
	},
	{
		name: "能源",
		value: "rgba(89, 126, 247, 1)"
	},
	{
		name: "先进制造",
		value: "rgba(214, 228, 255, 1)"
	},
	{
		name: "生物科技",
		value: "rgba(255, 120, 117, 1)"
	},
	{
		name: "航空航天",
		value: "rgba(179, 127, 235, 1)"
	},
	{
		name: "新材料",
		value: "rgba(255, 163, 158, 1)"
	}
];

// 获取计算后的日期
const getCalculatedDate = type => {
	const now = new Date();
	switch (type) {
		case "week": // 近一个月
			now.setMonth(now.getMonth() - 1);
			break;
		case "three_month": // 近三个月
			now.setMonth(now.getMonth() - 3);
			break;
		case "six_month": // 近半年
			now.setMonth(now.getMonth() - 6);
			break;
		case "year": // 近一年
			now.setFullYear(now.getFullYear() - 1);
			break;
		default:
			now.setMonth(now.getMonth() - 1); // 默认近一个月
	}
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, "0");
	const day = String(now.getDate()).padStart(2, "0");
	return `${year}-${month}-${day}`;
};

const newsCurrentPage = ref(1);
const newsPageSize = ref(5);
const allNewsList = ref(0);
const handleUnionPageChange = val => {
	newsCurrentPage.value = val;
	updateNewsList();
};

const updateNewsList = async () => {
	const start = (newsCurrentPage.value - 1) * newsPageSize.value;
	const end = start + newsPageSize.value;
	newsList.value = allNewsList.value.slice(start, end);
};

// 获取联盟列表
const unionListOption = ref([]);
const selectUnion = ref("");
const unionTotalNum = ref(0);
const unionDynamicCount = ref();
const handleUnionChange = val => {
	selectUnion.value = val;
	newsCurrentPage.value = 1;
	getDynamicList();
};
const getUnionList = async () => {
	try {
		console.log("selectedFieldForLatest.value", selectedFieldForLatest.value);
		const dateParam = getCalculatedDate(activeDate.value);
		const res = await getAllUnionList({ date: dateParam, domainId: selectedFieldForLatest.value });
		if (res && res.code === 200) {
			console.log("----getUnionList", res.data);
			if (!selectedFieldForLatest.value) {
				allUnionMembers.value = res.data.memberList;
			}
			carouselList.value = res.data.unionList;
			unionDynamicCount.value = res.data.unionDynamicsCount;
			unionTotalNum.value = res.data.unionCount;
			carouselList.value.forEach(item => {
				item.imageList = item.imageList.slice(0, 10);
			});
			const unionList = res.data.unionList.map(item => {
				return {
					label: item.name,
					value: item.id
				};
			});
			unionListOption.value = [{ label: "全部联盟", value: "" }].concat(unionList);
			selectedUnionMembers.value = res.data.memberList;
			console.log("初始联盟成员 =>", selectedUnionMembers.value);
			createUnionChart();
		}
	} catch (error) {
		console.error("获取联盟列表接口失败:", error);
	}
};

// 获取联盟动态
const getDynamicList = async () => {
	try {
		const res = await getDynamic({ page: 1, pageSize: 100, unionId: selectUnion.value });
		if (res && res.code === 200) {
			console.log("----getDynamicList", res.data);
			// newsList.value = res.data;
			allNewsList.value = res.data.content;
			updateNewsList();
		}
	} catch (error) {
		console.error("获取联盟动态接口失败:", error);
		// newsList.value = [];
		allNewsList.value = [];
	}
};
const handleClick = item => {
	const { href } = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: item.id
		}
	});
	window.open(href, "_blank");
};

// 获取联盟预警
const getPredictionList = async () => {
	try {
		const res = await getPrediction();
		if (res && res.code === 200) {
			console.log("----getPredictionList", res.data);
			allWarningList.value = res.data.content.map(item => {
				return {
					...item,
					statementList: item.statementList.reverse()
				};
			});
			updateWarningList();
		}
	} catch (error) {
		console.error("获取联盟动态接口失败:", error);
	}
};

// 获取排华联盟数量
const getUnionCountList = async () => {
	try {
		const res = await getUnionCount({ page: 1, pageSize: 100, domainId: selectedFieldForLatest.value });
		if (res && res.code === 200) {
			console.log("----getUnionCountList", res.data);
			// 处理一下数据

			countryTotalList.value = res.data.content
				.sort((a, b) => b.count - a.count)
				.map(item => {
					item.value = item.count;
					item.zhName = item.name;
					// 1. 尝试直接从映射表获取
					let mappedName = countryNameMap[item.ename];

					// 2. 如果映射表没有，尝试简单的模糊匹配
					if (!mappedName && item.ename) {
						let tempName = item.ename
							.replace(/Republic of /i, "")
							.replace(/Kingdom of /i, "")
							.replace(/Federal /i, "")
							.replace(/Islamic /i, "")
							.replace(/State of /i, "")
							.replace(/Commonwealth of /i, "")
							.trim();
						mappedName = tempName;
					}

					item.name = mappedName || item.ename;
					return item;
				});

			console.log("全部国家数据 countryTotalList 0 =>", countryTotalList.value);
			countryTotalNum.value = countryTotalList.value.length;
			console.log("countryTotalNum", countryTotalNum.value);
			createChart();
		}
	} catch (error) {
		console.error("获取联盟动态接口失败:", error);
	}
};

const getTime = time => {
	if (time) {
		const array = time.split("-");
		return `${array[0]}年${array[1]}月${array[2]}日`;
	}
};

const getName = item => {
	if (item && item.length > 0) {
		return item[0].industryName;
	} else {
		return "";
	}
};

onMounted(async () => {
	await getUnionList();
	await getDynamicList();
	await getPredictionList();
	await getUnionCountList();
	initMap();
	initLeftDonut();
	initRightDonut();
	startAutoPlay();
});

onUnmounted(() => {
	stopAutoPlay();
});

watch(activeDate, async () => {
	await getUnionList();
	// await getDynamicList();
	// await getPredictionList();
	// await getUnionCountList();
	// initMap();
	// initLeftDonut();
	// initRightDonut();
	startAutoPlay();
});
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1666px;
	height: 2132px;

	.tag-blue {
		color: rgba(9, 88, 217, 1);
		background: rgba(230, 244, 255, 1);
		border: 1px solid rgba(186, 224, 255, 1);
	}

	.tag-green {
		color: rgba(56, 158, 13, 1);
		background: rgba(246, 255, 237, 1);
		border: 1px solid rgba(217, 247, 190, 1);
	}

	.tag-red {
		color: rgba(245, 34, 45, 1);
		background: rgba(255, 241, 240, 1);
		border: 1px solid rgba(255, 163, 158, 1);
	}

	.tag-orange {
		color: rgba(250, 140, 22, 1);
		background: rgba(255, 247, 230, 1);
		border: 1px solid rgba(255, 213, 145, 1);
	}

	.tag-purple {
		color: rgba(114, 46, 209, 1);
		background: rgba(249, 240, 255, 1);
		border: 1px solid rgba(211, 173, 247, 1);
	}

	.tag-cyan {
		color: rgba(19, 194, 194, 1);
		background: rgba(230, 255, 251, 1);
		border: 1px solid rgba(135, 232, 222, 1);
	}

	// 无类型
	.none-class {
		background: transparent;
		border: none;
	}

	.carousel-list {
		width: 1601px;
		height: 178px;
		margin-top: 16px;
		display: flex;
		align-items: center;
		position: relative;

		.content {
			width: 1601px;
			overflow: hidden;

			.carousel-container {
				display: flex;
				gap: 16px;
				transition: transform 0.5s ease;
				width: max-content;
			}

			.carousel-item {
				width: 307px;
				height: 178px;
				// margin-right: 16px;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.65);
				border-radius: 10px;
				border: 1px solid rgba(255, 255, 255, 1);

				.item-top {
					width: 100%;
					height: 48px;
					padding: 15px 22px 9px 25px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top-img {
						display: flex;
						align-items: center;
						overflow: auto;
						width: 190px;

						img {
							width: 24px;
							height: 24px;
							border-radius: 50%;
						}

						.img1 {
							margin-left: -8px;
						}
					}

					.top-num {
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 30px;
						font-weight: 400;
						line-height: 39px;
						letter-spacing: 0px;
						text-align: right;
						color: rgba(5, 95, 194, 1);
					}
				}

				.item-title {
					margin-left: 25px;
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
					color: rgba(59, 65, 75, 1);
				}

				.type {
					margin-left: 22px;
					margin-top: 31px;
					margin-bottom: 8px;
					overflow-x: auto;
					overflow-y: hidden;
					width: calc(100% - 22px);
					height: 55px;
					display: flex;
					align-items: center;
					gap: 4px;
					flex-wrap: wrap;

					.type-item {
						display: inline-block;
						border-radius: 4px;
						padding: 2px 8px;
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						margin-left: 8px;
						margin-bottom: 8px;
						box-sizing: border-box;
					}
				}
			}
		}

		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			left: -33px;
			z-index: 10;
			cursor: pointer;

			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}

		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			right: -33px;
			z-index: 10;
			cursor: pointer;

			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
	}

	.anti-china {
		margin-top: 16px;
		width: 1601px;
		height: 700px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);

		.anti-title {
			width: 100%;
			height: 48px;
			padding-left: 19px;
			padding-right: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

			.title-left {
				display: flex;
				align-items: center;

				img {
					width: 17px;
					height: 17px;
					margin-right: 8px;
				}

				.left-title {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
					color: rgba(5, 95, 194, 1);
				}
			}

			.title-right {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 350px;

				.field-select {
					width: 160px;
					margin-left: 10px;
				}

				.right-num {
					/* 切换按钮 */
					width: 120px;
					height: 32px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin-right: 8px;
					border-radius: 4px;
					border: 1px solid rgba(230, 231, 232, 1);
					color: rgb(95, 101, 108);
					background: rgba(255, 255, 255, 1);
				}

				.click {
					border: 1px solid rgba(5, 95, 194, 1);
					color: rgb(5, 95, 194);
					background: rgba(231, 243, 255, 1);
				}
			}
		}

		.anti-content {
			width: 100%;
			height: calc(100% - 48px);
			display: flex;
			justify-content: space-between;
			.content-left {
				width: 320px;

				margin-left: 38px;
				margin-top: 15px;
				margin-bottom: 55px;

				.count-box {
					height: 560px;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					border: 1px solid rgb(231, 243, 255);
					border-radius: 10px;
					// gap: 12px;
					.count-box-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						box-sizing: border-box;
						background-color: rgba(246, 250, 255, 1);
						font-family: YouSheBiaoTiHei;
						font-size: 20px;
						font-weight: 400;
						color: rgba(5, 95, 194, 1);
						width: 100%;
						height: 48px;
						line-height: 48px;
						padding: 0 10px;
					}
				}

				.item {
					/* 容器 493 */
					width: 100%;
					height: 52px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 4px 12px 4px 12px;
					box-sizing: border-box;
					// border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 50px;
					/* 业务系统/模态背景模糊 */
					backdrop-filter: blur(30px);
					background: rgba(255, 255, 255, 0.65);

					.item-left {
						display: flex;
						align-items: center;

						img {
							width: 16px;
							height: 12px;
							margin-right: 12px;
						}

						span {
							display: inline-block;
							width: 100px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: left;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏溢出的内容 */
							text-overflow: ellipsis;
							/* 显示省略符号来代表被修剪的文本 */
						}
					}

					.item-right {
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: left;
					}
				}

				.carousel-item {
					position: relative;
					display: flex;
					flex-direction: column;
					// gap: 10px;
					width: 320px;
					height: 64px;
					// margin-right: 16px;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0.65);
					border-radius: 0px;
					border-bottom: 1px solid rgb(231, 243, 255);
					padding: 10px;
					&.selected-item {
						background-color: rgb(246, 250, 255) !important;
					}
					.item-top {
						width: 100%;
						height: 16px;
						// padding: 15px 22px 9px 25px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.top-img {
							display: flex;
							align-items: center;
							// overflow: auto;
							width: 80px;

							img {
								width: 16px;
								height: 16px;
								border-radius: 50%;
							}

							.img1 {
								margin-left: -8px;
							}
						}

						.top-num {
							position: absolute;
							top: 10px;
							right: 10px;
							font-family: Source Han Sans CN;
							font-size: 20px;
							font-weight: 700;
							line-height: 39px;
							letter-spacing: 0px;
							text-align: right;
							color: rgba(5, 95, 194, 1);
						}
					}

					.item-title {
						// margin-left: 25px;
						margin-top: 3px;
						width: 100%;
						font-family: Source Han Sans CN;
						font-style: Regular;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: left;
						color: rgba(59, 65, 75, 1);
					}

					.type {
						margin-left: 22px;
						margin-top: 31px;
						margin-bottom: 8px;
						overflow-x: auto;
						overflow-y: hidden;
						width: calc(100% - 22px);
						height: 55px;
						display: flex;
						align-items: center;
						gap: 4px;
						flex-wrap: wrap;

						.type-item {
							display: inline-block;
							border-radius: 4px;
							padding: 2px 8px;
							font-size: 14px;
							font-weight: 400;
							font-family: "Microsoft YaHei";
							margin-left: 8px;
							margin-bottom: 8px;
							box-sizing: border-box;
						}
					}
				}

				.page-box {
					height: 24px;
					margin-top: 24px;
					display: flex;
					justify-content: center;
					gap: 8px;

					.left {
						width: 24px;
						height: 24px;
						border-radius: 4px;
						overflow: hidden;
						cursor: pointer;

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

					.center {
						height: 24px;
						color: var(--color-main-active);
						font-family: Source Han Sans CN;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 0px;
						text-align: center;
					}

					.right {
						width: 24px;
						height: 24px;
						border-radius: 4px;
						overflow: hidden;
						cursor: pointer;

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

			.content-right {
				// width: calc(100% - 197px - 38px - 16px - 45px);
				width: 1179px;
				height: calc(100% - 20px - 20px);
				// background: red;
				// margin-left: 16px;
				margin-right: 20px;
				margin-bottom: 20px;
				margin-top: 20px;

				#echartsUnionMap {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.anti-news {
		margin-top: 16px;
		width: 1601px;
		height: 700px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.news {
			box-sizing: border-box;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);
			width: 793px;
			height: 700px;

			.news-title {
				width: 100%;
				height: 54px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 16px;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.news-content {
				width: 100%;
				height: calc(100% - 110px);
				padding: 4px 28px 5px 27px;
				overflow-y: auto;

				.item {
					width: 100%;
					height: 116px;
					padding: 16px 0px;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					background: rgba(255, 255, 255, 0.65);

					.item-title {
						width: 100%;
						height: 30px;
						display: flex;
						align-items: center;
						cursor: pointer;

						img {
							width: 20px;
							height: 20px;
							margin-right: 5px;
						}

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

					.item-tooltip {
						color: red;
					}

					.item-content {
						margin-left: 28px;
						width: calc(100% - 28px);
						height: 30px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: justify;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
						/* 显示省略符号来代表被修剪的文本 */
					}

					.item-bottom {
						margin-left: 28px;
						width: calc(100% - 28px);
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.bottom-left {
							display: flex;
							align-items: center;
							gap: 8px;

							.left-item {
								/* 数据展示/Tag标签/亮色/蓝 */
								// width: 72px;
								height: 24px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								padding: 2px 8px;
								box-sizing: border-box;
								border-radius: 4px;
								margin-right: 8px;

								span {
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									letter-spacing: 0px;
									text-align: left;
								}
							}
						}

						.bottom-right {
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-style: Regular;
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
			}
		}

		.warning {
			box-sizing: border-box;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);
			width: 793px;
			height: 700px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.warning-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.warning-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 4px 28px 25px 27px;
				overflow-y: auto;
				margin-bottom: auto;

				.content-item {
					width: 100%;
					height: auto;
					padding: 12px 24px;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					// border-radius: 10px;
					margin-bottom: 12px;

					.item-title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title-left {
							display: flex;
							align-items: center;

							.img-list {
								display: flex;
								align-items: center;
								margin-right: 12px;

								img {
									width: 24px;
									height: 24px;
									border-radius: 50%;
								}

								.img1 {
									margin-left: -8px;
								}
							}

							.left-content {
								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: justify;
							}
						}

						.title-right {
							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: right;
						}
					}

					.item-content {
						width: 100%;
						margin-top: 14px;
						display: none;

						.content-list {
							display: flex;
							width: 100%;
							height: 38px;
							align-items: center;
							justify-content: space-around;
							cursor: pointer;

							&:hover {
								background: var(--color-bg-hover);
							}

							.list-left {
								/* 数据展示/Tag标签/亮色/绿 */
								min-width: 75px;
								height: 24px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: right;
								align-items: center;

								span {
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									letter-spacing: 0px;
									text-align: left;
								}
							}

							.list-content {
								width: 425px;
								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;
								text-align: left;
								white-space: nowrap;
								/* 防止文本换行 */
								overflow: hidden;
								/* 隐藏溢出的内容 */
								text-overflow: ellipsis;
								/* 显示省略符号来代表被修剪的文本 */
								// margin-left: 13px;
								// margin-right: 13px;
							}

							.list-time {
								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;
							}
						}
					}
				}
			}
		}
	}

	.anti-area {
		margin-top: 30px;
		width: 1601px;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.area-left {
			width: 792px;
			height: 520px;
			box-sizing: border-box;
			border-radius: var(---10, 10px);
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.left-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.left-content {
				width: 100%;
				height: calc(100% - 80px);
				padding: 33px 48px 40px 50px;
			}
			.anti-area-datasource {
				text-align: center;
				font-family: Source Han Sans CN;
				font-size: 14px;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
				.tips-icon {
					margin-top: 2px;
					width: 16px;
					height: 16px;
				}
			}
		}

		.area-right {
			width: 792px;
			height: 520px;
			box-sizing: border-box;
			border-radius: var(---10, 10px);
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.right-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

				img {
					width: 17px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.right-content {
				width: 100%;
				height: 430px;
				// padding: 33px 48px 59px 50px;
			}
			.anti-area-datasource {
				text-align: center;
				font-family: Source Han Sans CN;
				font-size: 14px;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
				.tips-icon {
					margin-top: 2px;
					width: 16px;
					height: 16px;
				}
			}
		}
	}
}
</style>

<style scoped>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 500px !important;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}

:deep(.el-table thead) {
	color: rgb(59, 65, 75);
}

:deep(.el-table tr) {
	height: 48px;
}
</style>
