import React, { useState } from 'react';
import { Select } from 'antd';
import styles from './ProductionPlanManagement.less';
import OilProductionPlan from './second_oil_components/OilProductionPlan';
import HairOilProductionPlan from './second_oil_components/HairOilProductionPlan';
import BackflowProductionPlan from './second_oil_components/BackflowProductionPlan';
import MixingProductionPlan from './second_oil_components/MixingProductionPlan';

const ProductionPlanManagement = () => {
    // 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
    const [firstMenu, setFirstMenu] = useState('oilProductionPlan');
    const [secondMenu, setSecondMenu] = useState(undefined);
    const [thirdMenu, setThirdMenu] = useState(undefined);
    const [fourthMenu, setFourthMenu] = useState(undefined);
    const [fifthMenu, setFifthMenu] = useState(undefined);

    const firstMenuLabelMap = {
        oilProductionPlan: '收油生产计划',
        hairOilProductionPlan: '发油生产计划',
        backflowProductionPlan: '倒灌生产计划',
        mixingProductionPlan: '搅拌生产计划',
    };

    const renderFirstMenuContent = () => {
        switch (firstMenu) {
            case 'oilProductionPlan':
                return <OilProductionPlan />;
            case 'hairOilProductionPlan':
                return <HairOilProductionPlan />;
            case 'backflowProductionPlan':
                return <BackflowProductionPlan />;
            case 'mixingProductionPlan':
                return <MixingProductionPlan />;
            default:
                return null;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.topBar}>
                <div
                    className={styles.currentLabel}
                >
                    当前：{firstMenuLabelMap[firstMenu] || '未选择'}
                </div>
                <div className={styles.selectsWrapper}>
                    <Select
                        className={styles.topSelect}
                        value={firstMenu}
                        onChange={setFirstMenu}
                        options={[
                            { label: '收油生产计划', value: 'oilProductionPlan' },
                            { label: '发油生产计划', value: 'hairOilProductionPlan' },
                            { label: '倒灌生产计划', value: 'backflowProductionPlan' },
                            { label: '搅拌生产计划', value: 'mixingProductionPlan' },
                        ]}
                    />
                    <Select
                        className={styles.topSelect}
                        value={secondMenu}
                        onChange={setSecondMenu}
                        placeholder="发油生产计划"
                        options={[]}
                        disabled
                    />
                    <Select
                        className={styles.topSelect}
                        value={thirdMenu}
                        onChange={setThirdMenu}
                        placeholder="倒灌生产计划"
                        options={[]}
                        disabled
                    />
                    <Select
                        className={styles.topSelect}
                        value={fourthMenu}
                        onChange={setFourthMenu}
                        placeholder="搅拌生产计划"
                        options={[]}
                        disabled
                    />
                </div>
            </div>

            {renderFirstMenuContent()}
        </div>
    );
};

export default ProductionPlanManagement;