<template>
    <div>
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
                <li class="nav-item d-none d-sm-inline-block">
                    <a class="nav-link">{{ $appName }}</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link nav-link-platforms red btn-decrease" href="javascript:;" title="Disminuir tamaño de letra">
                        <b>A-</b>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-platforms red btn-increment" href="javascript:;" title="Aumentar tamaño de letra">
                        <b>A+</b>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-platforms black btn-contrast" href="javascript:;" title="Cambiar contraste">
                        <i class="fas fa-adjust"></i>
                    </a>
                </li>
                <li class="nav-item" v-if="UserData != null">
                    <div class="dropdown">
                        <a class="btn dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <b>Módulos</b>
                        </a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" :href="mod.url_login" v-for="mod of modules">
                                <!-- <i class="fas" :class="mod.icon"></i> -->
                                {{ mod.name }}
                            </a>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:;" role="button" v-if="UserData != null">
                        <b>{{ UserData.name }}</b>
                    </a>
                </li>
                <li class="nav-item" v-if="UserData != null">
                    <a href="javascript:;" class="nav-link" v-on:click="LogOut()" title="Cerrar sesión">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </li>
                <li class="nav-item" v-if="UserData == null">
                    <a href="/login" class="nav-link">
                        <b>Iniciar sesión</b>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
        return {
            modules: [],
            fontSize: 100
        }
    },
    mounted() {
        this.modules = window.PLATFORMS;
        if(window.AT == "") {
           this.UserData = null;
           window.localStorage.removeItem('userDataIF');
        }
        jQuery('.btn-decrease').click(() => {
            if(this.fontSize > 65) {
                this.fontSize = this.fontSize - 5;
                window.localStorage.setItem('fontSize', this.fontSize);
            }
            jQuery('div#fontSize').html(`
            <style>
                * {
                    font-size: ${(this.fontSize/100).toFixed(2)}rem;
                }
                .nav-item.with-child span, .nav-item.with-child a {
                    font-size: ${(this.fontSize/100).toFixed(2)}rem !important;
                }
            </style>
            `);
        });
        jQuery('.btn-increment').click(() => {
            if(this.fontSize <= 120) {
                this.fontSize = this.fontSize + 5;
                window.localStorage.setItem('fontSize', this.fontSize);
            }
            jQuery('div#fontSize').html(`
            <style>
                * {
                    font-size: ${(this.fontSize/100).toFixed(2)}rem;
                }
                .nav-item.with-child span, .nav-item.with-child a {
                    font-size: ${(this.fontSize/100).toFixed(2)}rem !important;
                }
            </style>
            `);
        });
        jQuery('.btn-contrast').click(() => {
            jQuery("body").toggleClass("contrast");
            window.localStorage.setItem('contrast', jQuery("body").hasClass('contrast') ? 1 : 0);
        });
        if(window.localStorage.getItem('contrast') == 1) {
            jQuery("body").addClass("contrast");
        }
        if(window.localStorage.getItem('fontSize') != null) {
            setTimeout(_ => {
                this.fontSize = parseFloat(window.localStorage.getItem('fontSize'));
                jQuery('div#fontSize').html(`
                <style>
                    * {
                        font-size: ${(this.fontSize/100).toFixed(2)}rem;
                    }
                    .nav-item.with-child span, .nav-item.with-child a {
                        font-size: ${(this.fontSize/100).toFixed(2)}rem !important;
                    }
                </style>
                `);
            }, 1500);
        }
    },
    methods: {
        LogOut: function () {
            window.localStorage.removeItem('userDataIF');
            window.open('/logout', '_top');
        }
    },
};
</script>