import { TreeSelect } from 'antd';
import React, { useState, useEffect } from 'react';
import { queryDDdepList } from '@/services/boom';
import { connect } from 'dva';

function DepartmentField(props) {
  const { value = [], onChange, depUserTree } = props;
  const [treeData, setTreeData] = useState([]);

  const genTreeNode = dep => {
    return {
      id: dep.dept_id,
      pId: dep.parent_id,
      value: dep.dept_id,
      title: dep.name,
      isLeaf: false,
    };
  };

  const onLoadData = async ({ id }) => {
    let depList = await queryDDdepList({ dept_id: id });

    console.log(depList);
    if (depList.length > 0) {
      let nodes = depList.map(genTreeNode);
      setTreeData([...treeData, ...nodes]);
    }
  };

  const onChangeValue = newValue => {
    onChange(newValue);
  };

  return (
    <TreeSelect
      showSearch
      multiple
      allowClear
      defaultValue={value}
      dropdownStyle={{
        maxHeight: 400,
        overflow: 'auto',
      }}
      style={{ width: '100%' }}
      placeholder="请选择部门"
      treeData={depUserTree}
      onChange={onChangeValue}
    />
  );
}

export default connect(({ user }) => ({ depUserTree: user.depUserTree }))(DepartmentField);