import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './EmergencyResource.less';
import EmergencyMap from './components/EmergencyMap'; //应急一张图
import EmergencyResource from './components/EmergencyResource'; //应急资源
import EmergencyRescue from './components/EmergencyRescue'; //应急处置救援



const SafeMajorHazardList = () => {
    const [activeModule, setActiveModule] = useState('emergencyMap');

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


    const renderModule = () => {
        switch (activeModule) {
            case 'emergencyMap':
                return <EmergencyMap />;
            case 'emergencyResource':
                return <EmergencyResource />;
            case 'emergencyRescue':
                return <EmergencyRescue />;
            default:
                return <EmergencyMap />;
        }
    };


    return (
        <div className={styles.containerRe}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "emergencyMap" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("emergencyMap")}
                >应急一张图
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "emergencyResource" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("emergencyResource")}
                >应急资源
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "emergencyRescue" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("emergencyRescue")}
                >应急处置救援
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default SafeMajorHazardList;
