<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-card>
        <v-subheader>{{ this.$gzlocale.get("ClientApp") }}</v-subheader>
        <div class="ml-4 body-2">{{this.$gzlocale.get("Version")}}: {{clientInfo.version}}</div>

        {{this.$gzlocale.get("User")}}: {{clientInfo.userName}}
        <v-divider></v-divider>
        <v-subheader>{{ this.$gzlocale.get("Server") }}</v-subheader>
        {{this.$gzlocale.get("ServerAddress")}}: {{this.$store.state.apiUrl}}
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
/* eslint-disable */
import aboutInfo from "../api/aboutinfo";

export default {
  beforeCreate() {
    var vm = this;
    this.$gzlocale
      .fetch([
        "HelpAboutAyaNova",
        "ClientApp",
        "Server",
        "Version",
        "SchemaVersion",
        "ServerTime",
        "ServerAddress",
        "TimeZone",
        "HelpLicense",
        "RegisteredUser",
        "DatabaseID",
        "LicenseSerial",
        "LicenseExpiration",
        "SupportedUntil",
        "LicensedOptions",
        "Log",
        "User",
        "Browser"
      ])
      .then(() => (vm.formState.ready = true))
      .catch(err => {
        vm.formState.ready = true;
        vm.$gzHandleFormError(err);
      });
  },
  created() {
    this.$gzevent.$emit("menu-change", {
      isMain: false,
      icon: "fa-info-circle",
      title: this.$gzlocale.get("HelpAboutAyaNova"),
      menuItems: [
        {
          title: this.$gzlocale.get("Log"),
          icon: "glasses",
          surface: true,
          key: "app:nav:log",
          data: "log"
        }
      ]
    });
    // this.$gzevent.$on("menu-click", clickHandler);

    this.clientInfo = aboutInfo;
    this.$gzapi
      .get("ServerInfo")
      .then(response => {
        this.serverInfo = response.data;
      })
      .catch(function handleGetServerInfoError(error) {
        throw error;
      });
  },
  beforeDestroy() {
    // this.$gzevent.$off("menu-click", clickHandler);
  },
  data() {
    return {
      serverInfo: { license: { license: {} } },
      clientInfo: {},
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  }
};
</script>
