/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-07-16 14:33:12
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-10-09 17:10:11
 * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/indicatorMana/TreeDirectory/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


import { Divider, Tree } from 'antd';
import { DataNode, DirectoryTreeProps } from 'antd/es/tree';
import React, { Key, useEffect, useState } from 'react'

import './style.less';

const { DirectoryTree } = Tree;









const TreeDirectory = ({ data,onSelectChange }: { data: any[];onSelectChange?:(selectedNode:any)=>void }) => {


    const [defaultExpandedKeys,set_defaultExpandedKeys] = useState<Key[]>([]);
    const [defaultSelectedKeys,set_defaultSelectedKeys] = useState<string[]>([]);


    const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
        // console.log('Trigger Select', keys, info);
        onSelectChange&&onSelectChange(info.node);
    };

    const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
        // console.log('Trigger Expand', keys, info);
        set_defaultExpandedKeys(keys)
    };


    useEffect(()=>{

        const getName:any = (obj:any)=>{
            let isArr = Array.isArray(obj);
            let reslut = [];
            if(isArr){
                obj.forEach((item: any) => {
                    reslut.push(...getName(item));
                });
            }else{
                reslut.push(obj.code)
                if(obj.children){
                    reslut.push(...getName(obj.children));
                }
            }
            return reslut;
        }

            
           if(data.length>0){
                 const keys = getName(data);               
                 set_defaultExpandedKeys(keys);
                 set_defaultSelectedKeys([data[0].children[0].code]);
                 onSelectChange&&onSelectChange({code:data[0].children[0].code});
           } 
    },[data]);


    useEffect(()=>{
         
    },[defaultExpandedKeys])


    return (
        <div className='TreeDirectory'>
            {
                (data.length > 0&&defaultExpandedKeys.length>0) && (
                    <DirectoryTree
                        // multiple
                        blockNode
                        height={750}
                        rootStyle={{overflow:'hidden',whiteSpace: 'nowrap', textOverflow: 'ellipsis',width:'100%'}}
                        fieldNames={{ title: 'name', key: 'code' }}
                        expandedKeys={defaultExpandedKeys}
                        // defaultExpandedKeys={defaultExpandedKeys}
                        defaultSelectedKeys={defaultSelectedKeys}
                        // expandedKeys={defaultExpandedKeys}
                        onSelect={onSelect}
                        onExpand={onExpand}
                        treeData={data}
                        // titleRender={(nodeData) => {
                        //     return (
                        //         <span style={{ display: 'inline-block', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', width: '70%',height:30 }}>{nodeData.name}</span>
                        //     )
                        // }}
                    />
                )
            }
        </div>
    )
}

export default TreeDirectory