<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 'components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData';

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

const parking = ref(store.data);
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}`"
            :filter="filter"
            @on-fetch="(data) => (parking = data)"
        >
            <template #header>{{ parking.code }}</template>
            <template #body>
                <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="parking.code" />
                    <VnLv
                        :label="t('parking.pickingOrder')"
                        :value="parking.pickingOrder"
                    />
                    <VnLv
                        :label="t('parking.sector')"
                        :value="parking.sector?.description"
                    />
                    <VnLv :label="t('parking.row')" :value="parking.row" />
                    <VnLv :label="t('parking.column')" :value="parking.column" />
                </QCard>
            </template>
        </CardSummary>
    </div>
</template>
