import * as echarts from "echarts";

// 预定义颜色池，循环使用
const colorPool = [
	"rgba(10, 87, 166, 1)",
	"rgba(64, 196, 181, 1)",
	"rgba(114, 46, 209, 1)",
	"rgba(245, 141, 46, 1)",
	"rgba(111, 180, 255, 1)",
	"rgba(196, 92, 68, 1)",
	"rgba(82, 196, 26, 1)",
	"rgba(250, 173, 20, 1)",
	"rgba(19, 168, 168, 1)",
	"rgba(245, 34, 45, 1)",
	"rgba(47, 84, 235, 1)",
	"rgba(141, 113, 196, 1)"
];

const getMultiLineChart = (dataX, seriesData) => {
	const series = seriesData.map((item, index) => {
		const baseColor = colorPool[index % colorPool.length] || "rgba(10, 87, 166, 1)";
		// 提取 rgba 值用于渐变
		const rgbaMatch = baseColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
		const r = rgbaMatch?.[1] || "10";
		const g = rgbaMatch?.[2] || "87";
		const b = rgbaMatch?.[3] || "166";

		return {
			name: item.name,
			type: "line",
			lineStyle: { width: 1.5 },
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: `rgba(${r}, ${g}, ${b}, 0.2)` },
					{ offset: 1, color: `rgba(${r}, ${g}, ${b}, 0)` }
				])
			},
			emphasis: { focus: "series" },
			data: item.value
		};
	});

	return {
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				label: { backgroundColor: "#6a7985" }
			}
		},
		grid: {
			top: "50px",
			right: "24px",
			bottom: "0px",
			left: "24px",
			containLabel: true
		},
		legend: {
			// data: ["人工智能", "集成电路", "量子科技", "生物科技", "通信网络", "能源"],
			data: seriesData.map(item => item.name),
			show: true,
			top: "0px",
			left: "center",
			textStyle: {
				color: "rgba(95, 101, 108, 1)",
				fontFamily: "Microsoft YaHei",
				fontSize: "16px"
			},
			icon: "circle",
			itemWidth: 10,
			itemHeight: 10,
			itemGap: 20
		},
		// color: [
		// 	"rgba(10, 87, 166, 1)",
		// 	"rgba(64, 196, 181, 1)",
		// 	"rgba(114, 46, 209, 1)",
		// 	"rgba(245, 141, 46, 1)",
		// 	"rgba(111, 180, 255, 1)",
		// 	"rgba(196, 92, 68, 1)"
		// ],
		color: colorPool,
		xAxis: [
			{
				type: "category",
				boundaryGap: false,
				data: dataX,
				axisLabel: {
					fontSize: 14,
					color: "rgba(59, 65, 75, 1)"
				},
				axisLine: {
					lineStyle: { color: "#E7F3FF" }
				}
			}
		],
		yAxis: [
			{
				type: "value",
				splitLine: {
					show: true,
					lineStyle: {
						type: "dashed",
						color: "#E7F3FF"
					}
				},
				axisLabel: { fontSize: 14 }
			}
		],
		series
	};
};

export default getMultiLineChart;
