import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
import styles from './PlanManage.less';
import BusinessPlanManagement from './components/BusinessPlanManagement';
import ProductionPlanManagement from './components/ProductionPlanManagement';
import PlanApprovalProcess from './components/PlanApprovalProcess'; 

const PlanManage = () => {
    const [activeModule, setActiveModule] = useState('businessPlan');

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

    const renderModule = () => {
        switch (activeModule) {
            case 'businessPlan':
                return <BusinessPlanManagement />;
            case 'productionPlan':
                return <ProductionPlanManagement />;
            case 'planApprovalProcess':
                return <PlanApprovalProcess />;
            default:
                return <BusinessPlanManagement />;
        }
    };


    return (
        <div className={styles.container}>
            <div className={styles.TopButton}>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "businessPlan" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("businessPlan")}
                >经营计划管理
                </Button>
                <Button
                    className={`${styles.TopButtonItem} ${activeModule === "productionPlan" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("productionPlan")}
                >生产计划管理
                </Button>
                <Button 
                    className={`${styles.TopButtonItem} ${activeModule === "planApprovalProcess" ? styles.active : ""}`}
                    onClick={() => handleModuleClick("planApprovalProcess")}
                >计划审批流程
                </Button>
            </div>
            <div className={styles.content}>
                {renderModule()}
            </div>
        </div>
    );
};

export default PlanManage;
