<template>
  <div style="width: 100%; height: 100%;">
    <l-map ref="map" :zoom="zoom" :crs="crsList[currentCrs].crs" :options="{zoomControl: false}" :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 { 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: 'http://t1.tianditu.com/vec_w/wmts?layer=vec&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447',
      mapurl: this.baseConfig.mapUrl,
      // mapurl: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      // labelurl: 'http://t1.tianditu.com/cva_w/wmts?layer=cva&style=default&tilematrixset=w&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=adbdd8e08c292f6cb4e3f0289f7d0447'
      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', this.map)
    }
  }
}
</script>

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

</style>