<template>
  <div id="divPrincipale" >

    <div id="principal" v-show="!modeModification && !modeConsultation">
      <!--   width: 330px;
       -->
      <div id="ensemble" class="ensemble" :class="darktheme ? 'ensembledark' : ''" :style="isActif ? {width: '17vw'} : {width: '2.5vw'}">
        <button id="changerVariante" :style="isActif ? {width: 'auto', 'margin-left': '1vw'} : {width: '20px', 'margin-left': '0.6vw'}"
                v-show="!modeModification && !modeConsultation" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
        <br>

        <div id="ensembleVolet">
          <button id="boutonVolet" v-on:click="desactiverVolet"  v-bind:style="[{'margin-top': '0%'},
isActif ? {'margin-left': '1vw', 'margin-right': '1vw'} : {'margin-left': '0.6vw'}]"></button>
          <div class="full" id="volet" v-bind:style="[isActif ? {'margin-left': '1vw', 'margin-right': '1vw'} : {'margin-left': '0.1vw', 'margin-right': '0.1vw'},
          darktheme ? {'border-color': 'white'} : {'border-color': 'black'}]" v-show="isActif">
            <Volet_Menu v-bind:darktheme="darktheme" v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre"
                        @basculeRechercheFiltre="basculeRechercheFiltre" v-bind:filtre_choisi="filtre_choisi"/>
            <Volet_Contenu v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"
                           v-bind:auteur="auteur" @filtresChoisis="filtresChoisis" v-bind:razModeVariante="razModeVariante"
                           v-bind:modeFiltre="modeFiltre" v-bind:deconnexion="deconnexion"  />
          </div>
        </div>
      </div>

      <div id="tableau"  :class="darktheme ? 'tableaudark' : ''" :style="isActif ? {width: '90%'} : {width: '98%'}" >
        <div class="choixPanier" v-show="panierChoisi && (!modeModification && !modeConsultation)">
          <label id="labelPerso" :style="isActif ? {'margin-left': '-5px'} : {'margin-left': '5px'}">Perso </label>
          <input type="checkbox" class="filtreTableau" id="filtrePerso" v-model="persoChecked"
                 v-on:click="persoChecked = !persoChecked" name="perso" value="tiers"/>
          <label> Tiers </label>
          <input type="checkbox" class="filtreTableau" id="filtreTiers"  v-model="tiersChecked"
                 v-on:click="tiersChecked = !tiersChecked" name="tiers" value="tiers"/>
          <label> En Cours</label>
          <input type="checkbox" class="filtreTableau" id="filtreEnCours"   v-model="enCoursChecked"
                 v-on:click="enCoursChecked = !enCoursChecked" name="en-cours" value="en-cours"/>

        </div>
        <!--        <table v-bind:style="panierChoisi ? {'margin-top': '0%'} : {'margin-top': '24px'}">-->
        <table :style="{
   'margin-top': (panierChoisi ? '0%' : '24px' ),
   'margin-left': (isActif ? '20px' : '1.5%' ),
      'margin-right': '20px'
        }" >
          <thead>
          <tr>
            <th v-bind:colspan="isActif ? 10 : (panierChoisi ? 12 : 11)">Contenus</th>
          </tr>
          </thead>
          <tr v-bind:style="!darktheme ? {'background-color': 'orange'} : {'background-color': '#FF8C00'}">
            <th v-on:click="trierColonne">Titre</th>
            <th v-on:click="trierColonne">Auteur</th>
            <th v-on:click="trierColonne">Version actuelle</th>
            <th v-on:click="trierColonne">Date Version actuelle</th>

            <th v-on:click="trierColonne">Nbre d'Utilisations</th>
            <th v-on:click="trierColonne">Note</th>
            <th v-on:click="trierColonne" v-show="panierChoisi">Note Perso</th>
            <th v-on:click="trierColonne" v-show="!isActif">Tags Fixes </th>
            <th v-on:click="trierColonne" v-show="!isActif && panierChoisi">Tags Libres</th>
            <th v-on:click="trierColonne" >Type</th>
            <th v-on:click="trierColonne">Source</th>
