<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData';

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

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});

const { store } = useArrayData('Role');
const role = ref(store.data);
const entityId = computed(() => $props.id || route.params.id);
const filter = {
    where: { id: entityId },
};
</script>

<template>
    <CardSummary
        ref="summary"
        :url="`VnRoles`"
        :filter="filter"
        @on-fetch="(data) => (role = data)"
        data-key="RoleSummary"
    >
        <template #header> {{ role.id }} - {{ role.name }} </template>
        <template #body>
            <QCard class="vn-one">
                <QCardSection class="q-pa-none">
                    <a
                        class="header header-link"
                        :href="`#/VnUser/${entityId}/basic-data`"
                    >
                        {{ t('globals.pageTitles.basicData') }}
                        <QIcon name="open_in_new" />
                    </a>
                </QCardSection>
                <VnLv :label="t('role.card.id')" :value="role.id" />
                <VnLv :label="t('role.card.name')" :value="role.name" />
                <VnLv :label="t('role.card.description')" :value="role.description" />
            </QCard>
        </template>
    </CardSummary>
</template>
