<template>
  <v-row row v-if="this.formState.ready">
    <v-col cols="12" mt-1 mb-2 v-if="formState.errorBoxMessage">
      <v-alert
        ref="errorbox"
        v-show="formState.errorBoxMessage"
        color="error"
        icon="fa-exclamation-circle "
        transition="scale-transition"
        class="multi-line"
        outlined
        >{{ formState.errorBoxMessage }}</v-alert
      >
    </v-col>
    <v-col>
      <v-textarea v-model="logText" full-width readonly auto-grow></v-textarea>
    </v-col>
  </v-row>
</template>

<script>
/*  Xeslint-disable */
export default {
  created() {
    window.$gz.eventBus.$emit("menu-change", {
      isMain: false,
      icon: "fa-info-circle",
      title: window.$gz.locale.get("Log"),
      helpUrl: "form-ay-log",

      menuItems: [
        // {
        //   title: window.$gz.locale.get("Log"),
        //   icon: "glasses",
        //   surface: true,
        //   key: "app:nav:log",
        //   data: "log"
        // }
      ]
    });

    var outText = "";
    window.$gz._.forEach(this.$store.state.logArray, function appendLogItem(
      value
    ) {
      outText += value + "\n";
    });
    this.logText = outText;
    window.$gz.locale
      .fetch(["Log"])
      .then(() => (this.formState.ready = true))
      .catch(err => {
        this.formState.ready = true;
        window.$gz.errorHandler.handleFormError(err);
      });
  },
  data() {
    return {
      logText: "",
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  }
};
</script>
