<template>

  <div>
    <span v-show="modeModificationContenu" id="retourContenu" style="font-size: smaller" @click="revenirModifContenu"> Revenir au contenu</span>
    <Filtre_Tag_Libre v-bind:modeGestion = "modeGestion" v-bind:auteur="auteur"></Filtre_Tag_Libre>
  </div>
</template>

<script>
import Service from "./service/Service";
import Filtre_Tag_Libre from "@/components/filtres/Filtre_Tag_Libre";

export default {
  name: "GererTagsLibres",
  components: {Filtre_Tag_Libre},
  data: function () {
    return {
      tagsLibresAuteur: [],
      nouveauTag: ''
    }
  },
  props: {
    //l'auteur connecte
    auteur: {},
    // signal permettant de déterminer si on accede a filtre_tags_libres via cette page ou pas
    modeGestion: {},
    // permet de savoir si ce menu a été atteint via la consultation d'un contenu du panier ou non
    modeModificationContenu: {}
  },
  methods: {
    creerTag: function () {
      //alert("Créer le tag " + this.nouveauTag)

      let data = {auteur: this.auteur, id_contenu: "", tag: this.nouveauTag}
      Service.ajouterTagLibre(data)
      this.tagsLibresAuteur.push(this.nouveauTag)
      this.nouveauTag = ""
    },
    supprimerTag: function (tagAVirer) {
      //alert("Supprimer le tag " + tag)
      //let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer}
      //this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
      Service.supprimerTagLibre(this.auteur, tagAVirer)
      this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer)
    },
    revenirModifContenu: function () {
      this.$emit("revenirAuContenu")
    }
  },
  watch:{
    auteur: function () {
      let that = this
      Service.recupererTagLibre(this.auteur).then(function (response) {
        that.tagsLibresAuteur = response.data
      })
      //  alert("Na wa")
    }
  }
}
</script>

<style scoped>
ul {
  list-style:none;

}
button {
  width: auto;
  height: auto;
}

#creerTag {
  margin-left: 5px;
}

#retourContenu::before{
  content: "\21A9";
  margin-left: 5vw;
  margin-top: 1vh;
}

</style>