import React, { useState, useEffect, useRef, useCallback } from 'react';
import { FormattedMessage, useModel } from 'umi';

import SearchInput from '@/sagacare_components/SearchInput';
import PageHeader from '@/sagacare_components/PageHeader';
import Map from '@/sagacare_components/map';
import TopNavigator from '@/sagacare_components/topNavigator';
import TopNavRight from './components/topNavRight';
import DeviceModal from './components/deviceModal';

import styles from './index.less';
import mapstyles from '@/sagacare_components/map/index.less';
import cx from 'classnames';
import { Spin, Modal, message } from 'antd';
import moment from 'moment';

import { getMaxScale } from '@/hooks/useMap';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { equipImageMap } from '@/config/sagacare/sagacare_image.js';
import Icon from '@/tenants-ui/SgIcon';
import type { navigatorItem } from '@/pages/Environment/index';
import { projectObj } from '@/config/api.js';
import {
  getMapList,
  queryEquipStatistics,
  queryDeviceTimeManage,
  queryProjectEquipType,
} from '@/services/sagacare_service/environment';
import {
  changeCurtain,
  changeAir,
  changeLight,
  changeSocket,
  getLamp,
  getAirInfo,
} from '@/pages/Equipment/equipmentControl';

//设备状态
type equipStatus = {
  equipType: string;
  status: number;
};
//设备开启数量
type statistics = {
  equipType: string;
  runCount: number;
};

