<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import VnTable from 'components/VnTable/VnTable.vue';
import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';

const { t } = useI18n();
const tableRef = ref();
const $props = defineProps({
    workerFk: {
        type: Number,
        required: true,
    },
    dated: {
        type: Date,
        required: true,
    },
});
const customUrl = `StockBoughts/getStockBoughtDetail?workerFk=${$props.workerFk}&date=${$props.dated}`;
const columns = [
    {
        align: 'left',
        label: t('Entry'),
        name: 'entryFk',
        isTitle: true,
        isId: true,
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'itemFk',
        label: t('Item'),
        columnFilter: false,
    },
    {
        align: 'left',
        label: t('Name'),
        name: 'itemName',
        create: true,
        columnClass: 'expand',
        columnFilter: false,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'volume',
        label: t('Volume'),
        columnFilter: false,
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('Packaging'),
        name: 'packagingFk',
        columnFilter: false,
        cardVisible: true,
    },
    {
        align: 'left',
        label: 'Packing',
        name: 'packing',
        columnFilter: false,
        cardVisible: true,
    },
];
</script>
<template>
    <QDialog>
        <div class="container">
            <VnTable
                ref="tableRef"
                data-key="StockBoughtsDetail"
                :url="customUrl"
                order="itemName DESC"
                :columns="columns"
                :right-search="false"
                :disable-infinite-scroll="true"
                :disable-option="{ card: true }"
                :limit="0"
                auto-load
            >
                <template #column-entryFk="{ row }">
                    <span class="link">
                        {{ row?.entryFk }}
                        <EntryDescriptorProxy :id="row.entryFk" />
                    </span>
                </template>
                <template #column-itemName="{ row }">
                    <span class="link">
                        {{ row?.itemName }}
                        <ItemDescriptorProxy :id="row.itemFk" />
                    </span>
                </template>
            </VnTable>
        </div>
    </QDialog>
</template>
<style lang="css" scoped>
.container {
    max-width: 50vw;
    overflow: auto;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color: var(--vn-section-color);
    padding: 4px;
}
.container > div > div > .q-table__top.relative-position.row.items-center {
    background-color: red !important;
}
</style>
<i18n>
    es:
        Buyer: Comprador
        Reserve: Reservado
        Bought: Comprado
        More: Más
        Date: Fecha
        Entry: Entrada
        Item: Artículo
        Name: Nombre
        Volume: Volumen
        Packaging: Embalage 
</i18n>
