<template>
  <div class="d-flex flex-column">
    <div>
      Fairwaydimensions
    </div>
    <template v-if="LOS">
      <span class="ml-2 mt-1">LOS: {{ LOS }}</span>
      <span class="ml-2 mb-3"
        ><translate>Source</translate>: {{ organization }}</span
      >
    </template>
  </div>
</template>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter";
//import { displayError } from "@/lib/errors";
import { mapGetters } from "vuex";
import VectorSource from "ol/source/Vector";
import { buildVectorLoader } from "@/components/map/layers.js";
import { bbox as bboxStrategy } from "ol/loadingstrategy";

export default {
  props: ["summary"],
  data() {
    return {
      organization: "",
      LOS: ""
    };
  },
  mounted() {
    const ids = this.fairWayDimensionIDs.map(id => {
      return equalToFilter("id", id);
    });
    const fairwaydimensionLayer = this.openLayersMap().getLayer(
      "FDREVIEWLAYER"
    );
    const source = new VectorSource({ strategy: bboxStrategy });
    this.$store.commit("map/reviewActive", true);
    fairwaydimensionLayer.setVisible(true);
    source.setLoader(
      buildVectorLoader(
        {
          geometryName: "area",
          featureTypes: ["fairway_dimensions"],
          filter: orFilter(...ids)
        },
        source,
        false
      )
    );
    fairwaydimensionLayer.setSource(source);
    // this.$store.dispatch("map/moveToBoundingBox", {
    //   boundingBox: ,
    //   zoom: 17,
    //   preventZoomOut: true,
    //   duration: 0
    // });
  },
  computed: {
    ...mapGetters("map", ["openLayersMap"]),
    fairWayDimensionIDs() {
      return this.summary["fd-area"].map(e => e.id);
    }
  }
};
</script>