<template>
  <div>
    <div  v-show="!detailContenu">
      <p> Vous êtes {{auteur}}</p>



      <span v-bind:class="['niveau', {'niveau-down' : contenusRecu.length > 0}]" id="recues" v-on:click="naviguer">Maj Recues</span><br>
      <div id="detailRecues" class="masque" v-bind:class="{'affiche' : contenusRecu.length > 0}">
        <table>
          <thead>
          <tr>
            <th colspan="6">Contenus</th>
          </tr>
          </thead>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Version courante</th>
            <th>Date Maj</th>
            <th>Accepter</th>
            <th>Refuser</th>
          </tr>
          <tbody>

          <tr  v-for="(item, index) in contenusRecu" :key="index">
            <td :id="JSON.stringify(item._id)" v-on:click="consulterContenuMaj(item)">{{item.titre}}</td>
            <b-popover :target="JSON.stringify(item._id)"  v-on:show="rechercherTexte(item.idContenuEnCours)" triggers="hover" placement="bottom">
              <p id="beautiful" v-html="texteDuContenu"></p>
            </b-popover>

            <td>{{ item.auteurDemande }}</td>
            <td>{{ item.version_en_cours }}</td>
            <td>01/06/2021</td>
            <td id="valider" v-on:click="gererPublication(item, 'o')"><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
            <td id="refuser" v-on:click="gererPublication(item, 'n')"><img v-bind:src="imageCroix"   alt='' height=20 width=20></td>

          </tr>
          </tbody>
        </table>
      </div>



      <span class="niveau" id="proposees" v-bind:class="{'niveau-down' : contenusPropose.length > 0}" v-on:click="naviguer">Maj Proposées</span>
      <div id="detailProposees" class="masque" v-bind:class="{'affiche' : contenusPropose.length > 0}">
        <table>
          <thead>
          <tr>
            <th colspan="8">Contenus</th>
          </tr>
          </thead>
          <tr>

            <th>Titre</th>
            <th>Auteur</th>
            <th>Version courante</th>
            <th>Date Version proposée</th>
            <th>Etat</th>
            <th>Conserver</th>
            <th>Créer Nouveau</th>
            <th>Supprimer</th>

          </tr>
          <tbody>

          <tr  v-for="(item, index) in contenusPropose" :key="index">
            <td :id="JSON.stringify(item._id)" v-on:click="consulterContenuMaj(item)">{{item.titre}}</td>
            <b-popover :target="JSON.stringify(item._id)"  v-on:show="rechercherTexte(item.idContenuEnCours)" triggers="hover" placement="bottom">
              <p v-html="texteDuContenu"></p>
            </b-popover>
            <td>{{ item.auteurContenu }}</td>
            <td>1</td>
            <td>01/06/2021</td>
            <td>{{ item.etat }}</td>
            <td v-if="item.etat === 'refus'" v-on:click="conserver(item)"><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
            <td v-else></td>
            <td v-if="item.etat === 'refus'" v-on:click="creerNouveau(item)"><img v-bind:src="imgNouveau"  alt='' height=20 width=20></td>
            <td v-else></td>
            <td v-if="item.etat !== 'enCours'" v-on:click="supprimer(item)"><img v-bind:src="imgPoubelle"  alt='' height=20 width=20></td>
            <td v-else></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <Consulter_Contenu v-show="detailContenu" @retour_arriere="retourArriere" v-bind:auteur="auteur" v-bind:contenuClique="contenuChoisi" v-bind:contenu-clique-provenance="contenuCliqueProvenance"/>

  </div>
</template>

<script>
import Service from "./service/Service";
import Consulter_Contenu from "./components/Consulter_Contenu";

