<template>
  <canvas id="myCanvas" class="canvas-dom"> </canvas>
</template>
        
  <script lang="ts">
import { Search } from "vant";
import { number } from "echarts";
import { getMapInfo } from "@/apis/envmonitor";
import { defineComponent, nextTick, onMounted, reactive, toRefs } from "vue";
import { parseImgUrl } from "@/utils";
import { swiper } from "@/utils/swiper";
import { getSpaceType, mapIcon } from "@/utils/mapIcon";

export default defineComponent({
  components: {
    VanSearch: Search,
  },
  setup() {
    let spaceList: any = [];
    let ctx: any = {};
    let centerObj: any = {};
    const proxyData = reactive({
      spaceList: spaceList,
      copySpaceArr: spaceList,
      parseImgUrl: parseImgUrl,
      spaceName: "",
      width: 3361.136,
      height: 2729.25,
      scale: 0.6,
      ctx: ctx,
      centerObj: centerObj,
      // 搜索某个空间
      searchSpace() {
        proxyData.spaceList.map((item: any) => {
          // debugger
          console.log(item.localName == proxyData.spaceName);
          console.log("搜索====");
          console.log(item.localName);
          console.log(proxyData.spaceName);
          if (item.localName == proxyData.spaceName) {
            console.log("搜索到某个空间");
            item.fillColor = "red";
            item.shadow = true;
            proxyData.initCanvas();
          } else {
            // item.shadow = false;
            // item.fillColor = "#ececec";
          }
        });
      },
      // 放大
      zommAdd() {
        console.log("被点击了");
        if (proxyData.scale > 3) {
          return;
        }
        proxyData.scale = proxyData.scale + 0.1;
        // debugger;
        proxyData.formSpaceData();
        proxyData.initCanvas();
      },
      // 缩小
      zommDel() {
        if (proxyData.scale < 0.3) {
          return;
        }
        proxyData.scale = proxyData.scale - 0.1;
        proxyData.formSpaceData();
        proxyData.initCanvas();
      },
      sliderSwiper() {
        // 获取当前时间的下标
        let sliderList: any = document.querySelector("#sliderListId");
        sliderList.addEventListener("touchstart", function (e: any) {});
        swiper(sliderList, {
          swipeLeft: function (e: any) {},
          swipeRight: function (e: any) {},
        });
      },
      /**
       * 设置空间的图标
       *
       */
      setSpaceIcon(item: any) {
        // if(item.can)
        if (item.canClick) {
          // debugger
          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 = "";
        }
      },
      // canvas画图
      initCanvas() {
        let canvasDom: any = document.querySelector("#myCanvas");
        let ctx: any = canvasDom.getContext("2d");
        // debugger;
        proxyData.drawDpiBegin(
          canvasDom,
          ctx,
          proxyData.width,
          proxyData.height
        );
        proxyData.ctx = ctx;
        proxyData.spaceList.map((item: any) => {
          if (item.canClick) {
            let circleArr: any = item.circlePointArr;
            ctx.beginPath();
            ctx.fillStyle = item.fillColor;
            let pointLeftArr: any = [];
            let pointTopArr: any = [];
            item.pointArr.map((childItem: any, index: any) => {
              childItem.left = childItem.left;
              childItem.top = childItem.top;
              if (index == 0) {
                ctx.moveTo(childItem.left, childItem.top);
              } else {
                ctx.lineTo(childItem.left, childItem.top);
              }
              pointLeftArr.push(childItem.left);
              pointTopArr.push(childItem.top);
            });
            // proxyData.drawIcon(ctx, "coffee.svg", item.devicePointArr[0]);

            ctx.fill();
            ctx.closePath();
            ctx.beginPath();
            if (circleArr && circleArr.length) {
              ctx.fillStyle = item.fillColor;
              ctx.lineTo(circleArr[3].left, circleArr[3].top);
              ctx.bezierCurveTo(
                circleArr[2].left,
                circleArr[2].top,
                circleArr[1].left,
                circleArr[1].top,
                circleArr[0].left,
                circleArr[0].top
              );
            }
            ctx.closePath();
            ctx.fill();
            let min1: any =
              proxyData.MaxAndMin(pointLeftArr)[1] -
              proxyData.MaxAndMin(pointLeftArr)[0];
            let min2: any =
              proxyData.MaxAndMin(pointTopArr)[1] -
              proxyData.MaxAndMin(pointTopArr)[0];
            let min: any = min1 < min2 ? min1 : min2;
            ctx.beginPath();
            ctx.font = "12px serif";
            ctx.textAlign = "center";
            ctx.fillStyle = item.fillColor === "#fff" ? "#000" : "#8995BA";
            ctx.fillText(
              item.localName,
              item.logoPointArr[0].left,
              item.logoPointArr[0].top + 15,
              item.width
            );
            let localName: any = item.localName;
            let drutionLef: any = localName ? item.localName["length"] * 12 : 0;
            if (item.icon) {
              proxyData.drawIcon(ctx, item.icon, {
                left: item.logoPointArr[0].left - drutionLef / 2 + 15,
                top: item.logoPointArr[0].top - 15,
              });
            }
            // ctx.closePath();
            // ctx.beginPath();
            // ctx.shadowOffsetX = 5; //阴影x轴位移。正值向右，负值向左。
            // ctx.shadowOffsetY = 5; //阴影y轴位移。正值向下，负值向上。
            // item.shadowColor = "#000";
            // ctx.shadowBlur = 10; //阴影模糊滤镜。数据越大，扩散程度越大。
            ctx.closePath();
          } else {
            let img: any = new Image();
            img.src = require("@/assets/svg/bg_disable.png");
            img.onload = function () {
              ctx.beginPath();
              item.pointArr.map((item: any, index: any) => {
                if (index === 0) {
                  ctx.moveTo(item.left, item.top);
                } else {
                  ctx.lineTo(item.left, item.top);
                }
              });
              let pat: any = ctx.createPattern(img, "repeat");
              ctx.fillStyle = pat;
              ctx.fill();
              ctx.closePath();
              ctx.lineWidth = 2;
              ctx.strokeStyle = "#DFE3ED";
              ctx.stroke();
            };
          }
        });
        proxyData.drawDpiEnd(canvasDom, ctx);
      },
      MaxAndMin(arr: any) {
        return [Math.min.apply(null, arr), Math.max.apply(null, arr)];
      },
      // 绑定事件
      bindEvent() {
        let canvasDom: any = document.querySelector("#myCanvas");
        // 点击事件
        canvasDom.addEventListener("click", proxyData.detect);
      },
      // 解决canvas画图模糊的问题
      // 开始画
      drawDpiBegin(dom: any, context: any, width: any, height: any) {
        context.save();
        let scaleValue = window.devicePixelRatio;
        console.log("ddd", width * scaleValue * proxyData.scale);
        dom.setAttribute("width", width * scaleValue * proxyData.scale);
        dom.setAttribute("height", height * scaleValue * proxyData.scale);

        dom.style.width = width * proxyData.scale + "px";
        dom.style.height = height * proxyData.scale + "px";
        context.scale(scaleValue, scaleValue);
        context.clearRect(
          0,
          0,
          width * proxyData.scale,
          height * proxyData.scale
        );
      },
      // 画图介绍
      drawDpiEnd(dom: any, context: any) {
        context.restore();
      },
      // 地图点击事件
      detect(event: any) {
        let canvasDom: any = document.querySelector("#myCanvas");
        let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
        let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
        for (let i = 0; i < proxyData.spaceList.length; i++) {
          let item: any = proxyData.spaceList[i];
          let devicePointArr: any = item.devicePointArr;
          let pointArr: any = item.pointArr;
          let iconFlag: any = false;
          devicePointArr.map((dev: any, index: any) => {
            if (
              x >= dev.left &&
              x <= dev.left + 20 &&
              y >= dev.top &&
              y < dev.top + 20
            ) {
              // alert("我被点了!");
              // console.log("我被点了!")
              iconFlag = true;
              console.log(`我被点了设备图标!${index}`);
            }
          });
          if (iconFlag) {
            break;
          }
          let dot: any = {
            x: x,
            y: y,
          };
          let coordinates: any = pointArr;
          coordinates.map((item: any) => {
            item.x = item.left;
            item.y = item.top;
          });
          let flag = proxyData.queryPtInPolygon(dot, coordinates);
          // console.log(flag);
          if (flag) {
            console.log("点击了区域" + item.localName);
            break;
          }
        }
      },
      queryPtInPolygon(point: any, polygon: any) {
        let p1: any = "";
        let p2: any = "";
        let p3: any = "";
        let p4: any = "";

        p1 = point;
        p2 = { x: 1000000000000, y: point.y };

        let count: any = 0;
        //对每条边都和射线作对比
        for (let i = 0; i < polygon.length - 1; i++) {
          p3 = polygon[i];
          p4 = polygon[i + 1];
          if (checkCross(p1, p2, p3, p4) == true) {
            count++;
          }
        }
        p3 = polygon[polygon.length - 1];

        p4 = polygon[0];
        if (checkCross(p1, p2, p3, p4) == true) {
          count++;
        }

        return count % 2 == 0 ? false : true;

        //判断两条线段是否相交
        function checkCross(p1: any, p2: any, p3: any, p4: any) {
          let v1: any = { x: p1.x - p3.x, y: p1.y - p3.y };
          let v2: any = { x: p2.x - p3.x, y: p2.y - p3.y };

          let v3: any = { x: p4.x - p3.x, y: p4.y - p3.y };
          let v: any = crossMul(v1, v3) * crossMul(v2, v3);

          v1 = { x: p3.x - p1.x, y: p3.y - p1.y };
          v2 = { x: p4.x - p1.x, y: p4.y - p1.y };

          v3 = { x: p2.x - p1.x, y: p2.y - p1.y };
          return v <= 0 && crossMul(v1, v3) * crossMul(v2, v3) <= 0
            ? true
            : false;
        }

        //计算向量叉乘
        function crossMul(v1: any, v2: any) {
          return v1.x * v2.y - v1.y * v2.x;
        }
      },
      // 画图标
      drawIcon(ctx: any, url: any, iconPerstion: any) {
        if (iconPerstion) {
          let img: any = new Image();
          img.src = url;
          img.onload = function () {
            ctx.drawImage(img, iconPerstion.left, iconPerstion.top, 25, 15);
            iconPerstion.width = 30;
            iconPerstion.height = 30;
          };
        }
      },
      // 设置区域颜色
      setSpaceColor() {
        proxyData.spaceList.map((item: any, index: any) => {
          if (index % 2 == 0) {
            item.fillColor = "#ffcc33";
          } else if (index % 3 == 0) {
            item.fillColor = "#ccff99";
          } else {
            item.fillColor = "#ececec";
          }
        });
        console.log(proxyData.spaceList);
      },
      // 数据格式化
      formSpaceData() {
        proxyData.spaceList = JSON.parse(proxyData.copySpaceArr);
        proxyData.spaceList.map((item: any) => {
          if (item.canClick) {
            item.fillColor = "#fff";
          }
          item.devicePointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.scale;
            dev.top = dev.top * proxyData.scale;
          });
          item.logoPointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.scale;
            dev.top = dev.top * proxyData.scale;
          });
          item.pointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.scale;
            dev.top = dev.top * proxyData.scale;
          });
          item.circlePointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.scale;
            dev.top = dev.top * proxyData.scale;
          });
          item.detailPointArr.map((dev: any) => {
            dev.left = dev.left * proxyData.scale;
            dev.top = dev.top * proxyData.scale;
          });
          proxyData.setSpaceIcon(item);
        });
      },
      // 格式化地图数据
      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.copySpaceArr = JSON.stringify(spaceList);
        proxyData.formSpaceData();
      },
    });
    onMounted(() => {
      setTimeout(() => {
        proxyData.formatePage();
        nextTick(() => {
          proxyData.initCanvas();
          proxyData.bindEvent();
        });
      }, 500);
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
    <style lang="scss" scoped>
.canvas-box {
  width: 100%;
  height: calc(100% - 80px);
  // overflow-x: hidden;
  // overflow-y: hidden;
}
.com-upload {
  width: 100%;
  height: 100%;
  // overflow: hidden;
}
.space-search {
  position: fixed;
  width: 350px;
  left: 10px;
  top: 50px;
  z-index: 333;
}
</style>
        