<template>

     <div id="error-dialog" class="modal fade" tabindex="-1" aria-labelledby="error-dialog-header" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-centered">
               <div v-if="selectedErrorValue != null" class="modal-content border border-dark bg-light rounded-4">

                    <div class="d-flex justify-content-end">
                         <button type="button"
                                 class="btn"
                                 data-bs-dismiss="modal"
                                 aria-label="Close">
                              <i class="fas fa-times"></i>
                         </button>
                    </div>

                    <div v-if="error != null" class="px-5 pb-5 text-center">
                         <span class="fs-2 text-uppercase text-flama-book">{{GetHeaderPefix()}} {{error.type.id}} - {{selectedErrorValue.subject}}</span>
                         <div class="text-flama my-4 mx-auto" v-html="selectedErrorValue.description">
                              <!-- MESSAGE -->
                         </div>

                         <div class="d-flex align-items-center flex-column">
                              <button type="button"
                                      class="btn btn-primary text-flama-book"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                      style="width: 12rem;">
                                   OK
                              </button>
                         </div>
                    </div>
                    <div v-else>
                         <span class="fs-2 text-uppercase text-flama-book">CRITICAL DILAGO ERROR</span>
                         <div class="text-flama my-4 mx-auto" v-html="selectedErrorValue.description">
                              <p> THE ERROR MESSAGE COUNT NOT BE DISPLAYED, PLEASE CONTACT CUSTOMER SERVICE !</p>
                              <p> DIE FEHLERMELDUNG KONNTE NICHT DARGESTELLT WERDEN, BITTE WENDEN SIE SICH AN DEN KUNDENDIENST !</p>
                         </div>
                         <div class="d-flex align-items-center flex-column">
                              <button type="button"
                                      class="btn btn-primary text-flama-book"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                      style="width: 12rem;">
                                   OK
                              </button>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</template>

<script>
     module.exports = {
          props: ["error"],
          mounted: function () {
               console.log(this.loggingPrefix + "component mounted");

               if (this.error != null) {

                    this.selectedErrorValue = this.error.type.values.filter(e => e.language == this.Translation_GetLanguage())[0];

                    if (this.selectedErrorValue == null || this.selectedErrorValue == undefined)
                         this.selectedErrorValue = this.error.type.default;

               }
          },
          data: function () {
               return {
                    loggingPrefix: "[Vue][Component][ErrorDialog] ",
                    selectedErrorValue: null
               }
          },
          watch: {
               error(value) {

                    console.log(this.loggingPrefix + "error data changed");

                    //--- set error value ---
                    this.selectedErrorValue = value.type.values.filter(e => e.language == this.Translation_GetLanguage())[0];

                    if (this.selectedErrorValue == null || this.selectedErrorValue == undefined) {
                         this.selectedErrorValue = this.error.type.default;
                    }
               }
          },
          methods: {

               GetHeaderPefix: function () {

                    switch (this.error.severity) {
                         case 2: return "Info";
                         case 3: return this.$translate("Warning");
                         case 6: return "";
                         default: return this.$translate("Error");
                    }

               },

               GetHeaderBackground: function () {

                    switch (this.error.severity) {
                         case 2: return "bg-success text-light";
                         case 3: return "bg-warning text-dark";
                         case 6: return "alert-secondary text-dark";
                         default: return "bg-danger text-light";
                    }
               },

               CloseErrorDialog: function () {

                    console.log(this.loggingPrefix + "close error dialog");

                    $('#error-dialog').modal('hide');
               }
          }
     };
</script>