<!--            <th v-on:click="supprimerContenus" class="supprimerContenus">
              <img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>-->
            <th v-on:click="supprimerContenus" class="supprimerContenus"> <span v-bind:class="panierChoisi ? 'imgPoubelle' : 'imgEtoile'"></span></th>

          </tr>
          <tbody>

          <tr v-show="panierChoisi && (persoChecked ** (item.provenance === 'perso')) && (tiersChecked ** (item.provenance === 'tiers'))
           && (enCoursChecked ** (item.provenance === 'en-cours'))" v-for="item in filterContenu" :key="JSON.stringify(item._id)"
              v-bind:style="{
                'background-color': item.provenance === 'perso' ? 'white' : item.provenance === 'tiers' ? 'red' : 'blue'
                     }">
            <td :id="JSON.stringify(item._id)"  v-on:click="chargerContenu(item, item.provenance)">{{item.titre}}</td>
            <b-popover style="height: 700px; width: 700px" class="non"  v-on:show="rechercherTexte(item._id, item.provenance, item.source)" :target="JSON.stringify(item._id)" triggers="hover" placement="bottom">
              <p id="beautiful" v-html="texteDuContenu" v-if="!isMoodle"></p>
              <Test v-else></Test>
            </b-popover>
            <!-- auteur -->
            <td>{{item.auteur}}</td>
            <!-- version -->
            <td v-if="item.provenance === 'en-cours' || item.provenance === 'tiers' ">{{ item.version }}</td>
            <td v-else>{{ item.versionEnCours.numero }}</td>
            <!-- date -->
            <td v-if="item.provenance === 'en-cours'">{{ item.date }}</td>
            <td v-else>{{ item.versionEnCours.date }}</td>
            <!-- popularité -->
            <td v-if="item.provenance === 'en-cours'"> - </td>
            <td v-else>{{ item.popularite }}</td>
            <!-- note -->
            <td v-if="item.provenance === 'en-cours'"> - </td>
            <td v-else>{{ calculerNote(item) }}</td>
            <td>{{ item.note_perso }}</td>
            <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_fixes.toString()">{{item.tags_fixes.toString()}}</td>
            <td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
            <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="tagsLibresContenu(item)">
              {{tagsLibresContenu(item)}}</td>
            <td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
            <td>{{ item.type }}</td>
            <td>{{ item.source }}</td>
            <td class="boutonSupprimer">  <input type="checkbox" v-on:change="ajouterCoche(item._id, item.provenance, item.note_perso)" class="horns" name="horns"/></td>

          </tr>

          <tr v-show="!panierChoisi && (!modeModification && !modeConsultation)" v-for="item in contenusbanque" :key="JSON.stringify(item._id)"
              v-bind:style="{'background-color': 'white'}">
            <td :id="'a' + JSON.stringify(item._id)" v-on:click="chargerContenu(item, 'banque')">{{ item.titre }}</td>
            <b-popover :target="'a' + JSON.stringify(item._id)"  v-on:show="rechercherTexte(item._id, 'banque', item.source)" triggers="hover" placement="bottom">
              <p v-html="texteDuContenu" v-if="!isMoodle"></p>
              <Test v-else></Test>
            </b-popover>
            <td>{{ item.auteur }}</td>
            <td>{{item.versionEnCours.numero}}</td>
            <td>{{item.versionEnCours.date}}</td>
            <td class="prout">{{item.popularite}}</td>
            <td>{{calculerNote(item)}}</td>
            <td v-show="!isActif" v-b-popover.hover.bottom="item.tags_fixes.toString()">{{item.tags_fixes.toString()}}</td>
            <td>{{ item.type }}</td>
            <td>{{ item.source }}</td>
            <td class="boutonSupprimer">  <input type="checkbox" v-on:change="ajouterCoche(item._id, item.versionEnCours)" class="horns" name="horns"/></td>
          </tr>


          </tbody>
        </table>

        <tooltip />
        <div id="ajouterContenu" v-show="panierChoisi && !modeModification" class="circle" v-bind:class="darktheme ? 'circleDark' : ''"
             v-bind:style="{'margin-left': (!isActif ? '94.8%' : '94%')}">
          <b-popover target="ajouterContenu" triggers="click" placement="lefttop">
            <template #title>Choix : </template>
            <button v-on:click="ajouterContenu('1')" v-bind:style="'height: auto; width: auto'">1. Créer un markdown</button>
            <button v-on:click="ajouterContenu('2')" v-bind:style="'height: auto; width: auto'">2. Importer un xml moodle</button>
          </b-popover>
        </div>

      </div>
    </div>
    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
                       v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
    <Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
                      v-show="modeModification" @actionContenu="actionContenu"  v-bind:contenuClique = "contenuClique" v-bind:darktheme="darktheme"
                      @choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne"  @actionTagLibre="actionTagLibre"
                      @chargerTagsLibres="chargerTagsLibres"/>

  </div>
</template>

<script>
//import axios from "axios";

let $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");
import Volet_Menu from "./Volet_Menu";
import Volet_Contenu from "./Volet_Contenu";
import Service from '../../src/service/Service'
import Modifier_Contenu from "./Modifier_Contenu";
import Consulter_Contenu from "./Consulter_Contenu";
import Test from "../Test"

