import React from 'react';
import ReactEcharts from 'echarts-for-react'
import VmSubTitle from '../../../vm-sub-title';
import { Gauge1, Line1, Distribute1 } from '../../../vm-charts';
interface AlarmLdbProps {
    classPrefix?: string;
}

const getPieOption = () => {
    return {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: 'center',
            left: '45%',
            type: 'scroll',
            orient: 'vertical',
            formatter: (name: string) => {
                return `{a|${name}}{a|20次}{a|均值：30次}`;
            },
            textStyle: {
                color: '#fff',
                rich: {
                    a: {
                        width: 60,
                    },
                },
            },
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['25%', '50%'],
                avoidLabelOverlap: false,
                labelLine: {
                    show: false,
                },
                label: {
                    show: false,
                },
                data: [
                    { value: 1048, name: 'Search' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union' },
                    { value: 300, name: 'Video' },
                ],
            },
        ],
    };
}

const MY = ({ classPrefix = '' }: AlarmLdbProps) => {
    return <div className={`${classPrefix}-ldb`}>
        <div className={`${classPrefix}-ldb-item`}>
            <VmSubTitle title='工单处理效率'/>
            <div style={{flex: 1, display: 'flex'}}>
                <div style={{flex: 1}}>
                    <Gauge1 />
                </div>
            </div>

        </div>
        <div className={`${classPrefix}-ldb-item`}>
            <VmSubTitle title='满溢垃圾类型占比'/>
            <div style={{flex: 1}}>
                <ReactEcharts option={getPieOption()} style={{width: '100%', height: '100%'}}/>
            </div>

        </div>
        <div className={`${classPrefix}-ldb-item`}>
            <VmSubTitle title='满溢时段分布'/>
            <div style={{flex: 1}}>
                <Distribute1 />
            </div>
        </div>
        <div className={`${classPrefix}-ldb-item`}>
            <VmSubTitle title='满溢一周变化趋势'/>
            <div style={{flex: 1}}>
                <Line1 />
            </div>

        </div>
    </div>;
};
export default MY;
