<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>

        <!-- Partie spécifique à réponse courte -->

        <tr>
          <td style="width: 30%; text-align: left">Sensible à la casse</td>
          <td style="width: 70%; text-align: left">
          <select v-model="choixCasse">
            <option>Non, la casse n'est pas importante</option>
            <option>Oui, la casse est importante</option>
          </select>
          </td>

        </tr>

        <tr>
          <td style="width: 30%; text-align: left">Réponse 1</td>
          <td style="width: 70%; text-align: left">

            <input type="text" style="height: 25px;" v-model="texteReponse[0]"/> <label id="note">Note</label>
            <select style="width: 75px;" v-model="noteReponse[0]">
            <option v-for="i in options.length" :key="i">{{ options[i-1] }}</option>
          </select>
          </td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px" v-model="feedbackReponse[0]"/>
          </td>
        </tr>
        <tr>
          <td style="width: 30%; text-align: left">Réponse 2</td>
          <td style="width: 70%; text-align: left">

            <input type="text" style="height: 25px;" v-model="texteReponse[1]"/> <label id="note">Note</label>
            <select style="width: 75px;" v-model="noteReponse[1]">
              <option v-for="i in options.length" :key="i">{{ options[i-1] }}</option>
            </select>
          </td>
        </tr>

        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px" v-model="feedbackReponse[1]"/>
          </td>
        </tr>
        <tr>
          <td style="width: 30%; text-align: left">Réponse 3</td>
          <td style="width: 70%; text-align: left">

            <input type="text" style="height: 25px;" v-model="texteReponse[2]"/> <label id="note">Note</label>
            <select style="width: 75px;" v-model="noteReponse[2]">
              <option v-for="i in options.length" :key="i">{{ options[i-1] }}</option>
            </select>
          </td>
        </tr>

        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px" v-model="feedbackReponse[2]"/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Edit_Reponse_Courte",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    //la question Parsee
    questionParsee: {}
  },
  data: function () {
    return {
      //questionParsee: '',
      nomQuestion: 'chameau',
      texteQuestion: 'chocolat',
      noteDefaut: 0,
      generalFeedback: '',
      feedbackReponse: [],
      texteReponse: [],
      noteReponse: [],
      choixCasse: '',
      optionsCasse: ["Non, la casse n'est pas importante", "Oui, la casse est importante"],
      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%"]
    }
  },
  watch: {
    questionParsee: function () {
      if (this.questionParsee.type_question === 'shortanswer') {
        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.texteReponse = this.questionParsee.liste_reponse.filter(reponse => reponse)
        this.noteReponse = this.questionParsee.liste_note.map(note => note + "%")
        this.feedbackReponse = this.questionParsee.liste_feedback
        this.choixCasse = this.optionsCasse[this.questionParsee.majuscule]
      }
    }
  }
}
</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;
}

#note {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 7.5px;
}
</style>