<template>
  <div>

    <div id="selectionnerAuteur">
      <span>selectionner un auteur : </span><br><br>
      <select id="auteur" name="auteur" size="1" v-model="auteurSelectionne" v-on:change="choixAuteur()">
        <option v-for="item in filteredList()" v-bind:key="item.id">{{ item.nom }}</option>
      </select>
    </div>

  </div>
</template>

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

export default {
  name: "Filtre_Auteur",
  methods: {
    /**
     * @vuese
     * recuperation de l'auteur choisi
     */
    choixAuteur: function () {
      if (this.auteur !== undefined)
      this.$emit("creer_filtre", {filtre: this.auteurSelectionne, type: 'auteur'})
    },
    /**
     * @vuese
     * Filtrer la liste des auteurs pour virer (ou non) celui de l'auteur actuellement connecté
     */
    filteredList: function () {
      this.auteurSelectionne = ''
      if (!this.panierChoisi){
        return this.listeAuteurs.filter(auteur => auteur.nom !== this.auteur)
      }
      else { return this.listeAuteurs}
    }
  },
  props: {
    // l'auteur en cours
    auteur: {},
    // le mode panier est-il activé ou non?
    panierChoisi: {},
  },
  watch:{
    /**
     * @vuese
     * Dès que l'auteur est connu, on charge toues les auteurs disponibles en bd
     */
    auteur: function () {
      let that  = this
      Service.recupererAuteursExistants().then(function (reponse) {
        that.listeAuteurs = reponse.data
      })
    }
  },
  data: function () {
    return {
      listeAuteurs: [],
      auteurSelectionne: '',
    }
  }

}
</script>

<style scoped>

</style>