<!-- src/components/HuaweiSupplyChainChart.vue -->
<template>
	<div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import { graphData } from "./mockData";

const graphData = {
	nodes: [
		{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 80 },
		{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 0, symbolSize: 50 },
		{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 0, symbolSize: 50 },
		{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 0, symbolSize: 50 },
		{ id: "qualcomm", name: "道格·伯格姆", category: 1, symbolSize: 50 },
		{ id: "intel", name: "斯科特·贝森特", category: 1, symbolSize: 50 },
		{ id: "mediatek", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
		{ id: "shenghongda", name: "杰弗里·凯斯勒", category: 1, symbolSize: 50 },
		{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 50 }
		// { id: "luxshare", name: "立讯精密", category: 1, symbolSize: 20 },
		// { id: "tianma", name: "天马微电子", category: 1, symbolSize: 20 },
		// { id: "desay", name: "德赛电池", category: 1, symbolSize: 20 },
		// { id: "auspicious-sound", name: "瑞声科技", category: 1, symbolSize: 20 },
		// { id: "goertek", name: "歌尔股份", category: 1, symbolSize: 20 },
		// { id: "sony-semiconductor", name: "索尼半导体", category: 1, symbolSize: 20 },
		// { id: "ibm", name: "IBM", category: 1, symbolSize: 20 },
		// { id: "lg-innotek", name: "LG伊诺特", category: 1, symbolSize: 20 },
		// { id: "micron", name: "美光科技", category: 1, symbolSize: 20 }
		// { id: "nokia", name: "诺基亚", category: 1, symbolSize: 20 },
		// { id: "google", name: "谷歌", category: 1, symbolSize: 20 },
		// { id: "vodafone", name: "沃达丰", category: 1, symbolSize: 20 },
		// { id: "microsoft", name: "微软", category: 1, symbolSize: 20 },
		// { id: "china-unicom", name: "中国联通", category: 1, symbolSize: 20 },
		// { id: "china-mobile", name: "中国移动", category: 1, symbolSize: 20 },
		// { id: "tsmc", name: "台积电", category: 1, symbolSize: 20 }
		// { id: "orange", name: "Orange", category: 1, symbolSize: 20 },
		// { id: "germany-telecom", name: "德国电信", category: 1, symbolSize: 20 },
		// { id: "byd-electronics", name: "比亚迪电子", category: 1, symbolSize: 20 },
		// { id: "boe", name: "京东方", category: 1, symbolSize: 20 },
		// { id: "dali-optical", name: "大力光", category: 1, symbolSize: 20 },
		// { id: "lg-display", name: "LG显示", category: 1, symbolSize: 20 },
		// { id: "sunny-optical", name: "舜宇光学", category: 1, symbolSize: 20 }
	],
	links: [
		{ source: "huawei", target: "huawei-cloud" },
		{ source: "huawei", target: "huawei-digital-energy" },
		{ source: "huawei", target: "huawei-intelligent-car" },
		{ source: "huawei", target: "qualcomm" },
		{ source: "huawei", target: "intel" },
		{ source: "huawei", target: "mediatek" },
		{ source: "huawei", target: "shenghongda" },
		{ source: "huawei", target: "foxconn" }
		// { source: "huawei", target: "luxshare" },
		// { source: "huawei", target: "tianma" },
		// { source: "huawei", target: "desay" },
		// { source: "huawei", target: "auspicious-sound" },
		// { source: "huawei", target: "goertek" },
		// { source: "huawei", target: "sony-semiconductor" },
		// { source: "huawei", target: "ibm" },
		// { source: "huawei", target: "lg-innotek" },
		// { source: "huawei", target: "micron" }
		// { source: "huawei", target: "nokia" },
		// { source: "huawei", target: "google" },
		// { source: "huawei", target: "vodafone" },
		// { source: "huawei", target: "microsoft" },
		// { source: "huawei", target: "china-unicom" },
		// { source: "huawei", target: "china-mobile" },
		// { source: "huawei", target: "tsmc" }
		// { source: "huawei", target: "orange" },
		// { source: "huawei", target: "germany-telecom" },
		// { source: "huawei", target: "byd-electronics" },
		// { source: "huawei", target: "boe" },
		// { source: "huawei", target: "dali-optical" },
		// { source: "huawei", target: "lg-display" },
		// { source: "huawei", target: "sunny-optical" }
	],
	categories: [{ name: "子业务" }, { name: "合作商" }]
};

const chartRef = ref(null);

onMounted(() => {
	const chart = echarts.init(chartRef.value);
	const option = {
		title: { text: "", left: "center" },
		tooltip: {},
		legend: {
			data: graphData.categories.map(item => item.name),
			left: "left"
		},
		series: [
			{
				type: "graph",
				layout: "force", // 力导向布局
				force: {
					repulsion: 1000, // 节点排斥力
					edgeLength: [50, 200] // 边长度范围
				},
				data: graphData.nodes,
				links: graphData.links,
				categories: graphData.categories,
				roam: true, // 支持缩放、平移
				label: {
					show: true,
					fontSize: 12
				},
				edgeSymbol: ["arrow", "none"], // 边的箭头
				edgeSymbolSize: [8, 50],
				itemStyle: {
					color: "rgba(5, 95, 194, 1)"
					// borderColor: "red",
					// borderWidth: 1
				},
				lineStyle: {
					color: "rgba(174, 214, 255, 1)",
					width: 2,
					opacity: 0.5
				},
				emphasis: {
					focus: "adjacency",
					lineStyle: {
						width: 2
					}
				}
			}
		]
	};
	chart.setOption(option);
	// 窗口resize时自适应
	window.addEventListener("resize", () => chart.resize());
});
</script>

<style scoped>
.chart-container {
	width: 100%;
	height: 600px;
	background-color: #fff; /* 深色背景，模拟原图风格 */
}
</style>
