<template>
  <div>
    <mobile-menu-bar v-if="isMobile" />

    <div class="container p-3">
      <div class="hero has-text-centered" v-if="isLoading">
        <div class="hero-body">
          <h3 class="subtitle">{{ $t('message.wait') }}</h3>
          <b-progress size="is-small" class="" />
          <p class="p-3">{{ $t('message.load_itens') }}</p>
        </div>
      </div>

      <div class="hero has-text-centered" v-else-if="isFailed">
        <div class="hero-body">
          <b-icon icon="alert" size="is-large" />
          <h3 class="subtitle">Ops!</h3>
          <p class="p-3">{{ httpMessage }}</p>
          <b-button @click="retry">{{ $t('button.retry') }}</b-button>
        </div>
      </div>

      <slot v-else />
    </div>
  </div>
</template>

<script>
import MobileMenuBar from "./mobile/MenuBar.vue";
import apps from "../apps.json";

export default {
  name: "LeanispApp",
  created() {
    let skip = process.env.VUE_APP_SKIP_LOAD_VARS;
    if((skip == 'false' || skip === undefined) && this.$store) {
      this.loadTags();
      this.loadAvailableCustomFields();
    }
  },
  methods: {
    loadAvailableCustomFields() {
      this.httpGet(this.$URL+'/core/available_custom_field', { notification: false }).then((res) => {
        this.$store.commit("setAvailableCustomFields", res.body);
      });
    },
    loadTags() {
      this.httpGet(this.$URL+'/core/tag', { notification: false }).then((res) => {
        this.$store.commit("setTags", res.body);
      });
    },
    retry() {
      window.location.reload();
    }
  },
  computed: {
    apps() {
      return apps;
    },
    isMobile() {
      return this.$isMobile;
    },
  },
  components: {
    MobileMenuBar,
  },
};
</script>
