import React, { useState } from 'react';
import { Card, Select } from 'antd';
import styles from './OilDataManagement.less';
import BasicInfo from './BasicInfo';
import PhysChem from './PhysChem';

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

    return (
        <div className={styles.container}>
            <div className={styles.topBar}>
                <div className={styles.currentLabel}>当前：</div>
                <Select
                    className={styles.topSelect}
                    value={firstMenu}
                    onChange={setFirstMenu}
                    options={[
                        { label: '基本信息', value: 'basic' },
                        { label: '理化性质', value: 'physchem' },
                    ]}
                />
                <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
                />
                <Select
                    className={styles.topSelect}
                    value={fifthMenu}
                    onChange={setFifthMenu}
                    placeholder="审计日志"
                    options={[]}
                    disabled
                />
            </div>

            {firstMenu === 'basic' ? <BasicInfo /> : <PhysChem />}
        </div>
    );
};

export default OilDataManagement;

