import React, { useState } from 'react';
import styles from './hjbs.less';
import Sjjrgl from './secondary_menu/sjjrgl'; // 数据接入管理
import Fxpggzt from './secondary_menu/fxpggzt'; // 风险评估工作台
import Zdfxyqd from './secondary_menu/zdfxyqd'; // 重大风险源清单

const Hjbs = () => {
    const [activeMenu, setActiveMenu] = useState('sjjrgl');

    const menuItems = [
        { key: 'sjjrgl', label: '数据接入管理' },
        { key: 'fxpggzt', label: '风险评估工作台' },
        { key: 'zdfxyqd', label: '重大风险源清单' }
    ];

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

    const renderContent = () => {
        switch (activeMenu) {
            case 'sjjrgl':
                return <Sjjrgl />;
            case 'fxpggzt':
                return <Fxpggzt />;
            case 'zdfxyqd':
                return <Zdfxyqd />;
            default:
                return <Sjjrgl />;
        }
    };

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

