<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

import useCardDescription from 'src/composables/useCardDescription';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});

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

const itemTypeFilter = {
    include: [
        { relation: 'worker' },
        { relation: 'category' },
        { relation: 'itemPackingType' },
        { relation: 'temperature' },
    ],
};

const entityId = computed(() => {
    return $props.id || route.params.id;
});

const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
</script>

<template>
    <CardDescriptor
        module="ItemType"
        :url="`ItemTypes/${entityId}`"
        :filter="itemTypeFilter"
        :title="data.title"
        :subtitle="data.subtitle"
        @on-fetch="setData"
        data-key="entry"
    >
        <template #body="{ entity }">
            <VnLv :label="t('shared.code')" :value="entity.code" />
            <VnLv :label="t('shared.name')" :value="entity.name" />
            <VnLv :label="t('shared.worker')">
                <template #value>
                    <span class="link">{{ entity.worker?.firstName }}</span>
                    <WorkerDescriptorProxy :id="entity.worker?.id" />
                </template>
            </VnLv>
            <VnLv :label="t('shared.category')" :value="entity.category?.name" />
        </template>
    </CardDescriptor>
</template>

<i18n>
es:
    Go to module index: Ir al índice del módulo
</i18n>
