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

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

          <tr :key="j + 'reponse'">
            <td style="width: 30%; text-align: left">Formule de la réponse {{j}}</td>
            <td style="width: 70%; text-align: left">
              <input type="text" style="height: 25px; width: 250px; margin-right: 5px"  v-model="reponses[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 + 'tolerance'">

            <td style="width: 30%; text-align: left">Tolérance +/-</td>
            <td style="width: 70%; text-align: left">
              <input type="text" style="height: 25px; width: 75px; margin-right: 5px"  v-model="tolerance[j - 1]"/>
              Type
              <select v-model="typeTolerance">
                <option v-for="i in optionType.length" :key="i">{{optionType[i - 1]}}</option>
              </select>

            </td>


          </tr>

          <tr :key="j + 'precision'">

            <td style="width: 30%; text-align: left">Affichage de la réponse</td>
            <td style="width: 70%; text-align: left">
              <select v-model="tailleReponse">
                <option v-for="i in 10" :key="i">{{i - 1}}</option>
              </select>
              Format
              <select v-model="formatReponse" >
                <option v-for="i in optionFormat.length" :key="i">{{optionFormat[i - 1]}}</option>
              </select>
            </td>


          </tr>

          <tr :key="j + 'feedback'" 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="feedback[j - 1]"/>
            </td>

          </tr>
        </template>

        <span class="nvelleReponse" @click="ajouterReponse"> Ajouter une réponse</span>


        <!-- Traitement de l'unité -->
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Traitement de l'unité</td>
          <td style="width: 70%; text-align: left">
            <select v-model="traitementUnite" @change="changerOptions">
              <option v-for="i in optionsTraitementUnite.length" :key="i">{{optionsTraitementUnite[i - 1]}}</option>
            </select>
          </td>
        </tr>
        <!--        <tr style="height: 69px">
                  <td style="width: 30%; text-align: left">Pénalité d'unité</td>
                  <td style="width: 70%">


                  </td>
                </tr>-->
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Les unités sont saisies en utilisant</td>
          <td style="width: 70%; text-align: left">
            <select v-model="saisieUnite" :disabled="noUnit || optionalUnit">
              <option v-for="i in optionsZoneSaisieUnite.length" :key="i">{{optionsZoneSaisieUnite[i - 1]}}</option>
            </select>

          </td>
        </tr>
        <tr style="height: 69px">
          <td style="width: 30%; text-align: left">Position de l'unité</td>
          <td style="width: 70%; text-align: left">
            <select v-model="positionUnite" :disabled="noUnit">
              <option v-for="i in optionsPositionUnite.length" :key="i">{{optionsPositionUnite[i - 1]}}</option>
            </select>

          </td>
        </tr>

        <!-- Unités -->
        <template v-for="i in unites.length">
          <tr style="height: 69px" :key="i + 'unite'">
            <td style="width: 30%; text-align: left">Unité</td>
            <td style="width: 70%; text-align: left">
              <input type="text" style="width: 7vw; margin-right: 1vw" v-model="unites[i - 1]">
              Coefficient
              <input type="text" style="width: 7vw; margin-left: 1vw" v-model="unitesCoeffs[i - 1]" disabled>

            </td>
          </tr>
        </template>
        <span class="nvelleReponse" @click="ajouterUnite"> Ajouter une unité</span>

      </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>
