import React from 'react';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../../../vm-sub-title';

interface AlarmTypeProps {
    data: Array<any>;
    total: number;
}

const AlarmType = (props: AlarmTypeProps) => {
    const { data, total } = props;
    const color = ['#627CFC', '#33C9F6', '#FD6232', '#FDCF34', '#1890FF'];

    let option = {
        color,
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'item',
        },
        title: {
            zlevel: 0,
            text: '总数',
            top: '30%',
            left: '26%',
            textAlign: 'center',
            textStyle: {
                color: '#D4D4D4',
                fontSize: 14,
            },
            subtext: `${total}`,
            subtextStyle: {
                color: '#fafafa',
                fontSize: 28,
            },
        },
        legend: {
            orient: 'vertical',
            type: 'scroll',
            left: '50%',
            top: 'center',
            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}次`;
                } else {
                    return '';
                }
            },
            textStyle: {
                color: '#fff',
            },
            pageIconColor: '#fff',
            pageIconInactiveColor: '#fff',
            pageTextStyle: {
                color: '#fff',
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['70%', '90%'],
                center: ['28%', '50%'],
                hoverAnimation: true,
                z: 10,
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#003359',
                    },
                },
                label: {
                    show: false,
                },
                data: data,
                labelLine: {
                    show: false,
                },
            },
        ],
    };

    return (
        <div className="base-top--right">
            <SubTitle title="本月报警类型分析" />
            <div className="base-top--chart">
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '100%', width: '100%', zIndex: 9 }}
                />
                <div className="base-top--chart-bg" />
            </div>
        </div>
    );
};

export default AlarmType;
