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

interface TypeProps {
    orderCategory: Array<{ name: string; value: string }>;
}

const Wtlx = (props: TypeProps) => {
    const { orderCategory } = props;

    const color = [
        '#5C91FA',
        '#5BD9A7',
        '#5D7091',
        '#F5BD16',
        '#E86351',
        '#5AD8A6',
        '#5B8FF9',
        '#FF9D4D',
    ];
    let option = {
        color,
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: '45%',
            top: 'middle',
            align: 'left',
            itemGap: 12,
            itemWidth: 10,
            itemHeight: 10,
            formatter: function(name: string) {
                const value = orderCategory.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: orderCategory,
                labelLine: {
                    show: false,
                },
            },
        ],
    };

    return (
        <div className="appraisal-content-zg-wt">
            <SubTitle title="问题类型分析" />
            <ReactEcharts
                option={option}
                notMerge
                lazyUpdate
                style={{ height: '200px', width: '100%' }}
            />
        </div>
    );
};

export default Wtlx;
