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 './index.less';

interface AlarmProps {
    classPrefix?: string;
}

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

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

    return (
        <div className={prefix}>
            <SubTabsLine activeKey={tab} onChange={onTabChange}>
                <SubTabPane subKey="ldb" key="ldb" tab="落地包分析">
                    <LDB classPrefix={prefix} />
                </SubTabPane>
                <SubTabPane subKey="flzl" key="flzl" tab="分类质量分析">
                    <FLZL classPrefix={prefix} />
                </SubTabPane>
                <SubTabPane subKey="my" key="my" tab="满溢分析">
                    <MY classPrefix={prefix} />
                </SubTabPane>
            </SubTabsLine>
        </div>
    );
};
export default Alarm;
