<template>
  <div id="map-container" style="width: 100%; height: 100%;"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
let infoWindow = null;
export default {
  name: 'AmapContainer',
  props: {
    zoom: {
      type: Number,
      default: 7
    },
    center: {
      type: Array,
      default: () => [116.397428, 39.90923]
    },
    marker: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      map: null,
      AMap: null
    }
  },
  mounted() {
    this.initMap()
  },
  watch: {
    marker() {
      let points = this.marker
      // 添加控件
      if(points.length){
        this.renderCluster(points)
     }
      // 触发地图加载完成事件
      this.$emit('map-loaded', this.map)
    }
  },
  methods: {
    renderCluster(points) {
      const _this = this;
      this.map.plugin(["AMap.MarkerCluster"], function () {
        _this.cluster = new AMap.MarkerCluster(_this.map, points, {
          gridSize: 60, // 设置网格像素大小
          maxZoom: 4,
          renderClusterMarker: _this.renderClusterMarker, // 自定义聚合点样式
          renderMarker: _this.renderMarker, // 自定义非聚合点样式
        });
        _this.map.setFitView();
      });
    },
    renderClusterMarker(context) {
      let content = `<div style="width:50px;height:50px;border-radius:50%;background:rgba(0, 82, 255, 0.7);line-height:50px;text-align:center;color:#fff;">${context.count}</div>`;
      context.marker.setContent(content);
    },
    renderMarker(context) {
      const _this = this;
      const res = context.data[0];
      let className = "marker_title";
      let borderColor = "#f5b817 ";
      if (
        this.showInfoMarker &&
        this.showInfoMarker.data[0].truckNo === context.data[0].truckNo
      ) {
        className = "marker_title active";
        borderColor = "#4580ff ";
      }
      let markerContent = `<div class="marker_box" style="width:133px;height:66px;position:relative">
                <div >
                    <div class="names" style="position:absolute;font-size:12px;color:#fff;top:5px;right:3px;width:100px;text-align:center">${res.truckNo}</div>
                </div>
                <div style="width: 133px;text-align:center;"><img src="https://cdn.sckaiwu.cn/kll/app/static/img/marker.png" width="133" height="66"/></div>
                </div>`;
      var offset = new AMap.Pixel(0, 0);
      context.marker.setContent(markerContent);
      context.marker.setOffset(offset);
      context.marker.setExtData(res);
      //鼠标点击marker弹出自定义的信息窗体
      // context.marker.on("click", function (e) {
      //     _this.map.setFitView(context.marker);
      //     _this.showInfoMarker = context;
      //     // _this.openInfoWindow(res);
      // });
    },
    async initMap() {
      try {
        const { key, version, plugins } = {
          key: '1bb842e2ef7bc5cc8d4d5aaa5de6b5c6',
          version: '2.0',
          plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye']
        }

        const AMap = await AMapLoader.load({
          key,
          version,
          plugins
        })

        this.AMap = AMap
        this.map = new AMap.Map('map-container', {
          zoom: this.zoom,
          center: this.center,
          resizeEnable: true,
          viewMode: '3D',
          mapStyle: "amap://styles/darkblue",
        })
        infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          showShadow: true,
          offset: new AMap.Pixel(-200, 312),
        });
        // _this.getTreeDataSource(true);
        this.renderCluster(this.marker)


      } catch (error) {
        console.error('地图加载失败:', error)
      }
    },

    // 添加标记点
    addMarker(lnglat, title = '', content = '') {
      if (!this.map || !this.AMap) return

      const marker = new this.AMap.Marker({
        position: lnglat,
        title,
        content,
        icon: diyIcon,
        offset: new AMap.Pixel(-13, -30)
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
      })

      this.map.add(marker)
      return marker
    },

    // 设置中心点
    setCenter(lnglat) {
      if (this.map) {
        this.map.setCenter(lnglat)
      }
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy()
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .marker_box {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

/deep/ .marker_title {
  // width: 120px;
  // height: 34px;


  // line-height: 34px;
  text-align: center;
  font-weight: 500;
  color: #FFF;
  position: relative;
  margin-bottom: 8px;

  .names {
    padding: 0 15px;
    background-color: #0C60F4;
    border-radius: 4px;
    font-size: 18px;
    display: flex;
    width: 120px;
    text-align: center;
  }
}
</style>