<template>
    <aside class="menu">
        <div id="navigation">
            <div class="profile-picture">
                <router-link to="/">
                    <img src="../../assets/images/profile.jpg" class="img-circle m-b" alt="logo"/>
                </router-link>

                <div class="stats-label text-color">
                    <div class="stats-label text-color">
                        <span class="font-bold font-uppercase">{{ $t('label.user') }}</span>
                        <br/>
                        <small class="text-muted">
                            {{ $t('label.login') }} - {{ login }}
                        </small>
                        <br/>
                        <small class="text-muted">
                            {{ $t('label.name') }} - {{ nameUser }}
                        </small>

                        <div v-if="title !== undefined">
                            <br/>
                            <span class="font-bold font-uppercase">
                                    {{ title }}
                                </span>

                            <small class="text-muted">
                                {{ subTitle1 }}
                            </small>
                            <br/>
                            <small class="text-muted">
                                {{ subTitle2 }}
                            </small>
                            <br/>
                            <small class="text-muted">
                                {{ subTitle3 }}
                            </small>
                        </div>

                        <div v-show="lastAccess">
                            <br/>
                            <span class="font-bold font-uppercase">
                                    {{ $t('label.lastAccess') }}
                                </span>
                            <small class="text-muted">
                                {{ lastAccess }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <ul class="nav side-menu">
                <form style="width: 180px">
                    <li menu v-for="item in menu" :key="item.id">
                        <a href="#" @click="clickMenu(item.id)">
                            <span class="nav-label">{{ item.name }}</span>
                            <span :class="classIconMenu(item.id)" style="float: right"> </span>
                        </a>
                        <ul :id="item.id" class="nav nav-second-level"
                            :class="{collapse: !collapses || !collapses.includes(item.id)}"
                            v-for="subItem in item.menu" :key="subItem.id">
                            <li subMenu>
                                <router-link :to="subItem.path === undefined ? '/' : subItem.path">
                                    <span class="nav-label">{{ subItem.name }}</span>
                                </router-link>
                            </li>
                        </ul>
                    </li>
                </form>
            </ul>
        </div>
    </aside>
</template>

<script>
import {mapState} from 'vuex'

export default {
    name: 'TemplateMenu',
    props: {
        login: {type: String, required: true},
        nameUser: {type: String, required: true},
        menu: {type: Array, required: true},
        lastAccess: {type: String, required: false},
        title: {type: String, required: false},
        subTitle1: {type: String, required: false},
        subTitle2: {type: String, required: false},
        subTitle3: {type: String, required: false},
    },
    data() {
        return {
            collapses: [],
        }
    },
    computed: mapState(['isMenuVisible']),
    methods: {
        clickMenu(id) {
            if (this.collapses.includes(id)) {
                const position = this.collapses.indexOf(id)
                this.collapses.splice(position, 1)
            } else {
                this.collapses.push(id)
            }
        },
        classIconMenu(id) {
            return this.collapses && this.collapses.includes(id) ? 'fa fa-arrow-down' : 'fa fa-arrow-left'
        }
    }
}
</script>

<style lang="scss">

.menu {
    font-size: 15px;

    aside {
        grid-area: menu;

        width: 180px;
        bottom: 0;
        float: left;
        left: 0;
        position: absolute;
        top: 62px;
        transition: all 0.4s ease 0s;
        /*overflow: auto;*/
    }

    .profile-picture {
        padding: 20px 20px;
        text-align: center;
    }

    .img-circle {
        border-radius: 50%;
    }

    .side-menu {
        background: #f7f9fa;
        /* margin-bottom: 40px; */
    }

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

    .side-menu li:first-child {
        border-top: 1px solid #e4e5e7;
    }

    .side-menu li {
        border-bottom: 1px solid #e4e5e7;
    }

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

    div ul li {
        font-size: 0.8rem;
    }

    .nav {
        list-style: none;
    }

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

    .side-menu li a {
        color: #6a6c6f;
        text-transform: uppercase;
        font-weight: 700;
        padding: 15px 20px;
        position: relative;
        display: block;
    }

    .side-menu.nav > li > a {
        padding: 10px 15px;
    }

    .side-menu li .nav-second-level li a {
        padding: 10px 10px 10px 30px;
        color: #6a6c6f;
        text-transform: none;
        font-weight: 600;
    }

    .side-menu li.active a, .menu #side-menu li:hover a {
        color: #34495e;
    }

    .side-menu li a {
        color: #6a6c6f;
        text-transform: uppercase;
        font-weight: 700;
        padding: 15px 20px;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    a {
        color: #428bca;
        text-decoration: none;
    }

    .side-menu li:first-child {
        border-top: 1px solid #e4e5e7;
    }

    .side-menu li {
        border-bottom: 1px solid #e4e5e7;
    }

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

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

    li[menu] a {
        text-decoration: none;
    }

    li[subMenu] {
        width: 100%;
    }

    li [subMenu]:hover {
        background-color: #6a6c6f20;
    }

    .side-menu li .nav-second-level li a {
        padding: 10px 10px 10px 30px;
        color: #6a6c6f;
        text-transform: none;
        font-weight: 600;
    }
}
</style>
