<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnTable from 'components/VnTable/VnTable.vue';
const tableRef = ref();
const { t } = useI18n();
const route = useRoute();
const entityId = computed(() => route.params.id);

const columns = computed(() => [
    {
        align: 'left',
        name: 'paymentDate',
        label: t('worker.balance.tableVisibleColumns.paymentDate'),
        create: true,
        component: 'date',
        field: 'paymentDate',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'incomeTypeFk',
        label: t('worker.balance.tableVisibleColumns.incomeType'),
        create: true,
        component: 'select',
        attrs: {
            url: 'payrollComponents',
            fields: ['id', 'name'],
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'debit',
        label: t('worker.balance.tableVisibleColumns.debit'),
        create: true,
        component: 'input',
        field: 'debit',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'credit',
        label: t('worker.balance.tableVisibleColumns.credit'),
        create: true,
        component: 'input',
        field: 'credit',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'concept',
        label: t('worker.balance.tableVisibleColumns.concept'),
        create: true,
        component: 'input',
        field: 'concept',
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        style: 'max-width: 20px; text-align: initial;',
        actions: [
            {
                title: t('delete'),
                icon: 'delete',
                action: async (row) => await tableRef.value.CrudModelRef.remove([row]),
                isPrimary: true,
            },
        ],
    },
]);
</script>
<template>
    <VnTable
        ref="tableRef"
        data-key="WorkerBalance"
        :url="`Workers/${entityId}/incomes`"
        :url-create="`Workers/${entityId}/incomes`"
        save-url="WorkerIncomes/crud"
        :create="{
            urlCreate: 'workerIncomes',
            title: t('Create balance'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {
                workerFk: entityId,
            },
        }"
        order="paymentDate DESC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="true"
        :use-model="true"
        :default-remove="false"
    />
</template>
<i18n>
    es:
        Create balance: Crear balance
</i18n>
