<template>
    <ul class="profile-menu">
        <li v-for="(item, i) in menu.profile" :key="i">
            <template v-if="i != 2 || user?.profile?.confirmToSales">
                <component :is="item.url ? 'router-link': 'div'" :to="'/panel/' + item.url" @click="handleClick(item.key)"
                    v-ripple>
                    <i :class="item.icon"></i>
                    <span>{{ item.label }}</span>
                    <i v-if="item.key != 'logout'" class="isax isax-arrow-left-2" />
                </component>
            </template>
        </li>
    </ul>
</template>

<script setup>
const { menu } = inject('init');
const { dialog } = inject('service')
const handleClick = (key) => {
    if(key == 'logout')
        dialog.show(resolveComponent('PanelDialogLogout'))
    else if(key == 'password')
        dialog.show(resolveComponent('PanelDialogPasswordChange'))
    
}
</script>

<style lang="scss">
.profile-menu {
    @apply flex flex-col gap-1.5 md:order-first;

    li {

        a,
        div {
            @apply w-[21.4rem] h-[3.1rem] bg-[#FAFAFA] rounded-[0.6rem] overflow-hidden relative;
            @apply flex items-center gap-3 px-[1.1rem] text-[#7F7F7F];

            i:first-child {
                @apply text-[1.4em];
            }

            span {
                @apply text-sm font-vazir ml-auto;
            }

            i:last-child {
                @apply text-base;
            }
        }

        &:last-child a {

            i:first-child,
            span {
                @apply text-[#AD3434];
            }
        }

        &:not(:has(*:first-child)){
            @apply -mt-1.5;
        }
    }
}
</style>
