<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<!-- 轮播栏目 -->
		<div class="carousel-list">
			<img src="./assets/leftbtn.png" alt class="left-btn" @click="handleSwitch('left')" />
			<div class="content">
				<div class="carousel-item" v-for="item in showCarouselList">
					<div class="item-top">
						<div class="top-img">
							<img :src="ele" :class="{ img1: index !== 0 }" alt v-for="(ele, index) in item.imageList" />
						</div>
						<div class="top-num">{{ item.count }}次</div>
					</div>
					<div class="item-title">{{ item.name }}</div>

					<div class="type">
						<div class="type-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
							{{ ele.industryName }}
						</div>
					</div>
				</div>
			</div>
			<img src="./assets/rightbtn.png" alt class="right-btn" @click="handleSwitch('right')" />
		</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>
				</div>
			</div>

			<div class="anti-content">
				<div class="content-left">
					<div class="item" v-for="item in antiChinaNum">
						<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="content-right" id="echartsMap"></div>
			</div>
		</div>

		<!-- 排华联盟最新动态和预警 -->
		<div class="anti-news">
			<div class="news">
				<div class="news-title">
					<img src="./assets/news.png" alt />
					<span>排华联盟最新动态</span>
				</div>
				<div class="news-content">
					<div class="item" v-for="item in newsList">
						<div class="item-title">
							<img :src="item.image" alt />
							<span>{{ item.title }}</span>
						</div>
						<el-tooltip
							effect="dark"
							:content="item.content"
							popper-class="common-prompt-popper"
							placement="top"
							:show-after="500"
						>
							<div class="item-content">{{ item.content }}</div>
						</el-tooltip>
						<div class="item-bottom">
							<div class="bottom-left">
								<div class="left-item" :class="getClassName(ele.industryName)" v-for="ele in item.industryList">
									<span>{{ ele.industryName }}</span>
								</div>
							</div>
							<div class="bottom-right">{{ getTime(item.time) }}</div>
						</div>
					</div>
				</div>
			</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 in warningList">
						<div class="item-title">
							<div class="title-left">
								<div class="img-list">
									<img
										:src="ele.image"
										:class="{ img1: index !== 0 }"
										alt
										v-for="(ele, index) in item.countryList"
									/>
								</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 in item.statementList">
								<div class="list-left" :class="getClassName(getName(ele.industryList))">
									<span>{{ getName(ele.industryList) }}</span>
								</div>
								<div class="list-content">{{ ele.summary }}</div>
								<div class="list-time">{{ getTime(ele.stateTime) }}</div>
							</div>
						</div>
					</div>
				</div>
			</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>
			<div class="area-right">
				<div class="right-title">
					<img src="./assets/circle1.png" alt />
					<span>排华联盟国家紧密度</span>
				</div>
				<div class="right-content" ref="rightChartRef"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { getAllUnionList, getDynamic, getPrediction, getUnionCount, getIndustry, getCountryRelation } from "@/api/allUnion.js";

