import AjaxUtils from '../../../utils/AjaxUtils'
import { PIPELINE_WMS } from '../../../conf/Constants'

/**
 * todo 得考虑一个图层配置了多个 wmsLayers的情况
 */
class WmsLayerService {
  constructor (layersConfig) {
    this.L = window.L
    this.map = window.map
    this.popupComp = window.popupComp
    // wms getfeatureinfo 默认参数
    this.params = {
      VERSION: '1.1.1',
      SERVICE: 'WMS',
      REQUEST: 'GetFeatureInfo',
      // bbox: bbox,
      FORMAT: 'image/png',
      INFO_FORMAT: 'application/json',
      TRANSPARENT: true,
      FEATURE_COUNT: 50,
      SRS: 'EPSG:4326',
      EXCEPTIONS: 'application/vnd.ogc.se_inimage'
    }
    this.layersConfig = layersConfig
    // 存放getfeatureinfo的图层组
    this.featureGroup = this.L.featureGroup({}).addTo(this.map)

    this.layers = []
    for (var i = 0; i < layersConfig.length; i++) {
      const config = layersConfig[i]
      for (var k in config) {
        if (k === 'wmsLayers') {
          this.layers.push(config[k])
        }
      }
    }
  }

  init () {
    if (this.layers) {
      this.load(this.layers)
      this.clickListener()
    }
  }

  add (config) {
    const code = config.code
    for (var k in this.layersConfig) {
      if (code === k) {
        return false
      }
    }
    this.layers.push(config.wmsLayers)
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
  }

  remove (config) {
    const wmsLayers = config.wmsLayers
    for (var i = 0; i < this.layers.length; i++) {
      const layerName = this.layers[i]
      if (wmsLayers === layerName) {
        this.layers.splice(i, 1)
      }
    }
    this.wmsLayer.setParams({ layers: this.layers.join(',') })
  }

  load (layers) {
    this.wmsLayer = this.L.tileLayer.wms(PIPELINE_WMS, {
      format: 'image/png', // 返回的数据格式
      transparent: true,
      layers: layers.join(',')
    }).addTo(this.map)
  }

  clickListener () {
    window.map.on('click', (e) => {
      this.featureGroup.clearLayers()
      var point = this.map.latLngToContainerPoint(e.latlng, this.map.getZoom())
      var size = this.map.getSize()
      // const bbox = this.L.latLngBounds(this.L.latLng(e.latlng.lng, e.latlng.lat)).toBBoxString()

      const params = Object.assign({
        LAYERS: this.layers.join(','),
        QUERY_LAYERS: this.layers.join(','),
        WIDTH: size.x,
        HEIGHT: size.y,
        X: Math.round(point.x),
        Y: Math.round(point.y),
        BBOX: this.map.getBounds().toBBoxString()
      }, this.params)
      AjaxUtils.get4JsonDataByUrl(PIPELINE_WMS, params, (res) => {
        const features = res.data.features
        /**
         * {
         *     title: 'New Tab',
         *     name: newTabName,
         *     content: 'New Tab content'
         * }
         * @type {*[]}
         */
        const popupDatas = []
        if (features) {
          for (var i = 0; i < features.length; i++) {
            const feature = features[i]
            const properties = feature.properties
            this.highlight(feature)
            // const coordinates = feature.geometry.coordinates
            popupDatas.push({
              title: properties.wellname || properties.devicename || properties.name,
              name: feature.id,
              content: properties
            })
          }
        }
        if (popupDatas.length > 0) {
          var myIcon = this.L.divIcon({ className: 'my-div-icon' })
          this.L.marker(e.latlng, {
            icon: myIcon
          }).addTo(this.featureGroup)
            .bindPopup((layer) => {
              this.popupComp.setDatas(popupDatas)
              this.popupComp.setShow()
              return this.popupComp.$el
            }, {
              className: 's-map-popup',
              minWidth: 300,
              closeButton: false,
              autoClose: false
            })
            .openPopup()
        }
      })
    })
  }

  reverse (feature) {
    const coordinates = feature.geometry.coordinates
    var latlng = []
    for (var j = 0; j < coordinates.length; j++) {
      const coordinate = coordinates[j]
      var xy = []
      for (var k = 0; k < coordinate.length; k++) {
        const coor = coordinate[k]
        xy.push(coor.reverse())
      }
      latlng.push(xy)
    }
    return latlng
  }

  highlight (feature) {
    const type = feature.geometry.type
    if (type === 'MultiLineString') {
      this.L.polyline(this.reverse(feature)).addTo(this.featureGroup)
    } else if (type === 'Point') {
      var myIcon = this.L.divIcon({ className: 'my-div-icon' })
      this.L.marker(feature.geometry.coordinates.reverse(), {
        icon: myIcon
      }).addTo(this.featureGroup)
    }
  }
}

export default WmsLayerService