<template>
  <div>
    <TopNav navTitle="地图模式" :showRight="false" :showLeft="true" />
    <GdMap />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import GdMap from "../../../components/GdMap/index.vue";
import { getMApWdgj } from "../../../api/common.js";
import { hintToast } from "../../../utils/tools.js";
import emitter from "../../../utils/eventBus.js";
const item = ref(null); // 警情数据
const isRlt = ref(false);
const points = ref([]);
onMounted(() => {
  window.closeMapTitle = closeMapTitle;
  _getMApWdgj();
});
//获取坐标数据
function _getMApWdgj() {
  let data = {
    dwrq: useRoute().query.time,
    sfzh: JSON.parse(window.localStorage.getItem("userInfo")).idEntityCard,
  };
  getMApWdgj(data).then((res) => {
    if (res && res.zbList.length > 0) {
      for (let i = 0; i < res.zbList.length; i++) {
        points.value = [...points.value, ...res.zbList[i]];
      }
      points.value = points.value.join(",");
      emitter.emit("drawLine", points.value);
    }
  });
}
//关闭弹窗dom
function closeMapTitle(val) {
  let doms = document.getElementById(val);
  doms.remove();
}
</script>
<style lang="scss" scoped>
.map_but_box {
  position: absolute;
  bottom: 10vw;
  width: 50%;
  left: 50%;
  z-index: 99;
  margin-left: -25%;
}

.top_btn {
  position: fixed;
  top: 16vw;
  left: 0;
  right: 12px;
  height: 24px;
  color: #fff;
  z-index: 9;
  text-align: right;

  span {
    display: inline-block;
    border: 1px solid #fff;
    line-height: 22px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  span.active {
    background: #517cea;
    border-color: #517cea;
  }
}
</style>
