<template>
  <div class="map-container">
    <div id="map2">
    </div>

    <div class="info-window" ref="safetyInfoWindow" v-show="isShowWindow">
      <el-descriptions border :column="2">
        <el-descriptions-item label="资产名称">
          {{ row.zichanmingcheng }}
        </el-descriptions-item>
        <el-descriptions-item label="检查记录">
          {{ row.jianchajilu }}
        </el-descriptions-item>
        <el-descriptions-item label="资产名称">
          {{ (row.land_id_lands_id_relation && row.house_id_houses_id_relation) ? (row.land_id ? row.land_id_lands_id_relation.name : row.house_id_houses_id_relation.name) : "" }}
        </el-descriptions-item>
        <el-descriptions-item label="资产类型">
          {{ row.zichanleixing }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowWindow: false,
      row: {},
      markerList: [],
      cluster: ""
    }
  },
  computed: {
    leases () {
      return this.$store.state.bigdata.safety;
    },
    type () {
      return this.$store.state.bigdata.type;
    }
  },
  methods: {
    pickRow({ row }) {
      this.isShowWindow = true;
      this.row = row;
      let location = row.land_id_lands_id_relation ? row.land_id_lands_id_relation.zichanweizhi : row.house_id_houses_id_relation.zichanweizhi;
      if (location) {
        let lat, lng;
        [lng, lat] = location.split(",");
        this.map.panTo([lng, lat]);
        this.map.setZoom(30);
        this.infoWindow.open(this.map, [lng, lat]);
      } else {
        this.map.panTo(this.center);
        this.infoWindow.open(this.map, this.center);
      }
    },
    init(adcode = ["320200"]) {

      this.map = new AMap.Map("map2", {
        pitch: 50,
        viewMode: "3D",
        center: [120.283692, 31.614211],
        rotation: -12, //初始地图顺时针旋转的角度
        zoom: 20,
        mapStyle: "amap://styles/blue"
      });
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true,
        autoMove: true,
        avoid: [20, 20, 20, 20],
        content: this.$refs["safetyInfoWindow"],
        closeWhenClickMap: true,
        offset: new AMap.Pixel(-10, -10),
      });
      this.map.on('click',e => {
        console.log(e)
      })
    },
    setMapMarker() {
      this.map.remove(this.markerList);
      this.markerList = [];

      this.leases.forEach((item) => {
        let location = item.land_id_lands_id_relation ? item.land_id_lands_id_relation.zichanweizhi : item.house_id_houses_id_relation.zichanweizhi;
        if (location) {
          let lat, lng;
          [lng, lat] = location.split(",");
          let marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [Number(lng), Number(lat)],
            offset: new AMap.Pixel(-13, -30),
          });
          let markerContent = document.createElement("div");
          markerContent.setAttribute("class", "map-marker");
          markerContent.onclick = () => {
            this.pickRow({ row: item });
          };
          let markerImg = document.createElement("img");
          markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
          let markerSpan = document.createElement("span");
          markerSpan.setAttribute("class", "map-marker__text");
          markerSpan.innerText =
            item.zichanmingcheng?.length > 4
              ? item.zichanmingcheng.slice(0, 2) +
              ".." +
              item.zichanmingcheng.slice(item.zichanmingcheng.length - 2)
              : item.zichanmingcheng;
          markerContent.appendChild(markerImg);
          markerContent.appendChild(markerSpan);
          marker.setContent(markerContent);
          this.markerList.push(marker);
        }
      });
      this.map.add(this.markerList);

      this.addCluster();
    },
    addCluster() {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
        gridSize: 50, // 设置网格像素大小
        //renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
        //renderMarker: this.renderMarker, // 自定义非聚合点样式
      });
    },
    renderMarker(context) {
      let content =
        '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
      let offset = new AMap.Pixel(-9, -9);
      context.marker.setContent(content);
      context.marker.setOffset(offset);
    },
    renderClusterMarker(context) {
      let factor = Math.pow(context.count / this.list.length, 1 / 18);
      let div = document.createElement("div");
      let Hue = 180 - factor * 180;
      let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
      let fontColor = "hsla(" + Hue + ",100%,90%,1)";
      let borderColor = "hsla(" + Hue + ",100%,40%,1)";
      let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
      div.style.backgroundColor = bgColor;
      let size = Math.round(
        30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
      );
      div.style.width = div.style.height = size + "px";
      div.style.border = "solid 1px " + borderColor;
      div.style.borderRadius = size / 2 + "px";
      div.style.boxShadow = "0 0 5px " + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + "px";
      div.style.color = fontColor;
      div.style.fontSize = "14px";
      div.style.textAlign = "center";
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    },
  },
  watch: {
    leases () {
      // if (this.map) {
      //   this.$nextTick(() => {
      //     this.setMapMarker();
      //   })
      // }
    },
    type (newVal) {
      if (this.map && newVal === 3) {} {
        setTimeout(() => {
          this.setMapMarker();
          if (this.leases.length > 0) {
            setTimeout(() => {
              let data = this.leases[0]
              let location = data.land_id_lands_id_relation ? data.land_id_lands_id_relation.zichanweizhi : data.house_id_houses_id_relation.zichanweizhi;
              let lat, lng;
              [lng, lat] = location.split(",");
              this.map.panTo([lng, lat]);
            },500)
          }
        },500)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>

<style scoped lang="scss">
.map-container {
  height: 100%;
  width: 100%;
}
#map2 {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
<style lang="scss">
.map-marker {
  display: flex;
  flex-direction: column;
  align-items: center;

  &__text {
    background: #fff;
    zoom: 0.75;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    filter: drop-shadow(2px 2px 5px #00000055);
  }
}
</style>
