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

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

const { t } = useI18n();
const { params } = useRoute();
const entityId = computed(() => props.id || params.id);
const { store } = useArrayData('Parking');
const card = computed(() => store.data);
const filter = {
    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
};
</script>
<template>
    <CardDescriptor
        module="Parking"
        data-key="Parking"
        :url="`Parkings/${entityId}`"
        :title="card?.code"
        :subtitle="card?.id"
        :filter="filter"
    >
        <template #body="{ entity: parking }">
            <VnLv :label="t('globals.code')" :value="parking.code" />
            <VnLv :label="t('parking.pickingOrder')" :value="parking.pickingOrder" />
            <VnLv :label="t('parking.sector')" :value="parking.sector?.description" />
        </template>
    </CardDescriptor>
</template>
