<script>
import commonMixin from '@/base/mixins/common.js'
import { GeometryType } from '@/base/GeometryType.js'
export default {
  name: 'bs-select',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    actived: {
      type: Boolean,
      default: true
    },
    layerIds: {
      type: Array
    },
    multi: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
    },
    layerIds (val) {
      this.reload()
    }
  },
  methods: {
    load () {
      const { ol, $rootComponent, actived, layerIds, multi } = this
      let layers = []
      const sym = [
        new ol.style.Style({ // 图层样式
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)' // 填充颜色
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33', // 边框颜色
            width: 2 // 边框宽度
          }),
          image: new ol.style.Circle({
            radius: 8,
            fill: new ol.style.Fill({
              color: 'orange'
            })
          })
        }),
        new ol.style.Style({
          image: new ol.style.Circle({
            radius: 8,
            fill: new ol.style.Fill({
              color: 'orange'
            })
          }),
          geometry: function (feature) {
            var coordinates = feature.getGeometry().getCoordinates()
            return new ol.geom.MultiPoint(coordinates)
          }
        })
      ]
      if (layerIds && layerIds.length > 0) {
        for (let layerId of layerIds.values()) {
          if ($rootComponent.getLayer(layerId)) {
            layers.push($rootComponent.getLayer(layerId))
          }
        }
      }
      if (layers && layers.length === 0) {
        layers = undefined
      }
      if (this.originInstance) {
        $rootComponent.removeInteraction(this.originInstance)
      }
      const select = new ol.interaction.Select({
        condition: ol.events.condition.click,
        style: sym,
        layers: layers,
        multi
      })
      this.originInstance = select
      $rootComponent.addInteraction(select, actived)
      select.on('select', (e) => {
        if (multi) {
          this.$emit('select', e.selected)
        } else {
          var feature = e.selected[0]
          if (feature) {
            var type = feature.getGeometry().getType()
            var center = null
            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()
            }
            this.$emit('select', {
              feature,
              attributes: feature.get('attributes'),
              type: type,
              coods,
              center
            })
          }
        }
      })
    }
  }
}
</script>
