import React, { useState } from 'react';
import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
import { VMRangePicker } from '../../../vm-filter';
import { ExportBtn } from '../../../vm-table';
import WGGSContent from './Content';
import { throwFailPersonService } from '../../api';
import './index.less';
import moment from 'moment';
import { Moment } from 'moment/moment';

interface WGGSProps {
    classPrefix?: string;
    id: string;
    throwPoints: any[];
}

const WGGS = ({ classPrefix = '', id, throwPoints = [] }: WGGSProps) => {
    const prefix = `${classPrefix}-wggs`;
    const [tab, setTab] = useState('all');
    const [times, setTimes] = useState([moment(), moment()]);

    const onTabChange = (tab: string) => {
        setTab(tab);
    };
    // 导出
    const onExport = () => {
        console.log(111);
        throwFailPersonService.export({
            housingEstateId: id,
            beginTime: times[0].format('YYYY-MM-DD 00:00:00'),
            endTime: times[1].format('YYYY-MM-DD 23:59:59'),
            throwPointId: tab === 'all' ? '' : tab,
        });
    };

    const searchContent = (
        <div>
            <VMRangePicker
                value={times}
                onChange={(date: [Moment, Moment]) => setTimes(date)}
                style={{ marginRight: 10 }}
            />
            <ExportBtn
                onClick={onExport}
                items={[
                    {
                        label: '导出全部',
                        key: 'all',
                    },
                ]}
            />
        </div>
    );
    return (
        <div className={prefix}>
            <SubTabsLine activeKey={tab} onChange={onTabChange} tabBarExtraContent={searchContent}>
                <SubTabPane subKey="all" key="all" tab="所有投放点">
                    <WGGSContent
                        classPrefix={prefix}
                        id={id}
                        startTime={times[0].format('YYYY-MM-DD 00:00:00')}
                        endTime={times[1].format('YYYY-MM-DD 23:59:59')}
                    />
                </SubTabPane>
                {throwPoints.map(item => {
                    return (
                        <SubTabPane subKey={item.id} key={item.id} tab={item.pointName}>
                            <WGGSContent
                                classPrefix={prefix}
                                id={id}
                                throwPointId={item.id}
                                startTime={times[0].format('YYYY-MM-DD 00:00:00')}
                                endTime={times[1].format('YYYY-MM-DD 23:59:59')}
                            />
                        </SubTabPane>
                    );
                })}
            </SubTabsLine>
        </div>
    );
};
export default WGGS;
