<script setup>
import { ref, computed, onUpdated } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';

import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import VnToSummary from 'src/components/ui/VnToSummary.vue';

onUpdated(() => summaryRef.value.fetch());

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

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

const itemTypeFilter = {
    include: [
        { relation: 'worker' },
        { relation: 'category' },
        { relation: 'itemPackingType' },
        { relation: 'temperature' },
    ],
};

const entityId = computed(() => $props.id || route.params.id);
const summaryRef = ref();
const itemType = ref();

async function setItemTypeData(data) {
    if (data) itemType.value = data;
}
</script>

<template>
    <CardSummary
        ref="summaryRef"
        :url="`ItemTypes/${entityId}`"
        data-key="ItemTypeSummary"
        :filter="itemTypeFilter"
        @on-fetch="(data) => setItemTypeData(data)"
        class="full-width"
    >
        <template #header-left>
            <router-link
                v-if="route.name !== 'ItemTypeSummary'"
                :to="{ name: 'ItemTypeSummary', params: { id: entityId } }"
                class="header link"
            >
                <QIcon name="open_in_new" color="white" size="sm" />
            </router-link>
            <VnToSummary
                v-if="route?.name !== 'ItemTypeSummary'"
                :route-name="'ItemTypeSummary'"
                :entity-id="entityId"
            />
        </template>
        <template #header>
            <span>
                {{ itemType.id }} - {{ itemType.name }} -
                {{ itemType.worker?.firstName }}
                {{ itemType.worker?.lastName }}
            </span>
        </template>
        <template #body>
            <QCard class="vn-one">
                <router-link
                    :to="{ name: 'ItemTypeBasicData', params: { id: entityId } }"
                    class="header header-link"
                >
                    {{ t('globals.summary.basicData') }}
                    <QIcon name="open_in_new" />
                </router-link>
                <VnLv :label="t('summary.id')" :value="itemType.id" />
                <VnLv :label="t('shared.code')" :value="itemType.code" />
                <VnLv :label="t('shared.name')" :value="itemType.name" />
                <VnLv :label="t('shared.worker')">
                    <template #value>
                        <span class="link">{{ itemType.worker?.firstName }}</span>
                        <WorkerDescriptorProxy :id="itemType.worker?.id" />
                    </template>
                </VnLv>
                <VnLv :label="t('shared.category')" :value="itemType.category?.name" />
                <VnLv
                    :label="t('shared.temperature')"
                    :value="itemType.temperature?.name"
                />
                <VnLv :label="t('summary.life')" :value="itemType.life" />
                <VnLv :label="t('summary.promo')" :value="itemType.promo" />
                <VnLv
                    :label="t('summary.itemPackingType')"
                    :value="itemType.itemPackingType?.description"
                />
                <VnLv
                    class="large-label"
                    :label="t('summary.isUnconventionalSize')"
                    :value="itemType.isUnconventionalSize"
                />
            </QCard>
        </template>
    </CardSummary>
</template>

<style lang="scss">
.large-label > div.label {
    width: 15em !important;
}
</style>
