<template>
  <div>
    <p>{{intituleQuestion}} (Note sur {{noteDefaut}})</p>

    <div v-for="i in reponses.length" :key="i">
      <input type="radio" name="choixMultiple">
      <label> {{prefixes[i-1]}}. {{ transformerTexte(reponses[i-1]) }} ({{notes[i-1]}} %)</label><br>    </div>
  </div>
</template>

<script>
export default {
  name: "Question_Choix_Multiple",
  props: {
    questionParsee: {}
  },
  data: function () {
    return {
      intituleQuestion: '',
      noteDefaut: '',
      reponses: [],
      notes: [],
      prefixes: ['', '', '', '', '']
    }
  },
  watch: {
    questionParsee: function () {
      if (this.questionParsee.type_question === 'multichoice') {

        this.noteDefaut = this.questionParsee.note_defaut
        let div = document.createElement("div");
        div.innerHTML = this.questionParsee.intitule_question;
        this.intituleQuestion = div.innerText
        div.remove()

        switch (this.questionParsee.numerotation) {
          case "abc":
            this.prefixes = ['a', 'b', 'c', 'd', 'e']
            break
          case "ABCD":
            this.prefixes = ['A', 'B', 'C', 'D', 'E']
            break
          case "123":
            this.prefixes = ['1', '2', '3', '4', '5']
            break
          case "none":
            break
        }
        this.reponses = this.questionParsee.liste_reponse
        this.notes = this.questionParsee.liste_note
      }
    }
  },
  methods: {
    transformerTexte: function (texte) {
      let div = document.createElement("div");
      div.innerHTML = texte;
      let texteRaffine = div.innerText
      div.remove()
      return  texteRaffine
    }
  }
}
</script>

<style scoped>
label {
  margin-left: 4px;
}
</style>
