<template>
  <div>

    <div id="selectionnerType">
      <span>selectionner un type</span><br><br>
      <select id="type" name="type" size="1" v-model="type" v-on:change="choixType()">
        <option>quiz</option>
        <option>text/plain</option>
        <option>application/pdf</option>
      </select>
    </div>

    <div id="selectionnerSource">
      <br> <span>selectionner une source</span><br><br>
      <select id="source" name="source" size="1" v-model="source" v-on:change="choixSource()">
        <option>markdown</option>
        <option>moodle</option>
        <option>autre</option>
      </select>

    </div>
  </div>
</template>

<script>
export default {
  name: "Filtre_Type_Source",
  data: function () {
    return {
      type: "",
      source: "",
    }
  },
  methods: {
    /**
     * @vuese
     * Fonction de sélection d'un type
     */
    choixType: function () {
      this.$emit("creer_filtre", {filtre: this.type, type: 'type'})
      this.type = ""

    },
    /**
     * @vuese
     * Fonction de sélection d'une source
     */
    choixSource: function () {
      this.$emit("creer_filtre", {filtre: this.source, type: 'source'})
      this.source = ""

    }

  },
  props: {
    // Signal de deconnexion
    deconnexion: {}
  },
  watch: {
    /**
     * @vuese
     * Quand l'utilisateur se deconnecte on "vide" les deux select
     */
    deconnexion: function () {
      this.type = ""
      this.source = ""
    }
  }

}
</script>

<style scoped>

</style>