<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import PropertyCard from './PropertyCard.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';

const route = useRoute();

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

const props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
    summary: {
        type: Object,
        default: null,
    },
});
</script>
<template>
    <CardDescriptor
        v-bind="$attrs"
        :id="entityId"
        :card="PropertyCard"
        title="name"
        module="Property"
    >
        <template #body="{ entity }">
            <VnLv :label="$t('property.owner')" :value="entity.company.code" />
            <VnLv
                :label="$t('property.group')"
                :value="entity.propertyGroup.description"
            />
            <VnLv :label="$t('property.notary')">
                <template #value>
                    <span class="link">
                        {{ entity?.supplier?.name || '-' }}
                        <SupplierDescriptorProxy :id="entity?.supplierFk" />
                    </span>
                </template>
            </VnLv>
            <VnLv :label="$t('property.protocol')" :value="entity.protocol" copy />
            <VnLv :label="$t('property.cadaster')" :value="entity.cadaster" copy />
            <VnLv :label="$t('property.farm')" :value="entity.farm" />
            <VnLv :label="$t('property.area')" :value="entity.area" />
        </template>
    </CardDescriptor>
</template>
