<!-- 图层浏览 -->
<template>
  <app-container>
    <div id="map" class="leaflet_container"/>
    <!--工具箱-->
    <tools-container>
      <!--图层选择工具-->
      <layer-choose :layers="layers" :select-layers="selectLayers" @choose="layerChange"/>
    </tools-container>
  </app-container>
</template>
<script>
import L from 'leaflet'
import ToolsContainer from './components/toolsContainer'
import LayerChoose from './components/layerChoose'
import { mapGetters } from 'vuex'
var esri = require('esri-leaflet')
export default {
  name: 'Overview',
  components: { LayerChoose, ToolsContainer },
  data() {
    return {
      baseLayer: [],
      layers: this.baseConfig.layers, // 图层列表
      selectLayers: [0, 1, 2], // 选中图层列表
      map: null, // 地图对象
      layerGroups: [], // 图层组，用于控制一组内容显示或者隐藏
      maps: [], // 地图图层
      parts: [] // 部件图层
    }
  },
  computed: {
    ...mapGetters([
      'baseUrl',
      'partsUrl',
      'partsAllUrl',
      'shopUrl',
      'mapUrl',
      'gridUrl',
      'mapDtUrl'
    ])
  },
  mounted() {
    this.init()
  },
  methods: {
    // 部件图层切换
    layerChange(node, checked) {
      const selectItem = this.layers.filter(item => item.name === node.name)[0]

      if (!checked) {
        this.map.removeLayer(this.layerGroups[selectItem.id])
      } else {
        this.map.addLayer(this.layerGroups[selectItem.id])
      }
    },
    // 地图初始化
    init() {
      const map = L.map('map', {
        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挂载map
      window.map = map

      // 加载天地图底图和标注
      this.baseLayer.push(L.tileLayer(this.baseConfig.mapUrl).addTo(map))
      this.baseLayer.push(L.tileLayer(this.baseConfig.labelUrl).addTo(map))

      // 构建并加载layerGroup
      /* eslint-disable new-cap */
      this.addMapDtLyaer() // 底图
      this.addGridLayer() // 网格
      this.addShopLayer() // 商户

      // 部件图层组
      for (let i = 3; i < 10; i++) {
        this.addPartsLayer(i)
      }

      // 添加默认显示的图层
      this.selectLayers.forEach(item => {
        this.map.addLayer(this.layerGroups[item])
      })
    },
    // 添加底图图层
    addMapDtLyaer: function() {
      const mapDtGroup = new L.layerGroup() // 创建layerGroup

      // 创建图层并加载到layerGroup中
      const item = { url: `${this.baseUrl}${this.mapDtUrl}` }
      esri.dynamicMapLayer(item).addTo(mapDtGroup)

      this.layerGroups.push(mapDtGroup)
    },
    // 添加网格图层
    addGridLayer: function() {
      const gridGroup = new L.layerGroup() // 创建layerGroup

      // 创建图层并加载到layerGroup中
      const item = { url: `${this.baseUrl}${this.gridUrl}` }
      esri.featureLayer(item).addTo(gridGroup)

      this.layerGroups.push(gridGroup)
    },
    // 添加商户图层
    addShopLayer: function() {
      const shopGroup = new L.layerGroup() // 创建layerGroup

      // 创建图层并加载到layerGroup中
      const item = { url: `${this.baseUrl}${this.shopUrl}` }
      const layer = esri.featureLayer(item).addTo(shopGroup)

      const shopLabel = { url: `${this.baseUrl}${this.mapUrl}/2` }
      esri.featureLayer(shopLabel).addTo(shopGroup)

      const that = this
      layer.on('click', function(e) {
        // 获取要素的属性
        const properties = e.layer.feature.properties

        // 弹窗样式
        const popupStr = '<div class="popup-div">' +
          '<div class="popup-title">商户信息</div>' +
          '<div class="dashed-line"></div>' +
          '<div class="popup-item"><label>商户名称</label>' + properties.dutyname + '</div>' +
          '<div class="popup-item"><label>商户编号</label>' + properties.objid + '</div>' +
          '<div class="popup-item"><label>所在社区</label>' + properties.communame + '</div>' +
          '<div class="popup-item"><label>所在网格编号</label>' + properties.bgid + '</div>' +
          '<div class="popup-item"><label>三包责任单位</label>' + properties.deptname + '</div>' +
          '</div>'
        // 弹出窗口
        L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map)
      })

      this.layerGroups.push(shopGroup)
    },
    addPartsLayer: function(index) {
      const that = this
      const group = new L.layerGroup() // 创建layerGroup

      const domains = this.baseConfig.layers[index].domain
      const minZoom = this.baseConfig.layers[index].minZoom === undefined ? 18 : this.baseConfig.layers[index].minZoom
      domains.forEach(dom => {
        // 创建图层并加载到layerGroup中
        const item = { url: `${this.baseUrl}${this.partsUrl}/${dom}`, minZoom: minZoom }
        const layer = esri.featureLayer(item).addTo(group)

        layer.on('click', function(e) {
          // 获取要素的属性
          const properties = e.layer.feature.properties

          // 弹窗样式
          const popupStr = '<div class="popup-div">' +
            '<div class="popup-title">部件信息</div>' +
            '<div class="dashed-line"></div>' +
            '<div class="popup-item"><label>部件类型</label>' + properties.dl + ' / ' + properties.xl + '</div>' +
            '<div class="popup-item"><label>部件编号</label>' + properties.objid + '</div>' +
            '<div class="popup-item"><label>所在网格编号</label>' + properties.bgid + '</div>' +
            '<div class="popup-item"><label>权属部门</label>' + properties.deptname2 + '</div>' +
            '<div class="popup-item"><label>责任部门</label>' + properties.deptname1 + '</div>' +
            '<div class="popup-item"><label>养护部门</label>' + properties.deptname3 + '</div>' +
            '</div>'
          // 弹出窗口
          L.popup().setContent(popupStr).setLatLng(e.latlng).openOn(that.map)
        })

        that.layerGroups.push(group)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .leaflet_container{
    width: calc( 100vw - 208px );
    height: 83vh;
    background-color: white;
  }
</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;
  }
</style>