import React, { useEffect, useRef } from 'react';
import styles from './areaDeviceData.less';
import * as echarts from 'echarts';

interface propsData {
  data: any;
}

/**
 * 地区设备数量统计
 * @constructor
 */
const AreaDeviceData: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { data } = props;

  const options = {
    title: {
      text: '地区Top 5',
      top: 0,
      right: '10%',
      color: '#fff',
      fontSize: 16,
    },
    grid: {
      top: '25%',
      left: '-5%',
      bottom: '5%',
      right: '5%',
      containLabel: true,
    },
    tooltip: {
      show: true,
    },
    animation: false,
    xAxis: [
      {
        type: 'category',
        data: [],
        axisTick: {
          alignWithLabel: true,
        },
        nameTextStyle: {
          color: '#82b0ec',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#82b0ec',
          },
        },
        axisLabel: {
          color: '#fff',
          margin: 30,
        },
      },
    ],
    yAxis: [
      {
        show: false,
        type: 'value',
        axisLabel: {
          color: '#fff',
        },
        splitLine: {
          lineStyle: {
            color: '#0c2c5a',
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [40, 10],
        symbolOffset: [0, -6], // 上部椭圆
        symbolPosition: 'end',
        z: 12,
        label: {
          show: true,
          position: 'top',
          fontSize: 15,
          fontWeight: 'bold',
          color: '#34DCFF',
        },
        color: '#2DB1EF',
        data: [],
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [40, 10],
        symbolOffset: [0, 7], // 下部椭圆
        z: 12,
        color: '#2DB1EF',
        data: [],
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: function (d: number) {
          return d > 0 ? [50, 15] : [0, 0];
        },
        symbolOffset: [0, 12], // 下部内环
        z: 10,
        itemStyle: {
          color: 'transparent',
          borderColor: '#2EA9E5',
          borderType: 'solid',
          borderWidth: 1,
        },
        data: [],
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [70, 20],
        symbolOffset: [0, 18], // 下部外环
        z: 10,
        itemStyle: {
          color: 'transparent',
          borderColor: '#19465D',
          borderType: 'solid',
          borderWidth: 2,
        },
        data: [],
      },
      {
        type: 'bar',
        barWidth: '40',
        barGap: '10%', // Make series be overlap
        barCateGoryGap: '10%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: '#38B2E6',
            },
            {
              offset: 1,
              color: '#0B3147',
            },
          ]),
          opacity: 0.8,
        },
        data: [],
      },
    ],
  };

  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    const name: any = [];
    const value: any = [];
    if (data && data.length > 0) {
      data.slice(0, 5).forEach((res: { name: any; value: any }) => {
        name.push(res.name);
        value.push(res.value);
      });
    }

    options.xAxis[0].data = name;
    options.series[0].data = value;
    options.series[1].data = value;
    options.series[2].data = value;
    options.series[3].data = value;
    options.series[4].data = value;
    myChart.setOption(options, true);

    // 组件卸载
    return () => {
      myChart.dispose();
    };
  }, []);

  return (
    <div className={styles.container}>
      <div ref={chartRef} className={styles.areaData} />
    </div>
  );
};
export default AreaDeviceData;
