
import React, { useState } from 'react';
import styles from './bbtz.less';
import TemplateLibrary from '../components/content_component_bbtz/TemplateLibrary';
import LedgerCenter from '../components/content_component_bbtz/LedgerCenter';
import ReportTask from '../components/content_component_bbtz/ReportTask';

const Bbtz = () => {
    const [activeMenu, setActiveMenu] = useState('templateLibrary');

    const menuItems = [
        { key: 'templateLibrary', label: '模板库' },
        { key: 'ledgerCenter', label: '台账中心' },
        { key: 'reportTask', label: '报送任务' }
    ];

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

    const renderContent = () => {
        switch (activeMenu) {
            case 'templateLibrary':
                return <TemplateLibrary />;
            case 'ledgerCenter':
                return <LedgerCenter />;
            case 'reportTask':
                return <ReportTask />;
            default:
                return <TemplateLibrary />;
        }
    };

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

