<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 courseFilter = {
    include: [
        {
            relation: 'trainingCourseType',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'trainingCenter',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};
const columns = computed(() => [
    {
        align: 'left',
        name: 'trainingCourseTypeFk',
        label: t('worker.formation.tableVisibleColumns.course'),
        isTitle: true,
        create: true,
        component: 'select',
        attrs: {
            url: 'TrainingCourseTypes',
            fields: ['id', 'name'],
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'started',
        label: t('worker.formation.tableVisibleColumns.startDate'),
        component: 'date',
        field: 'started',
        create: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'ended',
        label: t('worker.formation.tableVisibleColumns.endDate'),
        component: 'date',
        field: 'ended',
        create: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'centerFk',
        label: t('worker.formation.tableVisibleColumns.center'),
        create: true,
        component: 'select',
        attrs: {
            url: 'TrainingCenters',
            fields: ['id', 'name'],
        },
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'invoice',
        label: t('worker.formation.tableVisibleColumns.invoice'),
        component: 'input',
        field: 'invoice',
    },
    {
        align: 'left',
        name: 'amount',
        label: t('worker.formation.tableVisibleColumns.amount'),
        component: 'input',
        field: 'amount',
        create: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'remark',
        label: t('worker.formation.tableVisibleColumns.remark'),
        component: 'checkbox',
        create: true,
    },
    {
        align: 'left',
        name: 'hasDiploma',
        label: t('worker.formation.tableVisibleColumns.hasDiploma'),
        create: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('delete'),
                icon: 'delete',
                action: async (row) => await tableRef.value.CrudModelRef.remove([row]),
                isPrimary: true,
            },
        ],
    },
]);
</script>
<template>
    <VnTable
        class="worker-formation"
        ref="tableRef"
        data-key="WorkerFormation"
        :url="`Workers/${entityId}/trainingCourse`"
        :url-create="`Workers/${entityId}/trainingCourse`"
        save-url="TrainingCourses/crud"
        :filter="courseFilter"
        :create="{
            urlCreate: 'trainingCourses',
            title: t('Create training course'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {
                workerFk: entityId,
            },
        }"
        order="id DESC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="true"
        :use-model="true"
        :default-remove="false"
    />
</template>
<style lang="scss" scoped>
:global(.worker-formation thead > tr > th:nth-child(7)),
:global(.worker-formation thead > tr > th:nth-child(8)) {
    max-width: 50px;
}
</style>
<i18n>
es:
    Create training course: Crear curso de formación
</i18n>
