<template>
    <header class="header">

        <div class="color-line"></div>

        <div id="logo" class="light-version">
            <div class="logo-image" :style="{ backgroundImage: `url(${logoMenu})`}">
                <p class="initial-system" style="padding-left: 35px">{{ descriptionSystem }}</p>
            </div>
        </div>

        <nav class="navigation" role="navigation">
            <div class="header-link hide-menu" @click="setToggleMenu()">
                Menu <i class="fa fa-bars"></i>
            </div>

            <div class="small-logo">
                <span class="text-primary">{{ descriptionSystem }}</span>
            </div>

            <!--            <div class="mobile-menu">-->
            <!--                <button type="button" class="navbar-toggle mobile-menu-toggle" data-toggle="collapse"-->
            <!--                        data-target="#mobile-collapse">-->
            <!--                    <i class="fa fa-chevron-down"></i>-->
            <!--                </button>-->
            <!--                <div class="collapse mobile-navbar" id="mobile-collapse">-->
            <!--                    <ul class="nav navbar-nav">-->
            <!--                        <li>-->
            <!--                            <a href="../login/bemVindo.jsf">-->
            <!--                                <i class="pe-7s-home"></i>-->
            <!--                                HOME-->
            <!--                            </a>-->
            <!--                        </li>-->
            <!--                        <li>-->
            <!--                            <a class="botaoSairMenu"-->
            <!--                               href="#">-->
            <!--                                <i class="pe-7s-upload pe-rotate-90"></i>-->
            <!--                                SAIR-->
            <!--                            </a>-->
            <!--                        </li>-->
            <!--                    </ul>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--            <div class="navbar-left logo-menu-center">-->
            <!--                                    <img src="@/assets/logo-menu.png"-->
            <!--                                         height="10px"-->
            <!--                                         style="margin: 0"/>-->
            <!--            </div>-->

            <div class="navbartop navbar-right" style="height: 56px; width: 300px">
                <ul class="nav navbar-nav no-borders" style="height: 56px; width: 300px">

                    <li class="dropdown">
                        <router-link to="/">
                            <i class="pe-7s-home"></i>
                        </router-link>
                    </li>

                    <!--Área para alert-->
                    <li id="alert" class="dropdown base-communication base-alert">
                        <a class="label-menu-corner" href="#" data-toggle="dropdown">
                            <i class="pe-7s-speaker"></i>
                            <!--                            <span class="label label-info">-->
                            <!--                                    #{communicationController.alerts.size()}-->
                            <!--                                </span>-->
                        </a>

                        <!--                        <ul class="dropdown-menu hdropdown notification animated flipInX" style="max-height: 600px; overflow: auto">-->
                        <!--                            <div class="title">-->
                        <!--                                #{a:bundle('label.alertasRecebidos')}-->
                        <!--                            </div>-->

                        <!--                            <ui:repeat value="#{communicationController.alerts}" var="alert">-->
                        <!--                                <li>-->
                        <!--                                    <a href="#{alert.link}">-->
                        <!--                                            <span class="label label-#{alert.style.name().toLowerCase()}">-->
                        <!--                                                #{alert.description}-->
                        <!--                                            </span>-->
                        <!--                                        #{alert.description}-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                            </ui:repeat>-->

                        <!--<li class="summary">-->
                        <!--<a href="#">#{a:bundle('message.verTodosAlertas')}</a>-->
                        <!--</li>-->
                        <!--                        </ul>-->
                    </li>

                    <!--Área para mensagens-->
                    <li id="message" class="dropdown base-communication base-message"
                        style="visibility: #{applicationScope.hideMessage ? 'hidden' : 'visibility'}">
                        <a class="label-menu-corner" href="#" data-toggle="dropdown">
                            <i class="pe-7s-mail"> </i>
                            <span class="label label-info">
<!--                                    #{communicationController.messages.size()}-->
                                </span>
                        </a>
                        <ul class="dropdown-menu hdropdown animated flipInX"
                            style="max-height: 600px; overflow: auto">
                            <div class="title">
                                <!--                                #{a:bundle('label.mensagensRecebidas')}-->
                            </div>

                            <!--                            <ui:repeat value="#{communicationController.messages}" var="message">-->
                            <!--                                <li>-->
                            <!--                                    <a href="#{message.link}">-->
                            <!--                                        #{message.title} -->
                            <!--                                    </a>-->
                            <!--                                </li>-->
                            <!--                            </ui:repeat>-->
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a @click="logout">
                            <i class="pe-7s-upload pe-rotate-90"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</template>

