<template>
    <div id="app">
        <router-view />
        <transition name="loader">
            <div class="page-loader-wrapper"
                v-if="isLoading">
                <div class="loader">
                    <div class="m-t-30"><img class="zmdi-hc-spin"
                            src="/static/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 { mapMutations, mapState } from 'vuex';

    setMatchMedia();

    export default {
        name: 'app',
        computed: {
            ...mapState('admin/loader', ['isLoading'])
        },
        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>
