import * as echarts from 'echarts';

/**
 * @param {{ title: unknown[], data: Array<{ name: string, value: unknown[], color?: string }> }} data
 */
const getMultiLineChart = (data) => {
  // 提取标题和系列数据
  const title = data.title
  const series = data.data

  const allNames = series.map((item) => item.name)
  const legendSplitAt = Math.ceil(allNames.length / 2)
  const legendFirstLine = allNames.slice(0, legendSplitAt)
  const legendSecondLine = allNames.slice(legendSplitAt)

  // 按 AreaTag 的颜色规则映射到折线图配色（取 tag 的文字色）
  const AREA_TAG_COLOR_BY_NAME = {
    '人工智能': 'rgba(245, 34, 45, 1)', // tag1
    '生物科技': 'rgba(19, 168, 168, 1)', // tag2
    '新一代通信网络': 'rgba(5, 95, 194, 1)', // tag3
    // 兼容后端/页面常见写法
    '通信网络': 'rgba(5, 95, 194, 1)',
    '量子科技': 'rgba(114, 46, 209, 1)', // tag4
    '新能源': 'rgba(82, 196, 26, 1)', // tag5
    '集成电路': 'rgba(22, 119, 255, 1)', // tag6
    '海洋': 'rgba(15, 120, 199, 1)', // tag7
    '先进制造': 'rgba(250, 173, 20, 1)', // tag8
    '新材料': 'rgba(250, 140, 22, 1)', // tag9
    '航空航天': 'rgba(47, 84, 235, 1)', // tag10
    '太空': 'rgba(47, 84, 235, 1)', // tag11
    '深海': 'rgba(73, 104, 161, 1)', // tag12
    '极地': 'rgba(133, 165, 255, 1)', // tag13
    '核': 'rgba(250, 84, 28, 1)', // tag14
    '其他': 'rgba(82, 196, 26, 1)' // tag15
  }

  // 兜底颜色池（未命中 AreaTag 映射时使用）
  const fallbackColorList = [
    'rgba(5, 95, 194, 1)',
    'rgba(19, 168, 168, 1)',
    'rgba(250, 140, 22, 1)',
    'rgba(114, 46, 209, 1)',
    'rgba(82, 196, 26, 1)',
    'rgba(250, 84, 28, 1)',
    'rgba(22, 119, 255, 1)',
    'rgba(95, 101, 108, 1)',
    'rgba(47, 84, 235, 1)',
    'rgba(133, 165, 255, 1)',
  ]

  // 解析 RGBA 颜色的辅助函数
  const parseRgba = (colorStr) => {
    // 匹配 rgba(r, g, b, a) 格式
    const match = colorStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+(\.\d+)?)\)/);
    if (match) {
      return {
        r: parseInt(match[1]),
        g: parseInt(match[2]),
        b: parseInt(match[3]),
        a: parseFloat(match[4])
      };
    }
    // 默认返回黑色
    return { r: 0, g: 0, b: 0, a: 1 };
  };

  // 动态生成 series 配置
  const echartsSeries = series.map((item, index) => {
    // 获取当前系列的颜色（优先使用item.color，否则用预设颜色，再否则随机）
    const baseColor =
      item.color ||
      AREA_TAG_COLOR_BY_NAME[item.name] ||
      fallbackColorList[index % fallbackColorList.length] ||
      `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    const { r, g, b } = parseRgba(baseColor);

    return ({
      name: item.name,
      type: 'line',
      smooth: true,
      lineStyle: {
        color: baseColor
      },
      itemStyle: {
        color: baseColor
      },
      // 新增/优化：面积填充渐变效果
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,        // 顶部
            color: `rgba(${r}, ${g}, ${b}, 0.1)` // 按需求：0.1 -> 0
          },
          {
            offset: 1,        // 底部
            color: `rgba(${r}, ${g}, ${b}, 0)`   // 0 透明度
          }
        ])
      },
       
      symbolSize: 8,  
      emphasis: {
        focus: 'series'
      },
      data: item.value
    });
  });

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    /* 顶部预留足够空间：多行图例 + Y 轴标题「数量」在纵轴顶端，避免与图例重合 */
    grid: {
      top: '34%',
      right: '3%',
      bottom: '5%',
      left: '2%',
      containLabel: true
    },
    legend: [
      {
        show: true,
        type: 'plain',
        data: legendFirstLine,
        top: 8,
        left: 'center',
        icon: 'circle',
        textStyle: {
          fontFamily: 'Source Han Sans CN',
          fontWeight: 400,
          fontSize: 14,
          lineHeight: 24,
          letterSpacing: 0,
          align: 'left'
        }
      },
      {
        show: legendSecondLine.length > 0,
        type: 'plain',
        data: legendSecondLine,
        top: 32,
        left: 'center',
        icon: 'circle',
        textStyle: {
          fontFamily: 'Source Han Sans CN',
          fontWeight: 400,
          fontSize: 14,
          lineHeight: 24,
          letterSpacing: 0,
          align: 'left'
        }
      }
    ],
    // 不使用全局 color，改为每条 series 自己定色（与 AreaTag 一致）
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: title
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        /* 纵轴：end = 坐标轴最大值一端，即竖轴上方 */
        nameLocation: 'end',
        /* 在默认基础上再向左约 20px：nameGap 为轴标题与轴线间距（左侧 Y 轴顶端时增大则标题更靠左） */
        nameGap: 20,
        nameRotate: 0,
        nameTextStyle: {
          color: 'rgba(170, 173, 177, 1)',
          fontFamily: 'Source Han Sans CN',
          fontWeight: 400,
          fontSize: 14,
          lineHeight: 22,
          letterSpacing: 0,
          align: 'right',
          verticalAlign: 'bottom'
        },
        splitLine: {
          show: true, // 显示网格线
          lineStyle: {
            color: 'rgba(231, 241, 255, 1)',
            type: 'dashed',
            width: 1 
          }
        }
      }
    ],
    series: echartsSeries
  };
};

export default getMultiLineChart;