import React, { useState } from 'react';
import moment, { Moment } from 'moment';
import { useAntdTable } from 'ahooks';
import VmTable, { ExportBtn } from '../../../vm-table';
import { VMRangePicker } from '../../../vm-filter';
import { SummaryItem } from '../OverView/Manage';
import { throwRecordService, queryPage } from '../../api';
import { ThrowRecordProps } from '../../types';
import './index.less';

interface TFRDProps {
    classPrefix?: string;
    id: string;
}

const columns = [
    {
        title: '投放人',
        dataIndex: 'personName',
    },
    {
        title: '门牌号',
        dataIndex: 'householdNo',
    },
    {
        title: '分类主体',
        dataIndex: 'housingEstateName',
    },
    {
        title: '行政区划',
        dataIndex: 'xzqhName',
    },
    {
        title: '投放点',
        dataIndex: 'throwPointName',
    },
    {
        title: '分类质量',
        dataIndex: 'qualityValue',
    },
    {
        title: '投放时间',
        dataIndex: 'endDatetime',
        render: (text: string) => {
            if (text) {
                return (
                    <>
                        <div>{text.split(' ')[0]}</div>
                        <div>{text.split(' ')[1]}</div>
                    </>
                );
            }
            return '';
        },
    },
];

const TFRD = ({ classPrefix = '', id }: TFRDProps) => {
    const prefix = `${classPrefix}-tfrd`;
    const [times, setTimes] = useState([moment(), moment()]);

    const queryParams = {
        housingEstateId: id,
        // startDatetime: times[0].format('YYYY-MM-DD 00:00:00'),
        // endDatetime: times[1].format('YYYY-MM-DD 23:59:59'),
    };
    const summary = throwRecordService.count(queryParams);
    const getTableData = ({ current, pageSize }: { current: number; pageSize: number }) => {
        return queryPage<ThrowRecordProps>('/cloud/sdyd/throwRecord/page', {
            page: current - 1,
            size: pageSize,
            ...queryParams,
        });
    };
    const { tableProps } = useAntdTable(getTableData, {
        defaultPageSize: 10,
        refreshDeps: [id, times[0], times[1]],
    });

    const onDateChange = (date: Array<Moment>) => {
        setTimes(date);
    };

    const onExport = (type: string) => {
        switch (type) {
            case 'all':
                break;
            case 'current-page':
                break;
            case 'select-rows':
                break;
            default:
                break;
        }
    };
    return (
        <div className={prefix}>
            <div className={`${prefix}-top`}>
                <div className={`${prefix}-top-summary`}>
                    <SummaryItem
                        icon={require('../../imgs/manage-yyxj.png')}
                        name="投放户数"
                        unit="户"
                        num={summary?.householdCount || 0}
                    />
                    <SummaryItem
                        icon={require('../../imgs/manage-wgmsr.png')}
                        name="投放次数"
                        unit="次"
                        num={summary?.totalCount || 0}
                    />
                </div>
                <div className={`${prefix}-top-search`}>
                    <VMRangePicker
                        value={times}
                        onChange={onDateChange}
                        style={{ marginRight: 10 }}
                    />
                    <ExportBtn onClick={onExport} />
                </div>
            </div>
            {/* @ts-ignore */}
            <VmTable height={500} columns={columns} {...tableProps} />
        </div>
    );
};
export default TFRD;