export default {
  name: "Maj",
  components: {
    Consulter_Contenu
  },
  props: ['contenuEnPublication', 'auteur', 'isRecu', 'isPropose', 'rechercherPublications'],
  methods: {
    /**
     * @vuese
     * Navigation ascendante et descendante dans les sous arborescences des tags
     */
    naviguer: function (e) {
      e.target.classList.toggle("niveau-down")
      document.getElementById("detail" + e.target.id[0].toUpperCase() + e.target.id.substring(1)).classList.toggle('affiche')
    },
    /**
     * @vuese
     * Conservation du contenu en cours, qui passe en mode 'refusé', après refus d'une demande de publication
     */
    conserver: function (item) {
      let that = this
      let data = {id_contenu_en_cours: JSON.stringify(item.idContenuEnCours)}

      Service.creerEnCoursRefuse(data).then( function () {
            Service.supprimerDemandePublication(JSON.stringify(item._id)).then(function () {
              that.contenusPropose = that.contenusPropose.filter(contenu => contenu._id !== item._id)
              if (that.isContenuMajVide())
                that.$emit("recalculerNotif")
              that.$emit("majContenus")

            })
          }
      )
    },
    /**
     * @vuese
     * Création d'un nouveau contenu après refus d'une demande de publication
     */
    creerNouveau: function(item) {
      let that = this
      let data = {id_demande_pub : JSON.stringify(item._id), auteur: this.auteur}
      Service.creerNouveauContenu(data).then(
          function (response) {
            let nvoContenu = response.data
            nvoContenu.provenance = "perso"
            that.$emit("majNvoContenu", {contenu: response.data})
            that.contenusPropose = that.contenusPropose.filter(contenu => contenu._id !== item._id)
            if (that.isContenuMajVide())
              that.$emit("recalculerNotif")
          }
      )
    },
    /**
     * @vuese
     * Suppression d'une demande de publication acceptée ou refusée
     */
    supprimer: function (item) {
      let that = this
      Service.supprimerDemandePublication(JSON.stringify(item._id)).then(function () {
        that.contenusPropose = that.contenusPropose.filter(contenu => contenu._id !== item._id)
        if (that.isContenuMajVide())
          that.$emit("recalculerNotif")
      })
    },
    /**
     * @vuese
     * Gestion d'une réponse à une demande de publication recue.
     * @arg reponse = 'o' ou 'n' selon le choix de l'auteur d'origine
     */
    gererPublication: function (item, reponse) {
      let that = this
      let data = ""

      // auteurContenu -> undefined == nous sommes sur une maj tiers. Le cas contraire = maj d'un contenu perso à faire
      if (item.auteurContenu === undefined) {

        data = {id_tiers: JSON.stringify(item._id), reponse: reponse, auteur: this.auteur, titre: item.titre}
        Service.gererMajTiers(data).then(function () {
          that.contenusRecu = that.contenusRecu.filter(contenu => contenu._id !== item._id)
          if (that.isContenuMajVide() )
            that.$emit("recalculerNotif")
          if (reponse === 'o'){
            that.$emit("majContenus")
          }
        })

      }else {

        // item._id -> id de la demande de publication
        data = {id_publication: JSON.stringify(item._id), reponse: reponse, auteur: item.auteurDemande}
        //this.contenusRecu = []
        Service.gererDemandePublication(data).then(function () {
          that.contenusRecu = that.contenusRecu.filter(contenu => contenu._id !== item._id)
          if (that.isContenuMajVide())
            that.$emit("recalculerNotif")
          if (reponse === 'o'){
            that.$emit("majContenus")
          }
        })

      }
      // évènement pour recalculer les notifications de l'auteur en cours (et potentiellement faire disparaitre l'icone)
    },
    /**
     * @vuese
     * Récupération des publications recues (perso et tiers)
     */
    publicationsRecues: function () {
      let that = this
      // Dès que l'auteur est connu, on charge tous ses contenus

      Service.getPublicationsRecues(this.auteur).then(function (response) {
        let reception = response.data
        that.contenusRecu = []

        for (let i = 0; i < reception.length; i++) {
          if (reception[i].etat === "enCours") {
            that.contenusRecu.push(reception[i])
          }
        }

        Service.listeMajTiers(that.auteur).then(function (response){
          let reception = response.data
          if(reception.length > 0)
            for (let i = 0; i < reception.length; i++) {
              that.contenusRecu.push(reception[i])
            }
        })
      })
    },
    /**
     * @vuese
     * Récupération des publications proposées par l'auteur
     */
    publicationsProposees: function () {
      let that = this
      // Dès que l'auteur est connu, on charge tous ses contenus
      Service.getPublicationsProposees(this.auteur).then(function (response) {

        that.contenusPropose = []
        that.contenusPropose = response.data
      })
    },
    /**
     * @vuese
     * Consulter le contenu cliqué en détail
     */
    consulterContenuMaj: function (item) {
      this.detailContenu = true
      this.contenuChoisi = item
      this.contenuCliqueProvenance = "maj"
    },
    /**
     * @vuese
     * Gestion du retour de Consulter_Contenu
     */
    retourArriere: function () {
      this.detailContenu = false
    },
    /**
     * @vuese
     * Récupération et mise en forme du texte associé au contenu
     */
    rechercherTexte: function (id) {
      let that = this
      Service.recupererTexteContenuEnCours(JSON.stringify(id)).then(
          function (response) {
            let showdown = require('showdown'),
                converter = new showdown.Converter()

            that.texteDuContenu = converter.makeHtml(response.data)
          }
      )
    },
    /**
     * @vuese
     * Permet de déterminer si il reste encore des contenus maj 'non traités'
     * Utile pour le déclenchement du changement d'affichage pour la norification de maj
     */
    isContenuMajVide: function () {
      return this.contenusPropose.length === 0 && this.contenusRecu.length === 0
    }
  },
  data: function () {
    return {
      imageCoche: "https://e7.pngegg.com/pngimages/485/477/png-clipart-check-mark-computer-icons-green-check-circle-angle-text.png",
      imageCroix: "https://e7.pngegg.com/pngimages/993/267/png-clipart-computer-icons-red-cross-miscellaneous-logo.png",
      imgPoubelle: "data:image/png;base64,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",
      imgNouveau: "https://png.pngtree.com/png-vector/20190129/ourmid/pngtree-vector-new-icon-png-image_423422.jpg",
      contenusRecu: [],
      contenusPropose: [],
      action: false,
      detailContenu: false,
      contenuChoisi: null,
      contenuCliqueProvenance: '',
      texteDuContenu: ''
    }
  },
  watch: {
    /**
     * @vuese
     * appel initial au WS pour récupérer les demandes de publication
     */
    auteur: function () {
      this.publicationsRecues()
      this.publicationsProposees()
    },
    rechercherPublications: function () {
      this.publicationsRecues()
      this.publicationsProposees()
    }
  },
}
</script>

<style scoped>
div{
  text-align: center;
}

.niveau::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;

}

.niveau-down::before {
  transform: rotate(90deg);
}

.masque {
  display: none;
}

.affiche {
  display: block;
}

table {
  margin-top: 10px;
  margin-left: 185px;
  margin-bottom: 10px;

  width: 1550px;
}

th,
td {
  border: 1px solid #333;

}

td {
  text-align: center;
  vertical-align: middle;
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}

</style>