<template>
  <div id="contenu">
    <div id = "detailFiltre">

      <Detail_Filtre v-bind:darktheme="darktheme"   v-bind:nouveau_filtre="nouveau_filtre"  @filtresChoisis="filtresChoisis" v-bind:deconnexion="deconnexion"/>
    </div>
    <div id = "detailContenu">
      <Detail_Contenu v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
                      v-bind:auteur="auteur" v-bind:darktheme="darktheme"  @creer_filtre="creer_filtre"
                      v-bind:deconnexion="deconnexion" v-bind:checkes="checkes" @lignesDropped="lignesDropped"
                      @actionTagLibre="actionTagLibre"/>
    </div>
    <div id="detailChoixMode">
      <Choix_Mode v-show="!variante"  v-bind:darktheme="darktheme"  @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
    </div>
  </div>

</template>

<script>
import Choix_Mode from "../components/Choix_Mode";
import Detail_Filtre from "../components/Detail_Filtre";
import Detail_Contenu from "../components/Detail_Contenu";

export default {
  name: "Volet_Contenu",
  components: {
    Choix_Mode,
    Detail_Filtre,
    Detail_Contenu,
  },
  props: {
    // variable de stockage du filtre choisi, à destination de Detail_Contenu
    filtre_choisi: {},
    // Variable de stocka de l'affichage ou non de la variante du menu Banque / Panier
    variante: {},
    // Stockage de l'auteur connecté
    auteur:{},
    // Signal pour remise à zéro de l'affichage du menu Panier / banque
    razModeVariante: {},
  /*  // mode filtre enclenché ou non
    modeFiltre: {},*/
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // Signal de deconnexion
    deconnexion: {},
    // lignes cochées
    checkes: {}

  },
  methods: {
    /**
     * @vuese
     * Transmission du mode choisi (banque/panier) à destination de Volet Base
     */
    ajusterMode: function (event) {
      this.panierChoisi = event.mode
      // on 'passe' le mode choisi à Bolet_Base
      // @arg le mode choisi
      this.$emit("mode_choisi", {mode: event.mode})
    },
    /**
     * @vuese
     * On récupère un filtre créé que l'on met dans une variable, a destination de Detail_Filtre
     */
    creer_filtre: function (event) {


      this.nouveau_filtre = event

    },
    /**
     * @vuese
     * Transmission des filtres choisis (banque/panier) à destination de Volet Base
     */
    filtresChoisis: function (event) {
      // on 'passe' les filtres choisis à Bolet_Base
      // @arg les filtres choisis
      this.$emit("filtresChoisis", {filtres: event.filtres})

    },
    /**
     * @vuese
     * Permet de savoir si les lignes sélectionnées ont été déposées sur un tag
     */
    lignesDropped: function () {
      this.$emit("lignesDropped")
    },
    /**
     * @vuese
     * Permet de remonter l'info pour un tag libre associé via drag&drop
     */
    actionTagLibre: function (event) {
      this.$emit("actionTagLibre", {creation: event.creation, id_contenu: event.id_contenu})
    }
  },
  data: function () {
    return {
      nouveau_filtre: "",
      panierChoisi: true
    }
  }
}
</script>

<style scoped>
#contenu {
  width: 100%;
  height: 98%;
  margin-top: -5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#detailFiltre {
  flex-basis: 10%;
  border-bottom: 1px solid black;
  margin-top: 11px;
  padding: 2px;
}


#detailContenu {
  flex-basis: 80%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-top: 15%;
  margin-bottom: 15%;
  overflow: auto;
}

#detailChoixMode {
  flex-basis: 10%;


}


</style>