import React, { useState } from 'react';
import styles from './ComplianceManagement.less';
import PermitManagement from './secondary_menu/PermitManagement'; // 排污许可
import RegulationCompliance from './secondary_menu/RegulationCompliance'; // 法规符合性
import SupervisionInspection from './secondary_menu/SupervisionInspection'; // 监督检查
import InformationDisclosure from './secondary_menu/InformationDisclosure'; // 信息公开及绿色通道

const ComplianceManagement = () => {
    const [activeMenu, setActiveMenu] = useState('permit');

    const menuItems = [
        { key: 'permit', label: '排污许可' },
        { key: 'regulation', label: '法规符合性' },
        { key: 'inspection', label: '监督检查' },
        { key: 'disclosure', label: '信息公开及绿色通道' }
    ];

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

    const renderContent = () => {
        switch (activeMenu) {
            case 'permit':
                return <PermitManagement />;
            case 'regulation':
                return <RegulationCompliance />;
            case 'inspection':
                return <SupervisionInspection />;
            case 'disclosure':
                return <InformationDisclosure />;
            default:
                return <PermitManagement />;
        }
    };

    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 ComplianceManagement;