export default {
  name: "Edit_Calculee_Simple",
  props: {
    // mode sombre activé ou non
    darktheme: {},
    //la question Parsee
    questionParsee: {},
    // version courante affichée ?
    isVersionCourante: {}
  },
  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%"],
      optionType: ["Relatif", "Nominal"],
      optionFormat: ["decimal", "chiffres significatifs"],
      optionsTraitementUnite: ["Les unités ne sont pas utilisees. Seule la valeur numérique est utilisée",
        "Les unités sont optionelles. Si une unité est saisie, elle est utilisée pour la conversion de la réponse donnée vers l'unité 1 avant l'évaluation",
        "L'unité doit être indiquée, et sera comprise dans la note" ],
      optionsPenaliteUnite: ["comme une fraction entre 0 et 1 de la note de la question", "comme une fraction entre 0 et 1 de la note de la réponse"],
      optionsZoneSaisieUnite: ["la zone de saisie du texte", "une sélection de choix multiple", "un menu déroulant"],
      optionsPositionUnite: ['A droite, comme 2.5 cm ou 12.5 km', 'A gauche, comme € 2.5 ou $ 1.25'],
      noUnit: false,
      optionalUnit: false,
      reponses: [],
      notes: [],
      feedback: [],
      tolerance: [],
      typeTolerance: '',
      formatReponse: '',
      tailleReponse: '',
      unites: [],
      unitesCoeffs: [],
      positionUnite: '',
      saisieUnite: '',
      traitementUnite: ''
    }
  },
  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.liste_reponse = this.reponses
        this.questionParsee.liste_feedback = this.feedback
        this.questionParsee.liste_note = this.notes.map(note => note.substring(0, note.length-1))
        this.questionParsee.liste_note = this.questionParsee.liste_note.map(note => {if (note === 'Aucun') return '0'; else return note;})
        this.questionParsee.liste_tolerance = this.tolerance
        this.questionParsee.liste_unite_nom = this.unites
        this.questionParsee.liste_unite_coef = this.unitesCoeffs

        this.questionParsee.position_unite = this.positionUnite === this.optionsPositionUnite[0] ? '0' : '1'

        switch (this.positionUnite) {
          case (this.optionsTraitementUnite[0]):
            this.questionParsee.saisie_unite = 3
            this.questionParsee.traitement_unite = 0
            break
          case (this.optionsTraitementUnite[1]):
            this.questionParsee.traitement_unite = 0
            break
          case (this.optionsTraitementUnite[2]):
            this.questionParsee.traitement_unite = 1
            break
        }

        if (this.questionParsee.saisie_unite !== 3){
          switch (this.traitementUnite) {
            case (this.optionsTraitementUnite[0]):
              this.questionParsee.traitement_unite = 0
              break
            case (this.optionsTraitementUnite[1]):
              this.questionParsee.traitement_unite = 1
              break
            case (this.optionsTraitementUnite[2]):
              this.questionParsee.traitement_unite = 2
              break
          }
        }

        this.questionParsee.liste_tolerance_type = this.typeTolerance === this.optionType[0] ? '1' : '2'
        this.questionParsee.liste_reponse_taille = this.tailleReponse.toString()
        this.questionParsee.liste_reponse_format = this.formatReponse = this.optionFormat[0] ? '1' : '2'

        this.$emit("actionMoodle", {action: actionChoisie, questionParsee: this.questionParsee})

      }
    },
    /**
     * @vuese
     * Modification des acces aux options de traitement de l'unite
     */
    changerOptions: function () {
      if (this.traitementUnite === this.optionsTraitementUnite[0]){
        this.noUnit = true
        this.optionalUnit = false
      } else if (this.traitementUnite === this.optionsTraitementUnite[1]){
        this.noUnit = false
        this.optionalUnit = true
      } else {
        this.noUnit = false
        this.optionalUnit = false
      }
    },
    /**
     * @vuese
     * Ajouter une réponse au contenu
     */
    ajouterReponse: function () {
      this.reponses.push("")
      this.notes.push(this.options[0])
      this.feedback.push(" ")
      this.tolerance.push("0")
    },
    /**
     * @vuese
     * Ajouter une unité au contenu
     */
    ajouterUnite: function () {
      this.unites.push("")
      this.unitesCoeffs.push('1')
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'une question est récupérée, on extrait ses éléments
     */
    questionParsee: function () {
      if (this.questionParsee.type_question === 'calculatedsimple') {

        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
        this.typeTolerance = this.optionType[parseInt(this.questionParsee.liste_tolerance_type) - 1]
        this.tailleReponse = parseInt(this.questionParsee.liste_reponse_taille)
        this.formatReponse = this.optionFormat[parseInt(this.questionParsee.liste_reponse_format) - 1]

        this.unites = this.questionParsee.liste_unite_nom.filter(unite => unite)
        this.unitesCoeffs = this.questionParsee.liste_unite_coef.filter(coef => coef)
        this.positionUnite = this.optionsPositionUnite[this.questionParsee.position_unite]
        this.saisieUnite = this.optionsZoneSaisieUnite[this.questionParsee.saisie_unite]

        if (this.questionParsee.saisie_unite === "3") {
          this.noUnit = true
          this.traitementUnite = this.optionsTraitementUnite[0]
          this.saisieUnite = this.optionsZoneSaisieUnite[0]
        }
        else {
          if (this.questionParsee.traitement_unite === '0'){
            this.optionalUnit = true
          }
          this.traitementUnite = this.optionsTraitementUnite[parseInt(this.questionParsee.traitement_unite) + 1]
        }
      }
    }
  }
}
</script>

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

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

.editDark {
  width: 70vw;
  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;
}

.nvelleReponse::before {
  content: "\002B";
}

.nvelleReponse {
  text-decoration: underline;
}
</style>