<template>
  <div>
    <TopNav navTitle="地图模式" :showRight="false" :showLeft="true" />
    <GdMap />
    <div class="top_btn">
      <span @click="checkActive(!isRlt)">{{
        isRlt ? "点位图" : "热力图"
      }}</span>
    </div>
    <div class="map_but_box">
      <van-button round block type="primary" :to="`/yyzx/yjxx/yjDetail?id=${useRoute().query.id}`">
        列表模式
      </van-button>
    </div>
  </div>
</template>
<script setup>
import { getSyrkYjxx, getInfo } from "../../../api/yjxx.js";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import TopNav from "../../../components/topNav.vue";
import GdMap from "../../../components/GdMap/index.vue";
import YjItem from "../../../components/yjItem.vue";
import emitter from "../../../utils/eventBus.js";
import { hintToast } from "../../../utils/tools.js";
const item = ref(null); // 警情数据
const isRlt = ref(false);
onMounted(() => {
  window.closeMapTitle = closeMapTitle;
  getYjDetail();
});
const yjRyDetail = ref({});
const stepsData = ref([]);
// 获取预警信息详情
function getYjDetail() {
  getInfo(useRoute().query.id).then((res) => {
    yjRyDetail.value = res;
    getListBySfz(1);
  });
}
//关闭弹窗dom
function closeMapTitle(val) {
  let doms = document.getElementById(val);
  doms.remove();
}

// 通过身份证查人
function getListBySfz(val) {
  getSyrkYjxx({
    zjhm: yjRyDetail.value.yjRysfzh,
    cph: yjRyDetail.value.yjClcph,
    pageCurrent: 1,
    pageSize: 100,
  }).then((res) => {
    stepsData.value = res.records;
    let coords = [];
    let arr = [];
    let array = [];
    for (let index = 0; index < stepsData.value.length; index++) {
      if (
        stepsData.value[index].jd != null &&
        stepsData.value[index].wd != null
      ) {
        coords.push({
          jd: stepsData.value[index].jd,
          wd: stepsData.value[index].wd,
          yjDz: stepsData.value[index].yjGzymc,
          yjFssj: stepsData.value[index].yjFssj,
        });
        arr.push(stepsData.value[index].jd);
        arr.push(stepsData.value[index].wd);
        let obj = {
          lng: stepsData.value[index].jd,
          lat: stepsData.value[index].wd,
          count: 1,
        };
        array.push(obj);
      }
    }
    let coordsStr = arr.join(",");
    // 点位图
    if (val == 1) {
      if (coords.length > 0) {
        emitter.emit("bd_closeOverlay");
        emitter.emit("addPointArea", {
          coords: coords,
          icon: require("../../../assets/pointIcon/icon-gzy.png"),
          flag: "yj",
        });
      } else {
        hintToast("点位没有坐标信息！");
      }
    } else {
      if (array.length > 0) {
        emitter.emit("bd_closeOverlay");
        emitter.emit("thermodynamicChart", {
          flag: "rlt",
          arr: array,
        });
      } else {
        hintToast("热力图没有坐标信息！");
      }
    }
  });
}
//切看地图查看方式
function checkActive(flag) {
  isRlt.value = flag;
  if (flag) {
    getListBySfz(2);
  } else {
    getListBySfz(1);
  }
}
//设置点位图
// function setPoint() {
//   emitter.emit("bd_closeOverlay");
//   let coords = [
//     { jd: "104.046207", wd: "30.62707" },
//     { jd: "104.064353", wd: "30.617933" },
//     { jd: "104.063922", wd: "30.641426" },
//   ];
//   emitter.emit("addPointArea", {
//     coords: coords,
//     icon: require("../../../assets/pointIcon/icon-gzy.png"),
//     flag: "yj",
//   });
//   emitter.emit(
//     "drawLine",
//     "104.046207,30.62707,104.064353,30.617933,104.063922,30.641426"
//   );
// }
// //随机生成坐标
// function setPint() {
//   let array = [];
//   for (let i = 0; i < 2000; i++) {
//     let obj = {
//       lng: 104.019822 + Math.random() / 5,
//       lat: 30.450369 + Math.random() / 5,
//       count: 1,
//     };
//     array.push(obj);
//   }
//   return array;
// }
// //设置热力图
// function setRlt() {
//   emitter.emit("bd_closeOverlay");
//   emitter.emit("deletePointArea", "drawLine");
//   emitter.emit("thermodynamicChart", {
//     flag: "rlt",
//     arr: setPint(),
//   });
// }
</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>
