import * as echarts from "echarts";

/**
 * 计算雷达图最外圈半径（px）
 * @param {HTMLDivElement} dom  图表容器
 * @param {number} radarRadius  配置项里 radar.radius，默认 75%
 */
function getOuterRadius(dom, radarRadius = 75) {
	// 容器短边的一半 * 百分比
	const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
	return (minSide / 2) * (radarRadius / 100);
}

/**
 * 生成“文字被环穿过”的雷达图配置
 * @param {string[]} nameList   指标名称（与 indicator 顺序保持一致）
 * @param {number[]} valueList  数据值
 * @param {boolean}  isPer       是否百分比（示例里未用到，可留扩展）
 * @param {HTMLDivElement} dom  图表容器（用于计算半径，必须传）
 */
const getBarChart = (nameList, valueList, isPer, dom) => {
	// 1. 基础雷达图配置
	const option = {
		title: { text: "" },
		legend: {
			show: false,
			icon: "circle",
			orient: "vertical",
			right: 0,
			top: "center",
			align: "left",
			data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
		},
		radar: {
			shape: "circle",
			radius: "75%", // 雷达图本身占容器 75%
			indicator: [
				{ name: "研究人员总数", max: 6500 },
				{ name: "每万人研究人员数", max: 16000 },
				{ name: "每万研究人员研发经费投入额", max: 30000 },
				{ name: "每万人研发经费投入额", max: 38000 },
				{ name: "研发经费占GDP的比重", max: 52000 },
				{ name: "研发经费投入总额", max: 25000 }
			],
			axisName: {
				// 1. 富文本颜色
				color: "#3B414B",
				fontSize: 14,
				fontWeight: 600,

				// 2. 白色矩形背景
				backgroundColor: "#fff", // 背景色
				borderRadius: 4, // 圆角
				padding: [4, 8], // 上下 4px，左右 8px

				// 3. 自动换两行（你原来的逻辑）
				formatter: function (txt) {
					const len = txt.length;
					if (len <= 5) return txt;
					const br = Math.ceil(len / 2);
					return txt.substring(0, br) + "\n" + txt.substring(br);
				}
			},
			splitLine: {
				lineStyle: { color: "rgba(200,200,200,.6)" }
			},
			splitArea: { show: false },
			axisLine: { show: false }
		},
		series: [
			{
				name: "Budget vs spending",
				type: "radar",
				data: [
					{
						value: [4200, 3000, 20000, 35000, 50000, 18000],
						name: "法案",
						areaStyle: { color: "rgba(10, 87, 166, 0.2)" }
					},
					{
						value: [5000, 14000, 28000, 26000, 42000, 21000],
						name: "行政令",
						areaStyle: { color: "rgba(206, 79, 81, 0.2)" }
					},
					{
						value: [4000, 14000, 18000, 21000, 32000, 10000],
						name: "科技智库",
						areaStyle: { color: "rgba(250, 140, 22, 0.2)" }
					},
					{
						value: [4000, 14000, 18000, 21000, 32000, 10000],
						name: "出口管制",
						areaStyle: { color: "rgba(22, 180, 120, 0.2)" }
					},
					{
						value: [4000, 14000, 18000, 21000, 32000, 10000],
						name: "投融资限制",
						areaStyle: { color: "rgba(120, 100, 200, 0.2)" }
					},
					{
						value: [4000, 14000, 18000, 21000, 32000, 10000],
						name: "市场准入",
						areaStyle: { color: "rgba(255, 100, 150, 0.2)" }
					}
				]
			}
		]
	};

	// 2. 计算文字所在圆半径（单位 px）
	const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致

	// 3. 用“单圈描边”实现「粗线 + 文字在线上」
	option.graphic = [
		{
			type: "circle",
			shape: {
				cx: dom.offsetWidth / 2,
				cy: dom.offsetHeight / 2,
				r: textRadius
			},
			style: {
				stroke: "#EBECEE", // 线的颜色
				lineWidth: 6, // 线的粗细（想要再粗就继续加大）
				fill: "transparent"
			}
			// z: 1000                // 保证压在最上层
		}
	];
	return option;
};

// 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) {
	// 雷达图中心永远在容器中心
	const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
	return (minSide / 2) * (radiusPercent / 100);
}
export default getBarChart;
