<script>
import commonMixin from '../base/mixins/common.js'
import { GeometryType } from '../base/GeometryType.js'
import Select from 'ol/interaction/Select'
import {click} from 'ol/events/condition'
import { convertObjToStyle } from '../base/SymbolUtil.js'
import SymbolConfig from '../base/SymbolConfig.js'
export default {
  name: 'sl-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 { $rootComponent, actived, layerIds, multi } = this
      let layers = []
      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
      }
      const sym = [
          convertObjToStyle(SymbolConfig.defaultSelectedPointSymbol),
          convertObjToStyle(SymbolConfig.defaultSelectedPolylineSymbol),
          convertObjToStyle(SymbolConfig.defaultSelectedPolygonSymbol)
        ]
      const select = new Select({
        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>
