import React, { useState, useEffect } from "react";
import { AutoComplete ,Input } from "antd";
import { doFetch } from "@/utils/doFetch";
import { useRequest } from "ahooks";

export default (item) => {
  const { requestOptions ,name,value,onChange } = item;
  const [options, setoptions] = useState([]);
  const [username, setusername] = useState();
//   const [value, setvalue] = useState();
  const { data, run, runAsync } = useRequest(
    async () => {
      let res = await doFetch({
        url: requestOptions?.url ?? "",
        // params: { [requestOptions.params]: username },
        params: requestOptions.params && { [requestOptions.params]: username },
      });
      return res?.data?.dataList;
    },
    {
      manual: true,
      debounceWait: 300,
    }
  );
  useEffect(() => {
    runAsync()
      .then((data) => {
        const options = data?.map((it) => ({
          ...it,
          label: `${it?.username}-${it?.fullName}-${it?.phone}-${it?.mailbox}`,
          value: `${it?.username}-${it?.fullName}-${it?.phone}-${it?.mailbox}`,
        }));
        setoptions(options);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [username]);

  const onChangeHandle = (val) => {
    setusername(val)
    onChange(val)   
    // setvalue(val);
  };
  const selectValue = (val) => {
    console.log(val);
    onChange(val)   
  };
  return (
    <AutoComplete
      allowClear
      placeholder={item.title}
      disabled={item.disabled}
      options={options}
      onChange={onChangeHandle}
      onSelect={selectValue}
      value={value}
      
    />
  );
};
