<template>
  <div id="full">
    <div id="body" :class="darktheme ? 'editDark' : 'edit'">
      <table style="width: 100%">

        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Nom de la question</td>
          <td style="width: 70%; text-align: left">
            <input type="text" style="height: 25px" v-model="nomQuestion"/></td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Texte de la question</td>
          <td style="width: 70%">
            <quill-editor toolbar="minimal" style="height: 100px; margin-top: -66px" v-model="texteQuestion"/>
          </td>
        </tr>
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Note par défaut</td>
          <td style="width: 70%; text-align: left">
            <input type="text" style="height: 25px"  v-model="noteDefaut"/></td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback général</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px"  v-model="generalFeedback"/>
          </td>
        </tr>

        <!-- Contenu spécifique -->

        <template v-for="j in reponses.length">

          <tr :key="j + 'reponse'">
            <td style="width: 30%; text-align: left">Reponse {{j}}</td>
            <td style="width: 70%; text-align: left">
              <input type="text" style="height: 25px; width: 75px; margin-right: 5px"  v-model="reponses[j - 1]"/>
               Erreur
              <input type="text" style="height: 25px; width: 75px; margin-left: 5px; margin-right: 5px"  v-model="tolerance[j - 1]"/>
              Note
              <select style="margin-left: 5px" v-model="notes[j - 1]">
                <option v-for="i in options.length" :key="i">{{ options[i-1] }}</option>
              </select>

            </td>

          </tr>
          <tr :key="j + 'feedback'">
            <td style="width: 30%; text-align: left">Feedback</td>
            <td style="width: 70%">
              <quill-editor style="height: 100px; margin-top: 26px"  v-model="feedback[j - 1]"/>
            </td>

          </tr>

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

<script>
export default {
  name: "Edit_Numerique",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    //la question Parsee
    questionParsee: {}
  },
  data: function () {
    return {
      //questionParsee: '',
      nomQuestion: '',
      texteQuestion: '',
      noteDefaut: 0,
      generalFeedback: '',
      options: ["Aucun", "100%", "90%", "83.33%", "80%", "75%", "70%", "66.66%", "60%", "50%", "40%", "33.33%", "30%", "25%", "20%", "16.6667%", "14.28571%",
        "12.5%", "11.11%", "10%", "5%"],
      reponses: [],
      notes: [],
      feedback: [],
      tolerance: []
    }
  },
  watch: {
    questionParsee: function () {
      if (this.questionParsee.type_question === 'numerical') {

        this.nomQuestion = this.questionParsee.nom_question
        this.texteQuestion = this.questionParsee.intitule_question
        this.noteDefaut = this.questionParsee.note_defaut
        this.generalFeedback = this.questionParsee.feedback_general
        this.reponses = this.questionParsee.liste_reponse
        this.notes = this.questionParsee.liste_note.map(note => note + "%")
        this.notes = this.notes.map(note => {if (note === '0%') return 'Aucun'; else return note;})
        this.feedback = this.questionParsee.liste_feedback
        this.tolerance = this.questionParsee.liste_tolerance
      }
    }
  }
}
</script>

<style scoped>
label {
  margin-right: 5px;
  margin-top: 10px;
}

.edit {
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  height: 79.35vh;
  background: whitesmoke;
}

.editDark {
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  height: 79.35vh;
  background: darkslategray;
  color: whitesmoke;
}


#body {
  overflow-y: auto;
}

#full {
  height: 79.35vh;
  width: 100%;
  background: white;
  margin-top: -1.75vh;
}

.column {
  flex: 50%;
}
td > * {
  vertical-align: middle;
}
</style>