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

const stateStore = useStateStore();
const { t } = useI18n();
const quasar = useQuasar();

onMounted(async () => {
    stateStore.rightDrawer = true;
});

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('customer.extendedList.tableVisibleColumns.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
        isTitle: false,
    },
    {
        align: 'left',
        label: t('shipped'),
        name: 'shipped',
        isTitle: false,
        create: true,
        cardVisible: true,
        format: ({ shipped }) => toDate(shipped),
    },
    {
        align: 'left',
        label: t('landed'),
        name: 'landed',
        isTitle: false,
        create: true,
        cardVisible: false,
        format: ({ landed }) => toDate(landed),
    },
    {
        align: 'left',
        label: t('globals.wareHouseIn'),
        name: 'warehouseInName',
        isTitle: false,
        cardVisible: true,
        create: false,
    },
    {
        align: 'right',
        name: 'tableActions',
        computed,
        actions: [
            {
                title: t('printBuys'),
                icon: 'print',
                action: (row) => printBuys(row.id),
            },
        ],
    },
]);

const printBuys = (rowId) => {
    quasar.dialog({
        component: EntryBuysTableDialog,
        componentProps: {
            id: rowId,
        },
    });
};
</script>
<template>
    <VnSearchbar
        data-key="EntryList"
        url="Entries/filter"
        :label="t('Search entries')"
        :info="t('You can search by entry reference')"
    />
    <QPage class="column items-center q-pa-md">
        <div class="vn-card-list">
            <VnTable
                ref="myEntriesRef"
                data-key="myEntriesList"
                url="Entries/filter"
                :order="['landed DESC', 'id DESC']"
                :columns="columns"
                default-mode="card"
                auto-load
            >
            </VnTable>
        </div>
    </QPage>
</template>

<i18n>
es:
    Search entries: Buscar entradas
    You can search by entry reference: Puedes buscar por referencia de la entrada
</i18n>
