import * as echarts from 'echarts'
import { MUTICHARTCOLORS } from '../../../../common/constant'

const getMultiLineChart = (dataX, proposedData, passData, houseData, senateData, hsData) => {
  const lineColors = MUTICHARTCOLORS.slice(0, 5)
  const hexToRgba = (hex, alpha) => {
    if (typeof hex !== 'string' || !hex.startsWith('#')) return hex
    const normalized = hex.replace('#', '')
    const full = normalized.length === 3
      ? normalized.split('').map(c => c + c).join('')
      : normalized
    const r = parseInt(full.slice(0, 2), 16)
    const g = parseInt(full.slice(2, 4), 16)
    const b = parseInt(full.slice(4, 6), 16)
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
  const getAreaColor = color => new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    offset: 0,
    color: hexToRgba(color, 0.35)
  }, {
    offset: 1,
    color: hexToRgba(color, 0)
  }])

  return {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      // formatter: function (params) {
      //   let res = params[0].name + '<br/>';
      //   params.forEach(item => {
      //       res += item.marker + item.seriesName + ': ' + item.value + (item.seriesName === '通过率' ? '%' : '') + '<br/>';
      //   });
      //   return res;
      // }
    },
    grid: {
      width: '96%',
      height: '83%',
      top: '15%',
      right: '2%',
      bottom: '2%',
      left: '2%',
      containLabel: true
    },
    legend: {
      data: ['提出法案', '通过法案', '众议院通过', '参议院通过', '双院通过'],
      show: true,
      top: 10,
      icon: 'circle',
      textStyle: {
        color: 'rgba(95, 101, 108, 1)',
        fontFamily: 'Microsoft YaHei',
        fontSize: '14px',
      }
    },
    color: lineColors,
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dataX,

        axisLine: {
            show: true,
            lineStyle: {
                color: '#e7f3ff',
            },
          },
          axisLabel: {
        show: true,
        textStyle: {
          color: 'rgba(95, 101, 108, 1)',
          fontFamily: 'Microsoft YaHei',
          fontsize: 14,
        }
      }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '项',
        nameLocation: 'end',
        nameGap: 12,
        nameTextStyle: {
          color: '#666',
          fontSize: 14,
          fontWeight: 400,
          padding: [0, 0, 6, -20]
        },
        axisLabel: {
          formatter: '{value}',
          color: '#666',
          fontSize: 14,
          fontWeight: 400
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#e7f3ff',
            type: 'dashed',
          }
        },
      }
    ],
    series: [
      {
        name: '提出法案',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: getAreaColor(lineColors[0])
        },
        itemStyle: {
          color: lineColors[0]
        },
        data: proposedData
      },
      {
        name: '通过法案',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: getAreaColor(lineColors[1])
        },
        itemStyle: {
          color: lineColors[1]
        },
        data: passData
      },
      {
        name: '众议院通过',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: getAreaColor(lineColors[2])
        },
        itemStyle: {
          color: lineColors[2]
        },
        data: houseData
      },
      {
        name: '参议院通过',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: getAreaColor(lineColors[3])
        },
        itemStyle: {
          color: lineColors[3]
        },
        data: senateData
      },
      {
        name: '双院通过',
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        areaStyle: {
          color: getAreaColor(lineColors[4])
        },
        itemStyle: {
          color: lineColors[4]
        },
        data: hsData
      }
    ]
  }
}

export default getMultiLineChart
