<template>
	<div class="container">
		<!-- 国家列表：绑定点击事件 -->
		<div v-for="(item, index) in countList" :key="index" class="country-item" @click="handleCountryClick(item)">
			{{ item.countryName }} - {{ item.count }}
		</div>

		<!-- 地图容器 -->
		<div id="echartsMap" style="width: 100%; height: 600px"></div>
	</div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { countryCoordMap } from "@/assets/json/countryCoordMap.js";

import mapJson from "./assets/world-asia-center.json";

// 模拟数据（替换为你的实际数据）
const countList = ref([
	{
		countryName: "美国",
		count: 50,
		memberRelation: [
			{ tagetMemberName: "中国", tagetMemberCount: 8 },
			{ tagetMemberName: "日本", tagetMemberCount: 5 },
			{ tagetMemberName: "德国", tagetMemberCount: 3 }
		]
	},
	{
		countryName: "中国",
		count: 40,
		memberRelation: [
			{ tagetMemberName: "美国", tagetMemberCount: 8 },
			{ tagetMemberName: "俄罗斯", tagetMemberCount: 6 },
			{ tagetMemberName: "韩国", tagetMemberCount: 2 }
		]
	}
]);

// ECharts 实例
let mapChart = null;
// 地图基础配置
const mapOption = ref({
	backgroundColor: "#fff",
	geo: {
		map: "world", // 需提前引入世界地图JSON
		roam: true,
		label: {
			show: true,
			fontSize: 10,
			color: "#333"
		},
		itemStyle: {
			areaColor: "#e8e8e8",
			borderColor: "#999"
		},
		emphasis: {
			itemStyle: {
				areaColor: "#b8e3ff"
			}
		}
	},
	// 关系线图层（新增）
	series: [
		{
			type: "lines", // 线图类型
			coordinateSystem: "geo", // 基于地理坐标系
			polyline: false, // 非折线
			lineStyle: {
				color: "source", // 颜色继承起点
				opacity: 0.8
			},
			data: [] // 初始为空，点击后填充
		},
		{
			type: "effectScatter", // 带涟漪的散点（标记国家）
			coordinateSystem: "geo",
			zlevel: 2,
			rippleEffect: {
				scale: 3
			},
			label: {
				show: true,
				position: "right",
				formatter: "{b}"
			},
			symbolSize: 10,
			data: [] // 初始为空，点击后填充
		}
	]
});

// 初始化地图
const initMap = () => {
	const mapDom = document.getElementById("echartsMap");
	if (!mapDom) return;

	mapChart = echarts.init(mapDom);
	echarts.registerMap("world", mapJson);
	mapChart.setOption(mapOption.value);

	// 自适应窗口
	window.addEventListener("resize", () => {
		mapChart && mapChart.resize();
	});
};

// 点击国家处理逻辑（核心）
const handleCountryClick = item => {
	if (!item || !item.memberRelation || !mapChart) return;

	// 1. 构建关系线数据
	const linesData = item.memberRelation
		.map(relation => {
			const sourceCoord = countryCoordMap[item.countryName];
			const targetCoord = countryCoordMap[relation.tagetMemberName];

			// 过滤无坐标的国家
			if (!sourceCoord || !targetCoord) return null;

			return {
				coords: [sourceCoord, targetCoord], // 起点-终点坐标
				lineStyle: {
					width: relation.tagetMemberCount * 2, // 宽度=数值*2（可调整比例）
					color: "#ff4400" // 连接线颜色
				},
				name: `${item.countryName}->${relation.tagetMemberName}`
			};
		})
		.filter(Boolean); // 过滤null值

	// 2. 构建国家标记点数据
	const scatterData = [
		// 点击的国家（高亮）
		{
			name: item.countryName,
			value: countryCoordMap[item.countryName],
			symbolSize: 15,
			itemStyle: { color: "#ff0000" }
		},
		// 相关国家
		...item.memberRelation
			.map(relation => ({
				name: relation.tagetMemberName,
				value: countryCoordMap[relation.tagetMemberName],
				symbolSize: 12,
				itemStyle: { color: "#0066ff" }
			}))
			.filter(p => p.value)
	];

	// 3. 更新ECharts配置
	const newOption = {
		...mapOption.value,
		series: [
			{
				...mapOption.value.series[0],
				data: linesData // 更新连接线数据
			},
			{
				...mapOption.value.series[1],
				data: scatterData // 更新标记点数据
			}
		]
	};

	// 确保在主线程外执行setOption（解决之前的报错）
	nextTick(() => {
		mapChart.setOption(newOption, true); // true表示不合并，清空旧数据
	});
};

// 组件挂载时初始化地图
onMounted(() => {
	nextTick(initMap);
});
</script>

<style scoped>
.country-item {
	padding: 8px 12px;
	margin: 4px 0;
	background: #f5f5f5;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s;
}
.country-item:hover {
	background: #e8e8e8;
}
</style>
