<template>
  <div id="map" style="width: 100%; height: 100%">
    <div class="space-main" id="spaceMain">
      <template v-if="mapType == 1">
        <div
          class="space-box"
          v-for="(area, index) in mapData.spaceList"
          :style="{
            width: area.width + 'px',
            height: area.height + 'px',
            top: area.top + 'px',
            left: area.left + 'px',
          }"
          :key="'map' + index"
        >
          <div
            class="space"
            :id="'space' + area.id"
            :class="[
              area.canClick ? '' : 'click-disable',
              selectArea.spaceId === area.spaceId
                ? area.disabled
                  ? 'select-disable'
                  : 'select'
                : '',
              isSetSpace ? 'use-select' : '',
              area.disabled ? 'space-disable-box' : 'space-box-bg',
            ]"
            @click.stop="checkSpace(area)"
            :style="{
              backgroundColor: area.backgroundColor ? area.backgroundColor : '',
            }"
          >
            <div
              class="device"
              :class="
                selectArea.spaceId === area.spaceId ? 'select-device' : ''
              "
              v-show="
                area.width * displacement.scale > 24 &&
                area.height * displacement.scale > 24
              "
            >
              <img
                :src="area.icon"
                v-if="selectArea.spaceId !== area.spaceId && area.icon"
              />
              <img :src="area.selectIcon" v-else class="select-icon" alt="" />
              <template v-if="area.localName">
                <span
                  v-if="
                    (area.height > 80 &&
                      area.localName.length * 12 < area.width) ||
                    selectArea.spaceId === area.spaceId
                  "
                  style="font-size: 12px"
                  >{{ area.localName }}</span
                >
              </template>
            </div>
          </div>
        </div>
      </template>
      <canvas-box v-else class="canvasBox"></canvas-box>
    </div>

    <!--地图右侧的操作按钮-->
    <div class="map-toolbar">
      <img
        :src="parseImgUrl('map-icon', 'icon-search-big.svg')"
        @click.stop="goSearch"
        class="icon-search"
        alt=""
      />
      <div class="toolbar-item" @click.stop="checkFloor">
        <span class="text-hidden">{{ floorItem.localName }}</span>
      </div>
      <div class="toolbar-item" @click.stop="checkBuilding">
        <span class="text-hidden">{{ buildingItem.localName }}</span>
      </div>
    </div>
    <!-- 选择建筑  -->
    <van-popup
      v-model:show="showBuilding"
      teleport="body"
      class="buiding-box"
      style="width: 40%; height: 100%; padding: 20px"
      position="right"
    >
      <div
        class="buiding-item"
        :key="item.id"
        :class="buildingItem.buildingId === item.id ? 'active' : ''"
        @click.stop="comfirmBuilding(item)"
        v-for="item in buildingData"
      >
        {{ item.localName }}
      </div>
    </van-popup>

    <!-- 选择楼层  -->
    <van-popup
      v-model:show="showFloor"
      teleport="body"
      class="buiding-box"
      style="width: 40%; height: 100%; padding: 20px"
      position="right"
    >
      <div
        class="buiding-item"
        :key="item.id"
        :class="floorItem.id === item.id ? 'active' : ''"
        @click.stop="comfirmFloor(item)"
        v-for="item in floorData"
      >
        {{ item.localName }}
      </div>
    </van-popup>

    <!--搜索-->
    <van-popup
      v-model:show="showSearch"
      teleport="body"
      class="buiding-box"
      style="width: 100%; height: 100%"
      position="right"
    >
      <div style="width: 100%; height: 100%">
        <space-search @closeSearch="closeSearch"></space-search>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  nextTick,
  reactive,
  toRefs,
  watch,
} from "vue";

