/**
 * 监测-报警信息-报警信息汇总
 */
import React, { useEffect } from 'react';
import moment from 'moment';
import sumBy from 'lodash/sumBy';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../../../vm-sub-title';
import { AlarmService, BaseService } from '../../api';

import alarm from '../../imgs/alarm.png';
import { useSetState } from 'ahooks';

const Summary = ({ id }: { id: string }) => {
    const [state, setState] = useSetState({
        alarmTabsValue: [{ name: '', value: 0 }],
        totalCount: 0,
    });
    const { alarmTabsValue, totalCount } = state;

    const { alarmSummary } = AlarmService.useAlarmSummary(id, moment().format('YYYY-MM-DD'));

    const { alarmTypeRes } = BaseService.useBaseAlarmInfo(
        id,
        moment()
            .startOf('M')
            .format('YYYY-MM-DD'),
        moment().format('YYYY-MM-DD'),
    );

    useEffect(() => {
        let list: Array<any> = [];
        let count = 0;
        if (alarmTypeRes.length > 0) {
            count = sumBy(alarmTypeRes, function(o: any) {
                return o.count;
            });
            alarmTypeRes.forEach((ele: any) => {
                const obj = {
                    key: ele.standardCode,
                    name: ele.standardName,
                    value: ele.count,
                };
                list.push(obj);
            });
        }
        setState({
            totalCount: count,
            alarmTabsValue: list,
        });
    }, [alarmTypeRes]);

    const color = [
        '#9270CA',
        '#6DC8EC',
        '#E8684A',
        '#F6BD16',
        '#5D7092',
        '#5AD8A6',
        '#5B8FF9',
        '#FF9D4D',
    ];
    let option = {
        color,
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'item',
        },

        legend: {
            orient: 'vertical',
            left: '40%',
            top: 'middle',
            align: 'left',
            itemGap: 8,
            itemWidth: 10,
            itemHeight: 10,
            formatter: function(name: string) {
                const value = alarmTabsValue.find((item: any) => item.name === name);
                const rate = ((value?.value || 0) / totalCount) * 100;
                if (value) {
                    return `\t\t${name}\t\t${value.value}次\t\t${rate.toFixed(2)}%`;
                } 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: alarmTabsValue,
                labelLine: {
                    show: false,
                },
            },
        ],
    };
    return (
        <div className="alarm-summary">
            <SubTitle title="报警信息汇总" />
            <div className="alarm-summary-time">
                <img src={alarm} />
                <div>
                    <div className="alarm-summary-time-name">月度报警总次数</div>
                    <div className="alarm-summary-time-value">
                        <span>{alarmSummary?.thisYearCount || 0}</span>次
                        <div className="alarm-summary-time-value-compare">
                            {`月同比 ${alarmSummary?.thisYearOnLastYearCount || 0}%`}
                            {alarmSummary?.thisYearOnLastYearCount >= 100 ? (
                                <div className="triangle-up"></div>
                            ) : (
                                <div className="triangle-down"></div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <div className="alarm-summary-type-analysis">
                <SubTitle title="类型分析" />
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '180px', width: '100%' }}
                />
            </div>
        </div>
    );
};

export default Summary;