const carouselList = ref([
	{
		name: "芯片四方联盟1",
		num: 21,
		area: ["人工智能"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	},
	{
		name: "芯片四方联盟2",
		num: 21,
		area: ["人工智能"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	},
	{
		name: "芯片四方联盟3",
		num: 21,
		area: ["人工智能"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	},
	{
		name: "芯片四方联盟4",
		num: 21,
		area: ["人工智能"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	},
	{
		name: "芯片四方联盟5",
		num: 21,
		area: ["人工智能", "集成电路"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	},
	{
		name: "芯片四方联盟6",
		num: 21,
		area: ["人工智能"],
		imgList: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png"
			}
		]
	}
]);

const startIndex = ref(0);

const handleSwitch = flag => {
	if (flag == "left") {
		if (startIndex.value === 0) {
			startIndex.value = carouselList.value.length - 5;
		} else {
			startIndex.value--;
		}
	} else {
		if (startIndex.value === carouselList.value.length - 5) {
			startIndex.value = 0;
		} else {
			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 showCarouselList = computed(() => {
	return carouselList.value.slice(startIndex.value, startIndex.value + 5);
});
const getClassName = type => {
	let className = "";

	switch (type) {
		case "人工智能":
			className = "ai";
			break;
		case "新材料":
			className = "material";
			break;
		case "量子科技":
			className = "technology";
			break;
		case "生物科技":
			className = "organism";
			break;
		case "航空航天":
			className = "aerospace";
			break;
		case "能源":
			className = "energy";
			break;
		case "集成电路":
			className = "integrated";
			break;
		case "":
			className = "none-class";
			break;
		default:
			className = "other";
	}

	return className;
};

const currentAntiType = ref("num");

const antiChinaNum = ref([
	{
		name: "美国1111111111111111",
		value: 24,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "欧盟",
		value: 18,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "Japan",
		value: 13,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "韩国",
		value: 13,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "英国",
		value: 9,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "加拿大",
		value: 6,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "澳大利亚",
		value: 5,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "菲律宾",
		value: 3,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "新西兰",
		value: 3,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	},
	{
		name: "印度",
		value: 2,
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png"
	}
]);

// 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})`;
};

const chartDom = ref();
const myChart = ref();
function createChart() {
	// 找到最大值用于颜色计算
	const maxValue = Math.max(...antiChinaNum.value.map(item => item.value));

	// 为每个数据项计算颜色
	const processedData = antiChinaNum.value.map(item => ({
		...item,
		itemStyle: {
			color: getColorByValue(item.value, maxValue)
		}
	}));

	const option = {
		// geo: {
		//   map: 'world',
		//   roam: true,
		//   label: {
		//     show: false,
		//     color: '#555'
		//   },
		//   itemStyle: {
		//     areaColor: 'rgba(231, 243, 255, 1)', // 所有区域的默认底色
		//     borderColor: 'rgb(130, 175, 224)'    // 边界线颜色
		//   }
		// },
		tooltip: {
			trigger: "item",
			formatter: function (params) {
				if (params.data) {
					// 从数据中查找对应的中文名称
					const item = antiChinaNum.value.find(item => item.name === params.name);
					console.log(item);
					if (item) {
						return `${item.zhName}: ${params.data.value || 0}`;
					} else {
						return `${params.name}: ${params.data.value || 0}`;
					}
				}
				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: "map",
				roam: true, // 允许缩放和平移
				zoom: 1.2, // 初始缩放级别
				map: "world",
				emphasis: {
					label: {
						show: true,
						color: "#fff"
					},
					itemStyle: {
						areaColor: null,
						borderWidth: 1,
						borderColor: "#fff"
					}
				},
				itemStyle: {
					areaColor: "rgba(231, 243, 255, 1)", // 所有区域的默认底色
					borderColor: "rgb(130, 175, 224)" // 边界线颜色
				},
				data: processedData
			}
		]
	};
	myChart.value.setOption(option);
}
function fetchGeoJSON() {
	chartDom.value = document.getElementById("echartsMap");

	if (!chartDom.value) return;
	if (myChart.value) myChart.value.dispose();
	myChart.value = echarts.init(chartDom.value);
	myChart.value.showLoading();
	fetch("/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json")
		.then(res => res.json())
		.then(result => {
			echarts.registerMap("world", result);
			createChart();
			myChart.value.hideLoading();
		});
}

const newsList = ref([
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	},
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	},
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	},
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	},
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	},
	{
		img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
		title: "芯片四方联盟: 发布新版管制清单",
		content: "2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...",
		area: ["新材料", "集成电路"],
		time: "2025年12月18日"
	}
]);

