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;