import React, { useState } from 'react';
import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
import LDB from './LDB';
// import MY from './MY';
import FLZL from './FLZL';
import { alarmService } from '../../api';
import './index.less';

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

const Alarm = ({ classPrefix = '', id }: AlarmProps) => {
    const prefix = `${classPrefix}-alarm`;
    const [tab, setTab] = useState('ldb');

    const onTabChange = (tab: string) => {
        setTab(tab);
    };
    const tabs = alarmService.tabs({ housingEstateId: id }) || [];
    return (
        <div className={prefix}>
            <SubTabsLine activeKey={tab} onChange={onTabChange}>
                {tabs.includes('LANDING') && (
                    <SubTabPane subKey="ldb" key="ldb" tab="落地包分析">
                        <LDB classPrefix={prefix} id={id} />
                    </SubTabPane>
                )}
                {tabs.includes('THROW') && (
                    <SubTabPane subKey="flzl" key="flzl" tab="分类质量分析">
                        <FLZL classPrefix={prefix} id={id} />
                    </SubTabPane>
                )}
                {/*{tabs.includes('OVERFLOW') && (*/}
                {/*    <SubTabPane subKey="my" key="my" tab="满溢分析">*/}
                {/*        <MY classPrefix={prefix} />*/}
                {/*    </SubTabPane>*/}
                {/*)}*/}
            </SubTabsLine>
        </div>
    );
};
export default Alarm;
