<script setup>
import {NDataTable} from "naive-ui";
import {computed, h, ref, watch} from "vue";
import IndexColumn from "./DataTableColumns/IndexColumn.vue";

const props = defineProps({
    columns: {
        type: Array,
        default: []
    },
    data: {
        type: Array,
        default: []
    },
    loading: {
        type: Boolean
    },
})

const patients = ref([...props.data])
const loading = ref(false)
const tableColumns = computed(() => {
    const baseColumns = [...props.columns]

    const numericColumn = {
        title: '',
        key: 'index',
        minWidth: 50,
        maxWidth: 60,
        width: 50,
        resizable: false,
        render: (row, i) => h(IndexColumn, { index: i + 1 })
    }

    baseColumns.unshift(numericColumn)

    return baseColumns
})

const rowProps = (row) => {
    const style = []

    if (row.admitted_today) {
        style.push('--n-merged-td-color: #047857')
    } else if (row.nurse_changes?.length) {
        style.push('--n-merged-td-color: rgba(217, 119, 6, 0.15)')
    }

    return {
        style: style.join('; '),
        title: row.nurse_changes?.length
            ? `Медсестра изменила: ${row.nurse_changes_labels.join(', ')}`
            : undefined,
    }
}

watch(() => props.data, (newData) => {
    patients.value = newData
})
</script>

<template>
    <NDataTable :columns="tableColumns"
                :data="patients"
                table-layout="fixed"
                max-height="234"
                min-height="234"
                :loading="loading"
                size="small"
                :row-props="rowProps"
    />
</template>

<style scoped>
:deep(.n-data-table-th),
:deep(.n-data-table-td) {
    font-size: var(--n-font-size);
}
</style>
