<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toDate, dashIfEmpty } from 'src/filters';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';

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

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

const entityId = computed(() => $props.id || route.params.id);
</script>

<template>
    <CardSummary
        ref="summary"
        :url="`DeliveryNotes/${entityId}/summary`"
        :entity-id="entityId"
        data-key="deliveryNoteSummary"
    >
        <template #header="{ entity: { deliveryNote } }">
            <div>{{ deliveryNote.id }} - {{ deliveryNote.ref }}</div>
        </template>
        <template #body="{ entity: { deliveryNote } }">
            <QCard class="vn-one">
                <VnTitle
                    :url="`#/delivery-note/${entityId}/basic-data`"
                    :text="t('globals.pageTitles.basicData')"
                />
                <div class="vn-card-group">
                    <div class="vn-card-content">
                        <VnLv :label="t('globals.id')" :value="deliveryNote.id" />
                        <VnLv :label="t('globals.reference')" :value="deliveryNote.ref" />
                        <VnLv
                            :label="t('globals.shipped')"
                            :value="toDate(deliveryNote.shipped)"
                        />
                        <VnLv
                            :label="t('globals.landed')"
                            :value="toDate(deliveryNote.landed)"
                        />
                        <VnLv
                            :label="t('globals.amount')"
                            :value="toCurrency(deliveryNote.amount)"
                        />
                    </div>
                    <div class="vn-card-content">
                        <VnLv :label="t('globals.supplier')">
                            <template #value>
                                <span class="link">
                                    {{ deliveryNote.supplier.name }}
                                    <SupplierDescriptorProxy
                                        :id="deliveryNote.supplierFk"
                                    />
                                </span>
                            </template>
                        </VnLv>
                        <VnLv
                            :label="t('globals.company')"
                            :value="deliveryNote.company.code"
                        />
                        <VnLv
                            :label="t('globals.state')"
                            :value="deliveryNote.deliveryNoteState.state"
                        />
                        <VnLv
                            :label="t('globals.invoiceIn')"
                            :value="dashIfEmpty(deliveryNote.invoiceInFk)"
                        />
                    </div>
                </div>
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
.no-uppercase {
    text-transform: none;
}
</style>
