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

import Img from "./assets/images/img.png";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
import Img5 from "./assets/images/img5.png";
import Img6 from "./assets/images/img6.png";
import Img7 from "./assets/images/img7.png";
import Img8 from "./assets/images/img8.png";

const graphData = {
	nodes: [
		{ id: "huawei", name: "美国众议院", category: 0, symbolSize: 60, symbol: `image://${Img}` },
		{ id: "foxconn", name: "唐纳德·特朗普", category: 1, symbolSize: 42, symbol: `image://${Img1}` },
		{ id: "huawei-cloud", name: "约翰·斯奎尔斯", category: 2, symbolSize: 42, symbol: `image://${Img2}` },
		{ id: "huawei-digital-energy", name: "马尔科·卢比奥", category: 2, symbolSize: 42, symbol: `image://${Img3}` },
		{ id: "huawei-intelligent-car", name: "埃隆·马斯克", category: 2, symbolSize: 42, symbol: `image://${Img4}` },
		{ id: "qualcomm", name: "道格·伯格姆", category: 2, symbolSize: 42, symbol: `image://${Img5}` },
		{ id: "intel", name: "斯科特·贝森特", category: 2, symbolSize: 42, symbol: `image://${Img6}` },
		{ id: "mediatek", name: "杰弗里·凯斯勒", category: 2, symbolSize: 42, symbol: `image://${Img7}` },
		{ id: "shenghongda", name: "杰弗里·凯德勒", category: 2, symbolSize: 42, symbol: `image://${Img8}` }

		// { 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: 14,
					position: "bottom",
					formatter: function (params) {
						// 根据条件返回不同样式的文本
						if (params.data.category === 0) {
							return `{a|${params.name}}`; // 使用富文本样式
						} else if (params.data.category === 1) {
							return `{b|${params.name}}`;
						} else {
							return params.name; // 默认样式
						}
					},
					rich: {
						a: {
							// 重要节点的样式
							color: "#000",
							fontSize: 18,
							fontWeight: "bold",
							padding: [2, 4],
							borderRadius: 2
						},
						b: {
							// 普通节点的样式
							color: "rgba(5, 95, 194, 1)",
							fontSize: 14,
						}
					}
				},
				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: 430px;
	margin: 0 auto;
	background-color: #f7f8f9; /* 深色背景，模拟原图风格 */
}
</style>
