import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './EnvMonthlyReport.less';
import Hjbs from './components/hjbs'; // 环境辨识
import Bbtz from './components/bbtz'; // 报表台账
import Fxwt from './components/fxwt'; // 风险问题

const EnvMonthlyReport = () => {
    const [activeModule, setActiveModule] = useState('hjbs');

    const handleModuleClick = (module) => {
        setActiveModule(module)
    }

    const renderModule = () => {
        switch (activeModule) {
            case 'hjbs':
                return <Hjbs />;
            case 'bbtz':
                return <Bbtz />;
            case 'fxwt':
                return <Fxwt />;
            default:
                return <Hjbs />;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "hjbs" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("hjbs")}
                >环境辨识
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "bbtz" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("bbtz")}
                >报表台账
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "fxwt" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("fxwt")}
                >风险问题
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default EnvMonthlyReport;
