import { useModel } from '@umijs/max';
import { TreeSelect } from 'antd';
import { useEffect } from 'react';

function DepartmentField(props) {
  const { value, onChange, disabled = false } = props;
  const { depList, run, loading } = useModel('depList');

  const onChangeValue = (newValue) => {
    onChange(String(newValue));
  };
  useEffect(() => {
    run();
  }, []);

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

export default DepartmentField;
