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

<script>
/*  Xeslint-disable */
export default {
  created() {
    this.$gzevent.$emit("menu-change", {
      isMain: false,
      icon: "fa-info-circle",
      title: this.$gzlocale.get("Log"),
      menuItems: [
        // {
        //   title: this.$gzlocale.get("Log"),
        //   icon: "glasses",
        //   surface: true,
        //   key: "app:nav:log",
        //   data: "log"
        // }
      ]
    });

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