<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 id="aboutinfocard">
        <v-subheader>{{ this.$gzlocale.get("ClientApp") }}</v-subheader>
        <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("Version") }}:</span>
          <span class="body-2">{{ clientInfo.version }}</span>
        </div>
        <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("User") }}:</span>
          <span class="body-2">{{ this.$store.state.userName }}</span>
        </div>

        <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("UserTimeZoneOffset") }}:</span>
          <span class="body-2">{{ this.$gzlocale.timeZoneOffset }}</span>
        </div>

         <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("DecimalSeparator") }}:</span>
          <span class="body-2">{{ this.$gzlocale.formats.DecimalSeparator }}</span>
        </div>

 <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("CurrencySymbol") }}:</span>
          <span class="body-2">{{ this.$gzlocale.formats.currencySymbol }}</span>
        </div>

 <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortDateFormat") }}:</span>
          <span class="body-2">{{ this.$gzlocale.formats.shortDate }}</span>
        </div>

 <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortTimeFormat") }}:</span>
          <span class="body-2">{{ this.$gzlocale.formats.shortTime }}</span>
        </div>

 <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("ShortDateAndTimeFormat") }}:</span>
          <span class="body-2">{{ this.$gzlocale.formats.shortDateAndTime }}</span>
        </div>



        <v-divider class="mt-4"></v-divider>
        <v-subheader>{{ this.$gzlocale.get("Browser") }}</v-subheader>
        <div v-for="(value, name) in clientInfo.browser" :key="name">
          <span class="ml-4 body-1">{{ name }}:</span>
          <span class="body-2">{{ value }}</span>
        </div>

        <v-divider class="mt-4"></v-divider>
        <v-subheader>{{ this.$gzlocale.get("Server") }}</v-subheader>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("ServerAddress") }}:</span
          >
          <span class="body-2">{{ this.$store.state.apiUrl }}</span>
        </div>
        <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("Version") }}:</span>
          <span class="body-2">{{ serverInfo.serverVersion }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("SchemaVersion") }}:</span
          >
          <span class="body-2">{{ serverInfo.dbSchemaVersion }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("ServerTime") }}:</span
          >
          <span class="body-2">{{ serverInfo.serverLocalTime }}</span>
        </div>
        <div>
          <span class="ml-4 body-1">{{ this.$gzlocale.get("TimeZone") }}:</span>
          <span class="body-2">{{ serverInfo.serverTimeZone }}</span>
        </div>

        <v-divider class="mt-4"></v-divider>
        <v-subheader>{{ this.$gzlocale.get("HelpLicense") }}</v-subheader>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("RegisteredUser") }}:</span
          >
          <span class="body-2">{{
            serverInfo.license.license.licensedTo
          }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("DatabaseID") }}:</span
          >
          <span class="body-2">{{ serverInfo.license.license.dbId }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("LicenseSerial") }}:</span
          >
          <span class="body-2">{{ serverInfo.license.license.keySerial }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("LicenseExpiration") }}:</span
          >
          <span class="body-2">{{
            serverInfo.license.license.licenseExpiration
          }}</span>
        </div>
        <div>
          <span class="ml-4 body-1"
            >{{ this.$gzlocale.get("SupportedUntil") }}:</span
          >
          <span class="body-2">{{
            serverInfo.license.license.maintenanceExpiration
          }}</span>
        </div>

        <v-divider class="mt-4"></v-divider>
        <v-subheader>{{ this.$gzlocale.get("LicensedOptions") }}</v-subheader>

        <div
          v-for="item in serverInfo.license.license.features"
          :key="item.Feature"
        >
          <span class="ml-4 body-1">{{ item.Feature }}</span>
          <span class="body-2">{{ item.Count ? ": " + item.Count : "" }}</span>
        </div>

        <v-divider class="mt-4"></v-divider>
      </v-card>
    </v-flex>
  </v-layout>
</template>

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

/////////////////////////////
//
//
function clickHandler(menuItem) {
  if (!menuItem) {
    return;
  }
  var m = this.$gzmenu.parseMenuItem(menuItem);
  if (m.owner == "about" && !m.disabled) {
    switch (m.key) {
      case "copysupportinfo":
        //put the support info on the clipboard:
        var element = document.getElementById("aboutinfocard");
        var text = element.innerText || element.textContent;

        var logText = "";
        this.$_.forEach(m.vm.$store.state.logArray, function appendLogItem(
          value
        ) {
          logText += value + "\n";
        });

        navigator.clipboard.writeText(text + "\nCLIENT LOG\n" + logText);
        break;
      default:
        m.vm.$gzevent.$emit(
          "notify-warning",
          "About.vue::context click: [" + m.key + "]"
        );
    }
  }
}

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",
        "UserTimeZoneOffset",
        "DecimalSeparator",
        "CurrencySymbol",
        "ShortDateFormat",
        "ShortTimeFormat",
        "ShortDateAndTimeFormat"
      ])
      .then(function() {
        vm.formState.ready = true;

        vm.$gzevent.$emit("menu-change", {
          isMain: false,
          icon: "fa-info-circle",
          title: vm.$gzlocale.get("HelpAboutAyaNova"),
          menuItems: [
            {
              title: vm.$gzlocale.get("Copy"),
              icon: "copy",
              surface: true,
              key: "about:copysupportinfo",
              vm: vm
            },
            {
              title: vm.$gzlocale.get("Log"),
              icon: "glasses",
              surface: true,
              key: "app:nav:log",
              data: "log"
            }
          ]
        });
        vm.$gzevent.$on("menu-click", clickHandler);
      })
      .catch(err => {
        vm.formState.ready = true;
        vm.$gzHandleFormError(err);
      });
  },
  created() {
    this.$gzapi
      .get("ServerInfo")
      .then(response => {
        this.serverInfo = response.data;
      })
      .catch(function handleGetServerInfoError(error) {
        throw error;
      });
  },
  beforeDestroy() {
    // this.$gzevent.$off("menu-click", clickHandler);
  },
  mounted() {
    this.clientInfo = {};
    this.clientInfo = aboutInfo;
    //eslint-disable-next-line
    //console.log("MOUNTED");
  },
  data() {
    return {
      serverInfo: { license: { license: {} } },
      clientInfo: {},
      formState: {
        ready: false,
        loading: true,
        errorBoxMessage: null,
        appError: null,
        serverError: {}
      }
    };
  }
};
</script>
