<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { QBtn } from 'quasar';

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { usePrintService } from 'composables/usePrintService';
const { openReport } = usePrintService();

const route = useRoute();
const { t } = useI18n();
const $props = defineProps({
    id: {
        type: String,
        required: false,
        default: null,
    },
});
const entityId = computed(() => $props.id || route.params.id);

const entriesTableColumns = computed(() => [
    {
        align: 'left',
        name: 'id',
        field: 'id',
        label: t('globals.id'),
    },
    {
        align: 'left',
        name: 'itemFk',
        field: 'itemFk',
        label: t('entry.latestBuys.tableVisibleColumns.itemFk'),
    },
    {
        align: 'left',
        name: 'item',
        label: t('entry.summary.item'),
        field: (row) => row.item.name,
    },
    {
        align: 'left',
        name: 'packagingFk',
        label: t('entry.summary.package'),
        field: 'packagingFk',
    },
    {
        align: 'left',
        name: 'stickers',
        label: t('entry.summary.stickers'),
        field: 'stickers',
    },
    {
        align: 'left',
        name: 'packing',
        label: t('entry.summary.packing'),
        field: 'packing',
    },
    {
        align: 'left',
        name: 'grouping',
        label: t('entry.summary.grouping'),
        field: 'grouping',
    },
]);
</script>

<template>
    <QDialog ref="dialogRef">
        <QCard style="min-width: 800px">
            <QCardSection class="row items-center q-pb-none">
                <QAvatar
                    :icon="icon"
                    color="primary"
                    text-color="white"
                    size="xl"
                    v-if="icon"
                />
                <span class="text-h6 text-grey">{{ title }}</span>
                <QSpace />
                <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
            </QCardSection>
            <QCardActions align="right">
                <QBtn
                    :label="t('printLabels')"
                    color="primary"
                    icon="print"
                    :loading="isLoading"
                    @click="openReport(`Entries/${entityId}/print`)"
                    unelevated
                    autofocus
                />
            </QCardActions>
            <QCardSection class="row items-center">
                <VnPaginate
                    ref="entryBuysPaginateRef"
                    :limit="0"
                    data-key="EntryBuys"
                    :url="`Entries/${entityId}/getBuys`"
                    auto-load
                >
                    <template #body="{ rows }">
                        <QTable
                            :rows="rows"
                            :columns="entriesTableColumns"
                            row-key="id"
                            flat
                            dense
                            class="q-ml-lg"
                            :grid="$q.screen.lt.md"
                            :no-data-label="t('globals.noResults')"
                        >
                            <template #body="props">
                                <QTr>
                                    <QTd v-for="col in props.cols" :key="col.name">
                                        {{ col.value }}
                                    </QTd>
                                    <QBtn
                                        icon="visibility"
                                        v-if="props.row.stickers > 0"
                                        :loading="isLoading"
                                        @click="
                                            openReport(
                                                `Entries/${props.row.id}/buy-label`
                                            )
                                        "
                                        unelevated
                                    >
                                        <QTooltip>{{ t('viewLabel') }}</QTooltip>
                                    </QBtn>
                                </QTr>
                            </template>
                        </QTable>
                    </template>
                </VnPaginate>
            </QCardSection>
        </QCard>
    </QDialog>
</template>
