
declare module '@vue-leaflet/vue-leaflet' {
  import type { DefineComponent } from 'vue';
  export const LMap: DefineComponent;
  export const LIcon: DefineComponent;
  export const LTileLayer: DefineComponent;
  export const LMarker: DefineComponent;
  export const LControlLayers: DefineComponent;
  export const LTooltip: DefineComponent;
  export const LPopup: DefineComponent;
  export const LPolyline: DefineComponent;
  export const LPolygon: DefineComponent;
  export const LRectangle: DefineComponent;
}

import {
  defineComponent, ref, computed,
} from 'vue'
import { tools } from '@src/store/Modules/tools'


export default defineComponent({
  name: 'Home',
  components: {
    LMap,
    LIcon,
    LTileLayer,
    LMarker,
    LControlLayers,
    LTooltip,
    LPopup,
    LPolyline,
    LPolygon,
    LRectangle,
  },

  setup() {

    const zoom = ref(2)
    const iconWidth = ref(25)
    const iconHeight = ref(40)

    const iconUrl = computed(() => `https://placekitten.com/${iconWidth.value}/${iconHeight.value}`)
    const iconSize = computed(() => [iconWidth.value, iconHeight.value])

    function log(a: any) {
      console.log(a)
    }

    function changeIcon() {
      iconWidth.value += 2
      if (iconWidth.value > iconHeight.value) {
        iconWidth.value = Math.floor(iconHeight.value / 2)
      }
    }

    return {
      tools,
      zoom,
      iconWidth,
      iconHeight,
      iconUrl,
      iconSize,
      changeIcon,
      log,
    }
  },
})
