<template>
  <v-layout row v-if="this.formState.ready">
    <v-flex>
      <v-card>
        <!-- <v-toolbar>
          <v-avatar size="64px" tile>
            <img :src="require('../assets/bw-logo.svg')" alt="AyaNova">
          </v-avatar>
          <v-toolbar-title>{{ this.$gzlocale.get("HelpAboutAyaNova")}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn large icon to="/log">
            <v-icon>fa-glasses</v-icon>
          </v-btn>
        </v-toolbar>-->
        <v-list two-line subheader>
          <v-subheader>{{ this.$gzlocale.get("ClientApp") }}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("Version")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                clientInfo.version
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <v-list two-line subheader>
          <v-subheader>{{ this.$gzlocale.get("Server") }}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("ServerAddress")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                this.$store.state.apiUrl
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("Version")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.serverVersion
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("SchemaVersion")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.dbSchemaVersion
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("ServerTime")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.serverLocalTime
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("TimeZone")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.serverTimeZone
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
        <v-divider></v-divider>
        <v-list two-line subheader>
          <v-subheader>{{ this.$gzlocale.get("HelpLicense") }}</v-subheader>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("RegisteredUser")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.license.license.licensedTo
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("DatabaseID")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.license.license.dbId
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("LicenseSerial")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.license.license.keySerial
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("LicenseExpiration")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.license.license.licenseExpiration
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("SupportedUntil")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title>
                {{
                serverInfo.license.license.maintenanceExpiration
                }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile avatar>
            <v-list-tile-content>
              <v-list-tile-title>
                {{
                this.$gzlocale.get("LicensedOptions")
                }}
              </v-list-tile-title>
              <v-list-tile-sub-title
                v-for="item in serverInfo.license.license.features"
                :key="item.Feature"
              >
                {{ item.Feature }}
                {{ item.Count ? item.Count : "" }}
              </v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
/* Xeslint-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"
    ]).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.version = aboutInfo.version;
    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>
