import React,{ useEffect, useState} from 'react';
import {getConditionList} from '@/api/situation.js';
import './condition.less';
import { Tabs,Tree } from 'antd';



const { TabPane } = Tabs;
const { TreeNode, DirectoryTree } = Tree;

const treeData2 = [
      {
        child: [
            {
                child: [
                    {
                     description: "",
                     id: 21,
                     name: "住院",
                     parentId: 20,
                     child:[
                       {
                         child: [],
                         description: "",
                         id: 23,
                         name: "RCC",
                         parentId: 21
                       }
                     ]
                    }
                 ],
                 description: "",
                 id: 20,
                 name: "急诊",
                 parentId: 0
            }
        ],
        description: "测试条件",
        id: 6042,
        name: "测试条件22",
        parentId: 0
       },
       {
        child: [
           
        ],
        description: "",
        id: 201,
        name: "急诊2",
        parentId: 0
       }
];

const Condition = (props)=>{
    const {updateCreateFlowState,getCreateFlowState} = props;
    const [treeData,set_treeData] = useState([]);
    const [currentTabIndex,set_currentTabIndex] = useState(1);

    const onChange = (e)=>{
        //  console.log({e});
        set_currentTabIndex(e)
         if(updateCreateFlowState){
            updateCreateFlowState({
                'state':{
                    depType:parseInt(e),//depType=1  门诊  2 急诊
                    conditionIds:[],//切换tab重置选中
                }  

            })
         }
    }

    const getConditions = async ()=>{
         let data = await getConditionList();
         console.log({data});
         set_treeData(data.data.data);
    }

    useEffect(()=>{
        getConditions();
    },[]);
    
    return (
        <div className="selectCondition">
                    <h1>请选择追踪条件（可多选）</h1>
                    <div className="conditionWrap">
                        <Tabs defaultActiveKey="1" size="large" onChange={onChange}>
                            
                            <TabPane tab="门诊" key="1">
                                {
                                    currentTabIndex==1&&<TreeMap updateCreateFlowState={updateCreateFlowState} getCreateFlowState={getCreateFlowState} treeData={treeData} />
                                }
                            </TabPane>
                            <TabPane tab="急诊" key="2">
                                {
                                    currentTabIndex==2&&<TreeMap updateCreateFlowState={updateCreateFlowState} getCreateFlowState={getCreateFlowState} treeData={treeData2} />
                                }
                            </TabPane>
                        </Tabs>
                    </div>
        </div>
    )
}

const TreeMap = (props)=>{
    
    const {treeData,updateCreateFlowState,getCreateFlowState} = props;
    
    const [treeState,set_treeState] = useState({
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
    });
    
    const onExpand = expandedKeys => {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        set_treeState({
            ...treeState,
            expandedKeys,
            autoExpandParent: false,
        });
    };

    const optionsHandle = (arr, conditionIds)=>{
        let options = [...arr].map((item)=>{
            return {
                ...item,
                selectFlag: conditionIds.includes((item.id).toString()),
                child: optionsHandle(item.child, conditionIds)
            }
        });
        // console.log({options});
        return options;
    }
    
    const  onCheck = checkedKeys => {
        console.log('onCheck', checkedKeys);
        set_treeState({
            ...treeState,
            checkedKeys
        });
        updateCreateFlowState({
            'state':{
                filterCondition:optionsHandle(treeData,checkedKeys),
                conditionIds:checkedKeys
            }
        })
    };
    
    const  onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        set_treeState({
            ...treeState,
            selectedKeys
        });
    };
    
    const renderTreeNodes = (data)=>{
        let checkedIds = [];
        let node=data.map(item => {
            // console.log({item});
     
            if (item.child&&item.child.length>0) {
              return (
                <TreeNode title={item.name} key={item.id} dataRef={item} >
                  {renderTreeNodes(item.child)}
                </TreeNode>
              );
            }
            return <TreeNode key={item.id} title={item.name} />;
        });
        
        return node;
    }

    useEffect(()=>{
        //获取已选择的条件
        const {conditionIds,isEdit} = getCreateFlowState(); 
        set_treeState({
            ...treeState,
            checkedKeys:conditionIds
        });
    },[]);

    return (
        <div className="conditionTree">
               <Tree
                    checkable
                    onExpand={onExpand}
                    expandedKeys={treeState.expandedKeys}
                    autoExpandParent={treeState.autoExpandParent}
                    onCheck={onCheck}
                    checkedKeys={treeState.checkedKeys}
                    onSelect={onSelect}
                    selectedKeys={treeState.selectedKeys}
                >
                    {treeData.length>0&&renderTreeNodes(treeData)}
                </Tree>
        </div>
    )
}


export default Condition;


