import { Empty } from 'antd';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

//图表模块
const RadarChartModule = (props) => {
  const chartDomRef = useRef();
  const chartRef = useRef();
  const { indicator, data, name = '', color } = props;
  useEffect(() => {
    chartRef.current = echarts.init(chartDomRef.current);
    window.addEventListener('resize', resetChart);
    return () => window.removeEventListener('resize', resetChart);
  }, []);

  useEffect(() => {
    if (!chartRef.current) return;
    const option = { ...defaultOption };
    if (color) option.color = color;
    let chartData = data;
    if (chartData.length > 1) {
      option.legend = {
        // type: 'scroll',
        right: 20,
        top: '20%',
        orient: 'vertical',
        textStyle: {
          // color: '#fff',
        },
      };
    } else {
      chartData = data.map((item) => {
        return {
          ...item,
          label: {
            show: true,
            position: 'insideBottom',
            formatter: function (params) {
              return params.value;
            },
          },
        };
      });
    }
    option.radar.indicator = indicator;
    option.series = [{ ...option.series[0], data: chartData, name }];

    // chartRef.current.clear();
    chartRef.current.setOption(option);
    // chartRef.current.resize();
  }, [indicator, data]);

  const resetChart = () => {
    if (chartRef.current) chartRef.current.resize();
  };

  const getStyle = () => {
    if (data && data.length != 0) return { width: '100%', height: '100%' };
    else return { width: '100%', height: '100%', display: 'none' };
  };

  return (
    <div style={{ height: '100%' }}>
      <div style={getStyle()} ref={chartDomRef} />
      {(!data || data.length == 0) && <Empty />}
    </div>
  );
};
export default RadarChartModule;
const colors = [
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
];
const defaultOption = {
  color: colors,
  tooltip: {
    trigger: 'item',
  },
  radar: {
    name: {
      textStyle: {
        // color: '#fff',
        fontSize: 18,
      },
    },
    splitArea: {
      areaStyle: {
        color: [
          'rgba(27, 133, 168, 0.8)',
          'rgba(27, 133, 168, 0.7)',
          'rgba(27, 133, 168, 0.6)',
          'rgba(27, 133, 168, 0.4)',
          'rgba(27, 133, 168, 0.3)',
        ],
        // shadowColor: 'rgba(0, 0, 0, 0.2)',
        // shadowBlur: 10
      },
    },
    axisLine: {
      lineStyle: {
        color: '#238BB6',
      },
    },
    splitLine: {
      show: false,
    },
    indicator: [
      { name: 'Sales' },
      { name: 'Administration' },
      { name: 'Information Technology' },
      { name: 'Customer Support' },
      { name: 'Development' },
      { name: 'Marketing' },
    ],
  },
  series: [
    {
      name: '',
      type: 'radar',
      // tooltip: {
      //   trigger: 'item',
      // },
      // symbol: 'none',
      // areaStyle: {},
      data: [
        {
          value: [2, 3, 0, 100, 0, 1],
        },
      ],
    },
  ],
};
