<template>
<div>
  <form>
    <select class="filtre" name="filtre"  v-bind:style="darktheme ? { 'background-color': 'black', color: 'white'} : ''"
            v-model="selected" v-on:change="a()" size="1">
      <option disabled value="">Choix du filtre</option>
      <option>tags officiels</option>
      <option v-show="panierChoisi">tags libres</option>
      <option>auteur</option>
      <option>type / source</option>
      <option>date</option>
      <option>note</option>
      <option>recherche</option>
    </select>
  </form>
</div>
</template>

<script>
export default {
  name: "Barre_Filtre",
  props: {
    // Variable indicative du fait de savoir si le mode panier est activé ou pas (change l'affichage des filtres disponibles)
    panierChoisi : {
      type: Boolean
    },
    // Signal d'activation ou non du theme sombre
    darktheme: {},
    // signal de détection pour la remize à zéro de la barre de filtre
    filtre_choisi: {}
  },
  methods: {
    /**
     * @vuese
     * Renvoie le filtre choisi au composant Volet_Menu
     */
    a: function (){
      // dès qu'un filtre est choisi
      // @arg Le nom du filtre choisi
      this.$emit("filtre_choisi", {filtre: this.selected})    }
  },
  data: function () {
    return {
      selected: "",
    }
  },
  watch: {
    /**
     * Permet de remettre la sélection à zéro (quand filtre_choisi est vide)
     */
    filtre_choisi: function () {
      if (this.filtre_choisi === "")
      this.selected = ""
    }
  }
}
</script>

<style scoped>
.filtre {
  margin-top: 2px;
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}

</style>