<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8" style="text-align: center;">
        <el-radio-group v-model="queryEventSwitch" size="small" @change="switchEventOrComponent">
          <el-radio-button label="1">事件定位</el-radio-button>
          <el-radio-button v-show="false" label="0">部件定位</el-radio-button>
          <el-radio-button v-show="false" label="2">兴趣点属性</el-radio-button>
        </el-radio-group>
      </el-col>

      <el-col v-if="queryEventSwitch === '1'" :span="8" style="text-align: right;">
        <el-button type="primary" size="small" @click="checkEventPoint"> 事件提交 </el-button>
      </el-col>
    </el-row>

    <div ref="map" class="baseMap"/>
  </div>
</template>

<script>

import markerIcon from 'leaflet/dist/images/marker-icon.png'
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
import markerShadow from 'leaflet/dist/images/marker-shadow.png'
import L from 'leaflet'

export default {
  name: 'TianDiTuMap',
  data() {
    return {
      map: null,
      baselayer: [],
      markerPoi: null, // 事件/部件的marker
      keywords: '', // 查询关键字
      showEventPointPopup: true, // 是否显示事部件的popup
      queryEventSwitch: '1', // 1==查询事件；0==查询部件
      compListOpts: [], // 部件选择下拉框option
      // 主页面返回值
      longitude: '', // 定位点经度
      latitude: '', // 定位点纬度
      communityId: '', // 社区ID
      communityName: '', // 社区名称
      gridId: '', // 单元网格ID
      componentId: '', // 部件ID
      componentName: '' // 部件名称
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化地图
    initMap() {
      const map = L.map(this.$refs.map, {
        minZoom: 3,
        maxZoom: 18,
        center: [27.75962, 116.06021],
        zoom: 15,
        zoomControl: false,
        attributionControl: false,
        crs: L.CRS.EPSG3857
      })
      this.map = map // data上需要挂载
      window.map = map
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))
      this.baselayer.push(L.tileLayer(
        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
      ).addTo(map))

      const that = this
      this.map.on('click', function(e) {
        that.longitude = e.latlng.lng
        that.latitude = e.latlng.lat
        that.communityId = 1
        that.communityName = '社区'
        that.gridId = '361024100001'

        if (typeof this.markerPoi !== 'undefined') {
          this.markerPoi.remove()
        }

        // 添加marker
        const DefaultIcon = L.icon({
          iconUrl: markerIcon,
          iconRetinaUrl: markerIcon2x,
          shadowUrl: markerShadow,
          iconSize: [25, 41],
          iconAnchor: [12, 41],
          popupAnchor: [1, -34],
          tooltipAnchor: [16, -28],
          shadowSize: [41, 41]
        })
        L.Marker.prototype.options.icon = DefaultIcon
        this.markerPoi = L.marker(e.latlng).addTo(map)
        that.map.setView(e.latlng)
      })
    },
    // 切换
    switchEventOrComponent: function() {
      // 如果选中的是事件定位（1）或部件定位（0），点击地图时弹出事件或者部件的popup；否则（2以上）显示兴趣点结果的属性popup
      this.showEventPointPopup = this.queryEventSwitch < 2
    },
    // 返回事件定位的结果
    checkEventPoint: function() {
      this.$emit(
        'closeMapQueryDialogByEvent',
        this.longitude,
        this.latitude,
        this.communityId,
        this.communityName,
        this.gridId)

      this.clearMap()
    },
    // 清除图层上的查询结果
    clearMap: function() {
      // 清除地图上绘制的graphic图层

      // 清除弹出框

      // 清除data属性值
      this.keywords = ''
      this.showEventPointPopup = true // 是否显示事部件的popup
      this.queryEventSwitch = '1' // 1==查询事件；0==查询部件
      this.compListOpts = [] // 部件选择下拉框option
      this.longitude = '' // 定位点经度
      this.latitude = '' // 定位点纬度
      this.communityId = '' // 社区ID
      this.communityName = '' // 社区名称
      this.gridId = '' // 单元网格ID
      this.componentId = '' // 部件ID
      this.componentName = '' // 部件名称
    }
  }
}
</script>

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