<template>
  <div>
    <slot v-if="measure"></slot>
    <!-- slot for measureTool -->
    <slot name="measureTool" />
    <!-- slot for measureMarker -->
    <slot name="measureMarker" />
  </div>
</template>

<style lang="scss"></style>

<script>
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import * as turf from "@turf/turf";

import * as MapboxDrawCom from "@mapbox/mapbox-gl-draw";
const MapboxDraw = MapboxDrawCom.default;

import measureMixin from "./measureMixin";
import controlMixin from "../withControlEvents";

const measureEvents = {
  drawCreate: "draw.create"
  /*drawDelete: "draw.delete",
   drawUpdate: "draw.update" */
};

const measureModes = {
  measureLength: "measure-length",
  measureArea: "measure-area"
};

const measureEvent = {
  measureResult: "measureResult"
};

export default {
  name: "Measure",
  mixins: [measureMixin, controlMixin],

  provide() {
    const self = this;
    return {
      get measure() {
        // 提供给子组件popup或者插槽
        return self.measure;
      }
    };
  },

  props: {
    measureMode: {
      type: String,
      require: true
    }
  },

  data() {
    return {
      measure: undefined
    };
  },

  watch: {
    measureMode() {
      this.measure.deleteAll();
      this.measure.trash();
    }
  },

  mounted() {
    let draweroptions = {
      displayControlsDefault: true,
      defaultMode: "simple_select",
      controls: {
        point: false,
        line_string: false,
        polygon: false,
        trash: false,
        combine_features: false,
        uncombine_features: false
      }
    };

    this.measure = new MapboxDraw(draweroptions);
    // const eventNames = Object.keys(measureEvents);
  },

  methods: {
    enableMeasure() {
      this.$_addDrawControl(this.measure);
      this.$_emitEvent("added", { measure: this.measure });
      const eventNames = Object.keys(measureEvents);
      this.$_unbindDrawEvents();
      // this.$_unbindSelfEvents(eventNames);
      this.$_bindSelfEvents(eventNames);
    },

    $_bindSelfEvents(events) {
      if (events.length === 0) return;
      this.$_bindDrawEvents(
        measureEvents.drawCreate,
        this._updateLengthOrArea.bind(this)
      );
    },

    _updateLengthOrArea() {
      if (!this.measure) return;
      let data = this.measure.getAll();
      let perimeter;
      let area;
      if (data.features.length > 0) {
        if (this.measureMode === measureModes.measureLength) {
          perimeter = turf.length(data);
        } else if (this.measureMode === measureModes.measureArea) {
          perimeter = turf.length(data);
          area = turf.area(data);
        }
        let coordinates =
          data.features[data.features.length - 1].geometry.coordinates;
        this.$emit(measureEvent.measureResult, {
          perimeter: perimeter,
          area: area,
          coordinates: coordinates
        });
      }
    }
  }
};
</script>
