<template>
    <div class="werp-sidebar werp-bar-block werp-border-right" style="display: none;" id="mySidebar">
        <button onclick="werp_close()" class="werp-bar-item werp-large g-font-weight-900"><text class="g-color-orange">Web</text> <text class="g-color-blue">ERP</text> <span class="float-right g-font-size-20">&times;</span></button>
        <div onclick="myFunction(event)">
            <router-link v-if="getPermissions.includes('view-dashboard')" to="/" class="werp-bar-item werp-button menu-sidebar">Dashboard</router-link>
            <router-link v-if="getPermissions.includes('view-aset')" to="/aset" class="werp-bar-item werp-button menu-sidebar">Aset</router-link>
            <router-link v-if="getPermissions.includes('view-kategoriaset')" to="/kategoriaset" class="werp-bar-item werp-button menu-sidebar">Kategori Aset</router-link>
            <router-link v-if="getPermissions.includes('view-masterproduct')" to="/masterproduct" class="werp-bar-item werp-button menu-sidebar">Master Products</router-link>
            <router-link v-if="getPermissions.includes('view-warehousestock')" to="/warehousestock" class="werp-bar-item werp-button menu-sidebar">Warehouse Stock</router-link>
            <router-link v-if="getPermissions.includes('view-outbound')" to="/outbound" class="werp-bar-item werp-button menu-sidebar">Outbound</router-link>
            <router-link v-if="getPermissions.includes('view-history')" to="/history" class="werp-bar-item werp-button menu-sidebar">History</router-link>
            <router-link v-if="getPermissions.includes('view-salestransaction')" to="/salestransaction" class="werp-bar-item werp-button menu-sidebar">Sales Transaction</router-link>
            <router-link v-if="getPermissions.includes('view-permission')" to="/datauser" class="werp-bar-item werp-button menu-sidebar">Data User</router-link>
            <router-link v-if="getPermissions.includes('view-karyawan')" to="/karyawan" class="werp-bar-item werp-button menu-sidebar">Karyawan</router-link>
            <!-- <router-link to="/userrole" class="werp-bar-item werp-button menu-sidebar">User Role</router-link> -->
            <!-- <router-link to="/teams" class="werp-bar-item werp-button menu-sidebar">Teams</router-link>
            <router-link to="/projects" class="werp-bar-item werp-button menu-sidebar">Projects</router-link>
            <router-link to="/reports" class="werp-bar-item werp-button menu-sidebar">Reports</router-link>
            <router-link to="/clients" class="werp-bar-item werp-button menu-sidebar">Clients</router-link>
            <router-link to="/user" class="werp-bar-item werp-button menu-sidebar">User</router-link> -->
            <router-link v-if="getPermissions.includes('view-logout')" @click="logout" to="" class="werp-bar-item werp-button menu-sidebar">Logout</router-link>
        </div>
    </div>

    <section id="push1">
        <div class="container-fluid box-shadow">
            <div class="row align-items-center g-py-5">
                <div class="werp-teal text-left col-6 col-md-6 col-lg-6">
                    <button class="werp-button werp-teal werp-xlarge" onclick="werp_open()">☰</button>
                    <text class="g-color-orange g-font-weight-900 g-font-size-20">Web</text> <text class="g-color-blue g-font-weight-900 g-font-size-20">ERP</text>
                    <!-- <img :src="applogo" alt="logo werp" width="80"> -->
                </div>
                <div class="col-6 col-md-6 col-lg-6 text-right d-flex flex-row-reverse">
                    <router-link to="/user" class="text-decoration-none">
                        <div class="top-container">
                            <img v-if="user.foto == null" src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" class="img-fluid profile-image" width="60">
                            <img v-else v-bind:src="'https://werp-api.pt-gti.co.id/public/uploads/user-photo/' +user.foto" class="img-fluid profile-image" width="60">
                            <div class="g-ml-20">
                                <h5 class="name g-color-orange">{{ user.name }}</h5>
                                <p class="mail g-color-blue">{{ user.email }}</p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
.top-container {
    display: flex;
    align-items: center
}

.profile-image {
    border-radius: 10px;
    /* border: 2px solid #5957f9; */
}

.name {
    font-size: 15px;
    font-weight: 900;
    /* color: #272727; */
    position: relative;
    top: 8px
}

.mail {
    font-size: 14px;
    font-weight: 600;
    /* color: grey; */
    position: relative;
    top: 2px
}
</style>

<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

export default{
    created() {
        this.getPermissions = JSON.parse(localStorage.getItem('permissions'));
        // console.log(this.getPermissions);
    },
    setup() {
        let user = ref([]);
        
        onMounted(() => {
            const token = sessionStorage.getItem('token');
            
            //get data from api endpoint
            axios.get('https://werp-api.pt-gti.co.id/api/user', { headers: {"Authorization" : `Bearer ${token}`} })
            .then((response) => {
                user.value = response.data;
                // console.log(response.data)
            }).catch((err) => {
                console.log(err.response)
            });
        });

        const router = useRouter();
        const logout = () => {
            // localStorage.removeItem('authenticated');
            sessionStorage.removeItem('authenticated');
            sessionStorage.removeItem('token');
            sessionStorage.removeItem('userlogin');
            sessionStorage.removeItem('code');
            localStorage.removeItem('permissions');
            localStorage.removeItem('roles');
            router.push({ name: 'login' });
        };

        return {
            user,
            logout,
        }

        // return { logout };
    },
}
</script>