import {
  getLocalStorageFloor,
  getStorageSpaceId,
  localStorageFloor,
  localStorageSpaceId,
  parseImgUrl,
  setLocalNewSpaceInfo,
} from "@/utils";
import { Toast, Dialog } from "vant";
import { getBuildingList, getFloorList, getMapInfo } from "@/apis/envmonitor";
import SpaceSearch from "@/views/envmonitor/Search/SpaceSearch.vue";
import CanvasBox from "./CanvasBox.vue";
import { useRouter } from "vue-router";
import { getSpaceType, mapIcon } from "@/utils/mapIcon";
import any = jasmine.any;

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    spaceData: {
      type: Array,
      default: () => [],
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
    isSetSpace: {
      type: Boolean,
      default: () => false,
    },
    floorId: {
      type: String,
      default: () => "",
    },
    buildingId: {
      type: String,
      default: () => "",
    },
    mapType: {
      type: Number,
      default: () => 1,
    },
  },
  components: {
    SpaceSearch,
    CanvasBox,
  },
  setup(props, contx) {
    const router = useRouter();
    const mapData: any = {};
    const document: any = window.document;
    const screenInfo: any = {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
    };
    const comMapScale: any = 0.8;
    const displacement: any = {
      scale: 1,
      pageX: 0,
      pageX2: 0,
      originScale: 0,
      moveable: false,
    };
    let buildingData: any = [];
    let floorData: any = [];
    let floorItem: any = {};
    let selectArea: any = {};
    let transformData: any = {};
    let spaceInfo: any = null;
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      spaceInfo: spaceInfo,
      isSetSpace: props.isSetSpace, // isSetSpace:true 代表为设置常驻空间页面展示
      widthMapScale: 1,
      tempScale: 0.8,
      comMapScale: comMapScale,
      heightScale: 1,
      showSearch: false,
      isSetSearchSpace: false,
      showBuilding: false,
      showFloor: false,
      buildingItem: {
        buildingId: "",
        localName: "",
      },
      floorData: floorData,
      floorItem: floorItem,
      buildingData: buildingData,
      mapData: mapData,
      copyMapDaata: mapData,
      selectArea: selectArea,
      displacement: displacement,
      screenInfo: screenInfo,
      transformData: transformData,
      // 切换楼层的时候恢缩放和滚动的样式
      clearPreStyle() {
        let mapDom = document.querySelector("#map");
        mapDom.scrollLeft = 0;
        mapDom.scrollTop = 0;
        let matrix_box: any = document.querySelector("#spaceMain");
        // 记住使用的缩放值
        proxyData.displacement.scale = 1;
        if (matrix_box) {
          matrix_box.style.left = 0 + "px";
          matrix_box.style.top = 0 + "px";
        }
      },
      swipe(el: any, options: any) {
        //设置开关，监听move事件
        let isMove: any = false;
        // 设置手指触摸开始的坐标
        let startX: any = 0;
        let startY: any = 0;
        // 设置手指移动的坐标
        let moveX: any = 0;
        let moveY: any = 0;
        //设置指针距离元素的边框的距离
        let disX: any = 0;
        let disY: any = 0;
        // 如果用户未传入参数2，自己定义一个
        let fun: any = function () {};
        let data: any = {
          swipeLeft: fun,
          swipeRight: fun,
          swipeDown: fun,
          swipeUp: fun,
          drag: fun,
        };
        // 判断是否传入参数2，有的话覆盖默认值
        Object.assign(data, options);
        // 给元素绑定三个事件
        el.addEventListener(
          "touchstart",
          function (e: any) {
            console.log(e);
            //获取手指开始的坐标
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
            //计算指针距离元素边框的位置
            disX = startX - el.offsetLeft;
            disY = startY - el.offsetTop;
            console.log(el.offsetLeft);
            console.log(el.offsetTop);
            console.log(e.touches[0].pageX);
          },
          { passive: true }
        );
        el.addEventListener(
          "touchmove",
          function (e: any) {
            if (proxyData.displacement.moveable) {
              return;
            }
            console.log(e);
            //如果触发了move事件，打开开关
            isMove = true;
            // 获取移动时的坐标
            moveX = e.touches[0].pageX;
            moveY = e.touches[0].pageY;
            e.mation = {
              startX: startX,
              startY: startY,
              moveX: moveX,
              moveY: moveY,
              disX: disX,
              disY: disY,
            };
            data.drag.call(el, e);
            // 判断是否触发了move事件
            if (isMove) {
              // 计算水平边长
              let absX: any = Math.abs(moveX - startX);
              // 计算垂直边长
              let absY: any = Math.abs(moveY - startY);
              // 判断垂直还是水平滑动
              if (absX > absY) {
                // console.log('水平滑动');
                //再判断是左滑右滑
                if (moveX - startX > 0) {
                  data.swipeRight.call(el, e);
                } else {
                  data.swipeLeft.call(el, e);
                }
              } else {
                // console.log('垂直滑动');
                //判断是上滑还是下滑
                if (moveY - startX > 0) {
                  //  下滑
                  data.swipeDown.call(el, e);
                } else {
                  data.swipeUp.call(el, e);
                }
              }
            }
          },
          { passive: true }
        );
        el.addEventListener("touchend", function (e: any) {
          isMove = false;
        });
      },
      /**
       * 地图滚动
       */
      mapScroll() {
        let matrix_box: any = document.querySelector("#spaceMain");
        let houseDesDom = document.querySelector("#houseDes");
        let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
        proxyData.swipe(matrix_box, {
          swipeLeft: function (e: any) {
            // debugger;
            if (!proxyData.displacement.moveable) {
              if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
              } else {
                let width: any =
                  matrix_box.offsetWidth -
                  Math.abs(e.touches[0].pageX - e.mation.disX);
                if (width < proxyData.screenInfo.screenWidth) {
                  matrix_box.style.left =
                    -(
                      matrix_box.offsetWidth - proxyData.screenInfo.screenWidth
                    ) + "px";
                } else {
                  matrix_box.style.left =
                    e.touches[0].pageX - e.mation.disX + "px";
                }
              }
            }
          },
          swipeRight: function (e: any) {
            if (!proxyData.displacement.moveable) {
              if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
                return;
              }
              if (e.touches[0].pageX - e.mation.disX > 0) {
                matrix_box.style.left = 0 + "px";
              } else {
                matrix_box.style.left =
                  e.touches[0].pageX - e.mation.disX + "px";
              }
            }
          },
          swipeDown: function (e: any) {
            if (!proxyData.displacement.moveable) {
              let height: any =
                proxyData.screenInfo.screenHeight - houseHeight - 20;
              let boxHeight: any = matrix_box.offsetHeight;
              if (boxHeight < height) {
                matrix_box.style.top = 0 + "px";
              } else {
                if (e.touches[0].pageY - e.mation.disY > 0) {
                  matrix_box.style.top = 0 + "px";
                } else {
                  matrix_box.style.top =
                    e.touches[0].pageY - e.mation.disY + "px";
                }
              }
            }
          },
          swipeUp: function (e: any) {
            if (!proxyData.displacement.moveable) {
              let houseDesDom = document.querySelector("#houseDes");
              let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
              let height: any =
                proxyData.screenInfo.screenHeight - houseHeight - 20;
              let boxHeight: any = matrix_box.offsetHeight;
              let top: any = e.touches[0].pageY - e.mation.disY;
              if (boxHeight < height) {
                matrix_box.style.top = 0 + "px";
              } else {
                if (boxHeight - Math.abs(top) < height / 2) {
                  matrix_box.style.top = -(boxHeight - height / 2) + "px";
                } else {
                  matrix_box.style.top =
                    e.touches[0].pageY - e.mation.disY + "px";
                }
              }
            }
          },
          drag: function (e: any) {},
        });
      },
      /**
       * 关闭搜索页面
       * @param item
       */
      closeSearch(item: any) {
        proxyData.showSearch = false;
        // 搜索页面过来的
        if (item) {
          proxyData.isSetSearchSpace = true;
          proxyData.loadingStart();
          let searchSpace: any = {
            buildingId: item.buildingId,
            buildingName: "",
            floorId: item.floorId,
            floorName: "",
            spaceId: item.id,
          };
          proxyData.init(searchSpace);
        } else {
          proxyData.isSetSearchSpace = false;
        }
      },
      /*
        去搜索页面
       */
      goSearch() {
        proxyData.showSearch = true;
        // router.push({ path: '/search' })
      },
      /**
       * 设置选中的空间的位置，
       */
      setSelectSpacePosition(area: any) {
        setTimeout(() => {
          proxyData.setScrollLeft(area);
          proxyData.scrollTop(area);
        });
      },
      /**
       * 判断像左还是像右滚动
       */
      setScrollLeft(area: any) {
        let mapBoxEle = document.querySelector("#spaceMain");
        let left: any = 0;
        if (area.left + area.width >= proxyData.screenInfo.screenWidth / 2) {
          left =
            area.left - proxyData.screenInfo.screenWidth / 2 + area.width / 2;
          left = ~left;
        } else {
          left = 0;
        }
        if (left > 0) {
          left = 0;
        }
        if (
          Math.abs(left) >
          mapBoxEle.offsetWidth - proxyData.screenInfo.screenWidth
        ) {
          left = -(mapBoxEle.offsetWidth - proxyData.screenInfo.screenWidth);
        }
        mapBoxEle.style.left = left + "px";
      },
      /**
       * 获取竖着的方向
       */
      scrollTop(area: any) {
        let mapDom = document.querySelector("#map");
        let mapBoxEle = document.querySelector("#spaceMain");
        let houseDesDom = document.querySelector("#houseDes");
        let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
        let top: any = 0;
        if (
          area.top + area.width >
          (proxyData.screenInfo.screenHeight - houseHeight - 20) / 2
        ) {
          top =
            area.top -
            (proxyData.screenInfo.screenHeight - houseHeight) / 2 +
            area.height / 2;
        } else {
          top = 0;
        }
        top = ~top;
        if (top > 0) {
          top = 0;
        }
        mapBoxEle.style.top = top + "px";
      },
      /**
       * 切换空间
       */
      checkSpace(area: any) {
        if (area.disabled) {
          // 如果不在
          Toast("该空间和平板没绑定,暂不支持查看");
          return;
        }
        proxyData.isSetSearchSpace = false;
        if (area && area.canClick) {
          if (props.mapType == 1) {
            proxyData.setSelectSpacePosition(area);
          }
          proxyData.selectArea = area;
          proxyData.selectArea.buildingId = proxyData.buildingItem.buildingId;
          proxyData.setLocalSpaceInfo();
          contx.emit("changeSpace", proxyData.selectArea);
        } else {
          Toast("不可选区域");
        }
      },
      /**
       * 确认设置为常驻空间
       */
      comfirSetSpace(item: any) {
        if (item.spaceId === props.spaceInfo.spaceId) {
          Dialog.confirm({
            title: "取消常驻空间",
            confirmButtonColor: "#000000",
            cancelButtonColor: "#4D5262",
            message: `
        是否取消常驻空间设置 ? `,
          })
            .then(() => {
              contx.emit("delPermanentSpace");
            })
            .catch(() => {});
        } else {
          Dialog.confirm({
            title: "设置常驻空间",
            confirmButtonColor: "#000000",
            cancelButtonColor: "#4D5262",
            message: `是否将常驻空间设置为${item.localName}?`,
          })
            .then(() => {
              proxyData.selectArea = item;
              contx.emit("changeSpaceId", proxyData.selectArea.spaceId);
            })
            .catch(() => {});
        }
      },
      /**
       * 本地缓存最新的空间建筑信息，提供给首次进入页面使用
       */
      setLocalSpaceInfo() {
        localStorageSpaceId(
          proxyData.buildingItem.buildingId,
          proxyData.floorItem.id,
          proxyData.selectArea.spaceId
        );
        let spaceInfo: any = {
          buildingId: proxyData.buildingItem.buildingId,
          buildingName: proxyData.buildingItem.localName,
          floorId: proxyData.floorItem.id,
          floorName: proxyData.floorItem.localName,
          spaceId: proxyData.selectArea.spaceId, // 上格云3
        };
        setLocalNewSpaceInfo(spaceInfo);
      },
      /**
       * 地图放大的距离
       * @param start
       * @param stop
       */
      getDistance(start: any, stop: any) {
        return Math.hypot(stop.x - start.x, stop.y - start.y);
      },
      /**
       * 格式化地图数据
       */
      formateMapData() {
        let spaceData: any = props.spaceData;
        let data: any = proxyData.mapData;
        if (data) {
          proxyData.setSpaceScale();
          proxyData.setTempScale();
          if (data.width < 3000) {
            proxyData.comMapScale = 0.8;
          }
          data.width = data.width * proxyData.comMapScale;
          data.height = data.height * proxyData.comMapScale;
          let spaceList: any = data?.spaceList ?? [];
          for (let i = 0; i < spaceList.length; i++) {
            let item = spaceList[i];
            item.width = item.width * proxyData.comMapScale;
            item.height = item.height * proxyData.comMapScale;
            item.top = item.top * proxyData.comMapScale;
            item.left = item.left * proxyData.comMapScale;
            let flag: any = true;
            for (let j = 0; j < spaceData.length; j++) {
              if (item.spaceId === spaceData[j].spaceId) {
                flag = false;
                break;
              }
            }
            if (flag) {
              item.disabled = true;
            }
            // item.canClick = !item.canClick
            proxyData.setSpaceIcon(item);
          }
          // 备份数据
          proxyData.copyMapDaata = JSON.parse(JSON.stringify(data));
        }
      },
      /**
       * 格式化多边形地图数据
       */
      formatePolygonMapData(){
      },
      // 数据格式化
      formSpaceData() {
        let data: any = proxyData.mapData;
        let spaceList: any = data?.spaceList ?? [];
        spaceList.map((item: any) => {
          if (item.canClick) {
            item.fillColor = "#fff";
          }
          item.devicePointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.comMapScale;
            dev.top = dev.top * proxyData.comMapScale;
          });
          item.logoPointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.comMapScale;
            dev.top = dev.top * proxyData.comMapScale;
          });
          item.pointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.comMapScale;
            dev.top = dev.top * proxyData.comMapScale;
          });
          item.circlePointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.comMapScale;
            dev.top = dev.top * proxyData.comMapScale;
          });
          item.detailPointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.comMapScale;
            dev.top = dev.top * proxyData.comMapScale;
          });
          proxyData.setSpaceIcon(item);
        });
        proxyData.copyMapDaata = JSON.parse(JSON.stringify(data));
      },
      // 格式化地图数据
      formatePage() {
        let spaceList: any = [
          {
            spaceId: "37",
            localName: "不可点击5",
            canClick: false,
            pointArr: [
              {
                left: 1014.878,
                top: 962.0050000000001,
              },
              {
                left: 1416.434,
                top: 1364.625,
              },
              {
                left: 1026.528,
                top: 1754.4063999999998,
              },
              {
                left: 1026.636,
                top: 1895.875,
              },
              {
                left: 840.9884,
                top: 1895.875,
              },
              {
                left: 840.9884,
                top: 1776.25,
              },
              {
                left: 816.6358,
                top: 1776.25,
              },
              {
                left: 816.6358,
                top: 1503.761,
              },
              {
                left: 490.7608,
                top: 1503.761,
              },
              {
                left: 490.7608,
                top: 1160.875,
              },
              {
                left: 295.3858,
                top: 1160.875,
              },
              {
                left: 295.3858,
                top: 962.0050000000001,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "11",
            localName: "H306",
            canClick: true,
            pointArr: [
              {
                left: 830.6358,
                top: 1781.25,
              },
              {
                left: 830.6358,
                top: 1938.125,
              },
              {
                left: 717.4568,
                top: 1938.125,
              },
              {
                left: 644.6346,
                top: 1865.3040999999998,
              },
              {
                left: 644.6346,
                top: 1781.25,
              },
            ],
            devicePointArr: [
              {
                left: 775.3761,
                top: 1793.5456,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 816.9227,
                top: 1927.3734,
              },
            ],
            logoPointArr: [
              {
                left: 737.6352,
                top: 1859.6875,
              },
            ],
          },
          {
            spaceId: "30",
            localName: "Z305",
            canClick: true,
            pointArr: [
              {
                left: 1266.174,
                top: 1534.331,
              },
              {
                left: 1374.008,
                top: 1642.164,
              },
              {
                left: 1315.671,
                top: 1700.501,
              },
              {
                left: 1207.837,
                top: 1592.667,
              },
            ],
            devicePointArr: [
              {
                left: 1226.065,
                top: 1592.539,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1315.051,
                top: 1686.702,
              },
            ],
            logoPointArr: [
              {
                left: 1290.923,
                top: 1617.416,
              },
            ],
          },
          {
            spaceId: "16",
            localName: "J305",
            canClick: true,
            pointArr: [
              {
                left: 1881.357,
                top: 1576.757,
              },
              {
                left: 1939.693,
                top: 1635.093,
              },
              {
                left: 2051.946,
                top: 1522.84,
              },
              {
                left: 1993.61,
                top: 1464.504,
              },
            ],
            devicePointArr: [
              {
                left: 1959.482,
                top: 1514.14,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1940.016,
                top: 1621.675,
              },
            ],
            logoPointArr: [
              {
                left: 1966.651,
                top: 1549.799,
              },
            ],
          },
          {
            spaceId: "24",
            localName: "K308",
            canClick: true,
            pointArr: [
              {
                left: 1881.357,
                top: 1152.493,
              },
              {
                left: 1939.693,
                top: 1094.157,
              },
              {
                left: 2051.946,
                top: 1206.41,
              },
              {
                left: 1993.61,
                top: 1264.746,
              },
            ],
            devicePointArr: [
              {
                left: 1905.072,
                top: 1148.88,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1993.162,
                top: 1252.567,
              },
            ],
            logoPointArr: [
              {
                left: 1966.651,
                top: 1179.451,
              },
            ],
          },
          {
            spaceId: "28",
            localName: "Z302",
            canClick: true,
            pointArr: [
              {
                left: 1133.591,
                top: 1666.913,
              },
              {
                left: 1241.425,
                top: 1774.7469,
              },
              {
                left: 1183.089,
                top: 1833.0832,
              },
              {
                left: 1075.255,
                top: 1725.249,
              },
            ],
            devicePointArr: [
              {
                left: 1101.859,
                top: 1727.246,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1183.062,
                top: 1817.7237,
              },
            ],
            logoPointArr: [
              {
                left: 1158.34,
                top: 1749.9982,
              },
            ],
          },
          {
            spaceId: "22",
            localName: "K306",
            canClick: true,
            pointArr: [
              {
                left: 1733.685,
                top: 1158.743,
              },
              {
                left: 1733.685,
                top: 1278.825,
              },
              {
                left: 1587.086,
                top: 1278.825,
              },
              {
                left: 1587.086,
                top: 1158.743,
              },
            ],
            devicePointArr: [
              {
                left: 1686.675,
                top: 1172.009,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1720.772,
                top: 1266.994,
              },
            ],
            logoPointArr: [
              {
                left: 1660.386,
                top: 1218.784,
              },
            ],
          },
          {
            spaceId: "15",
            localName: "J303",
            canClick: true,
            pointArr: [
              {
                left: 1946.764,
                top: 1642.164,
              },
              {
                left: 2005.1,
                top: 1700.501,
              },
              {
                left: 2117.354,
                top: 1588.248,
              },
              {
                left: 2059.017,
                top: 1529.911,
              },
            ],
            devicePointArr: [
              {
                left: 2025.22,
                top: 1579.435,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 2005.181,
                top: 1689.506,
              },
            ],
            logoPointArr: [
              {
                left: 2032.059,
                top: 1615.206,
              },
            ],
          },
          {
            spaceId: "5",
            localName: "女卫",
            canClick: true,
            pointArr: [
              {
                left: 425.7612,
                top: 1173.875,
              },
              {
                left: 425.7612,
                top: 1304.528,
              },
              {
                left: 295.3858,
                top: 1304.528,
              },
              {
                left: 295.3858,
                top: 1173.875,
              },
            ],
            devicePointArr: [
              {
                left: 373.0604,
                top: 1186.148,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 411.8106,
                top: 1293.61,
              },
            ],
            logoPointArr: [
              {
                left: 360.5735,
                top: 1239.202,
              },
            ],
          },
          {
            spaceId: "13",
            localName: "J301",
            canClick: true,
            pointArr: [
              {
                left: 2146.522,
                top: 1841.9221,
              },
              {
                left: 2196.725,
                top: 1892.125,
              },
              {
                left: 2255.418,
                top: 1892.125,
              },
              {
                left: 2281.636,
                top: 1865.9070000000002,
              },
              {
                left: 2281.636,
                top: 1752.5298,
              },
              {
                left: 2258.775,
                top: 1729.6689000000001,
              },
            ],
            devicePointArr: [
              {
                left: 2224.327,
                top: 1780.2566000000002,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 2248.901,
                top: 1884.3096,
              },
            ],
            logoPointArr: [
              {
                left: 2235.149,
                top: 1818.2962,
              },
            ],
          },
          {
            spaceId: "27",
            localName: "Z301",
            canClick: true,
            pointArr: [
              {
                left: 1066.416,
                top: 1734.0883,
              },
              {
                left: 1160.108,
                top: 1827.7799,
              },
              {
                left: 1174.25,
                top: 1841.9221,
              },
              {
                left: 1124.047,
                top: 1892.125,
              },
              {
                left: 1065.354,
                top: 1892.125,
              },
              {
                left: 1039.136,
                top: 1865.9070000000002,
              },
              {
                left: 1039.136,
                top: 1761.3681000000001,
              },
            ],
            devicePointArr: [
              {
                left: 1052.54,
                top: 1780.827,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1117.081,
                top: 1878.8567,
              },
            ],
            logoPointArr: [
              {
                left: 1090.291,
                top: 1825.2752,
              },
            ],
          },
          {
            spaceId: "38",
            localName: "不可点击6",
            canClick: false,
            pointArr: [
              {
                left: 1075.255,
                top: 1004.001,
              },
              {
                left: 1183.197,
                top: 896.0799999999999,
              },
              {
                left: 1241.533,
                top: 954.4159999999999,
              },
              {
                left: 1133.591,
                top: 1062.337,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "26",
            localName: "K310",
            canClick: true,
            pointArr: [
              {
                left: 2013.939,
                top: 1019.9100000000001,
              },
              {
                left: 2072.276,
                top: 961.5740000000001,
              },
              {
                left: 2184.529,
                top: 1073.827,
              },
              {
                left: 2126.192,
                top: 1132.164,
              },
            ],
            devicePointArr: [
              {
                left: 2038.491,
                top: 1011.366,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 2125.892,
                top: 1118.54,
              },
            ],
            logoPointArr: [
              {
                left: 2099.234,
                top: 1046.869,
              },
            ],
          },
          {
            spaceId: "1",
            localName: "公共通道",
            canClick: true,
            pointArr: [
              {
                left: 583.3846,
                top: 2161.4542,
              },
              {
                left: 583.3846,
                top: 1941.9191,
              },
              {
                left: 433.2608,
                top: 1792.3265000000001,
              },
              {
                left: 433.2608,
                top: 1666.625,
              },
              {
                left: 545.8858,
                top: 1666.625,
              },
              {
                left: 545.8863,
                top: 1762.4111,
              },
              {
                left: 564.7256,
                top: 1781.25,
              },
              {
                left: 639.6346,
                top: 1781.25,
              },
              {
                left: 639.6346,
                top: 1867.3752,
              },
              {
                left: 716.3858,
                top: 1944.125,
              },
              {
                left: 801.8858,
                top: 1944.4275,
              },
              {
                left: 801.8858,
                top: 2013.125,
              },
              {
                left: 716.3858,
                top: 2013.125,
              },
              {
                left: 639.6347,
                top: 2064.0293,
              },
              {
                left: 639.6346,
                top: 2339.2498,
              },
              {
                left: 405.5909,
                top: 2339.25,
              },
            ],
            devicePointArr: [
              {
                left: 722.7421,
                top: 1958.2275,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 788.7532,
                top: 2004.1763999999998,
              },
            ],
            logoPointArr: [
              {
                left: 652.8481,
                top: 1981.2019,
              },
            ],
          },
          {
            spaceId: "7",
            localName: "H301",
            canClick: true,
            pointArr: [
              {
                left: 577.1346,
                top: 1944.0056,
              },
              {
                left: 577.1346,
                top: 2160.6334,
              },
              {
                left: 398.5199,
                top: 2339.25,
              },
              {
                left: 295.3858,
                top: 2339.25,
              },
              {
                left: 295.3858,
                top: 1764.7014,
              },
              {
                left: 397.8632,
                top: 1764.7014,
              },
            ],
            devicePointArr: [
              {
                left: 317.5158,
                top: 1797.2386999999999,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 537.493,
                top: 2151.2646,
              },
            ],
            logoPointArr: [
              {
                left: 436.2602,
                top: 2052.1476000000002,
              },
            ],
          },
          {
            spaceId: "19",
            localName: "K302",
            canClick: true,
            pointArr: [
              {
                left: 1315.671,
                top: 1028.749,
              },
              {
                left: 1374.008,
                top: 1087.086,
              },
              {
                left: 1266.174,
                top: 1194.919,
              },
              {
                left: 1207.837,
                top: 1136.583,
              },
            ],
            devicePointArr: [
              {
                left: 1282.852,
                top: 1080.18,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1267.717,
                top: 1177.185,
              },
            ],
            logoPointArr: [
              {
                left: 1290.923,
                top: 1111.834,
              },
            ],
          },
          {
            spaceId: "32",
            localName: "不可点击",
            canClick: false,
            pointArr: [
              {
                left: 884.114,
                top: 488.12300000000005,
              },
              {
                left: 1102.636,
                top: 488.12300000000005,
              },
              {
                left: 1102.636,
                top: 946.3710000000001,
              },
              {
                left: 500.5575,
                top: 948.4749999999999,
              },
              {
                left: 500.2902,
                top: 871.9469999999999,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "9",
            localName: "H303",
            canClick: true,
            pointArr: [
              {
                left: 830.6358,
                top: 2344.25,
              },
              {
                left: 830.6358,
                top: 2453.875,
              },
              {
                left: 559.8858,
                top: 2453.875,
              },
              {
                left: 559.8858,
                top: 2344.25,
              },
            ],
            devicePointArr: [
              {
                left: 764.831,
                top: 2356.3412,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 814.3673,
                top: 2441.4318,
              },
            ],
            logoPointArr: [
              {
                left: 695.2608,
                top: 2399.0625,
              },
            ],
          },
          {
            spaceId: "34",
            localName: "不可点击3",
            canClick: false,
            pointArr: [
              {
                left: 2083.25,
                top: 952.4670000000001,
              },
              {
                left: 2205.405,
                top: 1072.397,
              },
              {
                left: 1916.54,
                top: 1361.262,
              },
              {
                left: 2355.83,
                top: 1800.5519,
              },
              {
                left: 2224.321,
                top: 1932.0614,
              },
              {
                left: 2774.886,
                top: 2482.625,
              },
              {
                left: 3054.136,
                top: 2482.625,
              },
              {
                left: 3051.636,
                top: 249.125,
              },
              {
                left: 2790.702,
                top: 249.125,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "21",
            localName: "K305",
            canClick: true,
            pointArr: [
              {
                left: 1448.254,
                top: 1161.332,
              },
              {
                left: 1533.99,
                top: 1247.068,
              },
              {
                left: 1426.157,
                top: 1354.902,
              },
              {
                left: 1340.42,
                top: 1269.166,
              },
            ],
            devicePointArr: [
              {
                left: 1422.003,
                top: 1215.249,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1425.048,
                top: 1330.936,
              },
            ],
            logoPointArr: [
              {
                left: 1437.205,
                top: 1258.117,
              },
            ],
          },
          {
            spaceId: "12",
            localName: "H307",
            canClick: true,
            pointArr: [
              {
                left: 550.8858,
                top: 1523.837,
              },
              {
                left: 801.6358,
                top: 1523.837,
              },
              {
                left: 801.6356,
                top: 1776.25,
              },
              {
                left: 566.7966,
                top: 1776.25,
              },
              {
                left: 550.8863,
                top: 1760.3400000000001,
              },
              {
                left: 550.8863,
                top: 1747.1446,
              },
            ],
            devicePointArr: [
              {
                left: 741.3523,
                top: 1536.31,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 787.2932,
                top: 1765.2156,
              },
            ],
            logoPointArr: [
              {
                left: 676.2608,
                top: 1650.043,
              },
            ],
          },
          {
            spaceId: "23",
            localName: "K307",
            canClick: true,
            pointArr: [
              {
                left: 1872.518,
                top: 1161.332,
              },
              {
                left: 1984.771,
                top: 1273.585,
              },
              {
                left: 1903.454,
                top: 1354.902,
              },
              {
                left: 1791.201,
                top: 1242.649,
              },
            ],
            devicePointArr: [
              {
                left: 1839.921,
                top: 1215.857,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1903.245,
                top: 1332.762,
              },
            ],
            logoPointArr: [
              {
                left: 1887.986,
                top: 1258.117,
              },
            ],
          },
          {
            spaceId: "33",
            localName: "不可点击2",
            canClick: false,
            pointArr: [
              {
                left: 2774.011,
                top: 249.125,
              },
              {
                left: 1869.929,
                top: 1146.243,
              },
              {
                left: 1450.843,
                top: 1146.243,
              },
              {
                left: 1129.225,
                top: 824.625,
              },
              {
                left: 1129.225,
                top: 249.04700000000003,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "10",
            localName: "H305",
            canClick: true,
            pointArr: [
              {
                left: 830.6358,
                top: 2072.776,
              },
              {
                left: 830.6358,
                top: 2339.2498,
              },
              {
                left: 644.6346,
                top: 2339.2498,
              },
              {
                left: 644.6346,
                top: 2072.7804,
              },
            ],
            devicePointArr: [
              {
                left: 760.6403,
                top: 2087.221,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 810.5685,
                top: 2322.8575,
              },
            ],
            logoPointArr: [
              {
                left: 737.6352,
                top: 2206.0128999999997,
              },
            ],
          },
          {
            spaceId: "17",
            localName: "J306",
            canClick: true,
            pointArr: [
              {
                left: 1791.201,
                top: 1486.601,
              },
              {
                left: 1872.518,
                top: 1567.918,
              },
              {
                left: 1984.771,
                top: 1455.665,
              },
              {
                left: 1903.454,
                top: 1374.348,
              },
            ],
            devicePointArr: [
              {
                left: 1869.41,
                top: 1427.834,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1872.646,
                top: 1551.443,
              },
            ],
            logoPointArr: [
              {
                left: 1887.986,
                top: 1471.133,
              },
            ],
          },
          {
            spaceId: "29",
            localName: "Z303",
            canClick: true,
            pointArr: [
              {
                left: 1198.999,
                top: 1601.506,
              },
              {
                left: 1306.832,
                top: 1709.3400000000001,
              },
              {
                left: 1248.496,
                top: 1767.6759,
              },
              {
                left: 1140.662,
                top: 1659.842,
              },
            ],
            devicePointArr: [
              {
                left: 1161.814,
                top: 1659.332,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1247.887,
                top: 1751.2299,
              },
            ],
            logoPointArr: [
              {
                left: 1223.747,
                top: 1684.591,
              },
            ],
          },
          {
            spaceId: "25",
            localName: "K309",
            canClick: true,
            pointArr: [
              {
                left: 2005.1,
                top: 1028.749,
              },
              {
                left: 2117.354,
                top: 1141.002,
              },
              {
                left: 2059.017,
                top: 1199.339,
              },
              {
                left: 1946.764,
                top: 1087.086,
              },
            ],
            devicePointArr: [
              {
                left: 1971.698,
                top: 1081.261,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 2058.93,
                top: 1185.41,
              },
            ],
            logoPointArr: [
              {
                left: 2032.059,
                top: 1114.044,
              },
            ],
          },
          {
            spaceId: "31",
            localName: "Z306",
            canClick: true,
            pointArr: [
              {
                left: 1533.99,
                top: 1482.182,
              },
              {
                left: 1448.254,
                top: 1567.918,
              },
              {
                left: 1340.42,
                top: 1460.084,
              },
              {
                left: 1426.157,
                top: 1374.348,
              },
            ],
            devicePointArr: [
              {
                left: 1356.026,
                top: 1459.667,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1448.286,
                top: 1556.12,
              },
            ],
            logoPointArr: [
              {
                left: 1437.205,
                top: 1471.133,
              },
            ],
          },
          {
            spaceId: "35",
            localName: "不可点击4",
            canClick: false,
            pointArr: [
              {
                left: 840.9884,
                top: 2482.625,
              },
              {
                left: 2763.697,
                top: 2482.625,
              },
              {
                left: 1864.626,
                top: 1583.007,
              },
              {
                left: 1450.968,
                top: 1582.882,
              },
              {
                left: 1129.225,
                top: 1904.625,
              },
              {
                left: 840.9884,
                top: 1904.625,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "4",
            localName: "男卫",
            canClick: true,
            pointArr: [
              {
                left: 425.0108,
                top: 1309.528,
              },
              {
                left: 425.7608,
                top: 1496.25,
              },
              {
                left: 295.3858,
                top: 1496.25,
              },
              {
                left: 295.3858,
                top: 1309.528,
              },
            ],
            devicePointArr: [
              {
                left: 373.0604,
                top: 1324.099,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 410.4117,
                top: 1481.205,
              },
            ],
            logoPointArr: [
              {
                left: 360.1983,
                top: 1402.889,
              },
            ],
          },
          {
            spaceId: "14",
            localName: "J302",
            canClick: true,
            pointArr: [
              {
                left: 2013.939,
                top: 1709.3400000000001,
              },
              {
                left: 2072.276,
                top: 1767.6759,
              },
              {
                left: 2184.529,
                top: 1655.423,
              },
              {
                left: 2126.192,
                top: 1597.086,
              },
            ],
            devicePointArr: [
              {
                left: 2100.547,
                top: 1645.721,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 2072.528,
                top: 1757.9108999999999,
              },
            ],
            logoPointArr: [
              {
                left: 2099.234,
                top: 1682.381,
              },
            ],
          },
          {
            spaceId: "39",
            localName: "不可点击7",
            canClick: false,
            pointArr: [
              {
                left: 1443.834,
                top: 1572.338,
              },
              {
                left: 1381.079,
                top: 1635.093,
              },
              {
                left: 1273.245,
                top: 1527.26,
              },
              {
                left: 1331.581,
                top: 1468.923,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "2",
            localName: "健身房",
            canClick: true,
            pointArr: [
              {
                left: 486.657,
                top: 948.375,
              },
              {
                left: 487.7608,
                top: 869.6690000000001,
              },
              {
                left: 881.6793,
                top: 475.75,
              },
              {
                left: 1102.636,
                top: 475.75,
              },
              {
                left: 1102.636,
                top: 275.375,
              },
              {
                left: 968.5108,
                top: 275.375,
              },
              {
                left: 295.8858,
                top: 275.875,
              },
              {
                left: 295.3858,
                top: 948.5,
              },
            ],
            devicePointArr: [
              {
                left: 894.559,
                top: 317.1550000000002,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 459.1874,
                top: 926.6759999999999,
              },
            ],
            logoPointArr: [
              {
                left: 521.056,
                top: 477.55499999999984,
              },
            ],
          },
          {
            spaceId: "18",
            localName: "K301",
            canClick: true,
            pointArr: [
              {
                left: 1306.832,
                top: 1019.9100000000001,
              },
              {
                left: 1198.999,
                top: 1127.744,
              },
              {
                left: 1140.662,
                top: 1069.408,
              },
              {
                left: 1248.496,
                top: 961.5740000000001,
              },
            ],
            devicePointArr: [
              {
                left: 1214.354,
                top: 1016.9449999999999,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1199.818,
                top: 1108.068,
              },
            ],
            logoPointArr: [
              {
                left: 1223.747,
                top: 1044.659,
              },
            ],
          },
          {
            spaceId: "20",
            localName: "K303",
            canClick: true,
            pointArr: [
              {
                left: 1439.415,
                top: 1152.493,
              },
              {
                left: 1331.581,
                top: 1260.327,
              },
              {
                left: 1273.245,
                top: 1201.99,
              },
              {
                left: 1381.079,
                top: 1094.157,
              },
            ],
            devicePointArr: [
              {
                left: 1349.03,
                top: 1145.375,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 1331.207,
                top: 1246.808,
              },
            ],
            logoPointArr: [
              {
                left: 1356.33,
                top: 1177.242,
              },
            ],
          },
          {
            spaceId: "8",
            localName: "H302",
            canClick: true,
            pointArr: [
              {
                left: 554.8845,
                top: 2344.2501,
              },
              {
                left: 554.8858,
                top: 2453.875,
              },
              {
                left: 295.3858,
                top: 2453.875,
              },
              {
                left: 295.3858,
                top: 2344.25,
              },
            ],
            devicePointArr: [
              {
                left: 489.2795,
                top: 2358.4498,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 540.0784,
                top: 2443.279,
              },
            ],
            logoPointArr: [
              {
                left: 425.1352,
                top: 2399.0641,
              },
            ],
          },
          {
            spaceId: "40",
            localName: "不可点击8",
            canClick: false,
            pointArr: [
              {
                left: 2079.347,
                top: 1774.7469,
              },
              {
                left: 2137.683,
                top: 1833.0832,
              },
              {
                left: 2249.936,
                top: 1720.83,
              },
              {
                left: 2191.6,
                top: 1662.494,
              },
            ],
            devicePointArr: [],
            circlePointArr: [],
            detailPointArr: [],
            logoPointArr: [],
          },
          {
            spaceId: "6",
            localName: "休闲区",
            canClick: true,
            pointArr: [
              {
                left: 419.5108,
                top: 1746.3948,
              },
              {
                left: 419.5108,
                top: 1646.625,
              },
              {
                left: 295.3858,
                top: 1646.625,
              },
              {
                left: 295.3858,
                top: 1746.3948,
              },
            ],
            devicePointArr: [
              {
                left: 371.0702,
                top: 1657.578,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 410.1235,
                top: 1738.0439999999999,
              },
            ],
            logoPointArr: [
              {
                left: 357.4483,
                top: 1696.51,
              },
            ],
          },
          {
            spaceId: "3",
            localName: "接待厅",
            canClick: true,
            pointArr: [
              {
                left: 419.5108,
                top: 1634.125,
              },
              {
                left: 545.8858,
                top: 1634.125,
              },
              {
                left: 545.8858,
                top: 1508.75,
              },
              {
                left: 419.5108,
                top: 1508.75,
              },
            ],
            devicePointArr: [
              {
                left: 506.5104,
                top: 1518.962,
              },
            ],
            circlePointArr: [],
            detailPointArr: [
              {
                left: 536.6523,
                top: 1626.687,
              },
            ],
            logoPointArr: [
              {
                left: 482.6983,
                top: 1571.437,
              },
            ],
          },
        ];
        proxyData.mapData.width=3361.136
        proxyData.mapData.height=2729.25
        proxyData.mapData.spaceList=spaceList
        proxyData.formSpaceData();
      },
      // 获取空间最小宽
      setSpaceScale() {
        let data: any = proxyData.mapData;
        if (data) {
          let spaceList: any = data?.spaceList ?? [];
          let minHeight: any = Math.min.apply(
            null,
            spaceList.map((item: any) => item.height)
          );
          let minWidth: any = Math.min.apply(
            null,
            spaceList.map((item: any) => item.width)
          );
          let min: any = minHeight < minWidth ? minHeight : minWidth;
          min = min ? min : 30;
          proxyData.comMapScale = 30 / min;
        }
      },
      // 缩放的临界值修改
      setTempScale() {
        proxyData.tempScale = 0.4;
        let data: any = proxyData.mapData;
        if (data) {
          let width: any = proxyData.mapData.width;
          let height: any = proxyData.mapData.height;
          if (width > height) {
            let num: any = Math.ceil(width / proxyData.screenInfo.screenWidth);
            if (num < 10) {
              proxyData.tempScale = 0.4;
            } else if (num < 20) {
              proxyData.tempScale = 0.3;
            } else {
              proxyData.tempScale = 0.25;
            }
          } else {
            let num: any = Math.ceil(
              height / proxyData.screenInfo.screenHeight
            );
            if (num < 10) {
              proxyData.tempScale = 0.4;
            } else if (num < 20) {
              proxyData.tempScale = 0.3;
            } else {
              proxyData.tempScale = 0.25;
            }
          }
        }
      },
      /**
       * 设置地图最外框宽和高
       */
      setMapBoxStyle() {
        let mapBoxEle = document.querySelector("#spaceMain");
        if (props.mapType === 1) {
          if (proxyData.mapData && proxyData.mapData.width) {
            mapBoxEle.style.width = proxyData.mapData.width + "px";
            mapBoxEle.style.height = proxyData.mapData.height + "px";
          }
        } else {
          //     width: 3361.136,
          // height: 2729.25,
          mapBoxEle.style.width = 3361.136 * 0.6 + "px";
          mapBoxEle.style.height = 2729.25 * 0.6 + "px";
        }
      },
      /**
       * 设置空间的图标
       *
       */
      setSpaceIcon(item: any) {
        // if(item.can)
        if (item.canClick) {
          let typeName: any = getSpaceType(item.roomFuncType);
          item.icon = mapIcon[typeName].icon;
          item.selectIcon = mapIcon[typeName].selectIcon;
          item.backgroundColor = mapIcon[typeName].backgroundColor;
          item.bg = mapIcon[typeName].bg;
          item.icon = parseImgUrl("map-new-icon", item.icon);
          item.selectIcon = parseImgUrl("map-new-icon", item.selectIcon);
        } else {
          item.icon = "";
        }
      },
      midpoint(x1: any, y1: any, x2: any, y2: any) {
        return [x1 + (x2 - x1) / 2, y1 + (y2 - y1) / 2];
        // return [x1 + x2 / 2, y1 + (y2 - y1)]
      },
      /**
       * 更新地图的宽高
       */
      updateMapStyle() {
        let data: any = JSON.parse(JSON.stringify(proxyData.copyMapDaata));
        if (data) {
          data.width = data.width * proxyData.displacement.scale;
          data.height = data.height * proxyData.displacement.scale;
          let spaceList: any = data?.spaceList ?? [];
          for (let i = 0; i < spaceList.length; i++) {
            let item = spaceList[i];
            item.width = item.width * proxyData.displacement.scale;
            item.height = item.height * proxyData.displacement.scale;
            item.top = item.top * proxyData.displacement.scale;
            item.left = item.left * proxyData.displacement.scale;
          }
          proxyData.mapData = data;
          proxyData.setMapBoxStyle();
        }
      },
      /**
       * 更新地图的位置
       */
      updateMapPositon(temp: any, matrix_box: any) {
        // let left: any = (proxyData.displacement.oldSize[0] - proxyData.displacement.oldSize[0] * proxyData.displacement.scale) * proxyData.displacement.scaleTranslateProportion[0]
        // let top: any = (proxyData.displacement.oldSize[1] - proxyData.displacement.oldSize[1] * proxyData.displacement.scale) * proxyData.displacement.scaleTranslateProportion[1]

        let left: any =
          proxyData.displacement.scaleCenter[0] -
          proxyData.displacement.scaleCenter[0] * proxyData.displacement.scale;
        let top: any =
          proxyData.displacement.scaleCenter[1] -
          proxyData.displacement.scaleCenter[1] * proxyData.displacement.scale;
        if (temp > 0 && proxyData.displacement.scale < 1) {
          if (left > 0) {
            left = ~left;
          }
          if (top > 0) {
            top = ~top;
            // top = 0
          }
        }
        let newTop: any =
          proxyData.displacement.top * proxyData.displacement.scale + top;
        let newLeft: any =
          proxyData.displacement.left * proxyData.displacement.scale + left;
        if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
          newLeft = 0;
        }
        if (newLeft > 0) {
          matrix_box.style.left = 0 + "px";
        } else {
          matrix_box.style.left = newLeft + "px";
        }
        if (matrix_box.offsetHeight < proxyData.screenInfo.screenHeight) {
          matrix_box.style.top = 0;
        } else {
          if (newTop > 0) {
            matrix_box.style.top = 0;
          } else {
            matrix_box.style.top = newTop + "px";
          }
        }
      },
      /**
       * 地图缩放功能
       */
      mapScale() {
        let matrix_box: any = document.querySelector("#spaceMain");
        matrix_box.addEventListener(
          "touchstart",
          function (event: any) {
            let touches: any = event.touches;
            let events: any = touches[0];
            let events2: any = touches[1];
            // 第一个触摸点的坐标
            proxyData.displacement.pageX = events.pageX;
            proxyData.displacement.pageY = events.pageY;

            proxyData.displacement.moveable = true;

            proxyData.displacement.originScale =
              proxyData.displacement.scale || 1;
            if (events2) {
              proxyData.displacement.pageX2 = events2.pageX;
              proxyData.displacement.pageY2 = events2.pageY;
              let left: any = isNaN(parseInt(matrix_box.style.left))
                ? 0
                : parseInt(matrix_box.style.left);
              let top: any = isNaN(parseInt(matrix_box.style.top))
                ? 0
                : parseInt(matrix_box.style.top);
              proxyData.displacement.center = proxyData.midpoint(
                events.pageX,
                events.pageY,
                events2.pageX,
                events2.pageY
              );
              proxyData.displacement.left = left / proxyData.displacement.scale;
              proxyData.displacement.top = top / proxyData.displacement.scale;
              proxyData.displacement.scaleCenter = [
                proxyData.displacement.center[0] / proxyData.displacement.scale,
                proxyData.displacement.center[1] / proxyData.displacement.scale,
              ];
              proxyData.displacement.scaleTranslateProportion = [
                proxyData.displacement.scaleCenter[0] /
                  (matrix_box.offsetWidth / proxyData.displacement.scale),
                proxyData.displacement.scaleCenter[1] /
                  (matrix_box.offsetHeight / proxyData.displacement.scale),
              ];
              proxyData.displacement.oldSize = [
                matrix_box.offsetWidth / proxyData.displacement.scale,
                matrix_box.offsetHeight / proxyData.displacement.scale,
              ];
            } else {
              proxyData.displacement.moveable = false;
            }
          },
          { passive: true }
        );
        matrix_box.addEventListener(
          "touchmove",
          function (event: any) {
            if (!proxyData.displacement.moveable) {
              return;
            }
            // event.preventDefault();
            let touches: any = event.touches;
            let events: any = touches[0];
            let events2: any = touches[1];
            // 双指移动
            if (events2) {
              // 第2个指头坐标在touchmove时候获取
              if (!proxyData.displacement.pageX2) {
                proxyData.displacement.pageX2 = events2.pageX;
              }
              if (!proxyData.displacement.pageY2) {
                proxyData.displacement.pageY2 = events2.pageY;
              }

              // 双指缩放比例计算
              let zoom: any =
                proxyData.getDistance(
                  {
                    x: events.pageX,
                    y: events.pageY,
                  },
                  {
                    x: events2.pageX,
                    y: events2.pageY,
                  }
                ) /
                proxyData.getDistance(
                  {
                    x: proxyData.displacement.pageX,
                    y: proxyData.displacement.pageY,
                  },
                  {
                    x: proxyData.displacement.pageX2,
                    y: proxyData.displacement.pageY2,
                  }
                );
              // 应用在元素上的缩放比例
              let newScale: any = proxyData.displacement.originScale * zoom;
              if (newScale < proxyData.tempScale) {
                newScale = proxyData.tempScale;
              }
              // 最大缩放比例限制
              if (newScale > 1.5) {
                newScale = 1.5;
              }
              let temp: any = newScale - proxyData.displacement.scale;
              proxyData.displacement.scale = newScale;
              if (temp !== 0) {
                proxyData.updateMapPositon(temp, matrix_box);
                proxyData.updateMapStyle();
              }
            }
          },
          { passive: true }
        );
        matrix_box.addEventListener("touchend", function () {
          proxyData.displacement.moveable = true;
        });
      },
      /**
       * 获取建筑信息
       */
      getBuildingList() {
        let params: any = {
          criteria: {
            projectId: props.projectId,
          },
          orders: [
            {
              asc: true,
              column: "localId",
            },
          ],
        };
        getBuildingList(params).then((res) => {
          let resData: any = res;
          if (resData.result === "success") {
            let content: any = resData?.content ?? [];
            proxyData.buildingData = content;
            // 设置展示的建筑名称
            proxyData.setBuildingName();
          }
        });
      },
      /**
       *
       * 选择建筑
       */
      checkBuilding() {
        proxyData.showBuilding = true;
      },
      /**
       *  选择楼层
       */
      checkFloor() {
        proxyData.showFloor = true;
      },
      /**
       * 确定选择的楼层信息
       */
      comfirmFloor(item: any, flag: boolean = true) {
        proxyData.floorItem = item;
        proxyData.showFloor = false;
        // 获取地图数据
        proxyData.loadingStart();
        proxyData.getMapInfo(flag);
        /**
         *缓存建筑对应的楼层
         */
        localStorageFloor(
          proxyData.buildingItem.buildingId,
          proxyData.floorItem.id
        );
      },
      /**
       * 确定建筑
       */
      comfirmBuilding(item: any) {
        proxyData.showBuilding = false;
        proxyData.buildingItem.buildingId = item.id;
        proxyData.buildingItem.localName = item.localName;
        proxyData.loadingStart();
        proxyData.getFloorList();
      },
      /**
       * 加载loading
       */
      loadingStart() {
        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中...",
        });
      },
      /**
       * 结束
       */
      loadinngEnd() {
        Toast.clear();
      },
      /**
       * 查询楼层信息
       */
      getFloorList(flag: boolean = true) {
        if (proxyData.buildingItem.buildingId) {
          let params: any = {
            criteria: {
              projectId: props.projectId,
              buildingId: proxyData.buildingItem.buildingId,
            },
            orders: [
              {
                asc: true,
                column: "localId",
              },
            ],
          };
          getFloorList(params)
            .then((res) => {
              let resData: any = res;
              if (res.result === "success") {
                proxyData.floorData = resData?.content ?? [];
                //  设置楼层的名称
                proxyData.setFloorName();
              } else {
                proxyData.floorData = [];
              }
              if (flag && proxyData.floorData.length) {
                proxyData.getHistorySelectFloor();
                proxyData.getMapInfo();
              }
              proxyData.loadinngEnd();
            })
            .catch(() => {
              proxyData.loadinngEnd();
            });
        }
      },
      /**
       * 获取地图信息
       */
      getMapInfo(flag: boolean = true, searchItem: any = null) {
        let params: any = {
          projectId: props.projectId,
          floorId: proxyData.floorItem.id,
        };
        getMapInfo(params)
          .then((res) => {
            let resData: any = res;
            // debugger;
            if (resData.result === "success") {
              proxyData.mapData = resData?.data ?? null;
              // 切换数据的时候清楚默认样式
              proxyData.clearPreStyle();
              proxyData.formateMapData();

              // 首次进入页面的时候展示空间来源于父div
              if (searchItem) {
                let area = proxyData.getFirstSelectSpace(searchItem);
                // debugger
                if (area) {
                  proxyData.selectArea = area;
                }
              }
              proxyData.setSelectSpacePosition(proxyData.selectArea);
              // 接口返回后设置地图缩放和滚动
              nextTick(() => {
                // 地图双指缩放
                proxyData.setMapBoxStyle();
                proxyData.mapScale();
                proxyData.mapScroll();
              });
            }
          })
          .catch(() => {
            proxyData.loadinngEnd();
          });
      },
      /**
       * 获取缓存的楼层
       */
      getHistorySelectFloor() {
        let historyFloor: any = getLocalStorageFloor();
        let flag: any = false;
        let floorId: any = historyFloor[proxyData.buildingItem.buildingId];
        proxyData.floorData.map((floor: any) => {
          if (floor.id === floorId) {
            flag = true;
            proxyData.floorItem = floor;
          }
        });
        if (!flag) {
          proxyData.floorItem = proxyData.floorData[0];
        }
      },
      /**
       *  获取选中的选中空间
       */
      getHistorySpace() {
        let data: any = proxyData.mapData;
        let historySpace: any = getStorageSpaceId();
        if (data) {
          let flag: boolean = false;
          let spaceList = data?.spaceList ?? [];
          let key: any = `${proxyData.buildingItem.buildingId},${proxyData.floorItem.id}`;
          let spaceId: any = historySpace[key];
          if (spaceId) {
            spaceList.map((space: any) => {
              if (spaceId === space.spaceId) {
                proxyData.selectArea = space;
                flag = true;
              }
            });
          }
          if (!flag) {
            for (let i: any = 0; i < spaceList.length; i++) {
              if (spaceList[i].canClick) {
                proxyData.selectArea = spaceList[i];
                break;
              }
            }
          }
        }
      },
      /**
       * 首次进入页面设置选中的空间
       */
      getFirstSelectSpace(item: any) {
        let area: any = null;
        let data: any = proxyData.mapData;
        // debugger;
        if (data && item) {
          let spaceList = data?.spaceList ?? [];
          for (let i = 0; i < spaceList.length; i++) {
            if (spaceList[i].spaceId === item.spaceId) {
              // proxyData.selectArea = spaceList[i]
              area = spaceList[i];
              break;
            }
          }
        }
        return area;
      },
      setDefaultSpace(item: any) {
        if (item) {
          proxyData.buildingItem.buildingId = item.buildingId;
          proxyData.buildingItem.localName = item.buildingName
            ? item.buildingName
            : "";
          proxyData.floorItem = {
            id: item.floorId,
            localName: item.floorName ? item.floorName : "",
          };
        }
      },
      // 设备模块初始化地图
      init(item: any) {
        // debugger;
        if (item) {
          proxyData.setDefaultSpace(item);
        }
        proxyData.getBuildingList();
        proxyData.getFloorList(false);
        proxyData.getMapInfo(false, item);
      },

      /**
       *搜索后设置建筑的localName
       */
      setBuildingName() {
        if (proxyData.buildingItem.buildingId) {
          proxyData.buildingData.map((item: any) => {
            if (item.id === proxyData.buildingItem.buildingId) {
              proxyData.buildingItem.localName = item.localName;
            }
          });
        } else {
          // 设置常驻空间的时候使用
          proxyData.buildingItem = {
            buildingId: proxyData.buildingData[0].id,
            localName: proxyData.buildingData[0].localName,
          };
        }
      },
      /**
       * 搜索页面回来根据id设置楼层的localName
       */
      setFloorName() {
        if (proxyData.floorItem.id) {
          proxyData.floorData.map((item: any) => {
            if (item.id === proxyData.floorItem.id) {
              proxyData.floorItem.localName = item.localName;
            }
          });
        } else {
          // 设置常驻空间的时候使用
          proxyData.floorItem = proxyData.floorData[0];
        }
      },
    });
    watch(props, (newProps: any) => {}, {
      deep: false,
      immediate: true,
    });
    onMounted(() => {
      proxyData.spaceInfo = props.spaceInfo;
      proxyData.buildingItem.buildingId = props.buildingId;
      proxyData.floorItem.id = props.floorId;
      proxyData.spaceInfo.buildingId = props.buildingId;
      proxyData.spaceInfo.floorId = props.floorId;
      proxyData.selectArea.spaceId = props.spaceInfo.spaceId;
      // debugger;
      proxyData.init(proxyData.spaceInfo);
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.space-main {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f7f8fa;
  transform-origin: 0 0;
  transition: transform 0.3s;
  transform: scale(1);
  //transform: translateX(-100px) !important;
  padding: 0 5px;
  overflow: hidden;

  .canvasBox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .space-box {
    position: absolute;
    padding: 5px;
  }
  .space-disable-box {
    // opacity: 0.4;
  }
  .space-box-bg {
    // background: #5e8bcf;
    background: rgba(94, 139, 207, 0.4) !important;
    border: 2px solid rgba(94, 139, 207, 0.8);
    border-radius: 5px;
    // color: #fff;
    .select-device {
      span {
        color: #fff !important;
      }
    }
    .device span {
      color: #fff !important;
      font-size: 16px;
    }
  }

  .space {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0px 1px 4px rgba(1, 1, 51, 0.01),
      0px 16px 40px rgba(1, 1, 51, 0.03);
    border-radius: 4px;
    box-sizing: border-box;

    .device {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 666;

      img {
        //margin-bottom: 6px;
      }

      span {
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        //font-size: 12px;
        color: #8995ba;
        font-weight: 600;
      }
    }

    .select-device {
      transform: translate(-50%, -70%);

      img {
        margin-bottom: 6px;
      }
    }

    .circle {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }

  .select {
    border: 2px solid rgba(77, 148, 255, 0.8);
  }
  .select-disable {
    border: 2px solid rgba(77, 148, 255, 0.2);
  }

  .use-select {
    border: 5px solid #ffe823;
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.map-toolbar {
  position: fixed;
  width: 44px;
  right: 20px;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);

  .icon-search {
    width: 44px;
    height: 44px;
    border-radius: 5px;
    background: #fff;
  }

  .toolbar-item {
    width: 44px;
    height: 44px;
    background: #ffffff;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 10px;
    text-align: center;

    .toolbar-menu {
      width: 44px;
    }

    img {
      width: 12px;
      height: 14px;
      margin-top: 15px;
    }
  }

  .text-hidden {
    //font-family: Montserrat;
    display: block;
    font-style: normal;
    width: 44px;
    line-height: 44px;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    color: #4d5262;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.buiding-item {
  //font-family: 'Montserrat';
  width: 100%;
  padding: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  color: rgba(13, 13, 61, 0.86);
  border-bottom: 1px solid rgba(2, 2, 82, 0.03);
}

.active {
  color: rgba(77, 148, 255, 0.8);
}
</style>
