import React, { useState } from 'react';
import styles from './WasteMonitoring.less';
import ProductWaste from './secondary_menu/ProductWaste'; // 产废管理
import GeneralSolidWaste from './secondary_menu/GeneralSolidWaste'; // 一般固废
// import HazardouSolidWaste from './secondary_menu/HazardouSolidWaste'; // 危固废

const WasteMonitoring = () => {
    const [activeMenu, setActiveMenu] = useState('product');

    const menuItems = [
        { key: 'product', label: '产废管理' },
        { key: 'general', label: '一般固废' },
        { key: 'hazardou', label: '危固废' },
    ];

    const handleMenuClick = (key) => {
        setActiveMenu(key);
    };

    const renderContent = () => {
        switch (activeMenu) {
            case 'product':
                return <ProductWaste />;
            case 'general':
                return <GeneralSolidWaste />;
            case 'hazardou':
                return <HazardouSolidWaste />;
            default:
                return <ProductWaste />;
        }
    };

    return (
        <div className={styles.container}>
            {/* 左侧菜单 */}
            <div className={styles.leftMenu}>
                {menuItems.map(item => (
                    <div
                        key={item.key}
                        className={`${styles.menuItem} ${activeMenu === item.key ? styles.active : ''}`}
                        onClick={() => handleMenuClick(item.key)}
                    >
                        {activeMenu === item.key && <div className={styles.activeIndicator}></div>}
                        <span className={styles.menuText}>{item.label}</span>
                    </div>
                ))}
            </div>

            {/* 右侧内容区 */}
            <div className={styles.rightContent}>
                {renderContent()}
            </div>
        </div>
    );
};

export default WasteMonitoring;

