import { useMemo } from 'react';
import ReactEcharts from 'echarts-for-react';

const LineBarCharts = ({ dataSource }: { dataSource: any[] }) => {
  const option = useMemo(() => {
    const category = dataSource?.map(item => item.lx);
    const realData = dataSource?.map(item => item.num);

    return {
      color: ['#FFEB6E', '#36BD3B'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)',
        textStyle: {
          color: '#fff',
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '2%',
        top: '25%',
        containLabel: true,
      },
      legend: {
        data: ['投诉量'],
        icon: "circle",
        top: 10,
        itemGap: 50,
        textStyle: {
          fontSize: '16px',
          color: '#E4EDFF',
        }
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            padding: [2, 0, 0, 0],
            color: '#CBEDFF',
            fontSize: 16
          },
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          type: 'shadow',
        },
        data: category,
      }],
      yAxis: [{
        type: 'value',
        name: '件',
        min: 0,
        // max: 'dataMax',
        interval: 10,
        axisLabel: {
          textStyle: {
            color: '#CBEDFF',
            fontSize: 16
          },
        },
        nameTextStyle: {
          align: 'left',
          color: '#CBEDFF',
          padding: [0, 0, 20, -20],
          fontSize: 16
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      }],
      series: [{
        // name: '投诉量',
        type: 'bar',
        barWidth: 20,
        data: realData,
        itemStyle: {
          barBorderRadius: [12, 12, 12, 12],
        },
      }]
    };
  }, [dataSource]);

  return (
    <ReactEcharts
      option={option}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

export default LineBarCharts; 