import React from 'react';
import ReactEcharts from 'echarts-for-react';
import VmSubTitle from '../../../vm-sub-title';
import { Gauge1, Line1, Distribute1 } from '../../../vm-charts';
import { overViewService } from '../../api';
import { transferLineData } from '../OverView/Trend';
import { getDistributeChartData } from '../OverView/Hot';
import { getMinHundred } from '../OverView/RightBottom';
interface AlarmLdbProps {
    classPrefix?: string;
    id: 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 LDB = ({ classPrefix = '', id = '' }: AlarmLdbProps) => {
    // 工单处理效率
    const efficiencyData = overViewService.resolveEfficiency({
        housingEstateId: id,
    });
    // 一周趋势
    const sumByPoint = overViewService.throwSumByDayAndPoint({
        housingEstateId: id,
    });
    // 一周分布
    const sumByHour = overViewService.throwSumByHour({
        housingEstateId: id,
    });
    console.log(getDistributeChartData(sumByHour || []));
    return (
        <div className={`${classPrefix}-ldb`}>
            <div className={`${classPrefix}-ldb-item`}>
                <VmSubTitle title="工单处理效率" />
                <div style={{ flex: 1, display: 'flex' }}>
                    <div style={{ flex: 1 }}>
                        <Gauge1
                            name="AI工单关闭率"
                            unit="%"
                            min={0}
                            max={100}
                            num={efficiencyData?.closeRate || 0}
                            average={efficiencyData?.closeRateAverage || 0}
                        />
                    </div>
                    <div style={{ flex: 1 }}>
                        <Gauge1
                            name="AI工单处理时长"
                            unit="分"
                            min={0}
                            max={getMinHundred(
                                Math.max(
                                    efficiencyData?.resolveMinute || 0,
                                    efficiencyData?.resolveMinuteAverage || 0,
                                ),
                            )}
                            num={efficiencyData?.resolveMinute || 0}
                            average={efficiencyData?.resolveMinuteAverage || 0}
                        />
                    </div>
                    <div style={{ flex: 1 }}>
                        <Gauge1
                            name="AI工单及时关闭率"
                            unit="%"
                            min={0}
                            max={100}
                            num={efficiencyData?.closeInTimeRate || 0}
                            average={efficiencyData?.closeInTimeRateAverage || 0}
                        />
                    </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 data={getDistributeChartData(sumByHour || [])} />
                </div>
            </div>
            <div className={`${classPrefix}-ldb-item`}>
                <VmSubTitle title="落地包发生次数一周趋势" />
                <div style={{ flex: 1 }}>
                    <Line1 {...transferLineData(sumByPoint)} />
                </div>
            </div>
        </div>
    );
};
export default LDB;
