import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './SafeMajorHazardList.less';
import ResponsibilityImplementation from './module/ResponsibilityImplementation'; //责任落实
import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
import RiskAssessment from './module/RiskAssessment'; //风险管控
import EvaluationReport from './module/EvaluationReport'; //评估报告

const SafeMajorHazardList = () => {
    const [activeModule, setActiveModule] = useState('responsibility');
    const handleModuleClick = (module) => {
        setActiveModule(module)
    }

    const renderModule = () => {
        switch (activeModule) {
            case 'responsibility':
                return <ResponsibilityImplementation />;
            case 'monitoring':
                return <OnlineMonitoring />;
            case 'risk':
                return <RiskAssessment />;
            case 'evaluation':
                return <EvaluationReport />;
            default:
                return <ResponsibilityImplementation />;
        }
    };


    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "responsibility" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("responsibility")}
                >责任落实
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "monitoring" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("monitoring")}
                >在线监测预警
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "risk" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("risk")}
                >风险管控
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "evaluation" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("evaluation")}
                >评估报告及隐患处理
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default SafeMajorHazardList;