export default {
  name: "Volet_Base",
  components: {
    Test,
    Modifier_Contenu,
    Consulter_Contenu,
    Volet_Menu,
    Volet_Contenu
  },
  props: {
    // L'auteur connecté
    auteur: {},
    // Permet de stocker un contenu ajouté
    contenuAjoute: {},
    // Permet de stocker un 'nouveau contenu' ajouté
    nvoContenu: {},
    // Signal d'alerte pour mettre à jour les contenus
    majContenus: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // Signal de déconnexion
    deconnexion: {},
    // etat. Sera utile pour certaines réinitialisations de l'affichage
    etat: {}
  },
  data: function () {
    return {
      isActif: true,
      panierChoisi: true,
      filtre_choisi: "",
      variante: false,
      contenus: [],
      contenusbanque: [],
      contenusTotal: [],
      contenusTotalBanque: [],
      contenuClique: "",
      contenuCliqueProvenance: "",
      modalOn: false,
      modeModification: false,
      modeConsultation: false,
      persoChecked: true,
      tiersChecked: true,
      enCoursChecked: true,
      oui: 0,
      checkes: [],
      nouveauContenu: false,
      texteDuContenu: '',
      titreContenu: '',
      token: '',
      razModeVariante: false,
      modeFiltre: false,
      isMoodle: false,
      texteBoutonvariante: "changer",
      // booléens pour le tri des colonnes du tableau
      titreTrie: false,
      auteurTrie: false,
      versionTriee: false,
      dateTriee: false,
      populariteTriee: false,
      noteTriee: false,
      notePersoTriee: false,
      typeTrie: false,
      sourceTriee: false,
      notePersonnelle: "-",
      chocolat: '<h1 id="hellomarkdown">hello, markdown!</h1>',
      isDeconnecte: false,
      imgEtoile: "https://previews.123rf.com/images/ylivdesign/ylivdesign1612/ylivdesign161208906/67933171-ic%C3%B4ne-%C3%A9toile-%C3%A0-cinq-branches-jaunes-illustration-de-dessin-anim%C3%A9-d-ic%C3%B4ne-de-vecteur-%C3%A9toile-jaune-%C3%A0-cinq-branches-.jpg",
      imgPoubelle: "data:image/png;base64,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"
    }
  },
  computed:{
    /**
     * @vuese
     * Permet de ne pas afficher les contenus en cours ayant fait l'objet d'une demande de publication
     */
    filterContenu: function () {

      return this.contenus.filter(item => item.isPublie !== 'oui')
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'on se deconnecte on réinitialise la vue en cours sur le tableau des contenus
     */
    deconnexion: function () {
      this.modeModification = false
      this.panierChoisi = true
      this.isDeconnecte = true
    },
    /**
     * @vuese
     * Dès que l'auteur est connu, on charge tous les contenus auxquels il pourrait s'intéresser
     */
    auteur: function () {
      this.razModeVariante = ! this.razModeVariante
      this.contenusDuPanier()
      this.contenusDeLaBanque()
      this.token = localStorage.token
      this.panierChoisi = true
      this.checkes = []
      $(".horns").prop( "checked", false );
    },
    /**
     * @vuese
     * Mise à jour de l'array des contenus en cas de création de contenu
     */
    contenuAjoute: function(){
      this.contenus.push(this.contenuAjoute)
    },
    /**
     * @vuese
     * Mise à jour de l'array des contenus en cas de création de 'nouveau contenu' (sur les cendres d'une demande de publication refusée)
     */
    nvoContenu: function () {
      // Fonction retour du menu des maj
      this.contenus.push(this.nvoContenu)
    },
    /**
     * @vuese
     * Mise à jour des contenus pour l'auteur connecté
     */
    majContenus: function () {
      this.contenusDuPanier()
      this.contenusDeLaBanque()
    },
    /**
     * @vuese
     * Si l'etat change (on sort du 'mode contenu'), on réinitialise le volet latéral
     */
    etat: function(){
      this.filtre_choisi = ""
    }

  },
  mounted() {
    /**
     * @vuese
     * Permet de rendre le volet latéral bougeable à la souris
     */
    this.modeModification = false
    $('#ensembleVolet').draggable()
  },
  methods: {
    tagsLibresContenu: function(item){
     // return item.tags_libres.toString()
      if (item.tags_libres === undefined)
        return ""
      else
        return item.tags_libres.toString()
    },
    /**
     * @vuese
     * Charger les contenus du panier de l'auteur connecté
     */
    contenusDuPanier: function(){
      let that = this
      // Dès que l'auteur est connu, on charge tous ses contenus

      Service.getPanierAuteur(this.auteur).then(function (response) {
        // on récupère tous les contenus du panier de l'auteur
        that.contenusTotal = Array.from(response.data)
        // on les met dans l'array prévue à cet effet
        that.contenus = that.contenusTotal
      })
    },
    /**
     * @vuese
     * Charger les contenus de la banque (adaptés à l'auteur connecté)
     */
    contenusDeLaBanque: function(){

      let that = this
      Service.getBanqueAuteur(this.auteur).then(function (response) {
        that.contenusTotalBanque = Array.from(response.data)
        that.contenusbanque = that.contenusTotalBanque
      })
    },
    /**
     * @vuese
     * Masquer ou afficher le volet latéral
     */
    desactiverVolet: function () {
      this.isActif = !this.isActif
      this.texteBoutonvariante === "changer" ? this.texteBoutonvariante = "c" : this.texteBoutonvariante = "changer"
      this.$emit("volet_desactive", {actif: this.isActif})

    },
    /**
     * @vuese
     * Bascule entre le mode panier et le mode banque
     */
    ajusterMode: function () {
      this.panierChoisi = !this.panierChoisi
      this.checkes = []
    },
    /**
     * @vuese
     * Passer le filtre choisi (pour Volet_Contenu)
     */
    passerFiltre: function(event){
      this.filtre_choisi = event.filtre
    },
    /**
     * @vuese
     * Changer variante (à destination du composant Menu)
     */
    changerVariante: function (){
      this.variante = ! this.variante
      this.$emit("choix_variante", {variante: this.variante})
    },
    /**
     * @vuese
     * Supprimer des contenus ou mettre des contenus en tiers
     */
    supprimerContenus: function () {
      let that = this

      // dans ce cas -> mode suppression de contenu du panier
      if (this.panierChoisi){
        for(let i = 0; i < this.checkes.length; i++) {
          let id = this.checkes[i][0]
          if(this.checkes[i][1] === "perso"){
            Service.supprimerContenu(JSON.stringify(id)).then(
                function () {
                  that.contenus = that.contenus.filter(contenu => contenu._id !== id)

                }
            )
          } else if (this.checkes[i][1] === "tiers"){
            Service.supprimerTiers(this.auteur, JSON.stringify(id), this.checkes[i][2]).then(
                function (response) {
                  let contenuSupprime = that.contenus.filter(contenu => contenu._id === id)
                  that.contenus = that.contenus.filter(contenu => contenu._id !== id)
                  if (response.data !== '0')
                    that.contenusbanque.push(contenuSupprime[0])
                }
            )
          } else {
            Service.supprimerEnCoursParLid(JSON.stringify(id)).then(
                function () {
                  that.contenus = that.contenus.filter(contenu => contenu._id !== id)
                }
            )
          }
        }

      }
      // dans ce cas -> mode appropriation de contenu banque
      else {
        for(let i = 0; i < this.checkes.length; i++) {
          let id = this.checkes[i][0]
          let version = this.checkes[i][1]["numero"]
          let data = {auteur: this.auteur, id_tiers:JSON.stringify(id) , version: version}

          Service.creerContenuTiers(data).then(
              function (response) {
                let nouveauTiers = response.data
                nouveauTiers.provenance = "tiers"
                nouveauTiers.version = version
                that.contenus.push(nouveauTiers)
                that.contenusbanque = that.contenusbanque.filter(contenu => contenu._id !== id)
                // data= {id_contenu:JSON.stringify(id) , version: version}
                //Service.incrementerPopularite(data)
              }
          )
        }
      }
      this.checkes = []
      $(".horns").prop( "checked", false );
    },
    /**
     * @vuese
     * Evenement pour lancer le composant de création de contenu
     */
    ajouterContenu: function (nombre) {
      // Evenement pour lancer le composant de création de contenu
      this.$emit("newContenu", {source: nombre})
    },
    /**
     * @vuese
     * Charger un contenu (dans Modifier_Contenu)
     */
    chargerContenu: function (item, provenance) {
      this.panierChoisi = false
      this.contenuClique = item
      this.contenuCliqueProvenance = provenance

      if (provenance === 'banque'){

        this.modeConsultation = true
        this.$emit("ChangerTitre", {titre: "Consultation du contenu " + this.contenuClique.titre})

      } else {
        this.modeModification = true
        this.$emit("ChangerTitre", {titre: "Modification du contenu " + this.contenuClique.titre})

        // Si markdown, on retransforme le texte affiché dans le popover pour récupérer du Markdown
        if (item.source === "markdown") {

          let showdown = require('showdown'),
              converter = new showdown.Converter()

          this.texteDuContenu = converter.makeMarkdown(this.texteDuContenu)
          // Si Moodle, on refait (pour l'instant) un appel au WS pour récupérer le texte
        } else if (item.source === "moodle"){
          let that = this
          Service.recupererTexteContenu(JSON.stringify(item._id)).then(
              function (response) {
                that.texteDuContenu = response.data
                // alert(response.data)
              }
          )
        }
      }
    },
    /**
     *
     */
    retourArriere: function () {
      this.modeConsultation = false
      this.$emit("ChangerTitre", {titre: ""})
      // this.panierChoisi = true
      // this.razModeVariante = true
    },
    /**
     * @vuese
     * Récupération de lm'action choisie dans Modifier_Contenu et dans Consulter_Contenu,
     * parmi les 4 possibilités :  ̶m̶e̶t̶t̶r̶e̶ ̶e̶n̶ ̶f̶a̶v̶o̶r̶i̶, modifier, supprimer et validerModification / Demander la Publication
     */
    actionContenu: function (event) {
      this.modeModification = false
      this.modeConsultation = false
      let data = {}
      let that = this
      let auteur = ""
      let version = 0;
      let id = ''


      switch (event.action) {
        case "mettreFavori":
          if (event.version === undefined){
            version = event.contenu.versionEnCours["numero"]
          }
          else {
            version = parseInt(event.version)
          }
          id = event.contenu._id
          data = {auteur: this.auteur, id_tiers:JSON.stringify(id) , version: version}
          Service.creerContenuTiers(data).then(
              function (response) {
                let nouveauTiers = response.data
                nouveauTiers.provenance = "tiers"
                nouveauTiers.version = version
                that.contenus.push(nouveauTiers)
                that.contenusbanque = that.contenusbanque.filter(contenu => contenu._id !== event.contenu._id)
                //  data= {id_contenu:JSON.stringify(id) , version: version}

                // Service.incrementerPopularite(data)

              }
          )
          this.$emit("ChangerTitre", {titre: ""})
          this.panierChoisi = false
          break
        case "modifier":
          this.modeModification = true
          this.texteDuContenu = event.texte
          this.titreContenu = event.contenu.titre

          break
        case "supprimer":
          this.panierChoisi = true

          if(this.contenuCliqueProvenance === "perso"){
            Service.supprimerContenu(JSON.stringify(event.contenu._id)).then(
                function () {
                  that.contenus = that.contenus.filter(contenu => contenu._id !== event.contenu._id)
                }
            )
          } else if (this.contenuCliqueProvenance === "tiers"){
            Service.supprimerTiers(this.auteur, JSON.stringify(event.contenu._id)).then(
                function () {
                  let contenuSupprime = that.contenus.filter(contenu => contenu._id === event.contenu._id)
                  that.contenus = that.contenus.filter(contenu => contenu._id !== event.contenu._id)
                  that.contenusbanque.push(contenuSupprime[0])
                }
            )
          } else {
            Service.supprimerEnCoursParLid(JSON.stringify(event.contenu._id)).then(
                function () {
                  that.contenus = that.contenus.filter(contenu => contenu._id !== event.contenu._id)
                }
            )
          }
          break
        case "publier":
          this.panierChoisi = true
          data = {id_contenu: JSON.stringify(event.contenu.reference), id_contenu_en_cours: JSON.stringify(event.contenu._id),
            auteur_en_cours: this.auteur, version: event.contenu.version.toString()}
          // this.$emit("rechercherNouvellesPublications")

          Service.creerDemandePublication(data).then( function () {
                // on réupère le contenu en cours associé à la demande de publication
                let enCours = that.contenus.filter(contenu => contenu._id === event.contenu._id)
                // on supprime ce contenu de l'array principale
                that.contenus = that.contenus.filter(contenu => contenu._id !== event.contenu._id)
                // on le modifie
                enCours[0].isPublie = "oui"
                // et on le réinsère
                that.contenus.push(enCours[0])
                that.$emit("rechercherNouvellesPublications")
              }
          )

          break
        case "validerModification":
          if (event.contenu.anonyme)
            auteur = this.auteur
          data = {id_contenu_en_cours: JSON.stringify(event.contenu._id), auteur: auteur}
          Service.majContenu(data).then(function () {
            that.contenusDuPanier()
            that.panierChoisi = true
          })
          break
      }
    },
    /**
     * @vuese
     * Sauvegarde des éléments cochés. Pour suppression (en mode banque) ou mise en tiers (en mode
     */
    ajouterCoche: function (idContenu, provenance, notePerso = "") {
      let existant = false

      for (let i = 0; i < this.checkes.length; i++){

        if (this.checkes[i][0] === idContenu){
          existant = true
          alert('prout')
        }
      }

      if (existant){
        this.checkes.splice(this.checkes.indexOf([idContenu, provenance]), 1)
      }
      else {
        this.checkes.push([idContenu, provenance, notePerso])
      }
    },
    /**
     * @vuese
     * Récupération du texte d'un contenu
     */
    rechercherTexte:  function (id, provenance, source) {

      if (id === undefined)
        return

      /*      console.log("id : " + id)
            console.log("provenance : " + provenance)*/

      let that = this

      //  alert('caca : ' + source)

      if (source === "moodle"){
        this.isMoodle = true
      }
      else {
        this.isMoodle = false


        if(provenance === 'en-cours'){
          Service.recupererTexteContenuEnCours(JSON.stringify(id)).then(
              function (response) {
                let showdown = require('showdown'),
                    converter = new showdown.Converter()

                that.texteDuContenu = converter.makeHtml(response.data)
              }
          )
        }
        else if (provenance === 'banque'){
          Service.recupererTexteVersionContenu(JSON.stringify(id), 0).then(
              function (response) {
                let showdown = require('showdown'),
                    converter = new showdown.Converter()

                that.texteDuContenu = converter.makeHtml(response.data)
              }
          )
        }
        else  {
          Service.recupererTexteContenu(JSON.stringify(id)).then(
              function (response) {
                let showdown = require('showdown'),
                    converter = new showdown.Converter()
                that.texteDuContenu = converter.makeHtml(response.data)
              }
          )
        }
      }
    },
    /**
     * @vuese
     * Retour du composant Modifier_Contenu : soit retour direct, soit modification du contenu à faire
     */
    choixModif: function (event) {
      this.modeModification = false
      this.panierChoisi = true

      this.$emit("ChangerTitre", {titre: ""})

      if(event.action === "valider") {
        let nouveau_titre = event.titre
        let data = {nouveau_texte: event.nouveauTexte, nouveau_titre: nouveau_titre}

        if (this.contenuCliqueProvenance !== 'en-cours') {
          let dataDeux = {
            auteur: this.auteur, id_contenu: JSON.stringify(this.contenuClique._id),
            version: this.contenuClique.versionEnCours["numero"], provenance: this.contenuCliqueProvenance
          }
          let that = this
          Service.creerEnCours(dataDeux).then(function (reponse) {
            //console.log(reponse.data)
            let contenuEC = reponse.data
            contenuEC.provenance = "en-cours"
            contenuEC.titre = event.titre
            that.contenus.push(contenuEC)
            Service.changerTexte(data, JSON.stringify(reponse.data._id))
          })
        } else {
          Service.changerTexte(data, JSON.stringify(this.contenuClique._id))

          for (let i = 0; i < this.contenus.length; i++) {
            if (this.contenus[i]._id === this.contenuClique._id) {
              this.contenus[i].titre = event.titre
            }
          }
        }
      }
    },
    /**
     * @vuese
     * Application des filtres choisis au contenu affiché (mode Banque et Panier)
     */
    filtresChoisis(event) {
      let contenusFiltres = []
      // on récupère les contenus à filtrer
      if (this.panierChoisi){
        contenusFiltres = this.contenusTotal
      }
      else {
        contenusFiltres = this.contenusTotalBanque
      }
      // on les filtre
      let tmp = null
      if (event.filtres.filter(contenu => contenu.type === 'auteur').length > 0){
        // auteur
        let filtre_auteur = (event.filtres.filter(contenu => contenu.type === 'auteur').map(contenu => contenu.filtre))
        contenusFiltres = contenusFiltres.filter(contenu => filtre_auteur.includes(contenu.auteur))
      }
      if (event.filtres.filter(contenu => contenu.type === 'date').length > 0) {
        // date
        let dt = new Date()

        let filtre_date = (event.filtres.filter(contenu => contenu.type === 'date').map(contenu => contenu.filtre))
        switch (filtre_date.toString()){
          case "Les 7 derniers jours":
            dt.setDate( dt.getDate() - 7 )
            break
          case "De ce mois":
            tmp = dt.getDate() - 1
            dt.setDate( dt.getDate() - (tmp))
            break
          case "De cette année":
            dt = new Date(new Date().getFullYear(), 0, 1);
            break
          default:
            console.log("Erreur")
            break
        }

        for (let elt in contenusFiltres){
          let contenu = contenusFiltres[elt]
          if(contenu.provenance === 'perso'){
            if (contenu.versionEnCours.date < dt){
              contenusFiltres = contenusFiltres.filter(ct => ct._id !== contenu._id)
            }
          } else {
            if (contenu.date < dt){
              contenusFiltres = contenusFiltres.filter(ct => ct._id !== contenu._id)
            }
          }
        }

        contenusFiltres = contenusFiltres.filter(contenu => contenu.versionEnCours.date >= dt)
        contenusFiltres = contenusFiltres.filter(contenu => contenu.date >= dt)

      }
      if (event.filtres.filter(contenu => contenu.type === 'tags libres').length > 0) {
        // tags libres

        let filtre_tags_libres = (event.filtres.filter(contenu => contenu.type === 'tags libres').map(contenu => contenu.filtre))

       // contenusFiltres.forEach(contenu => console.log(contenu.tags_libres.length))

        for (let i = 0; i < filtre_tags_libres.length; i++) {
          if(filtre_tags_libres[i] === 'sans Tag Libre'){
            contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_libres.length === 0)
          } else {
            contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_libres.includes(filtre_tags_libres[i]))
          }
        }
      }
      if (event.filtres.filter(contenu => contenu.type === 'tags officiels').length > 0) {
        // tags officiels
        let filtre_tags_fixes = (event.filtres.filter(contenu => contenu.type === 'tags officiels').map(contenu => contenu.filtre))
        for (let i = 0; i < filtre_tags_fixes.length; i++) {
          contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_fixes.includes(filtre_tags_fixes[i]))
        }
      }
      if (event.filtres.filter(contenu => contenu.type === 'type').length > 0) {
        // type
        let filtre_type = (event.filtres.filter(contenu => contenu.type === 'type').map(contenu => contenu.filtre))
        contenusFiltres = contenusFiltres.filter(contenu => filtre_type.includes(contenu.type))
      }
      if (event.filtres.filter(contenu => contenu.type === 'source').length > 0) {
        // source
        let filtre_source = (event.filtres.filter(contenu => contenu.type === 'source').map(contenu => contenu.filtre))
        contenusFiltres = contenusFiltres.filter(contenu => filtre_source.includes(contenu.source))
        // manque note
      }
      if (event.filtres.filter(contenu => contenu.type === 'noteMin')) {
        let filtre_source = (event.filtres.filter(contenu => contenu.type === 'noteMin').map(contenu => contenu.filtre))
        for(let filtre in filtre_source){
          let filtre_min = parseFloat(filtre_source[filtre].substring(1))

          contenusFiltres = contenusFiltres.filter(contenu => this.calculerNote(contenu) > filtre_min)

        }
      }
      if (event.filtres.filter(contenu => contenu.type === 'noteMax')) {
        let filtre_source = (event.filtres.filter(contenu => contenu.type === 'noteMax').map(contenu => contenu.filtre))
        for(let filtre in filtre_source){
          let filtre_max = parseFloat(filtre_source[filtre].substring(1))

          contenusFiltres = contenusFiltres.filter(contenu => this.calculerNote(contenu) < filtre_max)

          //contenusFiltres = contenusFiltres.filter(contenu => contenu.versionEnCours.date <= filtre_max)

        }
      }
      if (event.filtres.filter(contenu => contenu.type === 'noteBorne')) {
        let filtre_source = (event.filtres.filter(contenu => contenu.type === 'noteBorne').map(contenu => contenu.filtre))
        for(let filtre in filtre_source) {

          let borne_min = parseInt(filtre_source[filtre].substring(0, 1))
          let borme_max = parseInt(filtre_source[filtre].substring(filtre_source[filtre].indexOf("-")+1).trim())
          contenusFiltres = contenusFiltres.filter(contenu => this.calculerNote(contenu) > borne_min)
          contenusFiltres = contenusFiltres.filter(contenu => this.calculerNote(contenu) < borme_max)

        }
      }


      // et on les réinjecte dans la "source"
      if (this.panierChoisi){
        this.contenus = contenusFiltres
      }
      else {
        this.contenusbanque = contenusFiltres
      }
    },
    basculeRechercheFiltre: function (event) {
      this.modeFiltre = event.choix
    },
    /**
     * @vuese
     * FOnction qui permet de trier une colonne (ordre croissant nombre clicks impairs, ordre décroissant clicks pairs)
     */
    trierColonne: function (event) {
      let titreColonne = event.target.innerHTML
      if (this.panierChoisi){
        switch (titreColonne) {
          case "Titre":
            this.titreTrie = !this.titreTrie
            if (this.titreTrie)
              this.contenus.sort((a,b) => (a.titre.toLowerCase() > b.titre.toLowerCase()) ? 1 : ((b.titre.toLowerCase() > a.titre.toLowerCase()) ? -1 : 0))
            else
              this.contenus.sort((b, a) => (a.titre.toLowerCase() > b.titre.toLowerCase()) ? 1 : ((b.titre.toLowerCase() > a.titre.toLowerCase()) ? -1 : 0))

            break
          case "Auteur":
            this.auteurTrie = !this.auteurTrie
            if (this.auteurTrie)
              this.contenus.sort((a,b) => (a.auteur > b.auteur) ? 1 : ((b.auteur > a.auteur) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.auteur > b.auteur) ? 1 : ((b.auteur > a.auteur) ? -1 : 0))
            break
          case "Version actuelle":
            this.versionTriee = !this.versionTriee
            if (this.versionTriee)
              this.contenus.sort((a,b) => (a.versionEnCours.numero > b.versionEnCours.numero) ? 1 :
                  ((b.versionEnCours.numero > a.versionEnCours.numero) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.versionEnCours.numero > b.versionEnCours.numero) ? 1 :
                  ((b.versionEnCours.numero > a.versionEnCours.numero) ? -1 : 0))
            break
          case "Date Version actuelle":
            this.dateTriee = !this.dateTriee
            if (this.dateTriee)
              this.contenus.sort((a,b) => (a.versionEnCours.date > b.versionEnCours.date) ? 1 : ((b.versionEnCours.date > a.versionEnCours.date) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.versionEnCours.date > b.versionEnCours.date) ? 1 : ((b.versionEnCours.date > a.versionEnCours.date) ? -1 : 0))
            break
          case "Nbre d'Utilisations":
            this.populariteTriee = !this.populariteTriee
            if (this.populariteTriee)
              this.contenus.sort((a,b) => (a.popularite > b.popularite) ? 1 : ((b.popularite > a.popularite) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.popularite > b.popularite) ? 1 : ((b.popularite > a.popularite) ? -1 : 0))
            break
          case "Note":
            this.noteTriee = !this.noteTriee
            if (this.noteTriee)
              this.contenus.sort((a,b) => (this.calculerNote(a) > this.calculerNote(b)) ? 1 : ((this.calculerNote(b) > this.calculerNote(a)) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (this.calculerNote(a) > this.calculerNote(b)) ? 1 : ((this.calculerNote(b) > this.calculerNote(a)) ? -1 : 0))
            break
          case "Note Perso":
            this.notePersoTriee = !this.notePersoTriee
            if (this.notePersoTriee)
              this.contenus.sort((a,b) => (a.note_perso > b.note_perso) ? 1 : ((b.note_perso > a.note_perso) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.note_perso > b.note_perso) ? 1 : ((b.note_perso > a.note_perso) ? -1 : 0))
            break
          case "Type":
            this.typeTrie = !this.typeTrie
            if (this.typeTrie)
              this.contenus.sort((a,b) => (a.type > b.type) ? 1 : ((b.type > a.type) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.type > b.type) ? 1 : ((b.type > a.type) ? -1 : 0))
            break
          case "Source":
            this.sourceTriee = !this.sourceTriee
            if (this.sourceTriee)
              this.contenus.sort((a,b) => (a.source > b.source) ? 1 : ((b.source > a.source) ? -1 : 0))
            else
              this.contenus.sort((b,a) => (a.source > b.source) ? 1 : ((b.source > a.source) ? -1 : 0))
            break

          default:
            alert('prout')
        }
        /*  console.log(this.contenus.sort((x, y) => x.titre - y.titre))
          console.log(this.contenus.sort())*/

      } else {
        console.log(titreColonne)
      }
    },
    /**
     * @vuese
     * Fonction de calcul de la note d'un contenu
     */
    calculerNote: function(item) {
      if (item.version !== undefined && item.version !== item.versionEnCours.numero){

        for (let it in item.historique){
          if (item.historique[it].numero === item.version){
            if (item.historique[it].note === 0){
              return 0
            }
            return (item.historique[it].note / item.historique[it].nbreNotes).toFixed(2)
          }
        }
        return -1
      } else {
        if (item.versionEnCours.note === 0){
          return 0
        }
        return (item.versionEnCours.note / item.versionEnCours.nbreNotes).toFixed(2)
      }
    },
    /**
     * @vuese
     * Si une note a été mise sur un contenu on recalcule la moyenne globale de ce contenu
     */
    majMoyenne: function(event){

      for (let elt in this.contenus){
        if(this.contenus[elt]._id === event.id){
          this.contenus[elt].versionEnCours.note = event.note
          this.contenus[elt].versionEnCours.nbreNotes = event.nbreNotes
          this.contenus[elt].note_perso = event.notePerso
          break
        }
      }
    },
    /**
     * @vuese
     * ajout ou suppression d'un tag à destination de Volet_Base
     */
    actionTagLibre: function (event) {
      if(event.creation === undefined){

        let contenu = this.contenus.filter(cont => cont._id === event.id_contenu )
        this.contenus = this.contenus.filter(cont => cont._id !== event.id_contenu )

        for (let tag in contenu[0].tags_libres){
          if(contenu[0].tags_libres[tag] === event.suppression){
            contenu[0].tags_libres.splice(tag)
          }
        }
        //contenu = contenu.tags_libres.filter(tag => tag !== event.suppression)
        this.contenus.push(contenu[0])
      }
      // on est dans le cadre de l'ajout d'un tag
      else {
        console.log(event)
        let contenu = this.contenus.filter(cont => cont._id === event.id_contenu )
        this.contenus = this.contenus.filter(cont => cont._id !== event.id_contenu )

        contenu[0].tags_libres.push(event.creation)

        this.contenus.push(contenu[0])
      }
    },
    /**
     * @vuese
     * Permet de passer le signal pour charger le composant "GererTagsLibres"
     */
    chargerTagsLibres: function () {
      this.$emit("chargerTagsLibres")
    }
  }
}

