/**
 * 报警记录
 */
import React, { useEffect } from 'react';
import moment from 'moment';
import sumBy from 'lodash/sumBy';
import VMTable from '../../../vm-table';
import { SubTabsLine } from '../../../vm-sub-tabs';
import SubTitle from '../../../vm-sub-title';
import { VMRangePicker } from '../../../vm-filter';
import { AlarmService } from '../../api';
import { useSetState } from 'ahooks';

interface TypeProps {
    id: string;
}

export default function AlarmRecord(props: TypeProps) {
    const { id } = props;
    const [state, setState] = useSetState({
        alarmTypeCode: 'all',
        alarmTabs: [{ key: '', label: '全部' }],
        startDate: moment().startOf('M').format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD'),
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
        },
    });
    const { alarmTabs, pagination, alarmTypeCode, startDate, endDate } = state;

    const { alarmTypes } = AlarmService.useAlarmTrend(
        id,
        startDate,
        endDate,
    );
    const { detail } = AlarmService.useAlarmRecord(
        id,
        alarmTypeCode === 'all' ? '' : alarmTypeCode,
        startDate,
        endDate,
        pagination.current,
    );
    // 格式化报警类型数据
    const formatAlarmType = (dataList: Array<any>) => {
        let list: Array<any> = [];
        let totalCount = 0; // 报警类型总数
        totalCount = sumBy(dataList, function(o: any) {
            return o.count;
        });
        dataList.forEach((ele: any) => {
            const obj = {
                key: ele.alarmTypeCode,
                label: `${ele.standardName} (${ele.count})`,
            };
            list.push(obj);
        });
        return { list, totalCount };
    };

    useEffect(() => {
        let arr = [{ key: '', label: '全部' }]; // 报警明细标签
        if (alarmTypes?.length > 0) {
            const { list, totalCount } = formatAlarmType(alarmTypes);
            arr[0].label = `全部 (${totalCount})`;
            setState({
                alarmTabs: arr.concat(list),
            });
        }
    }, [alarmTypes]);

    const columns = [
        {
            title: '报警日期',
            dataIndex: 'startDate',
            key: 'startDate',
        },
        {
            title: '报警垃圾类型',
            dataIndex: 'level',
            key: 'level',
        },
        {
            title: '报警类型',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
        },
    ];

    const pageChange = (page: number) => {
        setState({
            pagination: {
                ...pagination,
                current: page,
            },
        });
    };

    const tableProps = {
        pagination: {
            ...pagination,
            total: detail.total,
            defaultPageSize: 10,
            onChange: pageChange,
        },
        height: 160,
        dataSource: detail.dataSource,
    };

    const handleDateChange = (start: string, end: string) => {
        setState({
            startDate: start,
            endDate: end,
        });
    };

    return (
        <div className="alarm-record">
            <div className="alarm-record-head">
                <SubTitle title="报警记录" />
                <VMRangePicker
                    value={[moment(startDate), moment(endDate)]}
                    onChange={(dates: any) =>
                        dates &&
                        handleDateChange(
                            moment(dates[0]).format('YYYY-MM-DD'),
                            moment(dates[1]).format('YYYY-MM-DD'),
                        )
                    }
                />
            </div>
            <SubTabsLine
                items={alarmTabs}
                activeKey={alarmTypeCode}
                onChange={key => {
                    setState({
                        alarmTypeCode: key,
                    });
                }}
            />
            <div className="alarm-record-table">
                <VMTable columns={columns} {...tableProps} />
            </div>
        </div>
    );
}
