import React, { useState } from 'react';
import { Select } from 'antd';
import styles from './DataModeling.less';
import BasicAttribute from './second_datamodel_components/BasicAttribute';
import HierarchyStructure from './second_datamodel_components/HierarchyStructure';
import RealtimeData from './second_datamodel_components/RealtimeData';
import HistoryTrend from './second_datamodel_components/HistoryTrend';
import ChangeRecord from './second_datamodel_components/ChangeRecord';

const DataModeling = () => {
    // 顶部一行选择：第一个为"基本属性/层级结构"，其余占位
    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);

    const firstMenuLabelMap = {
        basic: '基本属性',
        hierarchy: '层级结构',
        realtime: '实时数据',
        history: '历史趋势',
        change: '变更记录',
    };

    const renderFirstMenuContent = () => {
        switch (firstMenu) {
            case 'basic':
                return <BasicAttribute />;
            case 'hierarchy':
                return <HierarchyStructure />;
            case 'realtime':
                return <RealtimeData />;
            case 'history':
                return <HistoryTrend />;
            case 'change':
                return <ChangeRecord />;
            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: 'basic' },
                            { label: '层级结构', value: 'hierarchy' },
                            { label: '实时数据', value: 'realtime' },
                            { label: '历史趋势', value: 'history' },
                            { label: '变更记录', value: 'change' },
                        ]}
                    />
                    <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>
            </div>

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

export default DataModeling;

