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

const $props = defineProps({
    id: {
        type: Number,
        default: 0,
    },
});
const router = useRoute();
const { t } = useI18n();
const entityId = computed(() => $props.id || router.params.id);

const filter = {
    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
};
</script>

<template>
    <div class="q-pa-md">
        <CardSummary :url="`Parkings/${entityId}`" data-key="Parking" :filter="filter">
            <template #header="{ entity }">{{ entity.code }}</template>
            <template #body="{ entity }">
                <QCard class="vn-one">
                    <QCardSection class="q-pa-none">
                        <a
                            class="header header-link"
                            :href="`#/parking/${entityId}/basic-data`"
                        >
                            {{ t('globals.pageTitles.basicData') }}
                            <QIcon name="open_in_new" />
                        </a>
                    </QCardSection>
                    <VnLv :label="t('globals.code')" :value="entity.code" />
                    <VnLv
                        :label="t('parking.pickingOrder')"
                        :value="entity.pickingOrder"
                    />
                    <VnLv
                        :label="t('parking.sector')"
                        :value="entity.sector?.description"
                    />
                    <VnLv :label="t('parking.row')" :value="entity.row" />
                    <VnLv :label="t('parking.column')" :value="entity.column" />
                </QCard>
            </template>
        </CardSummary>
    </div>
</template>
