import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less';
import { Select, Spin } from 'antd';
//import { mapListData } from '@/hooks/useMapList';
import { SearchOutlined } from '@ant-design/icons';
import { useModel } from 'umi';
type mapResType = {
  id: string;
  localName: string;
  [key: string]: any;
};
import { querySpace } from '@/services/sagacare_service/environment';
import { projectObj } from '@/config/api.js';
const { Option } = Select;

type SearchInputProps = {
  // callbackSearch: (s: any) => void;
  //mapList: API.MapInfo[];
};
const SearchInput: React.FC<SearchInputProps> = () => {
  const [matchData, setMatchData] = useState<mapResType[]>([]);
  const [value, setValue] = useState<any>();
  const { changeSearchBuildId, changeSearchFloorId, changeSearchText } =
    useModel('sagacare_searchInfo');
  const [loading, setLoading] = useState<boolean>(false);
  const ref = useRef<any>(0);
  const searchQuery = (value: string) => {
    if (ref.current) {
      clearTimeout(ref.current);
    }

    function fake() {
      setLoading(true);
      var paramsObj = {
        criteria: {
          projectId: projectObj.projectId,
          localName: {
            $like: `%${value}%`,
          },
        },
      };
      //搜索
      querySpace(paramsObj).then((res) => {
        var resContent = res.content || [];
        console.log('setMatch', 'data');
        setMatchData(resContent);
        setLoading(false);
      });
    }
    // debugger;
    if (value) {
      //防抖
      ref.current = setTimeout(fake, 600);
    } else {
      setMatchData([]);
    }
  };
  //这是搜索 的下拉列表的显示
  const handleSearch = (value: string) => {
    //if (value) {
    searchQuery(value);
    // } else {
    //   setMatchData([]);
    // }
  };

  //这是搜索的下拉列表的点击
  const handleChange = (sel: string) => {
    setValue(null); //清空输入的值
    setMatchData([]); //清空搜索匹配列表
    var filterItem = matchData.filter((item) => {
      return item.id == sel;
    });
    var resItem = filterItem[0] || {};
    //callbackSearch(resItem);
    //搜索内容改变
    changeSearchText({ text: resItem.localName });
    //改变存储的搜索得到的buildingId floorId
    changeSearchBuildId(resItem.buildingId);
    changeSearchFloorId(resItem.floorId);
  };
  const handelInputKeyDown = (e) => {
    // 如果点击回车的操作
    //console.log('keydown', matchData);
    if (e.code == 'Enter') {
      //if (matchData.length == 1) {
      var resItem = matchData[0] || {};
      //callbackSearch(resItem);
      changeSearchText({ text: resItem.localName });
      changeSearchBuildId(resItem.buildingId);
      changeSearchFloorId(resItem.floorId);
      //}
    }
  };

  return (
    <div className={styles.headerSearch}>
      {/* <SearchOutlined style={{ fontSize: 16 }} /> */}
      <Select
        showSearch
        value={value}
        placeholder="搜索空间"
        defaultActiveFirstOption={false}
        filterOption={false}
        onSearch={handleSearch}
        onChange={handleChange}
        onInputKeyDown={handelInputKeyDown}
        notFoundContent={null}
        bordered={false}
        loading={loading}
        style={{ width: 150, borderColor: '#c4c4c4' }}
        //   suffixIcon={
        //     <AudioOutlined
        //       style={{
        //         fontSize: 16,
        //         color: '#1890ff',
        //       }}
        //     />
        //   }
      >
        {matchData.length > 0 &&
          matchData.map(function (item, index) {
            return <Option key={item.id}>{item.localName}</Option>;
          })}
      </Select>
    </div>
  );
};

export default SearchInput;
