<template>
  <v-row v-if="formState.ready" dense>
    <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
    <v-col>
      <v-textarea
        v-model="logText"
        dense
        full-width
        readonly
        auto-grow
        data-cy="logText"
      ></v-textarea>
    </v-col>
  </v-row>
</template>
<script>
export default {
  data() {
    return {
      logText: "",
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  },
  async created() {
    const vm = this;
    window.$gz.eventBus.$emit("menu-change", {
      isMain: false,
      icon: "$ayiInfoCircle",
      title: "Log",
      helpUrl: "ay-log",

      menuItems: []
    });
    let outText = "";
    vm.$store.state.logArray.forEach(function appendLogItem(value) {
      outText += value + "\n";
    });
    this.logText = outText;
    try {
      await window.$gz.translation.cacheTranslations(["Log"]);
      vm.formState.ready = true;
    } catch (err) {
      vm.formState.ready = true;
      window.$gz.errorHandler.handleFormError(err, vm);
    }
  }
};
</script>
