import React, { useState } from 'react';
import { Tabs } from 'antd';
import styles from './EquipmentManagement.less';

// 导入子页面组件
import WasteGasPollutionControl from './secondary_menu/WasteGasPollutionControl';
import WastewaterFacilityManagement from './secondary_menu/WastewaterFacilityManagement';
import ProtectionFacilityMaintenance from './secondary_menu/ProtectionFacilityMaintenance';

const EquipmentManagement = () => {
    const [activeTab, setActiveTab] = useState('waste-gas-control');

    // 标签页配置
    const tabItems = [
        {
            key: 'waste-gas-control',
            label: '废气污染防治信息',
            children: <WasteGasPollutionControl />
        },
        {
            key: 'wastewater-facility',
            label: '废水设置运行管理',
            children: <WastewaterFacilityManagement />
        },
        {
            key: 'protection-facility',
            label: '防护设施检维修管理',
            children: <ProtectionFacilityMaintenance />
        }
    ];

    // 标签页切换处理
    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'
                }}
            />
        </div>
    );
};

export default EquipmentManagement;