import { ProFormSelect } from '@ant-design/pro-components';
import { debounce } from 'lodash';
import { memo, useState } from 'react';
import { fetchDepartName } from '../server';
interface TypeDepartSelect {
  /**
   * @description placeholder
   */
  placeholder?: string;
  /**
   * @description 默认300
   */
  width?: number | string;
  /**
   * @description 默认单选
   */
  mode?: 'multiple' | 'tags' | undefined;
  rules?: any[];
  [propName: string]: any;
}
const DepartSelect = ({
  placeholder,
  width = 300,
  mode,
  label,
  rules,
  ...props
}: TypeDepartSelect) => {
  // const { placeholder,width=300, mode="multiple",label }: TypeDepartSelect = props
  const [departoptions, setDepartOptions] = useState([]);
  const debounceDepart = async (value) => {
    if (!value) {
      return;
    }
    const res = await fetchDepartName(value);
    const list =
      Array.isArray(res.data) &&
      res.data.map((item) => {
        return {
          ...item,
          value: item?.departId,
          label: item?.departPath?.reverse().join('-'),
        };
      });
    setDepartOptions(list);
  };
  const onSearch = debounce(function (val) {
    debounceDepart(val.trim());
  }, 500);
  return (
    <ProFormSelect
      name="depart"
      label={label}
      style={{ width: width }}
      mode={mode}
      rules={rules}
      fieldProps={{
        showSearch: true, // 启用搜索功能
        placeholder: placeholder,
        filterOption: false, // 禁用本地过滤，将远程请求的数据全部展示
        onSearch: onSearch, // 搜索时触发的回调函数
        options: departoptions,

        ...props,
      }}
    />
  );
};
export default memo(DepartSelect);