<!--
 * @Description: 航天精一地图
 * @Author: 王晓颖
 * @Date: 2020-08-14 15:15:56
 -->
<template>
  <div style="width: 100%;height:100%">
    <div id="fmap" ref="fmap" class="mapDiv"/>
    <slot/>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'FMap',
  props: {
    id: {
      type: String,
      default: 'fmap'
    },
    type: { // 地图类型
      type: String,
      default: 'vector' // vector,blackVector,satellite
    },
    center: { // 地图中心
      type: Array,
      default: function() {
        return [114.87439648145697, 25.771181100791622, 14]
      }
    },
    zoom: { // 缩放层级
      type: Number,
      default: 13
    },
    minZoom: { // 最小缩放层级
      type: Number,
      default: 9
    },
    maxZoom: { // 最大缩放层级
      type: Number,
      default: 21
    },
    autoResize: { // 自动重绘
      type: Boolean,
      default: true
    },
    layers: {
      type: Object,
      default: () => {
        return {
          default: { name: 'default', desc: '默认图层', symbol: '' },
          case: { name: 'case', desc: '事件地图选点', symbol: 'case-handle', bubbleable: false, selectable: false, editable: false },
          poi: { name: 'poi', title: '兴趣点', symbol: 'point-of-interest', editable: false, bubble: 'bubbleId' }
        }
      }
    },
    interactions: {
      type: Array,
      default: () => {
        return ['keyboardpan', 'boxzoom']
      }
    },
    symbols: {
      type: Array,
      default: () => {
        return [
          { code: 'case-handle', size: [34, 40] },
          { code: 'point-of-interest', size: [20, 20] }
        ]
      }
    },
    poiServices: {
      type: Array,
      default: () => {
        return [
          { name: 'B-XXD-07', desc: '单位', key: '6629U607Z3' },
          { name: 'B-XXD-10', desc: '地名', key: '45F6S2H013' },
          { name: 'B-XXD-03', desc: '场所', key: '5W27676C4D' },
          { name: 'B-XXD-09', desc: '基础设施', key: '738I0T03S8' },
          { name: 'B-XXD-04', desc: '道路交通', key: '1874XP0U62' }
        ]
      }
    },
    poiBaseUrl: {
      type: String,
      default: 'http://11.100.6.5:8084/services/resource/singleSearch/'
    }
  },
  data() {
    return {
      longitude: '0', // 事件经度
      latitude: '0', // 事件纬度
      fmap: null, // fMap
      mapUrls: {
        vectorMap: 'http://11.100.6.5:8084/services/images/GetImage.do?F-Auth-Key=01N2EJWF4L&method=showImageRedisBytable&table=MAP_PGISSL_GZ_V1&version=v1&l={z}&x={y}&y={x}'
      }, // 底图urls
      bgLayers: {
        vectorLayer: null // 矢量
      } // 地图layers
    }
  },
  watch: {
    minZoom(val) {
      this.fmap.setMinZoom(val)
    },
    maxZoom(val) {
      this.fmap.setMaxZoom(val)
    },
    zoom(val) {
      this.fmap.setZoom(val)
    }
  },
  methods: {
    // 初始化底图
    initMap(detail, data) {
      // 注册所有图标
      FUtil.registSymbolDefaultSetting({
        sourcePath: 'static/fMap/img/symbol',
        size: [32, 46]
      })
      FUtil.registSymbols(this.symbols)
      // 声明地图图源
      this.bgLayers.vectorLayer = FUtil.FTDM({ name: '矢量地图',
        icon: 'static/fMap/img/mapVector.png',
        url: this.mapUrls.vectorMap,
        standard: 'Spec_TDTMapV01'
      })

      // 创建地图实例
      const bgLayer = this.bgLayers.vectorLayer
      if (this.fmap == null) {
        this.fmap = new FMap({
          element: this.id,
          bglayer: bgLayer,
          center: this.center,
          controls: ['zoompan'],
          interactions: this.interactions,
          layers: this.layers
        })
        this.$emit('ready', { fmap: this.fmap })
      } else {
        this.fmap.setBgLayer(bgLayer)
      }
      debugger
      // 非查看事件位置点详情
      if (detail) {
        // 查看位置点详情
        if (data && data.lng !== '' && data.lat !== '') {
          this.fmap.addFeatures([data], { xField: 'lng', yField: 'lat', layer: 'case' })
          this.fmap.navigate2Center([data.lng, data.lat])
        }
      }
    },
    queryPoi(keyword) {
      // 清除之前的查询结果
      this.fmap.clearLayer('poi')

      // 分步查询信息点的数据：单位、地名、场所、基础设施、道路交通
      const that = this
      for (const poi of this.poiServices) {
        request({
          url: this.poiBaseUrl + poi.name,
          method: 'post',
          data: {
            keyword: keyword
          },
          headers: {
            'F-Auth-Key': poi.key,
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(response => {
          // console.log(response)
          if (response.code === '1' && response.data.total > 0) {
            const resultList = response.data.data[0].data
            console.log(resultList)
            that.fmap.addFeatures(resultList, { xField: 'x', yField: 'y', layer: 'poi' })
          }
        })
      }
    },
    // 清空地图
    clearMap() {
      this.fmap.clearMap()
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.mapDiv{
  width:100%;
  height:100%;
}
</style>