<script setup>
import {NDataTable, NSpace, NInput, NButton, NFlex} from "naive-ui";
import {TbSearch} from 'vue-icons-plus/tb'
import {computed, h, ref} 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 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 searchArg = ref(null)

const findPatient = (arg) => {
    // TODO: сделать поиск пациента через БДц
}

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

    if (row.admitted_today) {
        style.push('--n-merged-td-color: #047857')
    }

    return {
        style: style,
    }
}
</script>

<template>
    <NSpace vertical>
        <NFlex :wrap="false">
            <NInput v-model:value="searchArg" placeholder="Поиск пациента" @input="value => findPatient(value)" />
            <NButton secondary @click="findPatient(searchArg)">
                <template #icon>
                    <TbSearch />
                </template>
                Найти
            </NButton>
        </NFlex>
        <NDataTable :columns="tableColumns"
                    :data="patients"
                    table-layout="fixed"
                    max-height="234"
                    min-height="234"
                    :loading="loading"
                    size="small"
                    :row-props="rowProps"
        />
    </NSpace>
</template>

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