import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './EnvMonitoring.less';
import EnvMonitoringOneMap from './components/EnvMonitoringOneMap'; //环保监测一张图
import WastewaterMonitoring from './components/WastewaterMonitoring'; //废水监测管理
import ExhaustMonitoring from './components/ExhaustMonitoring'; //废气监测管理
import WasteMonitoring from './components/WasteMonitoring'; //废物监测管理
const EnvMonitoring = () => {
    const [activeModule, setActiveModule] = useState('1');

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


    const renderModule = () => {
        switch (activeModule) {
            case '1':
                return <EnvMonitoringOneMap />;
            case '2':
                return <WastewaterMonitoring />;
            case '3':
                return <ExhaustMonitoring />;
            case '4':
                return <WasteMonitoring />;
            default:
                return <EnvMonitoringOneMap />;
        }
    };


    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "1" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("1")}
                >环保检测一张图
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "2" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("2")}
                >废水监测管理
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "3" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("3")}
                >废气监测管理
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "4" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("4")}
                >废物监测管理
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default EnvMonitoring;
