<template>
  <div>

    <span>selectionner une note minimale</span><br>


    <select id="choixNoteMin" v-model="noteMin" @change="choixNoteMin">

      <option>>0.5</option>
      <option>>1.5</option>
      <option>>2.5</option>
      <option>>3.5</option>
      <option>>4.5</option>

    </select>

    <p>ou </p>
    <span>selectionner une note maximale</span><br>

    <select  id="choixNoteMax"  v-model="noteMax" @change="choixNoteMax">

      <option>&lt;0.5</option>
      <option>&lt;1.5</option>
      <option>&lt;2.5</option>
      <option>&lt;3.5</option>
      <option>&lt;4.5</option>

    </select>

    <p>ou </p>
    <span>selectionner une plage de notes</span><br>
    <label>Borne min </label>
    <input v-model="borneInf" type="text"/>
    <label> Borne max </label>
    <input v-model="borneSup" type="text"/><br>
    <button v-on:click="validerPlage">✓</button>

  </div>
</template>

<script>
export default {
  name: "Filtre_Note_Popularite",
  data: function () {
    return {
      noteMin: 0,
      noteMax: 5,
      borneInf: 0,
      borneSup: 5
    }
  },
  methods:{
    // récupération du choix du filtre "note min"
    choixNoteMin: function () {
      let vraieNoteMin = parseFloat(this.noteMin.substring(1))
      let vraieNoteMax = 5
      if (this.noteMax !== 5)
        vraieNoteMax = parseFloat(this.noteMax.substring(1))
      if (vraieNoteMin >= vraieNoteMax){
        alert ("note min : " + vraieNoteMin + " note max : " + vraieNoteMax)
        alert ('error')
      } else {
        this.$emit("creer_filtre", {filtre: this.noteMin, type: "noteMin"})
      }
      this.noteMin = ""
    },
    // récupération du choix du filtre "note max"
    choixNoteMax: function () {
      let vraieNoteMin = 0
      if (this.noteMin !== 0)
        vraieNoteMin = parseFloat(this.noteMin.substring(1))
      let vraieNoteMax = parseFloat(this.noteMax.substring(1))
      if (vraieNoteMin >= vraieNoteMax){
        alert ("note min : " + vraieNoteMin + " note max : " + vraieNoteMax)
        alert ('error')
      }  else {
        this.$emit("creer_filtre", {filtre: this.noteMax, type: "noteMax"})
      }
      this.noteMax = ""

    },
    // récupération du choix du filtre "plage de note"
    validerPlage: function () {
      this.$emit("creer_filtre", {filtre: this.borneInf + " - " + this.borneSup, type: "noteBorne"})
      this.borneInf = 0
      this.borneSup = 5
    }
  },
  props: {
    // Signal de deconnexion
    deconnexion: {}
  },
  watch: {
    /**
     * @vuese
     * A la deconnexion, on vide l'affichage des notes
     */
    deconnexion: function () {
      this.noteMin = ""
      this.noteMax = ""
    }
  }
}
</script>

<style scoped>

input {
  width: 20px;
  margin-left: 2px;
}

button {
  padding: 0;
  border: none;
  background: none;
}

</style>