/**
 * 加载wfs服务图层
 */
import { STYLES } from '../../../conf/Constants'
import AjaxUtils from '../../../utils/AjaxUtils'
import { setZIndex } from '../../../utils/utils'

class WfsLayerService {
  constructor (config) {
    this.config = config
    this.params = {
      version: '1.0.0',
      REQUEST: 'getfeature',
      OUTPUTFORMAT: 'json'
      // maxFeatures: 20000
    }
    this.popupComp = window.popupComp
    this.L = window.L
    this.map = window.map
    this.regex = /\{(.+?)\}/g // 匹配{}
  }

  init (layer) {
    this.layer = layer
    const wfsUrl = this.config.wfs
    if (wfsUrl) {
      this.loadData(wfsUrl)
    }
  }

  loadData (wfsUrl) {
    AjaxUtils.get4JsonDataByUrl(wfsUrl, this.params, (res) => {
      this.draw(res.data.features)
    })
  }

  draw (features) {
    if (features && features.length > 0) {
      const icon = this.config.icon
      const styles = this.config.styles
      Object.assign(STYLES, styles)
      const geojsonLayer = this.L.geoJSON(features, {
        style: function (feature) {
          return {
            fill: STYLES.FILL,
            weight: STYLES.WEIGHT,
            fillColor: STYLES.FILL_COLOR,
            color: STYLES.COLOR,
            fillOpacity: STYLES.FILL_OPACITY,
            opacity: STYLES.OPACITY
            // dashArray: STYLES.DASH_ARRAY,
            // dashSpeed: STYLES.DASH_SPPED
          }
        },
        pointToLayer: (geoJsonPoint, latlng) => {
          return this.L.canvasMarker(latlng,
            {
              img: {
                // url: 'assets/images/map/marker-icon.png',
                url: '/assets/images/map/' + icon,
                size: STYLES.ICON_SIZE
              }
            })
        },
        onEachFeature: (feature, layer) => {
          layer.bindPopup((layer) => {
            this.popupComp.setDatas(layer)
            this.popupComp.setShow()
            return this.popupComp.$el
          }, {
            className: 's-map-popup',
            minWidth: 300,
            closeButton: false,
            autoClose: false
          })
            .bindTooltip((layer) => this.tooltipListener(layer), { direction: 'bottom', offset: [0, 15], sticky: true })
            .on('mouseover', (e) => this.mouseOverListener(e, layer)).on('mouseout', (e) => this.mouseOutListener(e, layer))
        }
      }).addTo(this.layer)
      setZIndex(geojsonLayer)
    }
  }

  mouseOverListener (e, layer) {
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: 8, color: '#00ffff' })
    } else if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
          url: '/assets/images/map/' + icon,
          size: [25, 25]
        }
      })
      layer.bringToFront()
    }
  }

  mouseOutListener (e, layer) {
    const icon = this.config.icon
    const type = e.target.feature.geometry.type
    if (type === 'LineString' || type === 'MultiLineString') {
      layer.setStyle({ weight: STYLES.WEIGHT, color: STYLES.COLOR })
    }
    if (type === 'Point' || type === 'MultiPoint') {
      layer.setStyle({
        img: {
          url: '/assets/images/map/' + icon,
          size: STYLES.ICON_SIZE
        }
      })
    }
  }

  tooltipListener (layer) {
    const nameId = layer.feature.id
    let name = ''
    if (nameId.indexOf('三通') !== -1 || nameId.indexOf('四通') !== -1 || nameId.indexOf('窨井') !== -1) {
      name = layer.feature.properties.pointnumber
    } else {
      name = layer.feature.properties.name
    }
    if (name === undefined) {
      name = ''
    }
    return name
  }
}
export default WfsLayerService