<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 EntrySupplierlDetail from './EntrySupplierlDetail.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('entrySupplier.id'),
        columnFilter: false,
        isId: true,
        chip: {
            condition: () => true,
        },
    },
    {
        align: 'left',
        name: 'supplierName',
        label: t('entrySupplier.supplierName'),
        cardVisible: true,
        isTitle: true,
    },
    {
        visible: false,
        align: 'right',
        label: t('entrySupplier.shipped'),
        name: 'shipped',
        columnFilter: {
            name: 'fromShipped',
            label: t('entrySupplier.fromShipped'),
            component: 'date',
        },
        format: ({ shipped }) => toDate(shipped),
    },
    {
        visible: false,
        align: 'left',
        label: t('entrySupplier.shipped'),
        name: 'shipped',
        columnFilter: {
            name: 'toShipped',
            label: t('entrySupplier.toShipped'),
            component: 'date',
        },
        format: ({ shipped }) => toDate(shipped),
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('entrySupplier.shipped'),
        name: 'shipped',
        columnFilter: false,
        format: ({ shipped }) => toDate(shipped),
    },
    {
        align: 'left',
        label: t('entrySupplier.landed'),
        name: 'landed',
        columnFilter: false,
        format: ({ landed }) => toDate(landed),
    },

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

const printBuys = (rowId) => {
    quasar.dialog({
        component: EntrySupplierlDetail,
        componentProps: {
            id: rowId,
        },
    });
};
</script>
<template>
    <VnSearchbar
        data-key="entrySupplierList"
        url="Entries/filter"
        :label="t('entrySupplier.search')"
        :info="t('entrySupplier.searchInfo')"
    />
    <VnTable
        data-key="entrySupplierList"
        url="Entries/filter"
        :columns="columns"
        :user-params="params"
        default-mode="card"
        order="shipped DESC"
        auto-load
    />
</template>
