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

const { Option } = Select;

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

const WGXW = ({ classPrefix = '', id }: WGXWProps) => {
    const prefix = `${classPrefix}-wgxw`;
    // const [tab, setTab] = useState('all');
    const [times, setTimes] = useState([moment(), moment()]);
    // 违规行为
    const [throwAberrantCode, setThrowAberrantCode] = useState('all');
    // 违规行为
    const [throwAberrantList, setThrowAberrantList] = useState<{ text: string; value: string }[]>(
        [],
    );

    useEffect(() => {
        getViolateBehavior().then(data => {
            setThrowAberrantList([{text: '全部', value: 'all'},...data]);
        });
    }, []);

    // const onTabChange = (tab: string) => {
    //     setTab(tab);
    // };

    const searchContent = (
        <div style={{textAlign: 'right', paddingRight: 10}}>
            <Select value={throwAberrantCode} onChange={value => setThrowAberrantCode(value)} style={{ width: 120 }}>
                {throwAberrantList.map(item => (
                    <Option key={item.value}>{item.text}</Option>
                ))}
            </Select>
            <VMRangePicker
                value={times}
                onChange={(date: [Moment, Moment]) => setTimes(date)}
                style={{ margin: '0 10px' }}
            />
            <ExportBtn />
        </div>
    );

    return (
        <div className={prefix}>
            {/*<SubTabsLine activeKey={tab} onChange={onTabChange} tabBarExtraContent={searchContent}>*/}
            {/*    <SubTabPane subKey="all" key="all" tab="所有投放点">*/}
            {/*        <WGXWContent*/}
            {/*            classPrefix={prefix}*/}
            {/*            id={id}*/}
            {/*            throwAberrantCode={throwAberrantCode}*/}
            {/*            startTime={(times[0].format('YYYY-MM-DD 00:00:00'))}*/}
            {/*            endTime={times[1].format('YYYY-MM-DD 23:59:59')}*/}
            {/*        />*/}
            {/*    </SubTabPane>*/}
            {searchContent}
            <WGXWContent
                classPrefix={prefix}
                id={id}
                throwAberrantCode={throwAberrantCode}
                startTime={(times[0].format('YYYY-MM-DD 00:00:00'))}
                endTime={times[1].format('YYYY-MM-DD 23:59:59')}
            />
        </div>
    );
};
export default WGXW;
