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

<script>
import bindEvents from './../base/bindEvents'
import { createIcon, getGlobalBounds, intersectBox } from '../base/factory.js'
import { getWellInfo, getWellAlarms } from '@/api/overview'

export default {
  name: 'Cmap',
  props: {
    center: { // 地图中心
      type: Object,
      default: function() {
        return { lat: 39.9, lng: 116.4 }
      }
    },
    zoom: { // 缩放层级
      type: Number,
      default: 12
    },
    minZoom: { // 最小缩放层级
      type: Number,
      default: 9
    },
    maxZoom: { // 最大缩放层级
      type: Number,
      default: 21
    },
    autoResize: { // 自动重绘
      type: Boolean,
      default: true
    },
    alarmMarkers: { // 报警Marker，原数据
      type: Array,
      default: function() {
        return []
      }
    },
    size: { // marker大小
      type: Array,
      default: function() {
        return [30, 30]
      }
    },
    anchor: { // 位移
      type: Array,
      default: function() {
        return [15, 30]
      }
    },
    popupTemplate: { // 弹窗html内容
      type: String,
      default: '<div>hello</div>'
    },
    popupAnchor: { // 弹窗位移
      type: Array,
      default: function() {
        return [0, -15]
      }
    }
  },
  data() {
    return {
      mapLayers: null, // 地图图层s
      overlays: [], // 地图上的标注，报警的
      // 海量点显示相关
      iconManager: {
        '': { size: [10, 10], anchor: [10, 10] }
      }, // 图标管理器
      layerId: 'yizhuang_poi', // 需要加载的图层id
      queryString: '', // 地图筛选条件
      layerInfoManager: {
        yizhuang_poi: { pm: 'yizhuang', table: 'poi', spanzoom: 18, latfd: 'COORDINATE_Y', lngfd: 'COORDINATE_X', style: '', morecon: '', namefd: 'WELL_NAME', keyfd: 'ID', attrfds: 'POSITION', cache: true, showtype: 'auto' }
      }, // 图层信息管理器
      style: 'resource/images/sys/markers/未分类/dot',
      stylepos: 1,
      overlay: null,
      overlayManager: {},
      featureLayerManager: {},
      lastMinBounds: null,
      clickEvent: null
    }
  },
  watch: {
    center(val, oldVal) {
      const { mapLayers } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(val.lat, val.lng))
      }
    },
    'center.lng'(val, oldVal) {
      const { mapLayers, center } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(center.lat, val))
      }
    },
    'center.lat'(val, oldVal) {
      const { mapLayers, center } = this
      if (mapLayers != null && val !== oldVal) {
        mapLayers.setCenter(new CLatLng(val, center.lng))
      }
    },
    zoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setZoom(val)
    },
    minZoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setMinZoom(val)
    },
    maxZoom(val, oldVal) {
      const { mapLayers } = this
      mapLayers.setMaxZoom(val)
    },
    alarmMarkers(val) {
      this.renderMarkers()
    }
  },
  mounted() {
    this.reset()
  },
  activated() {
    console.log('map activated')
    this.init()
  },
  methods: {
    // 初始化地图
    init() {
      if (this.mapLayers) {
        return
      }
      const $el = this.$refs.map
      /*      默认影像和矢量地图，此处无用
      const sateLayer = new CTileLayer(2, 18, 'sate', null, null)// 影像
      const sateLabelLayer = new CTileLayer(2, 18, 'satelabel', null, null)// 影像注记
      const mapLayer = new CTileLayer(2, 18, 'map', null, null)// 矢量
      const mapLabelLayer = new CTileLayer(2, 18, 'maplabel', null, null)// 矢量注记
      const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')
      const SATEMAP = new CMapType([sateLayer, sateLabelLayer], '影像')*/

      /**
       * 天地图影像和资源
       */
      // 天地图卫星影像资源，此处无用
      // const tianditusateLayer = new CTileLayer({
      //   zbound: [2, 18],
      //   tileName: 'sate',
      //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      //   url: 'http://t{s}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      // })
      // 天地图卫星影像资源备注资源，此处无用
      // const tianditusateLabelLayer = new CTileLayer({
      //   zbound: [2, 18],
      //   tileName: 'satelabel',
      //   subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
      //   url: 'http://t{s}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      // })
      // 天地图矢量地图
      const tianditumapLayer = new CTileLayer({
        zbound: [2, 18],
        tileName: 'map',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        url: 'http://t{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      })
      // 天地图矢量地图标注
      const tianditumapLabelLayer = new CTileLayer({
        zbound: [2, 18],
        tileName: 'maplabel',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        url: 'http://t{s}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=80310778300778a15b36e70a6da5af00'
      })
      var mapLayer = new CTileLayer({
        zbound: [1, 18],
        tileName: 'map',
        zIndex: null,
        subdomains: CGeowin.BaseMapServer
      })

      var mapLabelLayer = new CTileLayer({
        zbound: [1, 18],
        tileName: 'maplabel',
        zIndex: null,
        subdomains: CGeowin.BaseMapServer
      })

      // const VECTORMAP = new CMapType([tianditumapLayer, tianditumapLabelLayer], '矢量')
      const VECTORMAP = new CMapType([mapLayer, mapLabelLayer], '矢量')

      const { getCenterPoint, zoom } = this
      // 初始化配置
      const opts = {
        mapTypes: [VECTORMAP],
        center: getCenterPoint(),
        zoom: zoom
      }
      // 加载图层
      this.mapLayers = new CMapLayers($el, opts)
      this.mapLayers.addMapTypeControl()

      bindEvents.call(this, this.mapLayers)

      // 此处强行初始化一次地图 回避一个由于错误的 center 字符串导致初始化失败抛出的错误
      // this.mapLayers.reset()
      this.reset()
      this.mapLayers.setCenter(getCenterPoint(), zoom)
      this.$emit('ready', { mapLayers: this.mapLayers })
      // this.renderMarkers()
    },
    // 加载报警markers
    renderMarkers() {
      console.log('render.markers')
      const { mapLayers, size, anchor, popupAnchor, alarmMarkers } = this
      if (!mapLayers) {
        return
      }
      // 清除报警标注图层
      for (const overlay of this.overlays) {
        mapLayers.removeOverlay(overlay) // 清除地图上所有的overlay
      }
      this.overlays = []
      // 遍历所有报警井信息
      for (const marker of alarmMarkers) {
        const options = {
          // url: markers.icon,
          url: './static/images/map_images/alarm-well1.png',
          size: size,
          anchor: anchor,
          popupAnchor: popupAnchor
        }
        const cmapIcon = createIcon(options)
        const opts = {
          icon: cmapIcon,
          title: marker.wellCode,
          draggable: false,
          wellId: marker.wellId
        }
        const overlay = new CMarker(new CLatLng(marker.position.lat, marker.position.lng), opts)
        mapLayers.addOverlay(overlay)
        // const overlay = mapLayers.drawMarker(new CLatLng(marker.position.lat, marker.position.lng), opts)
        overlay.bindPopup('')
        // overlay.openPopup()
        // 添加点击事件
        console.log('添加点击事件')
        CEvent.addListener(overlay, 'click', function(e) {
          console.log('click overlay')
          getWellAlarms(e.target.options.wellId).then(response => {
            if (response.code === 200) {
              const wellInfo = response.data
              const alarmInfo = {
                wellCode: wellInfo.wellCode,
                position: wellInfo.position,
                deptName: wellInfo.deptName,
                wellTypeName: wellInfo.wellTypeName,
                alarms: wellInfo.alarmList,
                deep: wellInfo.deep
              }
              let dom = "<div class='alarm-window'>" +
                "<div class='alarm-header'>" + alarmInfo.wellCode + '</div>' +
                "<div class='alarm-body'>"
              for (const alarm of alarmInfo.alarms) {
                dom += "<div>告警原因：<span class='alarm-red'>" + alarm.alarmContent + '</span></div>' +
                  '<div>设备编号：<span>' + alarm.devcode + '</span></div>'
              }
              dom += "<div class='divider'></div>" +
                '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
                '<div>权属单位：' + alarmInfo.deptName + '</div>' +
                '<div>详细地址：' + alarmInfo.position + '</div>' +
                '</div>' +
                '</div>'
              console.log('setPopupContent_inrender')
              overlay.setPopupContent(dom)
            }
          })
        })
        this.overlays.push(overlay)
      }
    },
    // 清除报警图层
    clearAlarmMarkers() {
      const { mapLayers } = this
      // 清除报警标注图层
      for (const overlay of this.overlays) {
        mapLayers.clearOverlay(overlay) // 清除地图上所有的overlay
      }
      this.overlays = []
    },
    // 获取数据权限
    getDataScope() {
      const dataScope = this.$store.getters.dataScope
      return dataScope
    },
    // 加载海量点
    renderPoi(needClear = true) {
      // 需要清除原有查询条件
      if (needClear) {
        this.queryString = 'DEPTID IN (' + this.getDataScope() + ')'
      }
      console.log(this.queryString)
      const { mapLayers, layerInfoManager, layerId, overlayManager } = this
      // 没有图层信息提示错误
      if (layerInfoManager[layerId] == null) {
        this.$message.warning('没有' + layerId + '图层')
        return
      }
      const layerInfo = layerInfoManager[layerId]
      // 获取图标样式
      if (this.style instanceof Object) { // 如果style是对象，对象转string
        this.style = CJsonToStringify(this.style)
      }
      // stylepos
      if (layerInfoManager[layerId].stylepos) {
        this.stylepos = layerInfo.stylepos
      }
      // ?
      const opts = {
        params: {
          serviceproviderid: 'map.tablepointlayerserviceprovider',
          serviceid: 'gettile'
        },
        zbound: [4, layerInfo.spanzoom]
      }
      // 有layerid
      if (layerInfoManager[layerId].layerid) {
        opts.params.layerid = CEncode(layerInfoManager[layerId].layerid)
      } else {
        const tableinfo = {
          pm: layerInfoManager[layerId].pm,
          table: layerInfoManager[layerId].table,
          latfd: layerInfoManager[layerId].latfd,
          lngfd: layerInfoManager[layerId].lngfd,
          style: this.style,
          stylepos: this.stylepos,
          stylefd: layerInfoManager[layerId].stylefd,
          morecon: this.queryString,
          namefd: layerInfoManager[layerId].namefd,
          keyfd: '',
          attrfds: layerInfoManager[layerId].attrfds }
        const tableinfostr = CEncodeSpecialChar(CJsonToStringify(tableinfo))
        opts.params.tableinfo = tableinfostr
      }
      opts.params.morecon = this.queryString
      this.overlay = new CCustomOverlay(opts)
      this.overlay.lid = layerId
      this.overlay.zPriority = 1000
      mapLayers.addOverlay(this.overlay)
      overlayManager[layerId] = this.overlay
      const that = this
      // 点击事件监听回调
      this.registerDotQuery('yizhuang_poi', function(e, _data) {
        if (_data.length > 0) {
          that.openInfoWindow(_data[0].id, e)
        }
      })
      // this.loadBigViewFeature(layerId, this.drawFeature)
    },
    // 清除海量点
    cleanPoi() {
      const { mapLayers, layerId, overlayManager } = this
      // 有图层，先移除
      if (overlayManager[layerId]) {
        mapLayers.removeLayer(overlayManager[layerId])
        delete overlayManager[layerId]
      }
      mapLayers.closePopup()
    },
    // 过滤海量点
    filterPoi(listQuery) {
      console.log('过滤Poi')
      const queryList = []
      this.queryString = ''
      const keywords = listQuery.keywords
      const deptid = listQuery.deptid
      const wellType = listQuery.wellType
      if (keywords !== '') {
        queryList.push('(WELL_CODE like \'%' + keywords + '%\' ' + 'or POSITION like \'%' + keywords + '%\')')
      }
      if (wellType !== '') {
        queryList.push('WELL_TYPE=' + wellType)
      }
      if (deptid !== '') {
        queryList.push('DEPTID=' + deptid)
      } else {
        queryList.push('DEPTID IN (' + this.getDataScope() + ')')
      }
      this.queryString = queryList.join(' and ')
      this.cleanPoi()
      this.renderPoi(false)
    },
    // loadBigViewFeature
    loadBigViewFeature(id, callback) {
      const { mapLayers, layerInfoManager } = this
      if (layerInfoManager[id].spanzoom > mapLayers.getZoom() && layerInfoManager[id].showtype !== 'client') { return }
      var bounds = getGlobalBounds()
      if (layerInfoManager[id].showtype !== 'client') {
        bounds = mapLayers.getBounds().pad(1)
      }
      if (this.lastMinBounds == null) {
        this.lastMinBounds = bounds
      }
      this.lastMinBounds = intersectBox(this.lastMinBounds, bounds)
      // 取范围的相交部分，没有则为空
      const boundstr = bounds.toBBoxString()

      const transObj = {}
      transObj.serviceProviderId = 'map.tablepointlayerserviceprovider'
      transObj.serviceId = 'rectquery'

      if (layerInfoManager[id].layerid) {
        transObj.params = { layerid: CEncode(layerInfoManager[id].layerid), bounds: boundstr }
      } else {
        var tableinfo = { pm: layerInfoManager[id].pm, table: layerInfoManager[id].table, id: id, latfd: layerInfoManager[id].latfd, lngfd: layerInfoManager[id].lngfd, stylefd: layerInfoManager[id].stylefd, morecon: this.queryString, namefd: layerInfoManager[id].namefd, keyfd: layerInfoManager[id].keyfd, attrfds: layerInfoManager[id].attrfds }

        transObj.params = { tableinfo: CEncodeSpecialChar(CJsonToStringify(tableinfo)), bounds: boundstr }
      }
      CGetData(transObj, function(data) {
        data = CParseObj(data)
        if (callback) callback(id, data, bounds)
      })
    },
    drawFeature(id, list, bounds) {
      console.log('drawFeature')
      const { mapLayers, featureLayerManager, layerId } = this
      if (list == null) return
      if (featureLayerManager[layerId] == null) {
        const featuresLayer = new CFeatureGroup()
        mapLayers.addOverlay(featuresLayer)
        featureLayerManager[layerId] = featuresLayer
        CEvent.addListener(featuresLayer, 'click', function(event) {
          var data = {}
          data[layerId] = event.layer.data
          // if (clickCallBack) clickCallBack(data)
        })
      }
      featureLayerManager[layerId].clearLayers()
      featureLayerManager[layerId].lastBounds = bounds
      const icons = {}
      const icon = {
        // url: markers.icon,
        url: './static/images/map_images/alarm-well1.png',
        size: this.size,
        anchor: this.anchor,
        popupAnchor: this.popupAnchor
      }
      if (!(icon instanceof Object)) {
        icons[''] = createIcon(this.icon)
      }
      for (var i = 0; i < list.length; i++) {
        this.addMarker(layerId, list[i], icons)
      }
    },
    registerDotQuery(id, callback) {
      console.log('registerDotQuery')
      const { mapLayers } = this
      const that = this
      if (this.clickEvent) CEvent.removeListener(this.clickEvent)
      this.clickEvent = CEvent.addListener(mapLayers, 'click', function(event) {
        that.clickQuery(id, event.latlng, callback)
      })
    },
    clickQuery(id, point, callback) {
      console.log('clickQuery')
      const { mapLayers, layerInfoManager } = this
      const transObj = {}
      transObj.serviceProviderId = 'map.tablepointlayerserviceprovider'
      transObj.serviceId = 'dotquery'
      transObj.params = { point: point.lng + ',' + point.lat, zoom: mapLayers.getZoom() }
      if (layerInfoManager[id].layerid) {
        transObj.params.layerid = CEncode(layerInfoManager[id].layerid)
      } else {
        const tableinfo = { pm: layerInfoManager[id].pm, table: layerInfoManager[id].table, id: id, latfd: layerInfoManager[id].latfd, lngfd: layerInfoManager[id].lngfd, stylefd: layerInfoManager[id].stylefd, morecon: this.queryString, namefd: layerInfoManager[id].namefd, keyfd: layerInfoManager[id].keyfd, attrfds: layerInfoManager[id].attrfds }
        transObj.params.tableinfo = CEncodeSpecialChar(CJsonToStringify(tableinfo))
      }

      CGetData(transObj, function(data) {
        data = CParseObj(data)
        if (callback) callback(id, data)
      })
    },
    addMarker(id, data, icons) {
      const { layerInfoManager, featureLayerManager } = this
      var style = ''
      if (data.style != null) {
        style = data.style

        if (icons[style] == null && layerInfoManager[id].style[style] != null) {
          icons[style] = createIcon(layerInfoManager[id].style[style])
        }
      }
      var icon = icons[style]

      var opts = { icon: icon, title: data.name }
      var marker = new CMarker(new CLatLng(data.point[1], data.point[0]), opts)
      marker.data = data
      featureLayerManager[id].addLayer(marker)
      var _html = ''
      _html += "<div class='mapTips'>"
      _html += "<div class='mapTitle'>"
      _html += '<span>' + '名称' + ': ' + '</td>'
      _html += "<span class='docName'>" + data.name + '</span>'
      _html += '</div>'
      _html += "<div class='mapTitle' style='margin-bottom:4px;'>"
      _html += '<span>' + '地址' + ': ' + '</span>'
      _html += "<span class='docNun'>" + data.attbr[0] + '</span>'
      _html += '</div>'
      _html += "<div class='mapTitle' style='margin-bottom:4px;'>"
      _html += '<span>' + '经纬度' + ': ' + '</span>'
      _html += "<span class='docNun'>" + data.point[1] + ',' + data.point[0] + '</span>'
      _html += '</div>'
      _html += '</div>'
      marker.bindPopup(_html)
      return marker
    },
    // 获取图层id
    getLayerID(name) {
      const { layerInfoManager } = this
      for (const key in layerInfoManager) {
        if (layerInfoManager[key].name === name) { return key }
      }
      return ''
    },
    // 打开弹窗
    openAlarmInfoWindow(wellId) {
      const { mapLayers } = this
      for (const overlay of this.overlays) {
        if (overlay.options.wellId === wellId) {
          getWellAlarms(wellId).then(response => {
            if (response.code === 200) {
              const wellInfo = response.data
              const alarmInfo = {
                wellCode: wellInfo.wellCode,
                position: wellInfo.position,
                deptName: wellInfo.deptName,
                wellTypeName: wellInfo.wellTypeName,
                alarms: wellInfo.alarmList,
                deep: wellInfo.deep
              }
              let dom = "<div class='alarm-window'>" +
                "<div class='alarm-header'>" + alarmInfo.wellCode + '</div>' +
                "<div class='alarm-body'>"
              for (const alarm of alarmInfo.alarms) {
                dom += "<div>告警原因：<span class='alarm-red'>" + alarm.alarmContent + '</span></div>' +
                  '<div>设备编号：<span>' + alarm.devcode + '</span></div>'
              }
              dom += "<div class='divider'></div>" +
                '<div>井类型： ' + alarmInfo.wellTypeName + '</div>' +
                '<div>权属单位：' + alarmInfo.deptName + '</div>' +
                '<div>详细地址：' + alarmInfo.position + '</div>' +
                '</div>' +
                '</div>'
              mapLayers.setZoom(17)
              mapLayers.setCenter(overlay.getLatLng())
              // this.center = alarmInfo.position
              overlay.setPopupContent(dom)
              // debugger
              overlay.openPopup()
            }
          })
        }
      }
    },
    // 打开井信息弹窗
    openInfoWindow(wellId, e) {
      const { mapLayers } = this
      getWellInfo(wellId).then(response => {
        if (response.code === 200) {
          const wellInfo = response.data
          let dom = "<div class='info-window'>" +
            "<div class='info-header'>" + wellInfo.wellCode + '</div>' +
            "<div class='info-body'>"
          dom += '<div>井类型： ' + wellInfo.wellTypeName + '</div>' +
            '<div>权属单位：' + wellInfo.deptName + '</div>' +
            '<div>详细地址：' + wellInfo.position + '</div>' +
            '</div>' +
            '</div>'
          const position = new CLatLng(wellInfo.coordinateY, wellInfo.coordinateX)
          // mapLayers.setZoom(17)
          mapLayers.openInfoWindow(position, dom)
        }
      })
    },
    // 获取中点
    getCenterPoint() {
      const { center } = this
      console.log('getCenterPoint:' + center.lat + ',' + center.lng)
      return new CLatLng(center.lat, center.lng)
    },
    initMap(CMapLayers) {
      this.CMapLayers = CMapLayers
      this.init(CMapLayers)
    },
    getMapScript() {
      // 动态获取cmap的脚本
      // const TMapURL = 'http://119.3.228.125:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
      const TMapURL = 'http://10.10.5.42:8080/geowinmap/api?version=tapi&map=map&utils=mapcase,mapv'
      return new Promise((resolve, reject) => {
        console.log(window.CMapLayers)
        // 如果已加载直接返回
        if (typeof window.CMapLayers !== 'undefined') {
          console.log('地图脚本初始化成功1111...')
          resolve(window.CMapLayers)
          // return true
        } else {
          // 插入script脚本
          const scriptNode = document.createElement('script')
          scriptNode.setAttribute('type', 'text/javascript')
          scriptNode.setAttribute('src', TMapURL)

          if (scriptNode.readyState) { // IE
            scriptNode.onreadystatechange = function() {
              if (scriptNode.readyState === 'loaded' || scriptNode.readyState === 'complete') {
                scriptNode.onreadystatechange = null
                console.log('地图脚本初始化成功2...')
                // eslint-disable-next-line
                resolve(window.CMapLayers)
              }
            }
          } else { // 其他浏览器
            scriptNode.onload = function() {
              console.log('地图脚本初始化成功3...')
              resolve(window.CMapLayers)
            }
          }
          document.body.appendChild(scriptNode)
          console.log(scriptNode)
        }
      })
    },
    reset() {
      console.log('map reset')
      const { initMap, getMapScript } = this
      getMapScript()
        .then(initMap)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .mapDiv{
    width:100%;
    height: calc(100vh - 84px);
  }
  .selectedmaptypecontrol{
    display: none;
  }
  /*.alarm-window{*/
    /*max-width: 250px;*/
  /*!*background-color: #ffeaf1;*!*/
    /*.alarm-header {*/
      /*padding: 10px 10px 5px 10px;*/
      /*line-height: 30px;*/
      /*color: red;*/
      /*font-weight: bold;*/
      /*!*background-color: #ffecec;*!*/
    /*}*/
    /*.alarm-body{*/
      /*padding: 5px 10px 10px 10px;*/
      /*line-height: 23px;*/
      /*font-size: 14px;*/
    /*.alarm-red{*/
      /*color: #ff0000;*/
    /*}*/
  /*}*/
  /*}*/
</style>
