import React, { Fragment, useEffect, useState } from 'react';
import { Input, Tree } from 'antd';
import Shell from '@/baseComponent/Shell';
import BlockTitle from '@/baseComponent/BlockTitle';
import { getListByTreeList } from '@/webPublic/Services';

const { TreeNode } = Tree;


const renderTreeNodes = data =>
  data.map(item => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key} dataRef={item}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode key={item.id} {...item} dataRef={item} />;
  });

export default function AppTypeTreeAsyncLoad(props) {
	const { groupId, changeSearch, selectKey } = props;
	const [treeData, setTreeData] = useState([]);
	const [loading, setLoading] = useState(false);
	const [name, setName] = useState(''); // 搜索应用

  // useEffect(() => {
  //   if(groupId){
  //     setName('');
  //   }
  // }, [groupId]);

	useEffect(
		() => {
			if (groupId) {
			  setLoading(true);
				getListByTreeList({
					groupId,
					name,
				}).then((res) => {
          setLoading(false);
          if (res && res.length) {
						setTreeData(res);
						changeSearch({
							selectKey: res[0].id + '',
						});
					} else {
						setTreeData([]);
						changeSearch({
							selectKey: '',
						});
					}
				});
			}
		},
		[groupId, name],
	);

	const onSelect = (selectedKeys, info) => {
    changeSearch({
      selectKey: selectedKeys[0],
    });
  };

	const inputList = () => {
    return (
      <Input.Search
        placeholder={'应用名称搜索'}
        onSearch={(value) => {
          setName(value);
        }}
        style={{ marginLeft: '10px', width: '150px' }}
      />
    );
  };

	const onLoadData = treeNode =>
    new Promise(resolve => {
      if (treeNode.props.children || !treeNode.props.id) {
        resolve();
        return;
      }
      getListByTreeList({
        groupId,
        name,
        parentId: treeNode.props.id,
      }).then((res) => {
        if(res && res.length){
          treeNode.props.dataRef.children = res.map((g) => {
            return {
              title: g.title,
              key: g.id,
              isLeaf: g.isLeaf,
            };
          });
        }
        setTreeData([...treeData]);
        resolve();
      });
    });

	return (
    <Fragment>
      <Shell
        styleShell={{
          borderRight: '1px solid rgba(210,210,210,1)',
          minHeight: document.body.clientHeight - 150,
          backgroundColor: '#fff',
          overflowX: 'auto',
          marginTop: 0,
        }}>
        <BlockTitle title={'应用'} isSmall={true} dom={inputList()} />
        <Tree
          onSelect={onSelect}
          selectedKeys={[selectKey]}
          style={{ minHeight: '400px,' }}
          loadData={onLoadData}
          disabled={loading}>
          {renderTreeNodes(treeData)}
        </Tree>
      </Shell>
    </Fragment>
  )
}
