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

        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Réponse correcte</td>
          <td style="width: 70%; text-align: left">
            <select  style="height: 25px" v-model="reponseCorrecte">
              <option :selected="reponseCorrecte === 'Vrai'">Vrai</option>
              <option :selected="reponseCorrecte === 'Faux'">Faux</option>
            </select>
          </td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback pour la réponse "Vrai"</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px" v-model="feedbackVrai"/>
          </td>
        </tr>
        <tr style="height: 225px">
          <td style="width: 30%; text-align: left">Feedback pour la réponse "Faux"</td>
          <td style="width: 70%">
            <quill-editor style="height: 100px; margin-top: -66px; color: white" v-model="feedbackFaux"/>
          </td>
        </tr>

      </table>

      <button style="width: auto; height: auto; margin-left: -100px; position: fixed; bottom: 18px"
              v-on:click="action('modifier')" v-show="isVersionCourante">modifier</button>
      <button style="width: auto; height: auto; margin-left: -15px; position: fixed; bottom: 18px" v-on:click="action('arriere')">retour en arriere</button>
    </div>
  </div>
</template>

<script>

//import Service from "@/service/Service";

export default {
  name: "Edit_Vrai_Faux",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    //la question Parsee
    questionParsee: {},
    // version courante affichée ?
    isVersionCourante: {}
  },
  data: function () {
    return {
      //questionParsee: '',
      nomQuestion: 'chameau',
      texteQuestion: 'chocolat',
      noteDefaut: 0,
      generalFeedback: '',
      reponseCorrecte: '',
      feedbackVrai: '',
      feedbackFaux: ''
    }
  },
  methods: {
    /**
     * @vuese
     * récupération de l'action utilisateur
     * @param actionChoisie
     */
    action: function (actionChoisie) {
       if (actionChoisie === 'arriere'){
         this.$emit("actionMoodle", {action: actionChoisie})
       } else {
         this.questionParsee.nom_question = this.nomQuestion
         this.questionParsee.intitule_question = this.texteQuestion
         this.questionParsee.note_defaut = this.noteDefaut
         this.questionParsee.feedback_general = this.generalFeedback
         this.questionParsee.bonne_reponse = this.reponseCorrecte
         this.questionParsee.liste_feedback[1] = this.feedbackVrai
         this.questionParsee.liste_feedback[3] = this.feedbackFaux
         this.$emit("actionMoodle", {action: actionChoisie, questionParsee: this.questionParsee})

       }
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'une question est récupérée, on extrait ses éléments
     */
    questionParsee: function () {
    //  let that = this
     // Service.parserTexte(JSON.stringify(this.idContenu)).then(function (response) {
      if (this.questionParsee.type_question === 'truefalse') {

        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.reponseCorrecte = this.questionParsee.bonne_reponse
        this.feedbackVrai = this.questionParsee.liste_feedback[1]
        this.feedbackFaux = this.questionParsee.liste_feedback[3]
      }
    //  })
     // alert("Shirobakol")
    }
  }
}
</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>
