<template>
  <div id="map" ref="mapDiv" class="baseMap">
    <slot/>
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { mapGetters } from 'vuex'

export default {
  name: 'LeafletMap',
  props: {
    satellite: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      map: null,
      baseLayer: [],
      satelliteLayer: null,
      markers: [], // 选点
      pois: [], // 兴趣点结果
      layers: {
        bjPoint: '', // 部件点图层
        grid: '', // 单元网格图层
        shopPoint: '' // 商铺图层
      },
      form: {
        longitude: '', // 定位点经度
        latitude: '', // 定位点纬度
        communityId: '', // 社区ID
        communityName: '', // 社区名称
        gridId: '', // 单元网格ID
        componentId: '', // 部件ID
        componentName: '' // 部件名称
      }, // 主页面返回值
      showpoi: true,
      keywords: '', // 查询关键字
      limit: 100, // 兴趣点查询的最大结果数
      showEventPointPopup: true, // 是否显示事部件的popup
      queryEventSwitch: '1', // 1==查询事件；0==查询部件
      compListOpts: [] // 部件选择下拉框option
    }
  },
  computed: {
    ...mapGetters([
      'baseUrl',
      'partsUrl',
      'mapUrl',
      'gridUrl',
      'partsAllUrl'
    ])
  },
  mounted () {
    this.initMap()
  },
  watch: {
    satellite (val, oldVal) {
      if (val&&!oldVal) {
        this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
          maxZoom: 22
        })
        this.satelliteLayer.addTo(this.map)
      } else {
        this.map.removeLayer(this.satelliteLayer)
      }
    }
  },
  methods: {
    initMap () {
      const map = L.map(this.$refs.mapDiv, {
        minZoom: 14,
        maxZoom: 25,
        center: this.baseConfig.center,
        zoom: this.baseConfig.zoom,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      map.doubleClickZoom.disable()
      this.map = map // data上需要挂载
      window.map = map
      this.$emit('onload', map)
      // 加载图层
      this.addLayers()
    },
    addLayers () {
      // 加载天地图底图和标注
      const tdtMap = L.tileLayer(this.baseConfig.mapUrl, {
        maxZoom: 18
      })
      const tdtLabel = L.tileLayer(this.baseConfig.labelUrl,
        {maxZoom: 18})
      this.satelliteLayer = L.tileLayer(this.baseConfig.satelliteUrl, {
        maxZoom: 22
      })
      this.baseLayer.push(tdtMap.addTo(this.map))
      if (this.satellite) {
        this.baseLayer.push(this.satelliteLayer.addTo(this.map))
      }
      this.baseLayer.push(tdtLabel.addTo(this.map))
    }
  }
}
</script>

<style scoped>
  .baseMap {
    height: 100%;
    width: 100%;
    /*border: 1px solid #DCDCDC;*/
    /*border-radius: 4px;*/
  }
</style>

<style>
  .leaflet-container a.leaflet-popup-close-button {
    top: 5px; /* 修改弹窗关闭按钮样式 */
    right: 10px; /* 修改弹窗关闭按钮样式 */
  }

  .leaflet-popup-content .popup-div {
    font-size: 15px;
    padding: 6px;
  }

  .leaflet-popup-content .popup-title {
    font-weight: bold;
  }

  .leaflet-popup-content .dashed-line {
    border-bottom: 1px dashed #dddddd;
    margin: 10px -10px;
  }

  .leaflet-popup-content .popup-item {
    padding-bottom: 6px;
  }

  .leaflet-popup-content .popup-item label {
    font-weight: bold;
    padding-right: 15px;
  }

  .leaflet-popup-content .popup-subitem {
    padding-bottom: 6px;
    font-size: 12px;
  }
</style>