<template>
  <div id="app">
    <router-view />
    <transition name="loader">
      <div class="page-loader-wrapper" v-if="isLoading && enabled">
        <div class="loader">
          <div class="m-t-30"><img class="zmdi-hc-spin" :src="rootPath + 'images/logo.svg'" width="64" height="64" /></div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
  import { on, off } from 'view-design/src/utils/dom';
  import { setMatchMedia } from 'view-design/src/utils/assist';

  import Setting from './setting';
  import { mapMutations, mapState } from 'vuex';

  setMatchMedia();

  export default {
    name: 'app',
    computed: {
      ...mapState('admin/loader', ['isLoading', 'enabled']),
      rootPath() {
        return Setting.rootPath;
      }
    },
    methods: {
      ...mapMutations('admin/layout', ['setDevice']),
      handleWindowResize() {
        this.handleMatchMedia();
      },
      handleMatchMedia() {
        const matchMedia = window.matchMedia;

        if (matchMedia('(max-width: 600px)').matches) {
          this.setDevice('Mobile');
        } else if (matchMedia('(max-width: 992px)').matches) {
          this.setDevice('Tablet');
        } else {
          this.setDevice('Desktop');
        }
      }
    },
    mounted() {
      on(window, 'resize', this.handleWindowResize);
      this.handleMatchMedia();
    },
    beforeDestroy() {
      off(window, 'resize', this.handleWindowResize);
    }
  };
</script>
