<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bs-select',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    actived: {
      type: Boolean,
      default: true
    },
    layerId: {
      type: String
    },
    selectedSymbol: {
      type: Object,
      default: function () {
        return {
          fill: { color: 'rgba(255, 255, 255, 0.2)' },
          stroke: { color: '#ffcc33', width: 2 },
          image: { radius: 7, fill: '#ffcc33', stroke: '#ffcc33' }
        }
      }
    },
    multi: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
    },
    multi (val) {
      this.reload()
    },
    layerId (val) {
      this.reload()
    },
    selectedSymbol (val) {
      this.reload()
    }
  },
  methods: {
    load () {
      const { ol, $rootComponent, actived, layerId, selectedSymbol, multi } = this
      let sym = null
      let layers = []
      if (selectedSymbol) {
        sym = new ol.style.Style({
          fill: new ol.style.Fill({
            color: selectedSymbol.fill.color
          }),
          stroke: new ol.style.Stroke({
            color: selectedSymbol.stroke.color,
            width: selectedSymbol.stroke.width
          }),
          image: new ol.style.Circle({
            radius: selectedSymbol.image.radius,
            fill: new ol.style.Fill({
              color: selectedSymbol.image.fill
            })
          })
        })
      }

      if (layerId) {
        if ($rootComponent.getLayer(layerId)) {
          layers.push($rootComponent.getLayer(layerId))
        }
      }
      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) => {
        this.$emit('select', e.selected)
      })
    }
  }
}
</script>
