<template>
  <div id="mapDiv" style="width: 100vw; height: 60vh"></div>
</template>

<script setup>
import {
  ref,
  onMounted,
  defineEmits,
  getCurrentInstance,
  onUnmounted,
  nextTick,
  inject,
  defineProps,
  watch,
} from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
const { proxy } = getCurrentInstance();
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const reload = inject("reload");
const props = defineProps({
  isShow: Boolean,
  default: false,
});
onMounted(() => {
  let map = new EzMap("mapDiv", {
  });
  mapUtil.value = new MapUtil(map);
  remove();
  window.map = map

  // 设置地图边界
  // mapUtil.value.setBoundary();
  // 地图缩放
  mapUtil.value.listenZoom();
  // 设置地图中心点及图层
  emitter.on("setMapCenter", (res) => {
    mapUtil.value.setMapCenter(res.location, res.zoomLevel);
  });

  //快速定位
  emitter.on("toPoint", (res) => {
    mapUtil.value.toPoint(res.point, res.duration, res.type);
  });

  // 绘制图形
  emitter.on("drawShape", (res) => {
    mapUtil.value.plot(res, resFun);
  });
  // 聚合撒点
  emitter.on("addPoint", (obj) => {
    mapUtil.value.aggregateScatteringPoint(obj.coords, obj.icon, obj.flag);
  });
  //清除所有装备
  emitter.on("deletePointZBAll", () => {
    mapUtil.value.removeGpsZbOverlayAll();
  });
  // 带标题的撒点
  emitter.on("addPointTakeTittle", (obj) => {
    mapUtil.value.makerSkiTakeTitle(obj.coords, obj.icon, obj.flag, obj.undel);
  });
  // 撒点
  emitter.on("addPointArea", (obj) => {
    mapUtil.value.makerSki(obj.coords, obj.icon, obj.flag, obj.sfdw);
  });
  // 犯罪预测
  emitter.on("setFzyc", (res) => {
    mapUtil.value.addRectangleNumb(res.data, res.index);
  });
  // 撒多边形图
  emitter.on("polygonFigure", (obj) => {
    mapUtil.value.drawFigure(obj);
  });
  //清除所有图层
  emitter.on("bd_closeOverlay", (res) => {
    mapUtil.value.clearAllpoints();
  });
  //清除某个聚合覆盖物
  emitter.on("deletePoint", (res) => {
    mapUtil.value.removeJhElement(res);
  });
  // 清除某个覆盖物 
  emitter.on("deletePointArea", (res) => {
    mapUtil.value.removeElement(res);
  });

  // 热力图显示
  emitter.on("thermodynamicChart", (res) => {
    mapUtil.value.showHeatDrawing(res.flag, res.arr);
  });
  // 清除热力图
  emitter.on("clearThermodynamicChart", (res) => {
    mapUtil.value.removeHeatDrawing();
  });
  // 鹰眼地图位置
  emitter.on("showSlide", (res) => {
    let overviewmap = document.getElementsByClassName("ol-overviewmap")[0];
    overviewmap.style.left = "385px";
    let layers = document.getElementsByClassName("ez-layers")[0];
    layers.style.right = "390px";
    layers.style.top = "10em";
  });
  emitter.on("hideSlide", (res) => {
    let overviewmap = document.getElementsByClassName("ol-overviewmap")[0];
    overviewmap.style.left = "5px";
    let layers = document.getElementsByClassName("ez-layers")[0];
    layers.style.right = "10px";
    layers.style.top = "10em";
  });
  // 获取坐标点
  emitter.on("getCoordinatePoint", (res) => {
    onMapClick();
  });
  // 图标点击
  mapUtil.value.iconClick();
  // 巡逻线
  emitter.on("drawLine", (res) => {
    mapUtil.value.displayLine(res);
  });

  // 犯罪预测路径规划
  emitter.on("getRouter", (res) => {
    mapUtil.value.getRouter(res.allArray1, res.allArray3, res.localPoint);
  });

  // 添加犯罪预测数字
  emitter.on("addRectangleNumb2", (res) => {
    mapUtil.value.addRectangleNumb2(res.points, res.index);
  });

  // 清除线
  emitter.on("clearLine", (res) => {
    mapUtil.value.clearLine(res);
  });
  // 展示圆
  emitter.on("disCircle", (res) => {
    mapUtil.value.displayCircle(res.jd, res.wd, res.radius);
  });
  // 画圆
  emitter.on("setCircle", (res) => {
    mapUtil.value.writeCircle(cirFun);
  });
});
function onMapClick() {
  mapUtil.value.clickMap(fun);
}
function fun(val) {
  emitter.emit("getcoord", val);
}
function resFun(val, type, flag) {
  emitter.emit("coordString", {
    coord: val,
    type: type,
    flag: flag,
  });
}
// 获取到圈选的中心点和半径
function cirFun(radius, center) {
  emitter.emit("drawCircle", {
    radius: radius,
    center: center,
  });
  mapUtil.value.showRadius(radius, center);
}

// 移除多余的地图盒子
function remove() {
  try {
    const map = document.getElementById("mapDiv");
    if (map.length > 1) {
      map.removeChild(map.firstChild);
    }
  } catch (error) { }
}
onUnmounted(() => {
  emitter.off("toPoint");
  emitter.off("drawShape");
  emitter.off("addPoint");
  emitter.off("addPointTakeTittle");
  emitter.off("addPointArea");
  emitter.off("deletePointArea");
  emitter.off("thermodynamicChart");
  emitter.off("clearThermodynamicChart");
  emitter.off("getCoordinatePoint");
  emitter.off("bd_closeOverlay");
  emitter.off("deletePoint");
  emitter.off("polygonFigure");
  emitter.off("setFzyc");
  emitter.off("mapClick");
  emitter.off("drawLine");
  emitter.off("getRouter");
  emitter.off("addRectangleNumb2");
  emitter.off("clearLine");
  emitter.off("setCircle");
  emitter.off("disCircle");
  emitter.off("deletePointZBAll");
});
</script>

<style lang="scss" scoped>
::v-deep .ol-overviewmap {
  width: fit-content;
  z-index: 19;
  position: absolute;
  left: 385px;
}

::v-deep .ez-layers {
  top: 10em;
  right: 390px;
}

::v-deep .ol-control {
  top: 90px;
  left: 10px;
  bottom: unset;
  right: unset;
}
</style>
