import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Select } 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/ant-design-pro/environment';

const { Option } = Select;

type SearchInputProps = {
  // callbackSearch: (s: any) => void;
  mapList: API.MapInfo[];
};
const SearchInput: React.FC<SearchInputProps> = ({ mapList }) => {
  const [matchData, setMatchData] = useState<mapResType[]>([]);
  const [value, setValue] = useState<any>();
  const { projectId } = useModel('spaceFunc');
  const { changeSearchBuildId, changeSearchFloorId, changeSearchText } = useModel('searchInfo');

  //这是搜索 的下拉列表的显示
  const handleSearch = (value: string) => {
    if (value) {
      // let data: mapResType[] = [];
      //   mapList.map((item, index) => {
      //     if ((item.localName || '').indexOf(value) > -1) {
      //       data.push({
      //         text: item.localName,
      //         value: item.localName,
      //       });
      //     }
      //   });
      var paramsObj = {
        criteria: {
          projectId: projectId,
          localName: {
            $like: `%${value}%`,
          },
        },
      };

      querySpace(paramsObj).then((res) => {
        var resContent = res.content || [];
        console.log('setMatch', 'data');
        setMatchData(resContent);
      });
    } 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}
        showArrow={false}
        filterOption={false}
        onSearch={handleSearch}
        onChange={handleChange}
        onInputKeyDown={handelInputKeyDown}
        notFoundContent={null}
        bordered={false}
        style={{ width: 150, borderColor: '#c4c4c4' }}
        //   suffixIcon={
        //     <AudioOutlined
        //       style={{
        //         fontSize: 16,
        //         color: '#1890ff',
        //       }}
        //     />
        //   }
      >
        {matchData.length > 1 &&
          matchData.map(function (item, index) {
            return <Option key={item.id}>{item.localName}</Option>;
          })}
      </Select>
    </div>
  );
};

export default SearchInput;
