<!--科技要闻-->
<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 in carouselList">
						<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="getTagClass(ele.industryName)" v-for="ele in item.industryList">
								{{ ele.industryName }}
							</div>
						</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> -->
				</div>
			</div>

			<div class="anti-content">
				<div class="content-left">
					<div class="item" v-for="item in countList">
						<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 || 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"
						>
							<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 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 || defaultImg"
										:class="{ img1: index !== 0 }"
										@error="e => (e.target.src = defaultImg)"
										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="getTagClass(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, inject, watch, onUnmounted } 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.json'

const carouselList = ref([]);
const countList = ref([]);
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 countryNameMap = {
	"Commonwealth of Australia": "Australia",
	Canada: "Canada",
	"New Zealand": "New Zealand",
	"United Kingdom of Great Britain and Northern Ireland": "United Kingdom",
	"United States of America": "United States",
	"Republic of India": "India",
	"Brunei Darussalam": "Brunei",
	"Republic of Fiji": "Fiji",
	"Republic of Korea": "Korea",
	"Federation of Malaysia": "Malaysia",
	"Republic of the Philippines": "Philippines",
	"Republic of Singapore": "Singapore",
	Japan: "Japan",
	"Russian Federation": "Russia",
	"People's Republic of China": "China",
	"Islamic Republic of Iran": "Iran",
	"Syrian Arab Republic": "Syria",
	"Lao People's Democratic Republic": "Laos",
	"Republic of the Union of Myanmar": "Myanmar",
	"Kingdom of Thailand": "Thailand",
	"Republic of Indonesia": "Indonesia",
	"Socialist Republic of Vietnam": "Vietnam",
	"Kingdom of Cambodia": "Cambodia",
	"Islamic Republic of Pakistan": "Pakistan",
	"People's Republic of Bangladesh": "Bangladesh",
	"Democratic Socialist Republic of Sri Lanka": "Sri Lanka",
	"Federal Democratic Republic of Nepal": "Nepal",
	"Kingdom of Bhutan": "Bhutan",
	"French Republic": "France",
	"Federal Republic of Germany": "Germany",
	"Italian Republic": "Italy",
	"Kingdom of Spain": "Spain",
	"Kingdom of the Netherlands": "Netherlands",
	"Kingdom of Belgium": "Belgium",
	"Swiss Confederation": "Switzerland",
	"Republic of Austria": "Austria",
	"Kingdom of Sweden": "Sweden",
	"Kingdom of Norway": "Norway",
	"Kingdom of Denmark": "Denmark",
	"Republic of Finland": "Finland",
	"Hellenic Republic": "Greece",
	"Republic of Turkey": "Turkey",
	"State of Israel": "Israel",
	"Kingdom of Saudi Arabia": "Saudi Arabia",
	"Republic of South Africa": "South Africa",
	"Federative Republic of Brazil": "Brazil",
	"Republic of Argentina": "Argentina",
	"Republic of Chile": "Chile",
	"Republic of Colombia": "Colombia",
	"Republic of Peru": "Peru",
	"Bolivarian Republic of Venezuela": "Venezuela",
	"United Mexican States": "Mexico",
	"Republic of Cuba": "Cuba",
	Ukraine: "Ukraine",
	"Republic of Belarus": "Belarus",
	"Republic of Poland": "Poland",
	"Czech Republic": "Czech Republic",
	Hungary: "Hungary",
	Romania: "Romania",
	"Republic of Bulgaria": "Bulgaria",
	"Republic of Serbia": "Republic of Serbia",
	"Republic of Croatia": "Croatia",
	"Republic of Slovenia": "Slovenia",
	"Slovak Republic": "Slovakia",
	"Republic of Kazakhstan": "Kazakhstan",
	"Republic of Uzbekistan": "Uzbekistan",
	Turkmenistan: "Turkmenistan",
	"Kyrgyz Republic": "Kyrgyzstan",
	"Republic of Tajikistan": "Tajikistan",
	"Republic of Azerbaijan": "Azerbaijan",
	"Republic of Armenia": "Armenia",
	Georgia: "Georgia",
	Mongolia: "Mongolia",
	"Democratic People's Republic of Korea": "North Korea",
	"Republic of Iraq": "Iraq",
	"State of Kuwait": "Kuwait",
	"State of Qatar": "Qatar",
	"Sultanate of Oman": "Oman",
	"Republic of Yemen": "Yemen",
	"Hashemite Kingdom of Jordan": "Jordan",
	"Lebanese Republic": "Lebanon",
	"Arab Republic of Egypt": "Egypt",
	"State of Libya": "Libya",
	"Republic of Tunisia": "Tunisia",
	"People's Democratic Republic of Algeria": "Algeria",
	"Kingdom of Morocco": "Morocco",
	"Federal Republic of Nigeria": "Nigeria",
	"Republic of Kenya": "Kenya",
	"Federal Democratic Republic of Ethiopia": "Ethiopia",
	"United Republic of Tanzania": "United Republic of Tanzania",
	"Republic of Ghana": "Ghana",
	"Republic of Côte d'Ivoire": "Ivory Coast",
	"Democratic Republic of the Congo": "Democratic Republic of the Congo",
	"Republic of the Congo": "Republic of the Congo",
	"Republic of Zimbabwe": "Zimbabwe",
	"Republic of Zambia": "Zambia",
	"Republic of Angola": "Angola",
	"Republic of Mozambique": "Mozambique",
	"Republic of Botswana": "Botswana",
	"Republic of Namibia": "Namibia",
	"Republic of Ecuador": "Ecuador",
	"Republic of Paraguay": "Paraguay",
	"Oriental Republic of Uruguay": "Uruguay",
	"Republic of Bolivia": "Bolivia",
	"Republic of Panama": "Panama",
	"Republic of Costa Rica": "Costa Rica",
	"Republic of Nicaragua": "Nicaragua",
	"Republic of Honduras": "Honduras",
	"Republic of El Salvador": "El Salvador",
	"Republic of Guatemala": "Guatemala",
	"Dominican Republic": "Dominican Republic",
	"Republic of Haiti": "Haiti",
	Jamaica: "Jamaica"
};

