<template>
  <div>
  <div id="markdown" v-show="isCreation">
    <div id="titreContenu">
      <label>Titre du contenu : </label><br>
      <input type="text" placeholder="titre du contenu"  v-model="titreContenu">
    </div>
    <br>
    <p>Dans cette zone vous pouvez renseigner (en langage markdown) le contenu que vous désirez</p>
    <div class="mavonEditor">

      <mavon-editor :language="'fr'" style="position: static; height: 78vh; margin-top: -0.77%" v-model="contenuSaisi"/>
    </div>
    <div class="markdown">
      <br>
      <button class="ajouterContenu" v-on:click="choisirTags">créer </button>
      <button class="retourArriere" v-on:click="retourArriere(false)"> revenir en arrière</button>

    </div>

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

</template>

<script>
// import VueSimplemde from 'vue-simplemde'
import Service from "./service/Service";
import TagsFixes from "./TagsFixes";

export default {
  name: "NewContenu",
  components: {TagsFixes},
  props: {
    // l'auteur connecté
    auteur: {}
  },
  data() {
    return {
      contenuSaisi: '',
      markdownOption: {
        bold: true,
        language: 'fr'
      },
      titreContenu: "",
      isCreation: true
    }
  },
  methods: {
    /**
     * @vuese
     * Fonction pour déclencher l'affichage de la page pour choisir les tags fixes
     */
    choisirTags: function () {
      this.isCreation = false
    },
    /**
     * @vuese
     * Fonction d'ajout du contenu en fonction de la saisie utilisateur
     */
    ajouterContenu: function (event) {

      //alert(event.tags)
      let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi, titre: this.titreContenu, tags: event.tags}
      let that = this
      Service.creerContenuPerso(data).then(
          function (reponse) {
            let nouveauContenu = reponse.data
            nouveauContenu.provenance = "perso"
            nouveauContenu.tags_libres = []
            that.$emit("contenuAjoute", {contenu: nouveauContenu})
            that.contenuSaisi = ''
            that.retourArriere(true)
            that.isCreation = true
          }
      )
    },
    /**
     * @vuese
     * Retour sur la page du panier
     */
    retourArriere: function (cree) {
      // evenement pour retourner vers le volet Contenu_Base
      this.$emit("retourArriere", {cree: cree})
    }
  }
}
</script>

<style scoped>

/*@import '~simplemde/dist/simplemde.min.css';*/

.markdown, p{
  text-align: center;

}

input {
  width: 150px;
  height: 20px
}

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

#markdownEditor{
  height: 1500px
}

#titreContenu {
  text-align: center;
  align-content: center;
  margin: 0 auto 0;
}

.mavonEditor {
  width: 100%;
  height: 250%;
}

</style>