<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 = [
    {
        align: 'left',
        name: 'date',
        label: t('worker.medical.tableVisibleColumns.date'),
        create: true,
        component: 'date',
    },
    {
        align: 'left',
        name: 'time',
        label: t('worker.medical.tableVisibleColumns.time'),
        create: true,
        component: 'time',
        attrs: {
            timeOnly: true,
        },
    },
    {
        align: 'left',
        name: 'centerFk',
        label: t('worker.medical.tableVisibleColumns.center'),
        create: true,
        component: 'select',
        attrs: {
            url: 'medicalCenters',
            fields: ['id', 'name'],
        },
    },
    {
        align: 'left',
        name: 'invoice',
        label: t('worker.medical.tableVisibleColumns.invoice'),
        create: true,
        component: 'input',
    },
    {
        align: 'left',
        name: 'amount',
        label: t('worker.medical.tableVisibleColumns.amount'),
        create: true,
        component: 'input',
    },
    {
        align: 'left',
        name: 'isFit',
        label: t('worker.medical.tableVisibleColumns.isFit'),
        create: true,
        component: 'checkbox',
    },
    {
        align: 'left',
        name: 'remark',
        label: t('worker.medical.tableVisibleColumns.remark'),
        create: true,
        component: 'input',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('delete'),
                icon: 'delete',
                action: async (row) => await tableRef.value.CrudModelRef.remove([row]),
                isPrimary: true,
            },
        ],
    },
];
</script>
<template>
    <VnTable
        ref="tableRef"
        data-key="WorkerMedical"
        :url="`Workers/${entityId}/medicalReview`"
        save-url="MedicalReviews/crud"
        :create="{
            urlCreate: 'medicalReviews',
            title: t('Create medicalReview'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {
                workerFk: entityId,
            },
        }"
        order="date DESC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="true"
        :use-model="true"
        :default-remove="false"
    />
</template>
