import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './EmergencyDuty.less';
import DutySchedule from './components/DutySchedule';
import DutyLog from './components/DutyLog';
import DutyHandover from './components/DutyHandover';

const EmergencyDuty = () => {
    const [activeModule, setActiveModule] = useState('schedule');

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

    const renderModule = () => {
        switch (activeModule) {
            case 'schedule':
                return <DutySchedule />;
            case 'log':
                return <DutyLog />;
            case 'handover':
                return <DutyHandover />;
            default:
                return <DutySchedule />;
        }
    };

    return (
        <div className={styles.containerDuty}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "schedule" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("schedule")}
                >
                    值班排班
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "log" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("log")}
                >
                    值班日志记录
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "handover" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("handover")}
                >
                    交接班管理
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default EmergencyDuty;
