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

<script lang="ts" setup>
import icon1 from '@/assets/images/search.png'
import { MyMap } from '@/components/my-map'
import { nextTick, onMounted } from 'vue'
import jinganPath from '@/utils/jingan-path.js'
import { ajax, api } from '@/ajax'

let map: MyMap
let pointsLayer: any
let linesLayer: any
let polygonLayer: any
let boundary: any

defineExpose({ zoomIn, zoomOut, zoomTo, addPoints, remove })

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

  map.on('load', onComplete).on('click', (a, b) => console.log(a, b))
  // .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,
  })
  // // eslint-disable-next-line
  // map.instance.setFilter('wg_gis_xq_point', "HPB_NAME = '静安区'")
  // eslint-disable-next-line
  map.instance.setFilter('wg_gis_mpz', "HPB_NAME = '静安区'")
  // eslint-disable-next-line
  map.instance.setFilter('wg_gis_xq_poly', "HPB_NAME = '静安区'")
}

function zoomIn() {
  map.zoomIn()
}
function zoomOut() {
  map.zoomOut()
}
function zoomTo(level: number) {
  map.zoomTo(level)
}

function addPoints(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 addLines() {
  linesLayer = map.add('line', {
    data: {
      path: [
        [0, 0],
        [121.59751247938203, 29.835174764721145],
      ],
      text: 'test message',
    },
    labelKey: 'text',
  })
}
function addPolygon() {
  polygonLayer = map.add('polygon', {
    data: {
      path: [
        [0, 0],
        [121.59751247938203, 29.835174764721145],
        [21.59751247938203, 0.835174764721145],
        [0, 0],
      ],
      text: 'test message',
    },
  })
}

function remove(layer) {
  layer && map.remove(layer)
}

function removeLayers() {
  map.remove(pointsLayer)
  map.remove(linesLayer)
  map.remove(polygonLayer)
  boundary.remove()
}
</script>

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