<template>
  <div>
<div style="text-align: center" v-show="isImportation">

  Je suis la page pour charger un contenu<br>

  <input type="file" name="fichier" @change="onUploadFiles">

  <div class="markdown">
    <br>
    <button class="ajouterContenu" v-on:click="choisirTags">créer</button><br><br>
    <button class="retourArriere" v-on:click="retourArriere">revenir en arrière</button>

  </div>

</div>
    <TagsFixes v-show="!isImportation" @tags="ajouterContenu"></TagsFixes>

  </div>

</template>

<script>
import Service from "./service/Service";
import TagsFixes from "./TagsFixes";


export default {
  name: "ImporterFichier",
  components: {TagsFixes},
  props: {
    // l'auteur connecté
    auteur: {}
  },
  data() {
    return {
      formData: null,
      isImportation: true

    }
  },
  methods: {
    /**
     * @vuese
     * Fonction pour déclencher l'affichage de la page pour choisir les tags fixes
     */
    choisirTags: function () {
      this.isImportation = false
    },
    /**
     * @vuese
     * permet 'd'enrengistrer' le fichier uploadé via le formulaire
     */

     onUploadFiles:  function (event) {
       this.formData = new FormData()
       this.formData.append('file', event.target.files.item(0));
    },
    /**
     * @vuese
     * Fonction pour revenir au panier
     */
    retourArriere: function () {
      // evenement pour retourner vers le volet Contenu_Base
      this.$emit("retourArriere")
    },
    /**
     * @vuese
     * Fonction permettant l'ajout du fichier en tant que contenu
     */
    ajouterContenu: function (event) {
      let that = this
      Service.uploaderContenuPerso(this.formData, this.auteur, JSON.stringify(event.tags)).then(
          function (reponse) {
            let nouveauContenu = reponse.data
            nouveauContenu.provenance = "perso"
            nouveauContenu.tags_libres = []
            that.$emit("contenuAjoute", {contenu: nouveauContenu})
            that.contenuSaisi = ''
            that.retourArriere()
            that.isImportation = true
          }
      )
    }
  }
}
</script>

<style scoped>

button {
  align-items: center;
  width: auto;
  text-align: center;
  line-height: 1em;
}

</style>