<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'

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

defineExpose({ zoomIn, zoomOut })

onMounted(async () => {
  await nextTick()

  map = MyMap.useMap('SMap').with({
    el: 'container',
    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,
  })
}

function zoomIn() {
  map.zoomIn()
}
function zoomOut() {
  map.zoomOut()
}
function zoomTo() {
  map.zoomTo(20)
}
function move() {
  map.focus([121.59751247938203, 29.835174764721145], { zoom: 16 })
}

function addPoints() {
  pointsLayer = 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 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>
