<template>
  <div class="mobile">
    <van-cell-group v-for="(item, index) in list" :key="index" class="mt-10">
      <van-cell title="存在风险" :label="item.RISK_DESCR" />
      <van-cell title="检查内容">
        <template #label>
          {{ item.CHECK_CONTENT }}
          <van-checkbox-group
            :model-value="item.ISNORMAL"
            direction="horizontal"
          >
            <van-checkbox :name="0">合格</van-checkbox>
            <van-checkbox :name="1" checked-color="red"> 不合格 </van-checkbox>
            <van-icon
              v-if="item.ISNORMAL.includes(1)"
              name="info-o"
              color="blue"
              @click="
                $router.push({
                  path,
                  query: { HIDDEN_ID: item.HIDDEN_ID },
                })
              "
            />
          </van-checkbox-group>
        </template>
      </van-cell>
    </van-cell-group>
    <div id="map_container" style="width: 100%; height: 500px" />
    <van-cell-group>
      <van-cell title="检查人" :value="info.USERS" />
      <van-cell title="检查部位" :value="info.PARTSNAME" />
      <van-cell title="检查时间" :value="info.CHECK_TIME" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import {
  getInspectionRecordInfo,
  getInspectionRecordMapInfo,
} from "@/request/mobile.js";
import { useRoute } from "vue-router";

defineProps({
  path: {
    type: String,
    default: "/mobile/identifying_parts/hidden_danger_view",
  },
});
const _50 = new URL("/src/assets/images/map/50.png", import.meta.url).href;
const _h = new URL("/src/assets/images/map/h.png", import.meta.url).href;
let mapInstance;
const route = useRoute();
const { CHECKRECORD_ID, IDENTIFICATIONPARTS_ID } = route.query;
const info = ref({});
const list = ref([]);
const fnGetData = async () => {
  const resData = await getInspectionRecordInfo({
    IDENTIFICATIONPARTS_ID,
    CHECKRECORD_ID,
  });
  for (let i = 0; i < resData.varList.length; i++) {
    resData.varList[i].ISNORMAL = [resData.varList[i].ISNORMAL];
  }
  resData.pd.PARTSNAME = resData.idData?.PARTSNAME;
  info.value = resData.pd;
  list.value = resData.varList;
};
const fnGetDataMap = async () => {
  const resData = await getInspectionRecordMapInfo({
    CHECKRECORD_ID,
    loading: false,
  });
  fnMapInit(resData.cinfo.LONGITUDE, resData.cinfo.LATITUDE, resData);
};
const fnMapInit = (LONGITUDE, LATITUDE, resData) => {
  mapInstance = new window.BMapGL.Map("map_container");
  mapInstance.centerAndZoom(
    new window.BMapGL.Point(
      LONGITUDE || "116.3972282409668",
      LATITUDE || "39.90960456049752"
    ),
    3
  );
  mapInstance.enableScrollWheelZoom(true);
  fnAddPoint(resData);
};
onMounted(async () => {
  await fnGetData();
  await fnGetDataMap();
});
const fnAddPoint = (resData) => {
  for (let i = 0; i < resData.varList.length; i++) {
    const myIcon = new window.BMapGL.Icon(_50, new window.BMapGL.Size(23, 25));
    const pt = new window.BMapGL.Point(
      resData.varList[i].LONGITUDE,
      resData.varList[i].LATITUDE
    );
    const marker = new window.BMapGL.Marker(pt, {
      icon: myIcon,
    });
    mapInstance.addOverlay(marker);
  }
  for (let i = 0; i < resData.hdList.length; i++) {
    const myIcon = new window.BMapGL.Icon(_h, new window.BMapGL.Size(23, 25));
    const pt = new window.BMapGL.Point(
      resData.hdList[i].LONGITUDE,
      resData.hdList[i].LATITUDE
    );
    const marker = new window.BMapGL.Marker(pt, {
      icon: myIcon,
    });
    mapInstance.addOverlay(marker);
  }
  const myIcon4 = new window.BMapGL.Icon(_50, new window.BMapGL.Size(23, 25));
  const pt4 = new window.BMapGL.Point(
    resData.checkrecord.LONGITUDE,
    resData.checkrecord.LATITUDE
  );
  const marker4 = new window.BMapGL.Marker(pt4, {
    icon: myIcon4,
  });
  mapInstance.addOverlay(marker4);
};
onBeforeUnmount(() => {
  mapInstance && mapInstance.destroy();
  mapInstance = null;
});
</script>

<style scoped></style>
