<template>
  <div>
    <div class="map" id="map"></div>

    <div
      style="
        position: absolute;
        top: 0;
        left: 20px;
        background-color: rgba(255, 255, 255, 0.5);
        padding: 10px;
      "
    >
      <el-checkbox-group v-model="checkList" @change="checkListChange">
        <div
          v-for="(item, index) in sensor_type"
          :key="index"
          style="display: flex; margin-bottom: 10px; align-items: center"
        >
          <el-checkbox :value="item.value" size="large" />
          <img :src="item.remark" style="width: 30px; height: 30px" />
          <div style="font-size: 14px; margin-left: 10px">{{ item.label }}</div>
        </div>
      </el-checkbox-group>
    </div>

    <div
      v-if="isshowtable"
      style="
        position: absolute;
        top: 0;
        height: 100%;
        width: 500px;
        right: 0px;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
      "
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="控制" name="1">
          <div
            v-if="currentSensor.events == null || currentSensor.events.length == 0"
            style="text-align: center"
          >
            <el-empty description="暂无数据" style="margin-top: 20px"></el-empty>
          </div>
          <div
            style="
              display: flex;
              margin-bottom: 10px;
              align-items: center;
              flex-wrap: wrap;
            "
          >
            <div
              v-for="(item, index) in JSON.parse(currentSensor.events)"
              :key="index"
              style="width: 33.33%; margin-bottom: 20px"
            >
              <el-button type="primary" size="small">{{ item.name }}</el-button>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="数据" name="2">
          <div
            v-if="
              currentSensor.datapoints == null || currentSensor.datapoints.length == 0
            "
            style="text-align: center"
          >
            <el-empty description="暂无数据" style="margin-top: 20px"></el-empty>
          </div>
          <div
            style="
              display: flex;
              margin-bottom: 10px;
              align-items: center;
              flex-wrap: wrap;
              border: 1px solid rgba(0, 0, 0, 0.1);
            "
          >
            <div
              v-for="(item, index) in JSON.parse(currentSensor.datapoints)"
              :key="index"
              style="
                display: flex;
                width: 50%;
                padding: 10px;
                background: rgba(255, 255, 255, 0.5);
                border: 1px solid rgba(0, 0, 0, 0.1);
              "
            >
              {{ item.label }} : {{ item.value ?? "-" }} {{ item.unit }} {{ item.vdate }}
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { listSensors } from "@/api/sensor/index";
import { sys } from "typescript";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sensor_type } = toRefs<any>(proxy?.useDict("sensor_type"));

const activeNames = ref(["1", "2"]);

const marks = ref([]);
const checkList = ref([]);

const bdmap = ref(null);

const checkListChange = (val) => {
  bdmap.value.clearOverlays();
  marks.value.map((i) => {
    if (checkList.value.indexOf(i.sensorType) != -1) {
      display(i);
    }
  });
};

const isshowtable = ref(false);

onMounted(() => {
  checkList.value = [];
  var map = new BMapGL.Map("map"); // 创建地图实例
  var point = new BMapGL.Point(106.237679, 37.386399); // 创建点坐标
  map.centerAndZoom(point, 10);
  map.enableScrollWheelZoom(true);
  bdmap.value = map;

  map.addEventListener("click", function (e) {
    if (e.target.className.indexOf("BMap_Marker") != -1) {
      isshowtable.value = true;
    } else {
      isshowtable.value = false;
    }
  });

  //获取数据
  listSensors({ pageSize: 10000 }).then((res) => {
    bdmap.value.clearOverlays();
    sensor_type.value.map((i) => {
      checkList.value.push(i.value);
    });

    let datac = res.rows
      .filter((i) => {
        if (i.ext1 != "" && i.ext1 != null) {
          try {
            let c = JSON.parse(i.ext1);
            if (c.location) {
              return true;
            }
          } catch (e) {
            return false;
          }
        }
        return false;
      })
      .map((i) => {
        let c = JSON.parse(i.ext1);
        display(i);
        return { name: i.name, location: c.location };
      });

    marks.value = res.rows;
  });
});

const currentSensor = ref(null);

const display = (i) => {
  let c = JSON.parse(i.ext1);
  let ioc = sensor_type.value.filter((j) => j.value == i.sensorType)[0]?.remark;

  var myIcon = new BMapGL.Icon(ioc, new BMapGL.Size(26, 26));
  // 创建Marker标注，使用小车图标
  var pt = new BMapGL.Point(c.location.lng, c.location.lat);
  var marker = new BMapGL.Marker(pt, {
    icon: myIcon,
  });
  // 将标注添加到地图
  bdmap.value.addOverlay(marker);
  var opts = {
    title: `${i.name}[${c.ip}]`, // 信息窗口标题
  };

  let points = JSON.parse(i.datapoints ?? "[]");

  let html = "";
  points.map((p) => {
    html += `<div style="width:50%">${p.label}: ${p.value ?? "-"}</div>`;
  });

  // 创建信息窗口
  var sContent = `<div style="display:flex;flex-direction: row;justify-content: flex-start;align-items: center;flex-wrap: wrap;width:400px">${html}</div>`;
  var infoWindow = new BMapGL.InfoWindow(sContent, opts);
  // 点标记添加点击事件
  marker.addEventListener("click", function () {
    isshowtable.value = true;
    currentSensor.value = i;
    bdmap.value.openInfoWindow(infoWindow, pt); // 开启信息窗口
  });
  bdmap.value.centerAndZoom(pt, 10);
};
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 100% !important;
  position: fixed !important;
}
</style>
