import { tools } from '@store/Modules/tools'
import { useQuasar } from 'quasar'
import { PropType, defineComponent, onMounted } from 'vue'

import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { ICoordinates } from '@src/model'

export default defineComponent({
  name: 'COpenStreetMap',
  components: {
    LMap,
    LTileLayer,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    coordinates: {
      type: Object as PropType<ICoordinates | null>,
      required: false,
      default: null,
    },
    coord_big: {
      type: String,
      required: false,
      default: '',
    },
    urlmap: {
      type: String,
      required: false,
      default: '',
    },
    imgmap: {
      type: String,
      required: false,
      default: '',
    },
    zoom: {
      type: Number,
      required: false,
      default: 2,
    },
  },
  setup(props, { emit }) {
    const $q = useQuasar()

    function mywidth() {
      return tools.getwidth($q) - 20
    }

    function myheight() {
      return 450
    }

    onMounted(() => {

    });

    return {
      mywidth,
      myheight,
    }
  }
})