import * as echarts from 'echarts';

const getMultiLineChart = (data) => {
  // 提取标题和系列数据
  // const { title, series } = data;
  const title = data.title
  const series = data.data

  // 动态生成 series 配置
  const echartsSeries = series.map((item, index) => ({
    name: item.name,
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    itemStyle: {
      color: '#fff', // 图表圆点内部为白色
      borderColor: item.color, // 圆点边框为系列颜色
      borderWidth: 2
    },
    lineStyle: {
      width: 2,
      color: item.color
    },
    emphasis: {
      focus: 'series'
    },
    data: item.value
  }));

  return {
    color: series.map(item => item.color),
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      textStyle: {
        color: '#666'
      },
      extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 4px;'
    },
    grid: {
      top: '15%',
      right: '2%',
      bottom: '5%',
      left: '2%',
      containLabel: true
    },
    legend: {
      show: true,
      top: 0,
      left: 'center',
      icon: 'circle',
      itemWidth: 12,
      itemHeight: 12,
      data: series.map(item => ({
        name: item.name,
        itemStyle: {
          color: item.color, // 强制图例使用实心系列颜色
          borderWidth: 0
        }
      })),
      textStyle: {
        fontFamily: 'Microsoft YaHei',
        fontSize: 16,
        fontWeight: 400,
        lineHeight: 24,
        color: 'rgb(95, 101, 108)'
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: title,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999',
          fontSize: 12,
          margin: 15
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 100,
        // interval: 20,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#999',
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#E0E6F1'
          }
        }
      }
    ],
    series: echartsSeries
  };
};

export default getMultiLineChart;