import { postServiceConstListInvoiceDetailNames } from '@/services';
import { Select, Tooltip } from 'antd';
import { useState } from 'react';

export const InvoiceProjectSelect = ({ readOnly, value, onChange }) => {
  const [options, setOptions] = useState<any[]>([]);
  // 定义防抖函数
  let timeoutId = null;
  const fetchOptions = async (keywords) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(async () => {
      const res = await postServiceConstListInvoiceDetailNames({
        data: {
          nameLike: keywords,
        },
      });
      const data = res.data;

      setOptions(
        data.map((item) => {
          console.log(item);
          return {
            key: item.id,
            label:
              '*' +
              item.productAndServiceCatagoryAbbreviation +
              '*' +
              item?.name,
            value:
              '*' +
              item.productAndServiceCatagoryAbbreviation +
              '*' +
              item?.name,
            ...item,
          };
        }),
      );
      // 这里可以放置实际的搜索逻辑，比如发起网络请求等
    }, 500); // 设置延迟时间，单位毫秒
  };

  return readOnly ? (
    <Tooltip title={value}>{value}</Tooltip>
  ) : (
    <Select
      key="project"
      /*readonly={readonly}*/
      showSearch
      placeholder="请选择开票项目"
      filterOption={(input, option) => (option?.label ?? '').includes(input)}
      onChange={(e) => {
        onChange(e);
      }}
      defaultValue={value}
      options={options}
      onSearch={(e) => {
        fetchOptions(e);
      }}
    />
  );
};