/*
 * @Author: your name
 * @Date: 2021-09-07 16:40:33
<<<<<<< HEAD
 * @LastEditTime: 2022-03-04 17:30:38
=======
 * @LastEditTime: 2022-03-04 18:35:37
>>>>>>> master
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsFileTree/components/directoryTree.tsx
 */
import React, { useState,useEffect } from 'react'
import { ReactNode } from 'react';
import './index.less'




type DirectoryTreeProps = {

    defaultCollapsed?:boolean,
    nodeLabel:ReactNode,
    className?:string,
    itemClassName?:string,
    childrenClassName?:string,
    treeViewClassName?:string,
    onClick?:(args:object)=>void,
    [propName: string]: any
}

type childTree = {
    title: string,
    id: string,
    isLeaf:boolean,
    code:string,
    children?: childTree[],
    [propName: string]: any;
}

const DirectoryTree: React.FC<DirectoryTreeProps> = (props) => {

    
    const {
        className = '',
        itemClassName = '',
        treeViewClassName = '',
        childrenClassName = '',
        nodeLabel,
        children,
        defaultCollapsed,
        currentActivedIndex,
        setcurrentActivedIndex,
        isLeaf,
        action,
        ...rest
    } = props;
    
    //是否展开   true合上反之展开
    const [collapsed, setCollapsed] = useState(defaultCollapsed);
    

    let arrowClassName = 'treeViewArrow';

    let containerClassName = 'treeViewChildren';

    if (collapsed) {
        arrowClassName += ' treeViewArrowCollapsed';
        containerClassName += ' treeViewChildrenCollapsed';
    }


    const handleClick = (args:childTree)=>{
        setcurrentActivedIndex(args.id);
        setCollapsed(!collapsed)
        if (rest.onClick) {
            rest.onClick(args);
        }
    }
    
    const arrow = (
        <div
            className={className + ' ' + arrowClassName}
        />
    );
    
    useEffect(() => {
        //当文件夹结点设置默认展开项时触发
  
    }, [])

    return (
        <div className={'treeView ' + treeViewClassName}>
            <div className={props.currentActivedIndex==props.id?'treeViewItem actived':'treeViewItem'} onClick={()=>handleClick({
                  title:props.title,
                  id:props.id,
                  isLeaf:false,
                  code:props.code,
            })}>
                <div className={props.currentActivedIndex==props.id&&action?'inner showActionBtn':'inner'}>
                    {arrow}
                    {nodeLabel}
                </div>
                
                {/**
                 *  点击时展示
                 */}
                { props.currentActivedIndex==props.id&&action}
            </div>
            <div className={containerClassName + ' ' + childrenClassName}>
                {collapsed ? null : children}
            </div>
        </div>
    )
}

export default DirectoryTree;