import React from 'react';
import { useSetState, useRequest } from 'ahooks';
import { Space } from 'antd';
import moment from 'moment';
import { VMDatePicker } from '../vm-filter';
import StatCollection from '../vm-stat-collection';
import VMTable, { ExportBtn, renderColumnParam } from '../vm-table';
import useSettings from '../vm-hooks/useSettings';
import { ThrowData } from './api';
import projectDarkImg from '../../image/project-dark.png';
import projectImg from '../../image/project.png';
import realDarkImg from '../../image/real-dark.png';
import realImg from '../../image/real.png';
import PropTypes from 'prop-types';
import './style';
const ThrowContent = props => {
    const { id } = props;
    const [state, setState] = useSetState({
        start: moment().subtract(1, 'y'),
        end: moment(),
        ids: [],
    });
    const { tableProps } = useRequest(
        ({ current, pageSize }) =>
            ThrowData.getThrowList(
                current - 1,
                pageSize,
                id,
                state.start.format('YYYY-MM-DD hh:mm:ss'),
                state.end.format('YYYY-MM-DD hh:mm:ss'),
            ),
        {
            defaultPageSize: 10,
            paginated: true,
        },
    );
    const { isDark } = useSettings();
    const statInfo = ThrowData.useThrowStat(
        id,
        state.start.format('YYYY-MM-DD'),
        state.end.format('YYYY-MM-DD'),
    );
    const statData = [
        {
            icon: isDark ? projectDarkImg : projectImg,
            label: '投放户数',
            value: statInfo?.totalThrowCount,
            unit: '次',
        },
        {
            icon: isDark ? realDarkImg : realImg,
            label: '投放次数',
            value: statInfo?.participateInHousehold,
            unit: '次',
        },
    ];
    const handleDateChange = (start, end) => {
        setState({ start, end });
    };
    const handleExport = type => {
        let downloadAll = false;
        let ids = '';
        switch (type) {
            case 'all':
                downloadAll = true;
                break;
            case 'select-rows':
                ids = state.ids.join(',');
                break;
            case 'current-page':
                ids = tableProps?.dataSource?.map(i => i.id).join(',');
                break;
            default:
                break;
        }
        ThrowData.exportData({
            subjectId: id,
            startTime: state.start.format('YYYY-MM-DD hh:mm:ss'),
            endTime: state.end.format('YYYY-MM-DD hh:mm:ss'),
            downloadAll,
            ids,
            columnJson: renderColumnParam(columns),
        });
    };
    return (
        <div className="community-throw-content">
            <div className="top-bar">
                <StatCollection items={statData} />
                <Space className="right">
                    <VMDatePicker
                        defaultValue={[state.start, state.end]}
                        onChange={dates => dates && handleDateChange(dates[0], dates[1])}
                    />
                    <ExportBtn onClick={handleExport} />
                </Space>
            </div>
            <div className="table-container">
                <VMTable
                    columns={columns}
                    rowSelection={{
                        onChange: rowKeys => setState({ ids: rowKeys }),
                    }}
                    {...tableProps}
                />
            </div>
        </div>
    );
};
ThrowContent.propTypes = {
    id: PropTypes.string,
};

const columns = [
    {
        title: '用户卡号',
        dataIndex: 'cardCode',
        key: 'cardCode',
    },
    {
        title: '用户姓名',
        dataIndex: 'personName',
        key: 'personName',
    },
    {
        title: '门牌号',
        dataIndex: 'houseNumber',
        key: 'houseNumber',
    },
    {
        title: '主体类型',
        dataIndex: 'subjectTypeName',
        key: 'subjectTypeName',
    },
    {
        title: '主体名称',
        dataIndex: 'subjectName',
        key: 'subjectName',
    },
    {
        title: '行政区划',
        dataIndex: 'divisionName',
        key: 'divisionName',
    },
    {
        title: '投放点',
        dataIndex: 'throwPointName',
        key: 'throwPointName',
    },
    {
        title: '垃圾重量(kg)',
        dataIndex: 'weight',
        key: 'weight',
    },
    {
        title: '分类质量',
        dataIndex: 'evaluation',
        key: 'evaluation',
    },
    {
        title: '本次积分',
        dataIndex: 'integral',
        key: 'integral',
    },
    {
        title: '上传方式',
        dataIndex: 'dataSourceName',
        key: 'dataSourceName',
    },
    {
        title: '上传时间',
        dataIndex: 'time',
        key: 'time',
    },
];

export default ThrowContent;