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

const centerFilter = {
    include: [
        {
            relation: 'center',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};

const columns = [
    {
        align: 'left',
        name: 'date',
        label: t('globals.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'],
        },
        format: (row, dashIfEmpty) => {
            return dashIfEmpty(row.center?.name);
        },
    },
    {
        align: 'left',
        name: 'invoice',
        label: t('worker.medical.tableVisibleColumns.invoice'),
        create: true,
        component: 'input',
    },
    {
        align: 'left',
        name: 'amount',
        label: t('globals.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`"
        :user-filter="centerFilter"
        save-url="MedicalReviews/crud"
        :create="{
            urlCreate: 'medicalReviews',
            title: t('Create medicalReview'),
            onDataSaved: () => tableRef.reload(),
            formInitialData: {
                workerFk: entityId,
            },
        }"
        :crud-model="{
            insertOnLoad: false,
        }"
        order="date DESC"
        :columns="columns"
        auto-load
        :right-search="false"
        :is-editable="true"
        :use-model="true"
        :default-remove="false"
        search-url="medical"
    />
</template>