export type socketType = {
  scode: string;
  code: string;
  name: string;
  openNum: number;
};
const Environment: React.FC = () => {
  const { hasPersonList, querySpaceAdjustList } = useModel('sagacare_spaceFunc');
  const { changeLastFloorId } = useModel('sagacare_buildFloor');
  const { searchSpace } = useModel('sagacare_searchInfo');
  const { getSpaceFunc } = useModel('sagacare_spaceFunc');
  const { envir_all, equip_air, equip_lamp, envir_curtain, envir_socket } = equipImageMap;

  const [showModal, setShowModal] = useState<boolean>(false);
  const [showSpace, setShowSpace] = useState<API.MapInfo>({}); //当前弹框选中的空间
  const initNavigatorList = [
    {
      name: '全部设备',
      id: 'all',
      src: envir_all,
      //color: '#E5574F',
      color: '#E89E32',
      colorStr: '',
    },
    {
      name: '空调',
      id: 'airConditioner',
      src: equip_air,
      num: '--',
      color: '#5E8BCF',
      colorStr: '94,139,207,',
    },
    {
      name: '照明',
      id: 'light',
      src: equip_lamp,
      num: '--',
      color: '#FFE823',
      colorStr: '255,232,35,',
    },
    {
      name: '窗帘',
      id: 'curtain',
      src: envir_curtain,
      num: '--',
      color: '#E89E32',
      colorStr: '232, 158, 50,',
    },
    {
      name: '插座',
      id: 'socket',
      src: envir_socket,
      num: '--',
      color: '#9FB7CD',
      colorStr: '159, 183, 205,',
    },
  ];
  const socketTypeObj = {
    socket_1: '民用插座',
    socket_2: '工业用插座',
    socket_3: '防水插座',
    socket_4: '普通插座',
    socket_5: '电源插座',
    socket_6: '电脑插座',
    socket_7: '电话插座',
    socket_8: '视频、音频插座',
    socket_9: '移动插座',
    socket_10: 'USB插座',
    socket_11: '饮水设备插座',
    socket_99: '其他',
  };
  const [navigatorList, setNavigatorList] = useState<any[]>([]);
  const [scale, setScale] = useState<number>(0.8);
  const [maxScale, setMaxScale] = useState<number>(1);
  const [transXInit, setTransXInit] = useState<number>(0);

  const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  const mapListCopy = useRef<any[]>([]);
  const [mapSize, setMapSize] = useState<any>({});

  const [equipMapList, setEquipMapList] = useState<any[]>([]);
  const [timeMapList, setTimeMapList] = useState<any[]>([]);

  const [selNav, setSelNav] = useState<navigatorItem>(initNavigatorList[0]);
  const [selFloorId, setSelFloorId] = useState<string>();
  const [mapCombineList, setMapCombineList] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [socketTypeArr, setSocketTypeArr] = useState<socketType[]>([]);
  const [selSocketType, setSelSocketType] = useState<socketType>({
    name: '全部',
    scode: 'all',
    code: 'all',
    openNum: 0,
  });
  const changeFloorId = (data: string) => {
    //debugger;
    setSelFloorId(data);
  };
  //导航条切换
  const navigatorChange = (item: navigatorItem) => {
    setSelNav(item);
  };
  //插座的二级菜单
  const socketTypeChange = (item: socketType) => {
    setSelSocketType(item);
    // navigatorList.forEach(function (nItem) {
    //   if (nItem.id == 'socket') {
    //     nItem.num = selSocketType;
    //   }
    // });
    // setNavigatorList(navigatorList);
  };
  const showModalClick = (item) => {
    // console.log('showChart', item);
    setShowModal(true);
    setShowSpace(item);
  };

  //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner light curtain
  //根据设备状态返回不同的 颜色
  const getColorOpacity = (value: any, type?: string): string => {
    let colorStr = '';
    // console.log('getColorOpacity-selNav', selNav, navigatorList);
    if (selNav.id == 'all') {
      //全部设备时 colorStr赋值
      var filterRes = navigatorList.filter(function (item) {
        return item.id == type;
      });
      colorStr = (filterRes[0] || {}).colorStr;
    } else {
      colorStr = selNav.colorStr;
    }
    if (selNav.id == 'curtain' || type == 'curtain') {
      //console.log('valuevaluevaluevalue', value);
      if (value == 'noHave' || !value) {
        //没有
        return 'rgba(196, 196, 196, 0)';
      } else {
        return 'rgba(' + colorStr + '1)';
      }
    } else {
      if (value === 2) {
        //2 是部分开启
        return 'rgba(' + colorStr + '0.4)';
      } else if (value === 1) {
        //1 是开启
        return 'rgba(' + colorStr + '1)';
      } else if (value === 0 || value == 'nostatus') {
        //0是关闭
        return 'rgba(196, 196, 196, 0.6)';
      }
    }
  };
  const { confirm } = Modal;

  //单个空间的点击事情
  const spaceControl = (item, index: number) => {
    //全部设备 或者没有房间类型 则不可以点击
    if (selNav.id == 'all' || !item.canClick) return;
    //没有设备时
    if (
      item[selNav.id] == 'noHave' ||
      (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave')
    )
      return;
    if (item[selNav.id] == 'nostatus') {
      message.success('该空间设备离线');
      return;
    }

    if (item[selNav.id] === 2) {
      //半开时
      confirm({
        title: '请确认',
        icon: <ExclamationCircleOutlined />,
        content: `是否进入单空间进行调节？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
          showModalClick(item);
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
      return;
    }
    var status = item[selNav.id] === 1 ? '关闭' : '打开';
    confirm({
      title: '请确认',
      icon: <ExclamationCircleOutlined />,
      content:
        selNav.id == 'socket' && selSocketType.code !== 'all'
          ? `确认${status}${selSocketType.name}吗？`
          : `确认${status}该${selNav.name}吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        //现在加上循环调用 所以把手动去了
        function callback() {
          //这是在手动改变状态
          //   var mapCopy = JSON.parse(JSON.stringify(mapCombineList));
          //   mapCopy[index][selNav.id] = item[selNav.id] === 1 ? 0 : 1;
          //   setMapCombineList(mapCopy);
        }

        //如果是空调
        if (selNav.id == 'airConditioner') {
          changeAir(item, index, callback);
        }
        if (selNav.id == 'light') {
          changeLight('one', [item], callback, status);
        }
        if (selNav.id == 'curtain') {
          changeCurtain('one', [item], callback, status);
        }
        if (selNav.id == 'socket') {
          changeSocket('one', [item], status, selSocketType);
        }
      },
      onCancel() {
        //console.log('Cancel');
      },
    });
  };
  //获取地图 mapList
  useEffect(() => {
    if (selFloorId) {
      changeLastFloorId(selFloorId);
      setLoading(true);

      getMapList({
        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
        floorId: selFloorId,
      })
        .then((res) => {
          setLoading(false);
          var data: API.MapInfo[] = (res.data || {}).spaceList || [];

          var bodyWidth = document.body.offsetWidth;
          var mapWidth = (res.data || {}).width || 800;
          if (mapWidth < bodyWidth) {
            var mscale = 1;
            setTransXInit((bodyWidth - mapWidth) / 2);
          } else {
            var mscale = Number((bodyWidth / mapWidth).toFixed(4));
            setTransXInit(0);
          }

          var mapSize: any = {
            width: mapWidth * mscale,
            height: (res.data || {}).height * mscale,
          };
          setMapSize(mapSize);

          //把地图变成 屏幕大小
          data.forEach((item, index) => {
            item.width = item.width * mscale;
            item.height = item.height * mscale;
            item.left = item.left * mscale;
            item.top = item.top * mscale;
          });

          var maxScaleTemp = getMaxScale(data);
          setMaxScale(maxScaleTemp);

          setMapList(data);
          mapListCopy.current = data;
          //setSelNav(navigatorList[0]); //每当重新请求地图时 让选中导航的默认是第一个
        })
        .catch(() => {
          setLoading(false);
        });
    } else {
      setMapList([]);
    }
  }, [selFloorId]);

  const changeMapList = useCallback(
    (mscale, moveWidth, moveHeight) => {
      setScale(mscale);
      //console.log('mscale', mscale);
      var mapListTemp = JSON.parse(JSON.stringify(mapListCopy.current));
      var mapListTemp2 = mapListTemp.map((item, index) => {
        if (index == 0) {
          // console.log('mapListTemp', mscale, item.width, item.width * mscale);
        }
        item.width = item.width * mscale;
        item.height = item.height * mscale;
        item.left = item.left * mscale - moveWidth;
        item.top = item.top * mscale - moveHeight;
        return item;
      });
      setMapList(mapListTemp2);
    },
    [mapListCopy],
  );

  const queryDeviceManage = (equiptTypeArr: any) => {
    //setLoading(true);
    return queryEquipStatistics({
      floorId: selFloorId,
      projectId: projectObj.projectId,
    })
      .then((res) => {
        // setLoading(false);
        //if (!setTimer.current) return;
        var statistics = res.data.statistics || [];
        //赋值 运行中的设备数量
        equiptTypeArr.forEach(function (nItem) {
          var fres = statistics.filter((sItem: statistics) => {
            return sItem.equipType == nItem.id;
          });
          nItem.num = (fres[0] || {}).runCount;
        });
        //console.log('queryDeviceManage333-arr', equiptTypeArr);
        setNavigatorList(equiptTypeArr);
        var socketTypeArray: socketType[] = [];
        //设备空间信息
        var spaceList = res.data.spaceList || [];
        spaceList.forEach((item: any) => {
          (item.equipList || []).forEach((eItem: any) => {
            if (eItem?.equipType == 'socket') {
              var scode = eItem?.infos?.SocketType;
              scode = scode ? 'socket_' + scode : scode;
              var stIndex = socketTypeArray.findIndex((ele) => {
                return ele.scode == scode;
              });
              //存在code，并且数组中没有 就放入数组
              if (scode && stIndex == -1) {
                socketTypeArray.push({
                  name: socketTypeObj[scode],
                  scode: scode,
                  code: eItem?.infos?.SocketType,
                  openNum: 0,
                });
              }
            }
          });
        });
        //console.log('socketTypeArray', socketTypeArray);
        const openEquipIds: string[] = [];
        spaceList.forEach((item: any) => {
          socketTypeArray.forEach((stItem: socketType) => {
            var code = stItem.code;
            var scode = stItem.scode;
            //寻找对应类型的插座
            var stEquip = (item.equipList || []).filter((ele: any) => {
              return ele?.infos?.SocketType == code;
            });
            if (stEquip.length > 0) {
              //寻找对应类型的 开启状态的插座
              var openStEquip = stEquip.filter((ele: any) => {
                return ele.runStatus == 1;
              });
              //如果有重复的设备 则不重复计算 运行设备数量
              var openStEquip2 = stEquip.filter((ele: any) => {
                if (openEquipIds.includes(ele.id)) {
                  return false;
                } else {
                  openEquipIds.push(ele.id);
                  return ele.runStatus == 1;
                }
              });
              //如果某种类型的插座都开启 则为1，部分开启则为2
              openStEquip.length == stEquip.length
                ? (item[scode] = 1)
                : openStEquip.length > 0
                ? (item[scode] = 2)
                : (item[scode] = 0);
              stItem.openNum = stItem.openNum + openStEquip2.length; //累加对应类型插座开启数量 运行中的数量
            } else {
              item[scode] = 'noHave';
            }
          });
        });

        spaceList.forEach((item: any) => {
          var allType = ['airConditioner', 'light', 'curtain', 'socket'];
          allType.forEach((etype) => {
            var filterEquip = (item.equipList || []).filter((eItem: any) => {
              return eItem.equipType == etype;
            });
            //有当前设备
            if (filterEquip.length > 0) {
              item.equipStatusList = item.equipStatusList ? item.equipStatusList : [];
              var filterRes = (item.equipStatusList || []).filter((eItem: equipStatus) => {
                return eItem.equipType == etype;
              });
              //不存时 赋值not  如果没有设备状态 则说明没有设备  1 是开启   0是关闭
              if (filterRes.length > 0) {
                item[etype] = filterRes[0].status;
              } else {
                item[etype] = 'nostatus';
                item.equipStatusList.push({
                  equipType: etype,
                  status: 'nostatus',
                });
              }
            } else {
              item[etype] = 'noHave';
            }
          });
        });
        //console.log('spaceList', spaceList, socketTypeArray);
        //debugger;
        setEquipMapList(spaceList);
        socketTypeArray.splice(0, 0, {
          name: '全部',
          scode: 'all',
          code: 'all',
          openNum: 0,
        });
        setSocketTypeArr(socketTypeArray);
        return 'next';
      })
      .catch(() => {
        //setNavigatorList(equiptTypeArr);
        // setLoading(false);
      });
  };

  let setTimer1 = useRef();
  let setTimer2 = useRef();

  function getDeviceStatus(equiptTypeArr: any) {
    queryDeviceManage(equiptTypeArr).then((res) => {
      clearTimeout(setTimer1.current);
      setTimer1.current = setTimeout(() => {
        getDeviceStatus(equiptTypeArr);
      }, 8000);
    });
  }

  function getProjectEquipType() {
    // 项目拥有的设备
    return queryProjectEquipType().then((res) => {
      const resData = res.data || [];
      let arr: any = [];
      initNavigatorList.map((item: any, idx: any) => {
        if (idx === 0) {
          arr.push(item);
          return;
        } // 第一个为全部设备，不参与对比
        let hasEquip = false; // 没有此设备
        resData.map((resItem: any) => {
          if (item.id === resItem) {
            hasEquip = true;
          }
        });
        if (hasEquip) {
          arr.push(item);
        }
      });
      //console.log('setNavigatorList-arr1111', arr);
      setNavigatorList(arr);
      return arr;
    });
  }

  function getSpaceHasPerson(sfId: any) {
    //获取有人无人
    querySpaceAdjustList(sfId).then((res) => {
      //debugger;
      clearTimeout(setTimer2.current);
      setTimer2.current = setTimeout(() => {
        getSpaceHasPerson(sfId);
      }, 8000);
    });
  }
  //获取设备状态 设备种类
  useEffect(() => {
    (async function () {
      var equiptTypeArr = await getProjectEquipType();
      //console.log('getProjectEquipType222-equiptTypeArr', equiptTypeArr);
      if (selFloorId) {
        getDeviceStatus(equiptTypeArr);
        getSpaceHasPerson(selFloorId);
      }
    })();

    return () => {
      //clearInterval(setTimer.current);
      console.log('clearTimeout-clear');
      clearTimeout(setTimer1.current);
      clearTimeout(setTimer2.current);
    };
  }, [selFloorId]);

  //获取时间列表 spaceTimeList
  useEffect(() => {
    if (selFloorId) {
      //setLoading(true);
      queryDeviceTimeManage({
        floorId: selFloorId,
        //floorId: 'Fl11010802593241ec348ecb4148806b9034c8957454',
        date: moment().format('YYYYMMDD'),
      })
        .then(function (res) {
          //  setLoading(false);
          var resList = res.content || [];
          setTimeMapList(resList);
        })
        .catch(() => {
          // setLoading(false);
        });
    }
  }, [selFloorId]);

  //合并空间设备数据 和 空间数据
  useEffect(() => {
    var combineList: any = [];
    mapList.map(function (mitem) {
      var spaceId = mitem.spaceId;
      var filterSpace1 = equipMapList.filter((ele) => {
        return ele.id == spaceId;
      });
      var filterSpace2 = timeMapList.filter((ele) => {
        return ele.id == spaceId;
      });
      var filterSpace3 = hasPersonList.filter((ele) => {
        return ele.spaceId == spaceId;
      });
      var combine = Object.assign({}, filterSpace3[0], filterSpace1[0], filterSpace2[0], mitem);

      combineList.push(combine);
    });
    setMapCombineList(combineList);
  }, [equipMapList, mapList, timeMapList, hasPersonList]);

  let firtTime: number = 0;
  let lastTime: number = 0;
  return (
    <div className={styles.sagawrap}>
      <PageHeader title={<FormattedMessage id="menu.equipment" />} action={<SearchInput />} />
      <TopNavigator
        navigatorList={navigatorList}
        type={'equipment'}
        navigatorChange={navigatorChange}
        action={
          navigatorList.length > 0 && (
            <TopNavRight
              selNavObj={selNav}
              navigatorList={navigatorList}
              selSocketType={selSocketType}
              socketTypeArr={socketTypeArr}
              mapList={mapCombineList}
            ></TopNavRight>
          )
        }
        changeFloorId={changeFloorId}
        selParamObj={selNav}
      ></TopNavigator>
      <div className={styles.maptop}>
        {selNav.id == 'socket' && (
          <div className={cx(styles.left, styles.stBox)}>
            {socketTypeArr.map((stItem, stIndex) => {
              return (
                <div
                  className={cx(styles.stItem, {
                    [styles.sel]: selSocketType.scode == stItem.scode,
                  })}
                  key={stIndex + 'socket'}
                  onClick={(event) => {
                    event.stopPropagation();
                    socketTypeChange(stItem);
                  }}
                >
                  {stItem.name}
                </div>
              );
            })}
          </div>
        )}
        {selNav.id !== 'all' && selNav.id !== 'curtain' && selNav.id !== 'socket' && (
          <div className={styles.left}>
            <span>
              <Icon
                className=""
                type="youren"
                style={{ color: '#CE9F27', fontWeight: 'bold', fontSize: '9px' }}
              ></Icon>
              有人
            </span>
            <span>
              <Icon
                className=""
                type="wuren"
                style={{ color: '#8B949E', fontWeight: 'bold', fontSize: '9px' }}
              ></Icon>
              无人
            </span>
          </div>
        )}
        {selNav.id !== 'all' && selNav.id !== 'curtain' && (
          <div className={styles.right}>
            <div className={styles.rightOpen}>
              <div>
                <span
                  className={styles.circle}
                  style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
                ></span>
                <span>开启</span>
              </div>
              <div>
                <span
                  className={styles.circle}
                  style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
                ></span>
                <span>部分开启</span>
              </div>
              <div>
                <span
                  className={styles.circle}
                  style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
                ></span>
                <span>关闭</span>
              </div>
            </div>
          </div>
        )}
        {selNav.id == 'curtain' && (
          <div className={styles.right}>
            <div>
              <span
                className={styles.circle}
                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
              ></span>
              <span>有</span>
            </div>
            <div>
              <span className={cx(styles.circle, styles.noCurtain)}></span>
              <span>无</span>
            </div>
          </div>
        )}
      </div>
      <Spin spinning={loading} wrapperClassName={mapstyles.spinnclass}>
        {mapCombineList.length > 0 && (
          <Map
            changeMapList={changeMapList}
            mapList={mapCombineList}
            mapSize={mapSize}
            maxscale={maxScale}
            transXInit={transXInit}
            type={'equipment'}
            selFloorId={selFloorId}
            render={(item, index) => {
              return (
                <div
                  className={mapstyles.houseWrap}
                  key={index + item.id}
                  style={{
                    left: item.left,
                    top: item.top,
                    width: item.width,
                    height: item.height,
                  }}
                >
                  <div
                    style={{
                      backgroundColor: item.canClick
                        ? selNav.id == 'all'
                          ? 'rgba(196, 196, 196, 0.4)'
                          : selNav.id == 'socket' && selSocketType.scode !== 'all'
                          ? getColorOpacity(item[selSocketType.scode])
                          : getColorOpacity(item[selNav.id])
                        : '',
                    }}
                    className={cx(mapstyles.house, {
                      [mapstyles.notclick]:
                        !item.canClick ||
                        item[selNav.id] == 'noHave' ||
                        (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave'),
                      [mapstyles.searchSel]: item.spaceId && item.spaceId === searchSpace.spaceId,
                    })}
                    onClick={(event) => {
                      event.stopPropagation();
                      if (lastTime - firtTime < 200) {
                        spaceControl(item, index);
                      }
                    }}
                    onMouseDown={(event) => {
                      //event.stopPropagation();
                      firtTime = new Date().getTime();
                    }}
                    onMouseUp={(event) => {
                      //event.stopPropagation();
                      lastTime = new Date().getTime();
                    }}
                  >
                    {/* {selNav.id !== 'all' && item[selNav.id] == 'noHave' && (
                      <div className={mapstyles.noDevice}>
                        <span className={mapstyles.noText}>无设备</span>
                      </div>

                        style={{ display: item.width > 80 && item.height > 50 ? 'flex' : 'none' }}
                    )} */}
                    {selNav.id == 'all' && (
                      <div
                        className={mapstyles.allDevice}
                        style={{
                          transform:
                            scale == maxScale
                              ? 'scale(1)'
                              : item.width < 24 * (item.equipStatusList || []).length ||
                                item.height < 24
                              ? 'scale(0.3)'
                              : 'scale(1)',
                        }}
                      >
                        {/* 所有设备的图标列表 */}
                        {(item.equipStatusList || []).map((ditem: equipStatus, dindex: number) => {
                          return (
                            <div
                              key={dindex + 'device'}
                              className={mapstyles.icon}
                              style={{
                                backgroundColor: getColorOpacity(ditem.status, ditem.equipType),
                              }}
                            >
                              <Icon
                                className=""
                                type={ditem.equipType}
                                style={{ color: '#fff', fontWeight: 'bold', fontSize: '8px' }}
                              ></Icon>
                            </div>
                          );
                        })}
                      </div>
                    )}
                    {(selNav.id == 'airConditioner' || selNav.id == 'light') &&
                      item.runStatus === 1 &&
                      item.canClick && (
                        <div
                          className={mapstyles.hasPerson}
                          style={{
                            transform:
                              scale == maxScale
                                ? 'scale(1)'
                                : item.width < 46 || item.height < 25
                                ? 'scale(0.4)'
                                : 'scale(1)',
                          }}
                        >
                          <Icon
                            className=""
                            type="youren"
                            style={{ color: '#CE9F27', fontWeight: 'bold', fontSize: '9px' }}
                          ></Icon>
                        </div>
                      )}
                    {(selNav.id == 'airConditioner' || selNav.id == 'light') &&
                      item.runStatus === 0 &&
                      item.canClick && (
                        <div
                          className={mapstyles.hasPerson}
                          style={{
                            transform:
                              scale == maxScale
                                ? 'scale(1)'
                                : item.width < 46 || item.height < 25
                                ? 'scale(0.4)'
                                : 'scale(1)',
                          }}
                        >
                          <Icon
                            className=""
                            type="wuren"
                            style={{ color: '#8B949E', fontWeight: 'bold', fontSize: '9px' }}
                          ></Icon>
                        </div>
                      )}
                    {!(
                      !item.canClick ||
                      item[selNav.id] == 'noHave' ||
                      (selNav.id == 'socket' && item[selSocketType.scode] == 'noHave')
                    ) && (
                      <div
                        className={mapstyles.showModal}
                        onClick={(event) => {
                          event.stopPropagation();
                          if (lastTime - firtTime < 400) {
                            showModalClick(item);
                          }
                        }}
                        onMouseDown={(event) => {
                          //event.stopPropagation();
                          firtTime = new Date().getTime();
                        }}
                        onMouseUp={(event) => {
                          //event.stopPropagation();
                          lastTime = new Date().getTime();
                        }}
                        style={{
                          transform: `scale(${scale - 0.1 < 1 ? scale - 0.1 : 1})`,
                        }}
                      >
                        <Icon className="" type="hover" style={{ fontSize: '10px' }}></Icon>
                      </div>
                    )}
                    <div className={mapstyles.content}>
                      <Icon
                        className=""
                        type={getSpaceFunc(item.roomFuncType)}
                        style={{
                          fontSize: 18,
                          display: item.width > 28 && item.height > 50 ? 'block' : 'none',
                        }}
                      ></Icon>
                      <div
                        className={mapstyles.name}
                        style={{
                          display:
                            (item.width > 64 && item.height > 80) ||
                            item.height > 140 ||
                            item.width > 120 ||
                            scale == maxScale
                              ? 'block'
                              : 'none',
                        }}
                      >
                        {item.localName}
                      </div>
                      {(getSpaceFunc(item.roomFuncType) || item.localName) &&
                        !(
                          (getSpaceFunc(item.roomFuncType) &&
                            item.width > 28 &&
                            item.height > 50) ||
                          (item.localName &&
                            ((item.width > 64 && item.height > 80) ||
                              item.height > 140 ||
                              item.width > 120 ||
                              scale == maxScale))
                        ) && <div className={mapstyles.pointer}>.</div>}
                    </div>
                  </div>
                </div>
              );
            }}
          ></Map>
        )}
      </Spin>
      {showModal && (
        <DeviceModal
          showSpace={showSpace}
          onClose={() => {
            setShowModal(false);
          }}
        ></DeviceModal>
      )}
    </div>
  );
};

export default Environment;
