<template>
  <v-app  style="background-color:#ffffff">
      <div v-if="$store.getters.getAllDataLoaded">
          <Menu></Menu>
          <MenuMobile></MenuMobile>



        <v-content style="background-color: #fff;">
          <router-view></router-view>
        </v-content>
      </div>
      <div v-if="!$store.getters.getAllDataLoaded">
        {{ status }}
          <div v-if="$store.getters.getError">
              Es gab einen Fehler, bitte probiere es später nochmal
          </div>
      </div>
  </v-app>
</template>

<script>
import Menu from "./components/Menu2";
import MenuMobile from "./components/MenuMobile"
import Server from "./services/Server"

export default {
  name: 'App',
  components: {
    'Menu': Menu,
     'MenuMobile': MenuMobile
  },
  data () {
    return {
      big: true,
      status: 'General Loading....',
      bgcolor: "transparent",
      flat: true,
      nameBig: '',
      nameSmall: '',
      menu: [
        { icon: 'home', title: 'Login' },
        { icon: 'info', title: 'Invited' },
        { icon: 'warning', title: 'Register' }
      ],
      menu2: [
        { icon: 'home', title: 'Apps' },
        { icon: 'info', title: 'Admin' },
        { icon: 'warning', title: 'Account' }
      ]
    }
  },
  computed: {
    setting: (name) => {
      //this.$store.getters.getSettingValue(this.$store.state, name);
    }
  },
  methods: {
    /*handleScroll: function (evt, el) {
      if(evt.pageY > 100) {
        this.big = false;
        this.bgcolor = "#fff";
        this.flat = false;
      } else {
        this.big = true;
        this.bgcolor = "transparent";
        this.flat = true;
      }
    }*/
  },
  mounted: function () {
      this.status = "Get Backend URL ...";
      Server.getAPIUrl().then(() => {
          this.status = "Loading Basic Data ...";
          this.$store.dispatch('checkAccount');
          console.log("MOUNTED");
          this.$store.dispatch('getSettings').then(() => {
              this.nameBig = this.$store.getters.getSettingValue("name_big");
              this.nameSmall = this.$store.getters.getSettingValue("name_small");
          });
      });


  }
}
</script>
