import * as echarts from 'echarts';

/**
 * 生成动态雷达图配置
 * @param {string[]} nameList   指标名称（与 indicator 顺序保持一致）
 * @param {number[][]} valueList  数据值数组，每组数据为一个数组
 */
const radarChart = (nameList, valueList) => {
  // 计算最大值以设置雷达图的max值
  const maxValue = Math.max(...valueList.map(values => Math.max(...values)));
  const colorList = [
    [5, 96, 195], // 蓝色
    [208, 85, 87]  // 红色
  ];

  // 1. 基础雷达图配置
  const option = {
    title: { text: '' },
    radar: {
      radius: '70%', // 雷达图本身占容器 75%
      indicator: nameList.map(name => ({
        name: name,
        max: maxValue * 1.2 // 设置最大值为数据最大值的120%
      })),
      axisName: {
        color: '#ffffff',
        fontSize: 18,
        lineHeight: 24,
        fontWeight: 700,
        backgroundColor: '#0560C3',
        borderRadius: 20,
        padding: [8, 12],
        formatter: function (txt) {
          const len = txt.length;
          if (len <= 8) 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: true,
        areaStyle: {
          color: [
            `#ffffff`,
            `#F7F8F9`
          ]
        }
      },
    },
    series: valueList.map((values, index) => ({
      name: `组${index + 1}`,
      type: 'radar',
      data: [
        {
          value: values,
          name: `组${index + 1}`,
          areaStyle: {
            color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 0.2)` // 填充颜色
          },
          itemStyle: {
            color: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)`, // 圆环颜色
            borderWidth: 1, // 边框宽度
            backgroundColor: '#ffffff',

            borderColor: `rgba(${colorList[index][0]}, ${colorList[index][1]}, ${colorList[index][2]}, 1)` // 边框颜色
          },
        }
      ]
    }))
  };

  return option;
};

export default radarChart;
