<!-- 图层浏览 -->
<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 {
      layers: this.baseConfig.layers, // 图层列表
      selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表
      map: null, // 地图对象
      maps: [], // 地图图层
      parts: [], // 部件图层
    }
  },
  computed: {
    ...mapGetters([
      'baseUrl',
      'partsUrl',
      'partsAllUrl',
      'mapUrl'
    ])
  },
  mounted() {
    this.init()
  },
  methods: {
    // 部件图层切换
    layerChange(node, checked) {
      const selectItem = this.layers.filter(item => item.name === node.name)[0]
      // 如果选中底图,选中添加，没选中移除
      if (selectItem.type === 'map') {
        if (!checked) {
          for (const item of this.maps) {
            this.map.removeLayer(item)
          }
        } else {
          for (const item of this.maps) {
            this.map.addLayer(item)
          }
        }
      } else if (node.type === 'layer') { // 其他图层
        if (!checked) {
          for (let i = 0; i < selectItem.domain.length; i++) {
            this.map.removeLayer(this.parts[selectItem.domain[i] - 1])
          }
        } else {
          for (let i = 0; i < selectItem.domain.length; i++) {
            this.map.addLayer(this.parts[selectItem.domain[i] - 1])
          }
        }
      }
    },
    // 地图初始化
    init() {
      const map = L.map('map', {
        minZoom: 4,
        maxZoom: 21,
        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
      const that = this
      // 添加底图
      for (let i = 0; i <= 21; i++) {
        const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` }
        this.maps.push(esri.featureLayer(item).addTo(map))
      }
      // TODO: 添加部件：可优化为读取配置文件里的部件图层信息
      // 添加部件,
      // const partsLayer = this.baseConfig.partsLayer
      for (let i = 1; i <= 40; i++) {
        let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 }
        console.log(item)
        if (i === 15) {
          item = {
            url: `${this.baseUrl}${this.partsUrl}/${i}`,
            minZoom: 18,
            style: function(feature) {
              return { color: '#ff0000', opacity: 0.75, weight: 5 }
            }
          }
        }
        var layer = esri.featureLayer(item).addTo(map)
        // 点击部件事件
        layer.on('click', function(e) {
          // 获取要素的属性
          const properties = e.layer.feature.properties
          that.currentItem = e.layer.feature
          that.searchLayerByUrl(e.layer.options.url)
          // 弹窗样式
          var str = `<div class="pop-window">
                        <div class="pop-title">
                          ${properties['小类名称']}
                        </div>
                        <div class="pop-line"><col>大类：</col>${properties['大类名称']}</div>
                        <div class="pop-line"><col>小类：</col>${properties['小类名称']}</div>
                        <div class="pop-line"><col>部件编码：</col>${properties['编码']}</div>
                        <div class="pop-line"><col>权属单位：</col>${properties['权属单位'] ? properties.权属单位 : '未知'}</div>
                        <div class="pop-line"><col>详细地址：</col>${properties['详细地址'] ? properties.详细地址 : '未知'}</div>
                      <div>`
          var popup = L.popup().setContent(str)
          e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup()
        })
        this.parts.push(layer)
      }
      // this.map.setZoom(this.baseConfig.zoom)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .leaflet_container{
    width: calc( 100% - 158px );
    height: 83vh;
    background-color: white;
  }
</style>