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, throwFailBehaviorService } from '../../api';
import './index.less';

const { Option } = Select;

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

const WGXW = ({ classPrefix = '', id, throwPoints = [] }: 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 onExport = () => {
        throwFailBehaviorService.export({
            housingEstateId: id,
            startDatetime: times[0].format('YYYY-MM-DD 00:00:00'),
            endDatetime: times[1].format('YYYY-MM-DD 23:59:59'),
            throwPointId: tab === 'all' ? '' : tab,
            throwAberrantCode: throwAberrantCode === 'all' ? '' : throwAberrantCode,
        });
    };

    const searchContent = (
        <div style={{ textAlign: 'right', paddingRight: 10 }}>
            <span style={{ color: '#B3C4CE' }}> 违规行为：</span>

            <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
                onClick={onExport}
                items={[
                    {
                        label: '导出全部',
                        key: 'all',
                    },
                ]}
            />
        </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')}
                        throwPointId=""
                    />
                </SubTabPane>
                {throwPoints?.map(item => {
                    return (
                        <SubTabPane subKey={item.id} key={item.id} tab={item.pointName}>
                            <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')}
                                throwPointId={item.id}
                            />
                        </SubTabPane>
                    );
                })}
            </SubTabsLine>
        </div>
    );
};
export default WGXW;
