import React, { useEffect, useState } from 'react';
import { Modal, Button, Descriptions, Tree } from 'antd';
import { detail, treeList } from "../services";
import type { DataNode } from 'antd/es/tree';
// 基本信息类型
interface CategoryInfo {
    name?: string;
    validDate?: string;
    manager?: string;
    structure?: string;
    termOfValidity?: string;
    deptId?: string;
    area?: string;
}
interface LockNode extends DataNode {
    key: string;
    title: string;
    categoryLibraryId: string;
    categoryId: string;
    lockType: string;
    children?: LockNode[];
}
const SupplierAddModal: React.FC<{
    visible: boolean;
    storeId: string;
    onCancel: () => void;
}> = ({ visible, storeId, onCancel }) => {
    // 已勾选的供应商 id
    // 品类库基本信息
    const [categoryInfo, setCategoryInfo] = useState<CategoryInfo>({});
    const [treeData, setTreeData] = useState<LockNode[]>([]);
    const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    // 拉取基本信息
    const fetchCategoryInfo = async () => {
        if (!storeId) return;
        const res = await detail({ id: storeId });
        if (res.code === 200 && res.data) setCategoryInfo(res.data);

        // const treeRes = await treeList({ categoryLibraryId: storeId });
        // if (treeRes.code === 200 && treeRes.data) {


        //     // categoryIds
        //     const formatted = formatData(res.data)
        //     // setTreeData();
        // }


    };
    const formatData = (list: any[]): LockNode[] => {
        return list.map(item => ({
            key: item.categoryId,
            title: item.categoryName,
            categoryId: item.categoryId,
            categoryLibraryId: item.categoryLibraryId,
            lockType: item.lockType ? item.lockType : '0',
            children: item.categoryList ? formatData(item.categoryList) : [],
        }));
    };
    useEffect(() => {
        if (visible) {
            fetchCategoryInfo();
        }
    }, [visible, storeId]);

    return (
        <Modal
            title="审核记录"
            visible={visible}
            onCancel={onCancel}
            footer={[
                <Button key="cancel" onClick={onCancel}>取消</Button>,
            ]}
            width={820}
            bodyStyle={{ padding: 24 }}
            destroyOnClose
        >
            {/* 基本信息区 */}
            <div style={{ marginBottom: 18 }}>
                <Descriptions
                    title="品类库基本信息"
                    bordered
                    column={1}
                    size="small"
                    style={{ marginBottom: 18, background: '#fff', borderRadius: 4 }}
                    labelStyle={{ width: 110, fontWeight: 500 }}
                >
                    <Descriptions.Item label="品类库名称">
                        {categoryInfo?.name || '-'}
                    </Descriptions.Item>
                    <Descriptions.Item label="有效期至">
                        {categoryInfo?.termOfValidity || '-'}
                    </Descriptions.Item>
                    <Descriptions.Item label="负责部门">
                        {categoryInfo?.deptId || '-'}
                    </Descriptions.Item>
                    <Descriptions.Item label="区域">
                        {categoryInfo?.area || '-'}
                    </Descriptions.Item>


                    <Descriptions.Item label="品类结构">
                        <Tree
                            treeData={treeData}
                            selectable={false}
                            expandedKeys={expandedKeys}
                            autoExpandParent={autoExpandParent}
                            onExpand={(keys) => {
                                setExpandedKeys(keys as string[]);
                                setAutoExpandParent(false);
                            }}
                        />




                    </Descriptions.Item>






                </Descriptions>
            </div>
        </Modal>
    );
};

export default SupplierAddModal;
