import React, { useState, useEffect } from 'react';
import mapstyles from '@/assets/css/map.less';
import { useModel } from 'umi';

import cx from 'classnames';
import Icon from '@/tenants-ui/Icon';

type MapProps = {
  type: string;
  searchText: any;
  selFloorId?: string;
  render: (item: API.MapInfo, index: number) => React.ReactNode;
  mapList: API.MapInfo[];
};

const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList }) => {
  //useModel 注释掉 不用啦 晚会删
  // const { mapList, getMapListData } = useModel('map');
  //   useEffect(() => {
  //     getMapListData(selFloorId);
  //   }, [selFloorId]);

  const [startPageX, setStartPageX] = useState<number>(0);
  const [startPageY, setStartPageY] = useState<number>(0);

  const [translateX, setTranslateX] = useState<number>(0);
  const [translateY, setTranslateY] = useState<number>(0);
  const [mscale, setMscale] = useState<number>(1);
  const [canMove, setCanMove] = useState<boolean>(false);

  const [mapKey, setMapKey] = useState<number>(0);
  //   let mapWidth: number = 3000,
  //     mapHeight: number = 1200;

  const mouseDownEvent = (event: React.MouseEvent) => {
    // startPageX = event.pageX;
    //startPageY = event.pageY;
    setStartPageX(event.pageX);
    setStartPageY(event.pageY);
    //console.log('mouseDownEvent', startPageX, event.pageY);
    setCanMove(true);
  };
  const mouseUpEvent = (event: React.MouseEvent) => {
    //console.log('mouseUpEvent', event);
    setCanMove(false);
  };
  const mouseMoveEvent = (event: React.MouseEvent) => {
    if (canMove) {
      let nowPageX = event.pageX;
      let nowPageY = event.pageY;
      setTranslateX(translateX + nowPageX - startPageX);
      setTranslateY(translateY + nowPageY - startPageY);
      //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
      // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);

      setStartPageX(event.pageX);
      setStartPageY(event.pageY);
    }
  };
  const mapZoom = (event: React.MouseEvent) => {
    event.stopPropagation();
    if (mscale < 1.6) {
      setMscale(mscale + 0.1);
    }
  };
  const mapReduce = (event: React.MouseEvent) => {
    event.stopPropagation();
    //console.log('mapReduce', mscale);
    if (mscale > 0.3) {
      setMscale(mscale - 0.1);
    }
  };

  //实现搜索 搜索时 出现结果
  useEffect(() => {
    //console.log('searchText', searchText);

    //searchText使用对象 防止修改了 不再重新定位
    if (searchText && searchText.text) {
      let left: any = 0,
        top: any = 0;

      debugger;
      //   mapList.map((item, index) => {
      //     if (item.localName == (searchText && searchText.text)) {
      //       left = -(item.left || 0);
      //       top = -(item.top || 0);
      //     }
      //   });
      var filterItem = mapList.filter((item) => {
        return item.localName == (searchText && searchText.text);
      });

      if (filterItem.length == 0) {
        return;
      } else {
        left = -(filterItem[0].left || 0);
        top = -(filterItem[0].top || 0);
        setTranslateX(left);
        setTranslateY(top);
      }
    }
  }, [searchText, mapList]);

  useEffect(() => {
    //debugger;
  }, [mapList]);

  //   useEffect(() => {// todo 要不要用呢
  //     document.querySelector('#root').addEventListener(
  //       'mouseup',
  //       function () {
  //         console.log('mouseUpEvent');
  //         setCanMove(false);
  //       },
  //       true,
  //     );
  //   }, []);

  return (
    <div
      className={mapstyles.mapwrap}
      onMouseDown={(event) => {
        mouseDownEvent(event);
      }}
      onMouseUp={(event) => {
        mouseUpEvent(event);
      }}
      onMouseMove={(event) => {
        mouseMoveEvent(event);
      }}
    >
      <div
        className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}
        style={{
          transform: `translate(${translateX}px,${translateY}px) scale(${mscale},${mscale})`,
        }}
      >
        {mapList.map(function (item, index) {
          return render(item, index);
        })}
      </div>
      <div className={mapstyles.mapControl}>
        <div
          className={mapstyles.zoom}
          onClick={(event) => {
            mapZoom(event);
          }}
        >
          <Icon className="" type="zoom"></Icon>
        </div>
        <div
          className={mapstyles.zoom}
          onClick={(event) => {
            mapReduce(event);
          }}
        >
          <Icon className="" type="reduce"></Icon>
        </div>
      </div>
    </div>
  );
};
export default Map;