const nameMap = {
	Afghanistan: "阿富汗",
	Angola: "安哥拉",
	Albania: "阿尔巴尼亚",
	"United Arab Emirates": "阿联酋",
	Argentina: "阿根廷",
	Armenia: "亚美尼亚",
	"French Southern and Antarctic Lands": "法属南半球和南极领地",
	Australia: "澳大利亚",
	Austria: "奥地利",
	Azerbaijan: "阿塞拜疆",
	Burundi: "布隆迪",
	Belgium: "比利时",
	Benin: "贝宁",
	"Burkina Faso": "布基纳法索",
	Bangladesh: "孟加拉国",
	Bulgaria: "保加利亚",
	"The Bahamas": "巴哈马",
	"Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
	Belarus: "白俄罗斯",
	Belize: "伯利兹",
	Bermuda: "百慕大",
	Bolivia: "玻利维亚",
	Brazil: "巴西",
	Brunei: "文莱",
	Bhutan: "不丹",
	Botswana: "博茨瓦纳",
	"Central African Republic": "中非共和国",
	Canada: "加拿大",
	Switzerland: "瑞士",
	Chile: "智利",
	China: "中国",
	"Ivory Coast": "科特迪瓦",
	Cameroon: "喀麦隆",
	"Democratic Republic of the Congo": "刚果民主共和国",
	"Republic of the Congo": "刚果共和国",
	Colombia: "哥伦比亚",
	"Costa Rica": "哥斯达黎加",
	Cuba: "古巴",
	"Northern Cyprus": "北塞浦路斯",
	Cyprus: "塞浦路斯",
	"Czech Republic": "捷克",
	Germany: "德国",
	Djibouti: "吉布提",
	Denmark: "丹麦",
	"Dominican Republic": "多米尼加共和国",
	Algeria: "阿尔及利亚",
	Ecuador: "厄瓜多尔",
	Egypt: "埃及",
	Eritrea: "厄立特里亚",
	Spain: "西班牙",
	Estonia: "爱沙尼亚",
	Ethiopia: "埃塞俄比亚",
	Finland: "芬兰",
	Fiji: "斐济",
	"Falkland Islands": "福克兰群岛",
	France: "法国",
	Gabon: "加蓬",
	"United Kingdom": "英国",
	Georgia: "格鲁吉亚",
	Ghana: "加纳",
	Guinea: "几内亚",
	Gambia: "冈比亚",
	"Guinea Bissau": "几内亚比绍",
	"Equatorial Guinea": "赤道几内亚",
	Greece: "希腊",
	Greenland: "格陵兰",
	Guatemala: "危地马拉",
	"French Guiana": "法属圭亚那",
	Guyana: "圭亚那",
	Honduras: "洪都拉斯",
	Croatia: "克罗地亚",
	Haiti: "海地",
	Hungary: "匈牙利",
	Indonesia: "印度尼西亚",
	India: "印度",
	Ireland: "爱尔兰",
	Iran: "伊朗",
	Iraq: "伊拉克",
	Iceland: "冰岛",
	Israel: "以色列",
	Italy: "意大利",
	Jamaica: "牙买加",
	Jordan: "约旦",
	Japan: "日本",
	Kazakhstan: "哈萨克斯坦",
	Kenya: "肯尼亚",
	Kyrgyzstan: "吉尔吉斯斯坦",
	Cambodia: "柬埔寨",
	"South Korea": "韩国",
	Korea: "韩国",
	Kosovo: "科索沃",
	Kuwait: "科威特",
	Laos: "老挝",
	Lebanon: "黎巴嫩",
	Liberia: "利比里亚",
	Libya: "利比亚",
	"Sri Lanka": "斯里兰卡",
	Lesotho: "莱索托",
	Lithuania: "立陶宛",
	Luxembourg: "卢森堡",
	Latvia: "拉脱维亚",
	Morocco: "摩洛哥",
	Moldova: "摩尔多瓦",
	Madagascar: "马达加斯加",
	Mexico: "墨西哥",
	Macedonia: "马其顿",
	Mali: "马里",
	Myanmar: "缅甸",
	Montenegro: "黑山",
	Mongolia: "蒙古",
	Mozambique: "莫桑比克",
	Mauritania: "毛里塔尼亚",
	Malawi: "马拉维",
	Malaysia: "马来西亚",
	Namibia: "纳米比亚",
	"New Caledonia": "新喀里多尼亚",
	Niger: "尼日尔",
	Nigeria: "尼日利亚",
	Nicaragua: "尼加拉瓜",
	Netherlands: "荷兰",
	Norway: "挪威",
	Nepal: "尼泊尔",
	"New Zealand": "新西兰",
	Oman: "阿曼",
	Pakistan: "巴基斯坦",
	Panama: "巴拿马",
	Peru: "秘鲁",
	Philippines: "菲律宾",
	"Papua New Guinea": "巴布亚新几内亚",
	Poland: "波兰",
	"Puerto Rico": "波多黎各",
	"North Korea": "朝鲜",
	Portugal: "葡萄牙",
	Paraguay: "巴拉圭",
	Qatar: "卡塔尔",
	Romania: "罗马尼亚",
	Russia: "俄罗斯",
	Rwanda: "卢旺达",
	"Western Sahara": "西撒哈拉",
	"Saudi Arabia": "沙特阿拉伯",
	Sudan: "苏丹",
	"South Sudan": "南苏丹",
	Senegal: "塞内加尔",
	"Solomon Islands": "所罗门群岛",
	"Sierra Leone": "塞拉利昂",
	"El Salvador": "萨尔瓦多",
	"Somaliland": "索马里兰",
	Somalia: "索马里",
	"Republic of Serbia": "塞尔维亚",
	Suriname: "苏里南",
	Slovakia: "斯洛伐克",
	Slovenia: "斯洛文尼亚",
	Sweden: "瑞典",
	Swaziland: "斯威士兰",
	Syria: "叙利亚",
	Chad: "乍得",
	Togo: "多哥",
	Thailand: "泰国",
	Tajikistan: "塔吉克斯坦",
	Turkmenistan: "土库曼斯坦",
	"East Timor": "东帝汶",
	"Trinidad and Tobago": "特立尼达和多巴哥",
	Tunisia: "突尼斯",
	Turkey: "土耳其",
	Tanzania: "坦桑尼亚",
	"United Republic of Tanzania": "坦桑尼亚",
	Uganda: "乌干达",
	Ukraine: "乌克兰",
	Uruguay: "乌拉圭",
	"United States": "美国",
	Uzbekistan: "乌兹别克斯坦",
	Venezuela: "委内瑞拉",
	Vietnam: "越南",
	Vanuatu: "瓦努阿图",
	"West Bank": "西岸",
	Yemen: "也门",
	"South Africa": "南非",
	Zambia: "赞比亚",
	Zimbabwe: "津巴布韦",
	Singapore: "新加坡"
};

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) => {
  const ratio = Math.min(Math.max(value / maxValue, 0), 1);
    
    // HSL 参数：高饱和度，中等偏暗亮度，避免太亮或黑色
    let h = ratio * 360; // 色相：0°(红) 到 360°(循环)
    h = h % 360; // 修复：确保 h=360 映射回 0，避免黑色
    const s = 100; // 饱和度 100%
    const l = 40;   // 亮度 40%（不亮不暗）
    
    // 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;
        }
        // 移除 else 分支（修复后无需，h 已 %360）

        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();
