<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LeftMenuItem from './LeftMenuItem.vue';

const route = useRoute();
const { t } = useI18n();

const props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    group: {
        type: String,
        default: '',
    },
});

const item = computed(() => props.item);
const isOpened = computed(() => {
    const { matched } = route;
    const { name } = item.value;

    return matched.some((item) => item.name === name);
});
</script>
<template>
    <q-expansion-item
        :group="props.group"
        active-class="text-primary"
        :label="item.title"
        :to="{ name: item.name }"
        expand-separator
        :default-opened="isOpened"
    >
        <template #header>
            <q-item-section avatar>
                <q-icon :name="item.icon"></q-icon>
            </q-item-section>
            <q-item-section>{{ t(item.title) }}</q-item-section>
            <q-item-section side>
                <slot name="side" :item="item" />
            </q-item-section>
        </template>
        <template v-for="section in item.children" :key="section.name">
            <left-menu-item :item="section" />
        </template>
    </q-expansion-item>
</template>