</script>

<style scoped>

#principal {
  display: flex;
}

.choixPanier{
  margin-left: 3.35vh;
  margin-top: 0px;
}

table {
  width: 97.5%;
}

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

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

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

#volet{
  position: relative;
  width: 15vw;
  height: 56vh;
  border: 1px solid;
  margin-top: 2px;
  margin-left: 1vw;
  margin-right: 1vw;
}

#boutonVolet {
  margin-top: 0.55vh;
  margin-left: 1vw;
}

#changerVariante {
  /*width: auto;*/
  text-align: center;
  line-height: 1em;
  margin-left: 1vw;
  margin-top: 0.55vh;
  margin-bottom: 2.2vh;

}

.circle {
  border: 1px solid black ;
  border-radius: 50%;
  display: flex; /* or inline-flex */
  align-items: center;
  justify-content: center;
  height: 8.4vh;
  width: 8.4vh;
  /*background: white url(../assets/img/plus.png);*/
  background: white url(../assets/img/plus.png);
  background-size: cover;
}

.circleDark{
  /*  border: 1px solid black ;
    border-radius: 50%;
    display: flex; !* or inline-flex *!
    align-items: center;
    justify-content: center;
    height: 75px;
    width: 75px;
    !*background: white url(../assets/img/plus.png);*!*/
  border: 1px solid white;
  background: black url(../assets/img/plus2.png);
  background-size: cover;
  /*background-size: cover;*/

}

