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

<script lang="ts" setup>
import { MyMap } from '@/components/my-map'
import { Location, FocusOptions } from '@/components/my-map/types'
import { nextTick, onMounted } from 'vue'
import jinganPath from '@/utils/jingan-path.js'

let map: MyMap
let polygonLayer: any

defineExpose({
  zoomIn,
  zoomOut,
  zoomTo,
  focus,
  addPoints,
  remove,
  setCommunityPoints,
})
const emit = defineEmits(['event', 'complete'])

onMounted(async () => {
  await nextTick()
  map = MyMap.useMap('SMap').with({
    el: 'container',
    mode: '2D',
    center: [-1931.2637583608503, 4334.0159596985895],
    zoom: 4,
    zooms: [4, 10],
    style: 'smap://styles/dark',
    appKey: 'DTZ49ACE32PBN73GXPF085',
    netType: 'internet',
  })

  map.on('load', onComplete).on('click', (_, data) => emit('event', data))
  // .on('zoom', (e) => console.log('zoom: ', e))
  // .on('move', (e) => console.log('move: ', e))
  // .on('blur', (e) => console.log('blur: ', e))
  // .on('focus', (e) => console.log('focus: ', e))
  // .on('drag', (e) => console.log('drag: ', e))
  // .on('resize', (e) => console.log('resize: ', e))
  // .on('dblclick', (e) => console.log('dblclick: ', e))
  // .on('mousewheel', (e) => console.log('mousewheel: ', e))
})

function onComplete() {
  polygonLayer = map.add('polygon', {
    data: {
      path: jinganPath as [number, number][],
    },
    fillColor: 'transparent',
    color: '#ED6F30',
    lineWidth: 2,
  })
  setCommunityPoints()
  emit('complete')
}

function setCommunityPoints(query = "HPB_NAME = '静安区'") {
  map.instance.getLayer('wg_gis_xq_point').visible = false
  map.instance.setFilter('wg_gis_mpz', query)
  map.instance.setFilter('wg_gis_xq_poly', query)
}

function zoomIn() {
  map.zoomIn()
}
function zoomOut() {
  map.zoomOut()
}
function zoomTo(level: number) {
  map.zoomTo(level)
}
function focus(location: Location, options?: FocusOptions) {
  map.focus(location, options)
}

function addPoints(options) {
  console.log('撒点', options)
  return map.add('point', options)
  // map.add('point', {
  //   data: [
  //     {
  //       x: 121.59751247938203,
  //       y: 29.835174764721145,
  //       text: 'test message',
  //       title: 'icon',
  //     },
  //   ],
  //   size: 20,
  //   icon: icon1,
  //   labelKey: 'title',
  //   labelOptions: {
  //     size: 20,
  //     offset: [0, 20],
  //     color: '#fff',
  //   },
  // })
}

function remove(layer) {
  layer && map.remove(layer)
}
</script>

<style lang="stylus" scoped>
#container
  width 100vw
  height 100vh
  position fixed
  top 0
  left 0
</style>
