import React, { useState } from 'react';
import { Select } from 'antd';
import styles from './CustomerInfoManagementDetail.less';
import BasicInfo from './second_customer_components/BasicInfo';
import BusinessInfo from './second_customer_components/BusinessInfo';
import LogisticsInfo from './second_customer_components/LogisticsInfo';
import CooperateRecord from './second_customer_components/CooperateRecord';

const CustomerInfoManagementDetail = ({ data }) => {
    // 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
    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: '基础信息',
        business: '业务信息',
        logistics: '物流信息',
        cooperate: '合作记录',
    };

    const renderFirstMenuContent = () => {
        switch (firstMenu) {
            case 'basic':
                return <BasicInfo data={data} />;
            case 'business':
                return <BusinessInfo data={data} />;
            case 'logistics':
                return <LogisticsInfo data={data} />;
            case 'cooperate':
                return <CooperateRecord data={data} />;
            default:
                return null;
        }
    };

    return (
        <div className={styles.container}>
            {/* 客户基本信息展示 */}
            {!data ? (
                <div className={styles.emptyInfo}>
                    暂无客户数据，请从列表页选择一个客户查看详情。
                </div>
            ) : (
                <div className={styles.detailHeader}>
                    <div className={styles.detailTitle}>{data?.customerName ?? '-'}</div>
                    <div className={styles.detailSubTitle}>客户ID：{data?.customerId ?? data?.id ?? '-'}</div>
                </div>
            )}
            <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: 'business' },
                            { label: '物流信息', value: 'logistics' },
                            { label: '合作记录', value: 'cooperate' },
                        ]}
                    />
                    <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 CustomerInfoManagementDetail;

