/**
 * 维保类型分析
 */
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../vm-sub-title';

const RmType = (props: any) => {
    const { data } = props;

    const color = [
        '#9270CA',
        '#6DC8EC',
        '#E8684A',
        '#F6BD16',
        '#5D7092',
        '#5AD8A6',
        '#5B8FF9',
        '#FF9D4D',
    ];
    let option = {
        color,
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: '42%',
            top: 'middle',
            align: 'left',
            icon: 'circle',
            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%', '50%'],
                hoverAnimation: true,
                z: 10,
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        borderColor: '#003359',
                    },
                },
                label: {
                    show: false,
                },
                data: data,
                labelLine: {
                    show: false,
                },
            },
        ],
    };
    return (
        <div className="rm-type">
            <SubTitle title="维保类型分析" />
            <div className="rm-type-chart">
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '100%', width: '100%' }}
                />
            </div>
        </div>
    );
};

export default RmType;
