<template>
    <aside class="main-sidebar sidebar-dark-red elevation-4">
        <div class="text-center" id="logo-ppal">
            <img src="svg/logos/logo-plataforma.svg" class="img-resposive pointer" @click="goToPlatform()" />
        </div>

        <div class="sidebar">
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <!-- <div class="image">
                    <img src="svg/avatars/avatar-default.svg" class="img-circle elevation-2" alt="User Image" />
                </div>
                <div class="info">
                    {{ UserData.name }}
                </div> -->
            </div>

            <nav class="options">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">

                    <li v-bind:class="(item.is_separator == 1 ? 'nav-header' : 'nav-item') + ' ' + (item.childs.length > 0 ? 'with-child' : '')" v-for="item of menu" v-if="UserData != null">
                        <router-link class="nav-link" :tag="(item.childs.length > 0 ? 'span' : 'a')" :to="(item.childs.length > 0 ? '#' : item.link)" v-if="item.is_separator != 1">
                            <i class="fas" :class="item.icon"></i>
                            {{ item.name }}
                        </router-link>
                        <span v-if="item.is_separator == 1">
                            <i class="fas" :class="item.icon"></i>
                            <p>
                                {{ item.name }}
                            </p>
                        </span>
                        <ul class="nav nav-treeview" v-if="item.is_separator != 1 && item.childs.length > 0">
                            <li class="nav-item" v-for="child of item.childs">
                                <router-link tag="a" class="nav-link" :to="child.link">
                                    <span>
                                        <i class="fa fa-dot-circle"></i>
                                        {{ child.name }}
                                    </span>
                                </router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <br />
            <br />
        </div>
        <div class="login-footer-menu"></div>
    </aside>
</template>

<script>
export default {
    data() {
        return {
            menu: [],
            organizationTypeList: [],
            organizationType: 0
        };
    },
    mounted() {
        if(window.AT == "") {
           this.UserData = null;
           window.localStorage.removeItem('userDataIF');
        }

        if(this.UserData != null) {
            axios
                .post(
                    "/api/menu",
                    {},
                    {
                        headers: {
                            Authorization: AT,
                        },
                    }
                )
                .then((resp) => {
                    this.menu = resp.data;
                });
        }
        this.loadOrganizationType();
    },
    methods: {
        loadOrganizationType() {
            axios.get($urlPlatform + "/api/organizationsTypeGrouped", {}, {}).then((response) => {
                let items = response.data;
                let _arr = [];
                for (let item of items) {
                    _arr.push(item);
                }
                this.organizationTypeList = _arr;
            });
        },
        goToHome(id) {
            if(this.$route.path != "/") {
                this.$router.push('/');
            }
            setTimeout(_ => {
                this.organizationType = id;
                this.$root.$emit('updateOrganizationType', id);
                jQuery('html, body').animate({
                    scrollTop: jQuery('.organizations-title').offset().top
                }, 500);
            }, 1000);
        },
        goToPlatform() {
            window.location.href = window.$urlPlatform;
        }
    },
};
</script>
<style>
.brand-link {
    padding: 2px;
    text-align: center;
}
.user-panel .info .d-block {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>