<template>
  <div class="fourteen wide column">
    <h1 class="ui header">Administration des fonds cartographiques</h1>

    <form
      id="form-layers"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >
      <!--  {{ formset.management_form }} -->
      <div class="ui buttons">
        <a
          class="ui compact small icon left floated button green"
          data-variation="mini"
          @click="createBasemap"
        >
          <i class="ui plus icon"></i>
          <span>Créer un fond cartographique</span>
        </a>
      </div>

      <div class="ui">
        <ProjectMappingBasemap
          v-for="basemap in basemapForms"
          :key="basemap.dataKey"
          :basemap="basemap"
          v-on:update-basemap="updateBasemap2store"
        />
      </div>

      <button
        @click="saveChanges"
        type="button"
        class="ui teal icon floated button"
      >
        <i class="white save icon"></i> Enregistrer les changements
      </button>
    </form>
  </div>
</template>

<script>
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
import { mapState } from "vuex";

export default {
  name: "Project_mapping",

  components: {
    ProjectMappingBasemap: Project_mapping_basemap,
  },

  data() {
    return {
      dataKey: 0,
    };
  },
  computed: {
    ...mapState("map", ["basemaps"]),
    basemapForms: function () {
      return this.basemaps.map((el) => {
        this.dataKey += 1;
        return { dataKey: this.dataKey, ...el };
      });
    },
  },
  methods: {
    createBasemap() {
      this.$store.commit("map/CREATE_BASEMAP", this.dataKey);
      this.dataKey += 1;
    },
    updateBasemap2store(payload) {
      const index = this.basemapForms.findIndex(
        (el) => el.dataKey === payload.dataKey
      );
      console.log("updateBasemap2store", index);
      this.basemapForms[index] = payload;
      this.$store.commit("map/UPDATE_BASEMAPS", this.basemapForms);
    },
    saveChanges() {
      this.$store.dispatch("map/SAVE_BASEMAPS");
    },
  },
};
</script>