<template>
  <div id="MapContainer" />
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
declare const SMap: any
declare const Plugins: any

export default defineComponent({
  name: 'MyMap',
  displayName: 'm-map',
  emits: ['complete', 'event'],
  setup(_, ctx) {
    let map: any = null
    onMounted(async () => {
      await nextTick()
      initMap()
    })
    function initMap() {
      map = new SMap.Map('MapContainer', {
        viewMode: '3D',
        center: [1141.75319496382872, -480.0854532701907],
        zooms: [6, 9],
        zoom: 7,
        pitch: 45,
        mapStyle: 'smap://styles/dark', // 'smap://styles/dark' 'smap://styles/image'
        showBuildingBlock: true,
      }).on(SMap.MapEvent.maploaded, () => {
        ctx.emit('complete')
        hideCommunity()
        addListener()
        map.getLayer('model_white_zw').visible = true
        map.getLayer('model_white_WEIHAI33').visible = true
        map.getLayer('model_white_zhenxing2').visible = true
        map.getLayer('model_white_zw').opacity = 0.8
        map.getLayer('model_white_WEIHAI33').opacity = 0.8
        map.getLayer('model_white_zhenxing2').opacity = 0.8
      })
    }
    function hideCommunity() {
      map.hideXQ_Poly()
      map.hideMPZ()
      map.hideXQ_Point()
    }
    // function showCommunity() {
    //   map.showXQ_Poly()
    //   map.showMPZ()
    //   map.showXQ_Point()
    // }
    function addListener() {
      // 触发地图点击事件
      map.on(SMap.MapEvent.click, (view: any, eventParamter: any) => {
        const { x, y } = eventParamter.mapPoint
        console.log([x, y])
        view.hitTest(eventParamter).then((res: any) => {
          if (res.results && res.results.length > 0) {
            ctx.emit(
              'event',
              res.results[0] && res.results[0].graphic.attributes
            )
          }
        })
      })
    }
    /**
     * ------  聚焦点位 -------
     * @param {String} x [必填 - x坐标]
     * @param {String} y [必填 - y坐标]
     * @param {Number} zoom [可选 - 放大比例（默认为6）]
     */
    function focus(x: string | number, y: string | number, zoom = 6) {
      if (!map || !x || !y) {
        console.error('传入的坐标点不能为空')
        return
      }
      map.setZoomAndCenter(zoom, [+x, +y])
    }

    // 添加边界
    function addBoundary({
      name = '',
      weight = 10,
      count = 10,
      color = 'rgba(51,145,255,.6)',
      maskColor = [0, 17, 33, 0.9],
    }) {
      const boundary = {
        boundaryType: 'jd_boundary',
        boundaryDefinition: `name like '%${name}%'`,
        boundarydistance: weight,
        bounarycount: count,
        boundaryColor: color,
        maskColor: maskColor,
      }
      const Boundary = new Plugins.MaskBoundary(map.view)
      Boundary.add(boundary)
      return Boundary
    }

    return {
      focus,
      addBoundary,
    }
  },
})
</script>

<style lang="stylus" scoped>
#MapContainer
  position fixed
  width 100%
  height 100vh
  top 0
  left 0
</style>
<style lang="stylus">
.esri-component.esri-attribution.esri-widget
  display none
</style>