<script>
import {mapActions} from "vuex";

export default {
    name: "TemplateHeader",
    props: {
        initialsSystem: {type: String, required: true},
        descriptionSystem: {type: String, required: true},
        logoMenu: {}
    },
    methods: {
        ...mapActions(['setToggleMenu', 'setLogin']),
        logout() {
            this.$router.push("/")
            this.setLogin(false)
        }
    }
}
</script>

<style lang="scss">
.header {
    grid-area: header;

    background-color: #fff;
    display: block;
    height: 62px;
    margin: 0;
    padding: 0;
    position: relative;
    border-bottom: 1px solid #e4e5e7;

    font-size: 13px;

    p {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    .color-line {
        background: #f7f9fa;
        height: 6px;
        background-image: -webkit-linear-gradient(0deg, rgba(1, 74, 115, 1.00) 0%, rgba(18, 118, 191, 1.00) 29.11%, rgba(129, 184, 219, 1.00) 51.99%, rgba(0, 81, 113, 1.00) 81.15%, rgba(1, 74, 115, 1.00) 100%);
        background-image: -moz-linear-gradient(0deg, rgba(1, 74, 115, 1.00) 0%, rgba(18, 118, 191, 1.00) 29.11%, rgba(129, 184, 219, 1.00) 51.99%, rgba(0, 81, 113, 1.00) 81.15%, rgba(1, 74, 115, 1.00) 100%);
        background-image: -ms-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%);
        background-image: -o-linear-gradient(0deg, rgba(1, 74, 115, 1.00) 0%, rgba(18, 118, 191, 1.00) 29.11%, rgba(129, 184, 219, 1.00) 51.99%, rgba(0, 81, 113, 1.00) 81.15%, rgba(1, 74, 115, 1.00) 100%);
        background-image: linear-gradient(90deg, rgba(1, 74, 115, 1.00) 0%, rgba(18, 118, 191, 1.00) 29.11%, rgba(129, 184, 219, 1.00) 51.99%, rgba(0, 81, 113, 1.00) 81.15%, rgba(1, 74, 115, 1.00) 100%);
        background-size: 100% 6px;
        background-position: 50% 100%;
        background-repeat: no-repeat
    }

    #logo.light-version {
        background-color: #f7f9fa;
        border-bottom: 1px solid #e4e5e7;
        text-align: left
    }

    #logo {
        float: left;
        width: 180px;
        background-color: #34495e;
        padding: 10px;
        height: 56px;
    }

    .initial-system {
        width: 160px;
        magin: 10px;
        font-size: .8em;
    }

    .header-link {
        padding: 17px 26px 17px 26px;
        font-size: 14px;
        float: left;
        border-right: 1px solid #e4e5e7;
        border-left: 1px solid #e4e5e7;
        margin-right: 15px;
        background: #f7f9fa;
        cursor: pointer;
    }

    nav, .header section, .header summary {
        display: block;
    }

    @media (min-width: 768px) {
        .navbar-right {
            float: right !important;
        }
    }

    .small-logo {
        display: none;
        text-align: center;
        padding-top: 18px;
        font-size: 14px;
        font-weight: 800
    }

    .navigation {
        height: 100%;
    }

    .navbartop > ul.navbar-nav {
        color: #6a6c6f;
    }

    .navbartop > ul.navbar-nav > li {
        margin: 10px 0;
    }

    .no-borders {
        border: none !important;
    }

    @media (min-width: 768px) {
        .navbar-nav {
            float: left;
            margin: 0;
        }
    }

    .nav {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    ul, .header ol {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .navbar-nav > li > a {
        padding: 15px 25px;
        font-size: 25px;
        color: #6a6c6f;
    }

    navbar-nav > li, .header .navbar-nav > li > a {
        height: 56px;
    }

    @media (min-width: 768px) {
        .navbar-nav > li {
            float: left;
        }
    }

    .nav > li {
        position: relative;
        display: block;
    }

    .dropdown {
        position: relative;
    }

    div ul li {
        /*font-size: 12px !important;*/
    }

    /** {*/
    /*    -webkit-box-sizing: border-box;*/
    /*    -moz-box-sizing: border-box;*/
    /*    box-sizing: border-box;*/
    /*}*/

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    .nav {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .navbartop ul li a:hover {
        background-color: #6a6c6f20;
    }

    .header-link:hover {
        background-color: #6a6c6f20;
    }

    .logo-image {
        width: 40px;
        height: 40px;
        padding: 10px;
        background-size: 100% 100%;
    }

}
</style>
