<template>
  <div class="main">
    <EasyMapComponent
        class="map"
        @easyMapLoad="mapLoad"
    />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import * as source from "ol/source";
import * as layer from "ol/layer";
import * as format from "ol/format";
import * as style from "ol/style";
import img1 from "./bayonet-bg.png";
import gif1 from "./u53.gif";

export default defineComponent({
  name: '',
  components: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      map: <any>null,
      mapFunc: null,
      Source: <any>null,
      Layer: <any>null,
    })
    const mapLoad = (map, func) => {
      state.map = map
      state.mapFunc = func
      initLayer()
    }
    const initLayer = () => {
      state.Source = new source.Vector({
        features: [],
        wrapX: false
      })
      state.Layer = new layer.VectorImage({
        source: state.Source,
        zIndex: 10
      })
      state.map.addLayer(state.Layer)
      initPoint()
    }
    const initPoint = () => {
      state.Source.clear()
      const arr = []
      for (let i = 0; i < 500; i++) {
        arr.push({
          id: i,
          gif: i < 500,
          wkt: `POINT(${that.$util.randomNum(109, 110, 6)} ${that.$util.randomNum(19, 20, 6)})`
        })
      }
      const defaultStyle = [
        new style.Style({
          image: new style.Icon({
            src: img1,
            scale: 1,
          })
        }),
      ]
      const features = arr.map(v => {
        const feat: any = new format.WKT().readFeature(v.wkt)
        feat.set('isGif', v.gif)
        feat.setStyle(defaultStyle)
        return feat
      })
      state.Source.addFeatures(features)
      gifler(gif1).frames(document.createElement('canvas'), (ctx, frame) => {
        features.forEach(v => {
          if (v.get('isGif')) {
            v.setStyle([...defaultStyle, new style.Style({
              image: new style.Icon({
                img: ctx.canvas,
                imgSize: [frame.width, frame.height],
                opacity: 0.8,
                scale: 0.1
              })
            })])
          }
        })
        ctx.clearRect(0, 0, frame.width, frame.height)
        ctx.drawImage(frame.buffer, frame.x, frame.y)
      }, true)
      setInterval(() => {
        features.forEach(v => {
          v.getGeometry().setCoordinates([that.$util.randomNum(109, 110, 6), that.$util.randomNum(19, 20, 6)])
        })
      }, 1000)
    }
    return {
      ...toRefs(state),
      mapLoad
    }
  },
})
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
}
</style>