#ajouterContenu {

  position:absolute;
  top:90%;
  right: 1%;
  z-index: 1;
}

.filtreTableau{
  margin: 0 5px 0 5px;
}

/*#labelPerso {
  margin-left: -5px  ;
}*/

th{
  text-align: center;
}

#choixDuMode::v-deep {
  border-color: white;
}


th image
{
  background-color: yellow;
}

.supprimerContenus{
  width: 3vh;
}

.supprimerContenus > img {
  height: 2.2vh;
  width: 2.2vh;
  padding-bottom: 4px;
  padding-top: -3px;
  background-color: orange;
}

.ajouterTiers {
  height: 2.2vh;
  width: 2.2vh;
  background: orange url(../assets/img/etoile.png);

}

.popover .popover-inner{
  max-width: 2000px !important;
  width: 1500px !important;
}

#ensemble {
  background-color: whitesmoke;
  height: 94.75vh;
}

#tableau {
  background-color: lightgrey;
  padding-top: 0.25%;
}
#divPrincipale {
  overflow-y: hidden;
  overflow-x: hidden;
}

/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/

.ensembledark {
  /*background-color: #878787  !important;*/
  background-color: #353839 !important;
  color: white;
}

.tableaudark td {
  /*background-color: #878787  !important;*/
  background-color: #353839 ;
  color: white;
  border-color: white;
}

.tableaudark thead {
  background-color: white !important;
  color: black;
}

.tableaudark th {
  border-color: white;
}

.imgPoubelle::before {
  content: "\01F5D1";

}

.imgEtoile::before {
  content: "\2B50";

}

</style>#FF8C00