const warningList = ref([
	{
		countries: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			}
		],
		area: [
			{
				type: "人工智能",
				content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
				time: "2024年11月21日"
			},
			{
				type: "人工智能",
				content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
				time: "2024年11月21日"
			},
			{
				type: "人工智能",
				content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
				time: "2024年11月21日"
			}
		],
		num: 3
	},
	{
		countries: [
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			},
			{
				img: "/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png",
				name: "美国"
			}
		],
		area: [
			{
				type: "人工智能",
				content: "推出“数字基础设施增长计划框架”（DiGi Framework）",
				time: "2024年11月21日"
			}
		],
		num: 1
	}
]);

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);
let leftChart;
const rightChartRef = ref(null);
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);
	}
	// console.log('----data', data)
	// const data = [
	//   { name: "集成电路", value: 50 },
	//   { name: "人工智能", value: 46 },
	//   { name: "通信网络", value: 40 },
	//   { name: "能源", value: 32 },
	//   { name: "先进制造", value: 31 },
	//   { name: "生物科技", value: 31 },
	//   { name: "航空航天", value: 30 },
	//   { name: "新材料", value: 24 }
	// ];

	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}}  {value|${value}项}  {percent|${percent}%}`,
					minMargin: 5,
					edgeDistance: 10,
					lineHeight: 15,
					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;
					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,
					x: Math.random() * 10,
					y: Math.random() * 10
				};
				let item1 = {
					name: res.data[i].relationCountry,
					x: Math.random() * 10,
					y: Math.random() * 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.2
					}
				};

				links.push(link);
			}
		}
	} catch (error) {
		console.error("获取限制领域分布情况接口失败:", error);
	}
	// console.log('----data', data)
	// const data = [
	//   {
	//     name: 'Node 1',
	//     x: 300,
	//     y: 300
	//   },
	//   {
	//     name: 'Node 2',
	//     x: 800,
	//     y: 300
	//   },
	//   {
	//     name: 'Node 3',
	//     x: 550,
	//     y: 100
	//   },
	//   {
	//     name: 'Node 4',
	//     x: 550,
	//     y: 500
	//   }
	// ]
	// const links = [
	//   {
	//     source: 0,
	//     target: 1,
	//     symbolSize: [5, 20],
	//     label: {
	//       show: false
	//     },
	//     lineStyle: {
	//       width: 5,
	//       curveness: 0.2
	//     }
	//   },
	//   {
	//     source: 'Node 2',
	//     target: 'Node 1',
	//     label: {
	//       show: false
	//     },
	//     lineStyle: {
	//       curveness: 0.2
	//     }
	//   },
	//   {
	//     source: 'Node 1',
	//     target: 'Node 3'
	//   },
	//   {
	//     source: 'Node 2',
	//     target: 'Node 3'
	//   },
	//   {
	//     source: 'Node 2',
	//     target: 'Node 4'
	//   },
	//   {
	//     source: 'Node 1',
	//     target: 'Node 4'
	//   }
	// ]

	let option = {
		title: {
			// text: 'Basic Graph'
		},
		tooltip: {},
		animationDurationUpdate: 1500,
		animationEasingUpdate: "quinticInOut",
		dataZoom: [
			{
				type: "slider",
				start: 10,
				end: 10
			}
		],
		series: [
			{
				type: "graph",
				layout: "none",
				symbolSize: 50,
				roam: true,
				label: {
					show: true
				},
				edgeSymbol: ["circle", ""],
				edgeSymbolSize: [4, 10],
				edgeLabel: {
					fontSize: 20
				},
				data: data,
				// links: [],
				links: links,
				lineStyle: {
					opacity: 0.9,
					width: 2,
					curveness: 0
				}
			}
		]
	};
	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 getUnionList = async () => {
	try {
		const res = await getAllUnionList();
		if (res && res.code === 200) {
			console.log("----getUnionList", res.data);
			carouselList.value = res.data;
		}
	} catch (error) {
		console.error("获取联盟列表接口失败:", error);
	}
};

// 获取联盟动态
const getDynamicList = async () => {
	try {
		const res = await getDynamic();
		if (res && res.code === 200) {
			console.log("----getDynamicList", res.data);
			newsList.value = res.data;
		}
	} catch (error) {
		console.error("获取联盟动态接口失败:", error);
	}
};

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

// 获取排华联盟数量
const getUnionCountList = async () => {
	try {
		const res = await getUnionCount();
		if (res && res.code === 200) {
			console.log("----getUnionCountList", res.data);
			// 处理一下数据
			antiChinaNum.value = res.data.map(item => {
				item.value = item.count;
				item.zhName = item.name;
				item.name = item.ename;
				return item;
			});
		}
	} 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) {
		return item[0].industryName;
	} else {
		return "";
	}
};

onMounted(async () => {
	await getUnionList();
	await getDynamicList();
	await getPredictionList();
	await getUnionCountList();
	fetchGeoJSON();
	initLeftDonut();
	initRightDonut();
});
</script>

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

	// 领域样式
	// 人工智能
	.ai {
		border: 1px solid rgba(255, 163, 158, 1);
		background: rgba(255, 241, 240, 1);
		color: rgba(245, 34, 45, 1);
	}
	// 新材料
	.material {
		border: 1px solid rgba(135, 232, 222, 1);
		background: rgba(230, 255, 251, 1);
		color: rgba(19, 168, 168, 1);
	}
	// 量子科技
	.technology {
		border: 1px solid rgba(211, 173, 247, 1);
		background: rgba(249, 240, 255, 1);
		color: rgba(114, 46, 209, 1);
	}
	// 生物科技
	.organism {
		border: 1px solid rgba(145, 202, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(22, 119, 255, 1);
	}
	// 航空航天
	.aerospace {
		border: 1px solid rgba(173, 198, 255, 1);
		background: rgba(240, 245, 255, 1);
		color: rgba(22, 119, 255, 1);
	}
	// 能源
	.energy {
		border: 1px solid rgba(217, 247, 190, 1);
		background: rgba(246, 255, 237, 1);
		color: rgba(56, 158, 13, 1);
	}
	// 集成电路
	.integrated {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(9, 88, 217, 1);
	}
	// 其他
	.other {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
		color: rgba(9, 88, 217, 1);
	}

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

	.carousel-list {
		width: 1666px;
		height: 178px;
		margin-top: 16px;
		display: flex;
		align-items: center;
		.content {
			width: calc(100% - 48px - 16px);
			display: flex;
			align-items: center;
			justify-content: space-around;

			.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: 51px;
					margin-bottom: 8px;
					overflow-x: auto;
					overflow-y: hidden;
					width: calc(100% - 22px);
					height: 25px;
					.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;
					}
				}
			}
		}
		.left-btn {
			width: 24px;
			height: 48px;
			margin-right: 8px;
			cursor: pointer;
		}
		.right-btn {
			width: 24px;
			height: 48px;
			margin-left: 8px;
			cursor: pointer;
		}
	}

	.anti-china {
		margin-top: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 700px;
		background: rgba(255, 255, 255, 1);

		.anti-title {
			width: 100%;
			height: 48px;
			padding-left: 19px;
			padding-right: 43px;
			display: flex;
			align-items: center;
			justify-content: space-between;

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

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

			.content-left {
				width: 197px;
				margin-left: 38px;
				margin-top: 55px;
				margin-bottom: 55px;
				overflow-y: auto;
				display: flex;
				flex-direction: column;

				.item {
					/* 容器 493 */
					width: 100%;
					height: 38px;
					/* 自动布局 */
					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);
					margin-bottom: 16px;

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

						img {
							width: 16px;
							height: 16px;
							margin-right: 8px;
						}
						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;
					}
				}
			}

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

	.anti-news {
		margin-top: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 700px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.news {
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			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: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				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% - 48px);
				padding: 4px 28px 25px 27px;
				overflow-y: auto;

				.item {
					width: 100%;
					height: 126px;
					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;

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

							.left-item {
								/* 数据展示/Tag标签/亮色/蓝 */
								// width: 72px;
								height: 24px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								padding: 1px 8px 1px 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: 1px solid rgba(255, 255, 255, 1);
			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;

			.warning-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				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;

				.content-item {
					width: 100%;
					height: auto;
					padding: 12px 24px;
					box-sizing: border-box;
					border: 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;

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

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

								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: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 500px;
		// background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.area-left {
			width: 792px;
			height: 500px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			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;
				// justify-content: center;

				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% - 48px);
				padding: 33px 48px 59px 50px;
			}
		}

		.area-right {
			width: 792px;
			height: 500px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			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;
				// justify-content: center;

				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: calc(100% - 48px);
				padding: 33px 48px 59px 50px;
			}
		}
	}
}
</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>
