import { useLayoutEffect, useMemo, useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
import { use } from 'echarts/types/src/extension.js';
import { ECharts } from 'echarts';

const LineBarCharts = ({ dataSource }: { dataSource: any[] }) => {
  const echartRef = useRef<any>(null);
  useLayoutEffect(() => {
    if (echartRef.current) {
      echartRef.current.resize();
    }
  }, [echartRef.current]);
  const option = useMemo(() => {
    const category = dataSource?.map(item => item.lx);
    const realData = dataSource?.map(item => item.num);
    return {
      color: ['#5F8BFF'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)',
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        valueFormatter: function(value: any) {
          return `${value || '0'}件`;
        }
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '2%',
        top: '20%',
        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: 14
          },
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          type: 'shadow',
        },
        data: category,
      }],
      yAxis: [{
        type: 'value',
        name: '件',
        min: 0,
        // max: 'dataMax',
        interval: 10,
        axisLabel: {
          show: false,
          // 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],
        },
        label: {
          show: true,
          position: 'top',
          distance: 6,
          color: '#FFFFFF',
          fontSize: 20,
          fontWeight: 700,
          formatter: function(params: any) {
            return `${params.value || '0'}件`;
          }
        }
      }]
    };
  }, [dataSource]);



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

export default LineBarCharts; 