<template>
  <Teleport v-if="parentDom" :to="parentDom">
    <div
        class="marker-aggre map-marker"
        :class="{ active: active === fmLatlng }"
        @mouseenter="showBoundary"
        @mouseleave="hideBoundary"
        @click="onClick"
        v-bind="$attrs"
    >
      <div class="marker-shape">
        <div class="info">
          <span class="count">{{ data.count }}</span>
        </div>
      </div>
    </div>
  </Teleport>
</template>
<script>
import Marker from './marker';
export default {
  mixins: [Marker],
  data () {
    return {
      type: 'aggre'
    };
  },
  methods: {
    showBoundary() {
      if (this.boundary && !this.isMobile) {
        this.boundary.setVisibility(true);
      } else {
          const color = {
            strokeColor: getComputedStyle(document.documentElement).getPropertyValue('--lofty-map-polygon-borderColor') || 'rgb(25, 25, 25)',
            fillColor: getComputedStyle(document.documentElement).getPropertyValue('--lofty-map-polygon-bgColor') || 'rgba(25, 25, 25, 0.2)',
            lineWidth: 2
          };
          const linestring = new window.H.geo.LineString();
          const linestringArr = [];
          const boundary = this.data.bounds;
          boundary.forEach((itemBoundary, index) => {
            if (Array.isArray(itemBoundary)) {
              if (index === 0) {
                itemBoundary.forEach(point => {
                  linestring.pushPoint(point);
                });
              } else {
                const itemLine = new window.H.geo.LineString();
                itemBoundary.forEach(point => {
                  itemLine.pushPoint(point);
                });
                linestringArr.push(itemLine);
              }
            } else {
              linestring.pushPoint(itemBoundary);
            }
          });
          const geoPolygon = new window.H.geo.Polygon(
              linestring,
              linestringArr
          );
          this.boundary = new window.H.map.Polygon(geoPolygon, {
            style: color
          });
          this.map.addObject(this.boundary);
          this.boundary.setVisibility(true);
      }
      this.onMouseEnter();
    },
    hideBoundary() {
      if (this.boundary) {
        this.boundary.setVisibility(false);
      }
      this.onMouseLeave();
    },
    onClick() {
      const clickEvent = this.events && this.events.click;
      if (clickEvent) {
        clickEvent.call(this);
      }
      this.hideBoundary();
      let { lat, lng } = this.data;
      let zoom = this.map.getZoom();
      if (this.isMobile) {
        zoom += 2;
      } else {
        zoom += zoom < 10 ? 3 : zoom <= 16 ? 2 : 1;
      }
      this.map.getViewModel().setLookAtData(
          { position: { lat, lng }, zoom },
          true
      );
    },
  },
  beforeUnmount() {
    if (this.boundary && this.map) {
      this.map.removeObject(this.boundary);
    }
  }
};
</script>
<style lang="scss">
.price-info {
  display: none;
  position: absolute;
  z-index: 2;
  width: 200px;
  background: #fff;
  color: #333;
  padding: 10px;
  box-shadow: 2px 5px 9px 0px rgba(0, 0, 0, 0.1);
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
  top: 0;
  text-align: left;
  h4 {
    margin-top: 0;
    margin-bottom: 10px;
  }
  &:after {
    content: '';
    border: 10px solid transparent;
    border-top-color: #fff;
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -20px;
    transform: translate(-50%, 0);
  }
}
.marker-aggre .marker-shape {
  &:hover {
    .price-info {
      display: block;
    }
  }
}
</style>
