<template>
  <div style="width: 100%; height: 100%;">
    <l-map ref="map" :zoom="zoom" :crs="crsList[currentCrs].crs" :center="center" style="width: 100%; height: 100%;" @ready="onReady">
      <l-tile-layer :url="mapurl"/>
      <l-tile-layer :url="labelurl"/>
      <!-- :options="{ zoomOffset:crsList[currentCrs].zoomOffset }"-->
      <slot/>
    </l-map>
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
export default {
  name: 'MapView',
  components: { LMap, LTileLayer, LMarker, LPopup },
  props: {
    center: {
      type: Array,
      default: () => {
        return [27.75962, 116.06021]
      }
    }
  },
  data() {
    return {
      map: null,
      zoom: this.baseConfig.zoom,
      maxZoom: 21,
      minZoom: 10,
      currentCrs: '3857',
      crsList: {
        '3857': {
          crs: L.CRS.EPSG3857,
          zoomOffset: 0
        },
        '4326': {
          crs: L.CRS.EPSG4326,
          zoomOffset: 1
        }
      },
      mapurl: this.baseConfig.mapUrl,
      labelurl: this.baseConfig.labelUrl
    }
  },
  mounted() {
    // const that = this
    // this.$nextTick(() => {
    //   that.map = this.$refs.map.mapObject
    //   that.map.on('click', function(e) {
    //     that.$emit('click', e)
    //   })
    // })
  },
  methods: {
    onReady() {
      console.log('mapView.onReady')
      const that = this
      this.map = this.$refs.map.mapObject
      this.map.on('click', function(e) {
        that.$emit('click', e)
      })
      this.$emit('ready')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>