import React from 'react';
import ReactEcharts from 'echarts-for-react';

const Wgfx = (props: any) => {
    const {
        data = [
            { name: '超速', value: 2 },
            { name: '超速1', value: 2 },
            { name: '超速2', value: 5 },
            { name: '超速3', value: 4 },
            { name: '超速4', value: 12 },
            { name: '超速5', value: 12 },
            { name: '超速6', value: 12 },
            { name: '超速61', value: 12 },
            { name: '超速62', value: 12 },
            { name: '超速63', value: 12 },
        ],
        total = 0,
    } = props;
    window.console.log(data);
    const color = [
        '#9270CA',
        '#6DC8EC',
        '#E8684A',
        '#F6BD16',
        '#5D7092',
        '#5AD8A6',
        '#5B8FF9',
        '#FF9D4D',
    ];
    let option = {
        color,
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'item',
        },
        title: {
            zlevel: 0,
            text: '总数',
            top: '33%',
            left: '19%',
            textAlign: 'center',
            textStyle: {
                color: '#D4D4D4',
                fontSize: 14,
            },
            subtext: `${total || 0}`,
            subtextStyle: {
                color: '#fafafa',
                fontSize: 28,
            },
        },
        legend: {
            orient: 'vertical',
            left: '50%',
            top: '5%',
            align: 'left',
            itemGap: 8,
            itemWidth: 10,
            itemHeight: 10,
            formatter: function(name: string) {
                const value = data.find((item: any) => item.name === name);
                if (value) {
                    return `\t\t${name}\t\t${value.value}次\t\t`;
                } else {
                    return '';
                }
            },
            textStyle: {
                fontSize: 14,
                color: '#fff',
            },
            pageIconColor: '#fff',
            pageIconInactiveColor: '#fff',
            pageTextStyle: {
                color: '#fff',
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['55%', '75%'],
                center: ['20%', '40%'],
                hoverAnimation: true,
                z: 10,
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#003359',
                    },
                },
                label: {
                    show: false,
                },
                data: data,
                labelLine: {
                    show: false,
                },
            },
        ],
    };

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

export default Wgfx;
