<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bs-edit',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    actived: {
      type: Boolean,
      default: true
    },
    modifySymbol: {
      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' }
        }
      }
    },
    features: {
      type: Object
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
    },
    selectedSymbol (val) {
      this.reload()
    },
    features (val) {
      this.reload()
    }
  },
  methods: {
    load () {
      const { ol, $rootComponent, actived, modifySymbol, features } = this
      let sym = null
      if (modifySymbol) {
        sym = new ol.style.Style({
          fill: new ol.style.Fill({
            color: modifySymbol.fill.color
          }),
          stroke: new ol.style.Stroke({
            color: modifySymbol.stroke.color,
            width: modifySymbol.stroke.width
          }),
          image: new ol.style.Circle({
            radius: modifySymbol.image.radius,
            fill: new ol.style.Fill({
              color: modifySymbol.image.fill
            })
          })
        })
      }
      const modify = new ol.interaction.Modify({
        features: features,
        style: sym
      })
      this.originInstance = modify
      $rootComponent.addInteraction(modify, actived)
      modify.on('modifyend', (e) => {
        var vector = e.features.item(0)
        const coods = vector.getGeometry().getCoordinates()
        this.$emit('modifyend', coods)
      })
      modify.on('modifystart', (e) => {
        var vector = e.features.item(0)
        const coods = vector.getGeometry().getCoordinates()
        this.$emit('modifystart', coods)
      })
    }
  }
}
</script>
