<template>
  <el-dialog v-model="visible" title="地图">
    <div
      v-loading="loading"
      element-loading-text="地图正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div id="map_container" style="width: 100%; height: 500px" />
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { nextTick, onBeforeUnmount, ref, watch } from "vue";
import {
  getChecklistInspectionStatusRecordMap,
  getCustomCheckRecordMap,
} from "@/request/hazard_investigation.js";

const aPng = new URL("/src/assets/images/map/h.png", import.meta.url).href;
const bPng = new URL("/src/assets/images/map/50.png", import.meta.url).href;
let mapInstance;
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  id: {
    type: String,
    required: true,
    default: "",
  },
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
  listType: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const loading = ref(false);

const fnMapInit = async () => {
  loading.value = true;
  await nextTick();
  const resData =
    props.listType === "1"
      ? await getChecklistInspectionStatusRecordMap({
          CHECKRECORD_ID: props.id,
        })
      : await getCustomCheckRecordMap({
          CHECKRECORD_ID: props.id,
        });
  mapInstance = new window.BMapGL.Map("map_container");
  mapInstance.centerAndZoom(
    new window.BMapGL.Point(
      resData.cinfo.LONGITUDE || "116.3972282409668",
      resData.cinfo.LATITUDE || "39.90960456049752"
    ),
    16
  );
  mapInstance.enableScrollWheelZoom(true);
  mapInstance.setMapStyleV2({
    styleId: "6f501abeb2a0cc0d961d110b9407b127",
  });
  loading.value = false;
  mapInstance && mapInstance.clearOverlays();
  fnAddPoint(resData);
};
const fnAddPoint = (info) => {
  for (let i = 0; i < info.varList.length; i++) {
    const point = new window.BMapGL.Point(
      props.list[i].LONGITUDE,
      props.list[i].LATITUDE
    );
    const deviceSize = new window.BMapGL.Size(23, 24);
    const deviceIcon = new window.BMapGL.Icon(bPng, deviceSize, {
      imageSize: deviceSize,
    });
    const marker = new window.BMapGL.Marker(point, {
      icon: deviceIcon,
    });
    mapInstance.addOverlay(marker);
  }
  for (let i = 0; i < info.hdList.length; i++) {
    const point = new window.BMapGL.Point(
      info.hdList[i].LONGITUDE,
      info.hdList[i].LATITUDE
    );
    const deviceSize = new window.BMapGL.Size(23, 24);
    const deviceIcon = new window.BMapGL.Icon(aPng, deviceSize, {
      imageSize: deviceSize,
    });
    const marker = new window.BMapGL.Marker(point, {
      icon: deviceIcon,
    });
    mapInstance.addOverlay(marker);
  }
  const point = new window.BMapGL.Point(
    info.checkrecord.LONGITUDE,
    info.checkrecord.LATITUDE
  );
  const deviceSize = new window.BMapGL.Size(23, 24);
  const deviceIcon = new window.BMapGL.Icon(aPng, deviceSize, {
    imageSize: deviceSize,
  });
  const marker = new window.BMapGL.Marker(point, {
    icon: deviceIcon,
  });
  mapInstance.addOverlay(marker);
};
const stop = watch(
  () => props.visible,
  (val) => {
    if (val && !mapInstance) {
      fnMapInit();
      stop && stop();
    }
  },
  {
    immediate: true,
  }
);
onBeforeUnmount(() => {
  if (mapInstance) {
    mapInstance.destroy();
    mapInstance = null;
  }
});
</script>

<style scoped lang="scss"></style>
