<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { toDate } from 'src/filters/index';
import { useQuasar } from 'quasar';
import EntryBuysTableDialog from './EntryBuysTableDialog.vue';
import VnTable from 'components/VnTable/VnTable.vue';

const { t } = useI18n();
const quasar = useQuasar();
const params = {
    daysOnward: 7,
    daysAgo: 3,
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('myEntries.id'),
        columnFilter: false,
        isTitle: true,
    },
    {
        visible: false,
        align: 'right',
        label: t('myEntries.shipped'),
        name: 'shipped',
        columnFilter: {
            name: 'fromShipped',
            label: t('myEntries.fromShipped'),
            component: 'date',
        },
        format: ({ shipped }) => toDate(shipped),
    },
    {
        visible: false,
        align: 'left',
        label: t('myEntries.shipped'),
        name: 'shipped',
        columnFilter: {
            name: 'toShipped',
            label: t('myEntries.toShipped'),
            component: 'date',
        },
        format: ({ shipped }) => toDate(shipped),
        cardVisible: true,
    },
    {
        align: 'right',
        label: t('myEntries.shipped'),
        name: 'shipped',
        columnFilter: false,
        format: ({ shipped }) => toDate(shipped),
    },
    {
        align: 'right',
        label: t('myEntries.landed'),
        name: 'landed',
        columnFilter: false,
        format: ({ landed }) => toDate(landed),
    },

    {
        align: 'right',
        label: t('myEntries.wareHouseIn'),
        name: 'warehouseInFk',
        format: (row) => {
            row.warehouseInName;
        },
        cardVisible: true,
        columnFilter: {
            name: 'warehouseInFk',
            label: t('myEntries.warehouseInFk'),
            component: 'select',
            attrs: {
                url: 'warehouses',
                fields: ['id', 'name'],
                optionLabel: 'name',
                optionValue: 'id',
                alias: 't',
            },
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('myEntries.daysOnward'),
        name: 'daysOnward',
        visible: false,
    },
    {
        align: 'left',
        label: t('myEntries.daysAgo'),
        name: 'daysAgo',
        visible: false,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('printLabels'),
                icon: 'print',
                isPrimary: true,
                action: (row) => printBuys(row.id),
            },
        ],
    },
]);

const printBuys = (rowId) => {
    quasar.dialog({
        component: EntryBuysTableDialog,
        componentProps: {
            id: rowId,
        },
    });
};
</script>
<template>
    <VnSearchbar
        data-key="myEntriesList"
        url="Entries/filter"
        :label="t('Search entries')"
        :info="t('You can search by entry reference')"
    />
    <VnTable
        data-key="myEntriesList"
        url="Entries/filter"
        :columns="columns"
        :user-params="params"
        default-mode="card"
        order="shipped DESC"
        auto-load
        chip-locale="myEntries"
    />
</template>

<i18n>
    You can search by entry reference: Puedes buscar por referencia de la entrada
</i18n>
