<template>
  <div class="sm_build">
    <div class="floor-list">
      <div
        :class="currentIndex == index ? 'active-foolt' : ''"
        v-for="(item, index) in list"
        :key="index"
        @click="clickFloor(index, item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div id="sm-build-map"></div>
  </div>
</template>

<script>
import { handleColor } from "@/utils/myFuntion.js";
import buildjson from "./buildjson/buildjson";
import { getNumNew } from "@/api/taicangpop/data";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      list: [],
      currentIndex: null,
      globalMap: null,
      townCenter: [31.47687, 121.11881],
      mapLayer: {
        geoJsonLayer: null,
      },
      geojson: null,
      buildData: [],
      previousLayer: null,
      highlightStyle: {
        fill: true,
        fillColor: "#FD873F",
        fillOpacity: 0.9,
        color: "#02F5FF", //描边颜色
        weight: 2, //描边宽度
      },
    };
  },
  mounted() {
    this.initMap();
  },
  computed: {
    ...mapGetters([
      "xiaoquIntroduce",
      "queryParamsXiaoqu",
      "erweiBuild",
      "houseItem",
    ]),
  },
  watch: {
    "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
      if (newValue) {
        this.getBuildData();
      }
    },
    "houseItem.id"(newValue, oldValue) {
      if (!newValue) {
        this.getBuildData(this.currentIndex);
      }
    },
  },
  methods: {
    initMap() {
      this.globalMap = L.map("sm-build-map", {
        // crs: L.CRS.Baidu,
        center: this.townCenter, // 地图中心[纬度，经度]
        zoom: 11, // 地图层级
        maxZoom: 22,
        minZoom: 11,
        zoomControl: false, // 放大缩小按钮
        attributionControl: false, // 右下角leaflet图标
      });
      this.globalMap.createPane("geoJsonLayer");
      this.globalMap.getPane("geoJsonLayer").style.zIndex = 502;
      this.globalMap.getPane("geoJsonLayer").style.pointerEvents = "none";
      this.mapLayer.geoJsonLayer = L.featureGroup().addTo(this.globalMap);

      this.globalMap.createPane("marker");
      this.globalMap.getPane("marker").style.zIndex = 502;
      this.globalMap.getPane("marker").style.pointerEvents = "none";
      this.mapLayer.marker = L.featureGroup().addTo(this.globalMap);

      this.globalMap.on("zoomend", (e) => {
        let zoom = this.globalMap.getZoom();
        if (zoom <= 19) {
          this.globalMap.removeLayer(this.mapLayer.marker);
        } else {
          this.globalMap.addLayer(this.mapLayer.marker);
        }
      });
    },

    // 获取该楼层数据
    async getBuildData(index) {
      this.list = buildjson[this.erweiBuild.title.replace("幢", "")];
      let res = await getNumNew({
        buildingId: this.queryParamsXiaoqu.buildingId,
      });
      this.buildData = handleColor(res.data);
      this.clickFloor(index ? index : 0);
    },
    clickFloor(index, item) {
      if (item && item.disable) {
        this.$notify({
          title: "警告",
          message: "该楼层功能正在开发中！",
          type: "warning",
        });
        return;
      }
      this.currentIndex = index;
      this.mapLayer.geoJsonLayer.clearLayers();
      this.mapLayer.marker.clearLayers();
      this.geojson = null;
      this.initPolygon();
    },
    //   渲染对应面
    initPolygon() {
      let JSON_DATA = this.list[this.currentIndex].json;

      this.geojson = L.geoJSON(JSON_DATA, {
        pane: "geoJsonLayer",
        style: {
          fill: true,
          fillColor: "#0B3369",
          fillOpacity: 0.9,
          color: "#02F5FF", //描边颜色
          weight: 2, //描边宽度
        },
        onEachFeature: (feature, layer) => {
          let houseItem = this.buildData.find(
            (item) =>
              item.name.replace("室", "") == feature.properties.TextString
          );

          if (houseItem && houseItem.id) {
            feature.properties = { ...feature.properties, ...houseItem };
          }
          const attr = feature.properties;
          if (!houseItem) {
            console.log(attr.TextString, houseItem);
          }

          const point = layer._bounds.getCenter();
          this.addTextMarker(attr, point);

          layer.on("click", (e) => {
            const item = e.target.feature.properties;
            if (item.TextString == null) return;
            if (!item.id) {
              this.$notify({
                title: "警告",
                message: "该户数据缺失,请联系管理员!",
                type: "warning",
              });
              return;
            }
            if (this.previousLayer) {
              this.geojson.resetStyle(this.previousLayer);
            }
            this.previousLayer = layer;
            layer.setStyle(this.highlightStyle);

            this.$store.commit("SET_BUILDING_WIDTH", {
              id: item.id,
              buildingId: item.building_id,
              deptId: item.dept_id,
              buildingWidth:
                this.houseItem.buildingWidth > 0
                  ? this.houseItem.buildingWidth
                  : window.innerWidth,
              name: item.name,
              keyId: item.id,
            });
          });
        },
      }).addTo(this.mapLayer.geoJsonLayer);

      this.globalMap.fitBounds(this.geojson.getBounds());
    },
    addTextMarker(attr, point) {
      if (attr.TextString == null) return;
      var myIcon = L.divIcon({
        className: "building-marker",
        html: `<div class="houser">
          <div class="point-color">
            <div  style="background: red;display:${
              attr.daycount > 0 ? "block" : "none"
            }"></div>
            <div style="background: green;display:${
              attr.daycount == 0 ? "block" : "none"
            }"></div>
            </div>
          <div class="house-is">
            <img
            src="${require("@/assets/images/ui/isd.png")}"
            alt=""
            class="typeis"
            style="display:${attr.is_d ? "block" : "none"}"
        />
              <img
            src="${require("@/assets/images/ui/isj.png")}"
            class="typeis"
            style="display:${attr.is_j ? "block" : "none"}"
          />
           <img
            src="${require("@/assets/images/ui/isk.png")}"
            alt=""
            class="typeis"
            style="display:${attr.is_k ? "block" : "none"}"
        />
         <img
            src="${require("@/assets/images/ui/isx.png")}"
            alt=""
            class="typeis"
            style="display:${attr.is_x ? "block" : "none"}"
        />
            </div>
            <div class="house-name">${attr.TextString}</div>
            <div class="left-color" style="background:${attr.leftColor}"></div>
            <div class="right-color">
            <div style=" background: ${attr.rightTopColor} "></div>
            <div
              class="rigth-bottom"
              style="display:${
                attr.color == "HF" || attr.color == "NF" ? "block" : "none"
              }"
            ></div>
          </div>
          </div>`,
      });
      L.marker([point.lat, point.lng], {
        icon: myIcon,
        interactive: false, //禁止marker交互，防止遮挡点不到面
      }).addTo(this.mapLayer.marker);
    },
  },
};
</script>

<style lang="scss" scoped>
.sm_build {
  position: relative;
  flex: 1;
  .floor-list {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 600;
    width: 180px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
    gap: 10px; /* 元素之间的间距 */
    padding: 16px; /* 容器内边距 */
    & > div {
      text-align: center;
      color: #fff;
      cursor: pointer;
      padding: 4px 6px;
      font-size: 15px;
      border: 1px solid #0075b7;
      border-radius: 6px;
      margin-bottom: 6px;
      background: #031c3c;
    }

    & > div:hover,
    .active-foolt {
      background: #1292c7 !important;
    }
  }
}
#sm-build-map {
  height: 650px;
}
</style>
