<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import InvoiceInSerialFilter from './InvoiceInSerialFilter.vue';

const { t } = useI18n();

const cols = computed(() => [
    {
        align: 'left',
        name: 'serial',
        label: t('Serial'),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'pending',
        label: t('Pending'),
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'total',
        label: 'Total',
        columnFilter: false,
    },
]);

const daysAgo = ref();

onBeforeMount(async () => {
    const tableParam = useRoute().query.table;

    if (tableParam) daysAgo.value = JSON.parse(tableParam).daysAgo;
    else
        daysAgo.value = (
            await axios.get('InvoiceInConfigs/findOne', {
                params: { filter: { fields: ['daysAgo'] } },
            })
        ).data?.daysAgo;
});
</script>
<template>
    <RightMenu>
        <template #right-panel>
            <InvoiceInSerialFilter data-key="InvoiceInSerial" />
        </template>
    </RightMenu>
    <VnTable
        v-if="!isNaN(daysAgo)"
        data-key="InvoiceInSerial"
        url="InvoiceIns/getSerial"
        :columns="cols"
        :right-search="false"
        :user-params="{ daysAgo }"
        :disable-option="{ card: true }"
        auto-load
    />
</template>
<i18n>
es:
    Serial: Serie
    Pending: Pendiente
</i18n>
