<script>
import commonMixin from '@/base/mixins/common.js'
import { getSybmol } from '@/base/SymbolUtil.js'
import { GeometryType } from '@/base/GeometryType.js'
import SymbolConfig from '@/base/SymbolConfig.js'
import { getGeom } from '@/base/GeometryUtil.js'
export default {
  name: 'vector',
  render (h) { },
  mixins: [commonMixin('layer')],
  props: {
    id: {
      type: String,
      require: true
    },
    name: {
      type: String,
      require: true
    },
    styleConfig: {
      type: Object,
      default: function () {
        return SymbolConfig['defaultVectorLayer']
      }
    },
    // 该类型和图层样式有关（点、线、面）
    type: {
      type: String,
      default: GeometryType.POINT
    },
    features: {
      type: Array
    },
    visible: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      require: true
    },
    isCluster: {
      type: Boolean,
      default: false
    },
    clusterDistance: {
      type: Number,
      default: 20
    }
  },
  watch: {
    features (val) {
      this.originInstance.getSource().clear()
      this.addFeatures()
    },
    visible (val) {
      this.originInstance.setVisible(val)
    },
    zIndex(val) {
      this.originInstance.setZIndex(val)
    }
  },
  methods: {
    load () {
      const { id, name, styleConfig, $rootComponent, type, isCluster, clusterDistance, zIndex } = this
      this.originInstance = $rootComponent.addLayer({id, name, isCluster, clusterDistance})
      this.originInstance.setZIndex(zIndex)
      if (styleConfig) {
        const sym = getSybmol(type, styleConfig)
        this.originInstance.setStyle(sym)
      }
      this.addFeatures()
    },
    addFeatures () {
      const { features, ol, styleConfig } = this
      if (features) {
        let vectors = []
        for (var index in features) {
          var feature = features[index]
          let { geom, symbol, attributes } = feature
          var geometry = getGeom(geom)
          var vector = new ol.Feature()
          vector.setGeometry(geometry)
          if (symbol) {
            var sty = getSybmol(geom.type, symbol)
            vector.setStyle(sty)
          } else {
            vector.setStyle(getSybmol(geom.type, styleConfig))
          }
          vector.set('attributes', attributes)
          vector.setId(attributes.id)
          vectors.push(vector)
          this.originInstance.getSource().addFeatures(vectors)
        }
      }
    },
    // 通过id获取对象
    getFeatureById (id) {
      const source = this.originInstance.getSource()
      const feature = source.getFeatureById(id)
      const type = feature.getGeometry().getType()
      var center = []
      var coods = []
      if (type === GeometryType.POINT) {
        center = feature.getGeometry().getCoordinates()
        coods = feature.getGeometry().getCoordinates()
      }
      if (type === GeometryType.POLYGON) {
        center = feature.getGeometry().getInteriorPoint().getCoordinates()
        coods = feature.getGeometry().getCoordinates()
      }
      if (type === GeometryType.MULTIPOLYGON) {
        const bounds = feature.getGeometry().getExtent()
        center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2]
        const polygons = feature.getGeometry().getPolygons()
        for (let polygon of polygons.values()) {
          coods.push(polygon.getCoordinates())
        }
      }
      if (type === GeometryType.POLYLINE) {
        center = feature.getGeometry().getLastCoordinate()
        coods = feature.getGeometry().getCoordinates()
      }
      return { feature, type, center, coods, attributes: feature.get('attributes') }
    },
    // 刷新图层（触发change事件）
    refresh () {
      const source = this.originInstance.getSource()
      source.refresh()
    }
  }
}
</script>
