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

      <Detail_Filtre  v-bind:nouveau_filtre="nouveau_filtre"  @filtresChoisis="filtresChoisis"/>
    </div>
    <div id = "detailContenu">
      <Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
                      v-bind:auteur="auteur"  @creer_filtre="creer_filtre"/>
    </div>
    <Choix_Mode v-show="!variante"  v-bind:darktheme="darktheme"  @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
  </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: {}

},
  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})

    }
  },
  data: function () {
    return {
      nouveau_filtre: "",
      panierChoisi: true
    }
  }
}
</script>

<style scoped>
#contenu {
  width: 100%;
  height: 98.25%;
  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: 25%;
  margin-bottom: 25%;

}


</style>