<template>
  <section class="AiTMap">
    <div ref="tmap" class="map"/>
  </section>
</template>

<script>

import {mapState} from 'vuex'
export default {
  name: "AiTMap",
  props: {
    /**
     * 地区id
     */
    areaId: String,
    /**
     * 地图参数,详情见https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
     */
    ops: {default: () => ({})},
    /**
     * 加载三方库,以腾讯地图文档要求进行添加
     */
    libraries: {default: () => ["service"]},
    /**
     * 地图实例,支持用.sync绑定获取
     */
    map: Object,
    /**
     * 地图库,支持用.sync绑定获取
     */
    lib: Object,
  },
  computed: {...mapState(['config'])},
  data() {
    return {
      key: "3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY",
      tmap: null,
      mapLib: null
    }
  },
  methods: {
    injectLib(url, cb) {
      const script = document.createElement('script')
      script.type = 'text/javascript';
      script.id = "aitmap";
      script.src = url;
      script.addEventListener('load', () => {
        cb && cb()
      })
      document.body.appendChild(script);
    },
    initTMap() {
      this.mapLib = TMap
      this.tmap = new TMap.Map(this.$refs.tmap, {
        zoom: 11,
        center: new TMap.LatLng(this.config.lat, this.config.lng),
        ...this.ops
      })
      this.$emit('loaded')
      this.$emit('update:lib', TMap)
      this.$emit('update:map', this.tmap)
      this.areaId && this.getMapArea()
    },
    fitBounds(latLngList, count = 0) {
      // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
      let {mapLib: TMap} = this
      if (TMap) {
        if (latLngList.length === 0) {
          return null;
        }
        let boundsN = latLngList[0].getLat();
        let boundsS = boundsN;
        let boundsW = latLngList[0].getLng();
        let boundsE = boundsW;
        latLngList.forEach((point) => {
          point.getLat() > boundsN && (boundsN = point.getLat());
          point.getLat() < boundsS && (boundsS = point.getLat());
          point.getLng() > boundsE && (boundsE = point.getLng());
          point.getLng() < boundsW && (boundsW = point.getLng());
        });
        return new TMap.LatLngBounds(
            new TMap.LatLng(boundsS, boundsW),
            new TMap.LatLng(boundsN, boundsE)
        );
      } else {
        if (count < 5) {
          this.fitBounds(latLngList, ++count)
        }
      }
    },
    getMapArea() {
      let {mapLib, areaId, tmap: map} = this, keyword = areaId.substring(0, 6)
      let polygons = new TMap.MultiPolygon({map, geometries: []});
      new mapLib.service.District({
        polygon: 2,
        maxOffset: 100
      }).search({keyword}).then(res => {
        if (res?.result) {
          let center = res.result?.[0]?.[0]?.location
          this.tmap.setCenter(center)
          res.result.forEach((level) => {
            level.forEach((place) => {
              let bounds = [];
              let newGeometries = place.polygon.map((polygon, index) => {
                bounds.push(this.fitBounds(polygon)); // 计算能完整呈现行政区边界的最小矩形范围
                return {
                  id: `${place.id}_${index}`,
                  paths: polygon, // 将得到的行政区划边界用多边形标注在地图上
                };
              });
              bounds = bounds.reduce((a, b) => {
                return this.fitBounds([
                  a.getNorthEast(),
                  a.getSouthWest(),
                  b.getNorthEast(),
                  b.getSouthWest(),
                ]);
              }); // 若一行政区有多个多边形边界，应计算能包含所有多边形边界的范围。
              polygons.updateGeometries(newGeometries);
              this.tmap.fitBounds(bounds);
            });
          });
        }
      })
    }
  },
  mounted() {
    if (!window?.TMap) {
      window.initTMap = this.initTMap
      this.injectLib(`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=${this.libraries.toString()}&callback=initTMap`)
    } else {
      this.initTMap()
    }
  },
  destroyed() {
    this.map.destroy()
  }
}
</script>

<style lang="scss" scoped>
.AiTMap {
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 0;
  min-height: 0;

  ::v-deep.map {
    height: 100%;

    & > div > div {
      &:nth-of-type(2), &:nth-of-type(3) {
        display: none;
      }
    }
  }
}
</style>