function createChart() {
	if (!countList.value) return;
	// 找到最大值用于颜色计算
	const maxValue = Math.max(...countList.value.map(item => item.value));

	// 为每个数据项计算颜色
	const processedData = countList.value.map(item => {
		const color = getColorByValueRandom(item.value, maxValue);
		return {
			...item,
			name: nameMap[item.name] || item.name, // 将英文名转换为中文名以匹配地图区域
			itemStyle: {
				color: color
			},
			emphasis: {
				itemStyle: {
					areaColor: color // 高亮时保持原色
				}
			}
		};
	});

	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) {
					// 既然 processedData 已经匹配上了，params.data 就是正确的数据项
					// 包含 value 和 zhName
					return `${params.data.zhName || 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: "move", // 允许平移，禁止缩放
				zoom: 1.2, // 初始缩放级别
				map: "world",
				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
			}
		]
	};
	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();
		// });

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

}

const newsList = ref([]);

const warningList = ref([]);

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

	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,
          // 节点颜色
          itemStyle: {
            color: `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`
          }
				};
				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);
	}

	let option = {
		title: {
			// text: 'Basic Graph'
		},
		tooltip: {},
		animationDurationUpdate: 1500,
		animationEasingUpdate: "quinticInOut",
		dataZoom: [
			{
				type: "slider",
				start: 10,
				end: 10
			}
		],
		series: [
			{
				type: "graph",
				layout: "circular",
				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 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 getUnionList = async () => {
	try {
		const dateParam = getCalculatedDate(activeDate.value);
		const res = await getAllUnionList({ date: dateParam });
		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 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);
			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);
			// 处理一下数据
			countList.value = res.data
				.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;
				});
		}
	} 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();
	fetchGeoJSON();
	initLeftDonut();
	initRightDonut();
	startAutoPlay();
});

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

watch(activeDate, async () => {
	await getUnionList();
	// await getDynamicList();
	// await getPredictionList();
	// await getUnionCountList();
	// fetchGeoJSON();
	// 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: 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;
						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: 43px;
			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;

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

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

			.news-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 4px 28px 10px 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;
						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-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: 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;

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

				.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: 2px 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;
		width: 1601px;
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.area-left {
			width: 792px;
			height: 500px;
			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% - 48px);
				padding: 33px 48px 59px 50px;
			}
		}

		.area-right {
			width: 792px;
			height: 500px;
			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: 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>
