import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { OrganizationGraph } from '@ant-design/graphs';
import { nanoid } from 'nanoid'
import quickAPI from "../../service";
import indexStyles from "../../index.less";
import { message } from 'antd';


/**
 * 确认配置
 * @returns 
 */
const ConfirmConfig = (props) => {

    const [orgData, setOrgData] = useState({
        // 门店
        id: props.storeConfig.id,
        value: {
            name: props.storeConfig.name,
        },
        // 设备
        children: [
            {
                id: props.deviceConfig.id,
                value: {
                    name: props.deviceConfig.deviceName,
                },
                //菜谱
                children: []
            }
        ]
    });


    const initOrgData = () => {
        const tempData = JSON.parse(JSON.stringify(orgData));
        props.foodMenuConfig.forEach((foodMenu, foodMenuIndex) => {
            tempData.children[0].children[foodMenuIndex] = {
                id: nanoid(),
                value: {
                    name: foodMenu.name,
                },
                children: []
            }
            foodMenu?.goodsConfig.forEach((foodItem, foodIndex) => {
                tempData.children[0].children[foodMenuIndex].children[foodIndex] = {
                    id: nanoid(),
                    value: {
                        name: foodItem.name,
                    },
                    children: []
                }
                foodItem?.bomConfig.forEach((bomItem, bomIndex) => {
                    tempData.children[0].children[foodMenuIndex].children[foodIndex].children[bomIndex] = {
                        id: nanoid(),
                        value: {
                            name: bomItem.name,
                        },
                        children: []
                    }
                    bomItem?.materialConfig.forEach((materialItem, materialIndex) => {
                        tempData.children[0].children[foodMenuIndex].children[foodIndex].children[bomIndex].children[materialIndex] = {
                            id: nanoid(),
                            value: {
                                name: materialItem.name,
                            }
                        }
                    });
                });
            });
        });
        setOrgData(tempData);
    }

    useEffect(() => {
        initOrgData();
    }, []);



    return <>
        <OrganizationGraph style={{ width: '100%', height: 'auto' }} data={orgData} behaviors={['drag-canvas', 'zoom-canvas']} nodeCfg={{ autoWidth: true }} />
    </>
}

export default ConfirmConfig;
