import React, { useState } from 'react';
import { Tabs, Button } from 'antd';
import styles from './ExhaustMonitoring.less';
import { SettingOutlined } from '@ant-design/icons';
// 导入子页面组件
import ExhaustEmissionStandard from './secondary_menu/ExhaustEmissionStandard';
import AlarmInformation from './secondary_menu/AlarmInformation';
import AbnormalAlarmInformation from './secondary_menu/AbnormalAlarmInformation';

const ExhaustMonitoring = () => {
    const [activeTab, setActiveTab] = useState('exhaust-emission-standard');

    // 标签页配置
    const tabItems = [
        {
            key: 'exhaust-emission-standard',
            label: '废气排放达标情况管理',
            children: <ExhaustEmissionStandard />
        },
        {
            key: 'abnormal-alarm-information',
            label: '异常报警信息管理',
            children: <AbnormalAlarmInformation />
        },
        {
            key: 'alarm-information',
            label: '告警信息管理',
            children: <AlarmInformation />
        }
    ];

    // 标签页切换处理
    const handleTabChange = (key) => {
        setActiveTab(key);
    };

    return (
        <div className={styles.container}>
            <Tabs
                activeKey={activeTab}
                onChange={handleTabChange}
                items={tabItems}
                className={styles.tabs}
                style={{
                    '--ant-tabs-tab-color': '#AFAFAF',
                    '--ant-tabs-tab-active-color': '#009D6F',
                    '--ant-tabs-tab-active-bg': '#fff'
                }}
                tabBarStyle={{
                    '--ant-tabs-tab-active-color': '#009D6F'
                }}
                tabBarExtraContent={
                    <Button
                        icon={<SettingOutlined />}
                        className={styles.settingButton}
                        onClick={() => {/* 你的操作 */ }}>
                        自动报警设置
                    </Button>
                }
            />
        </div>
    );
};

export default ExhaustMonitoring;