<script setup>
import {
    NModal,
    NList,
    NListItem,
    NThing,
    NAvatar,
    NIcon,
    NText,
    NDivider,
    NFlex,
    NButton,
    NScrollbar,
    NEmpty,
    NDataTable,
    NBadge,
    NForm,
    NDrawerContent,
    NInput,
    NSpin,
    NDrawer
} from 'naive-ui'
import {useReportStore} from "../../../Stores/report.js";
import {TbAlertCircle, TbCheck, TbEye, TbGripVertical, TbPencil, TbTrashX, TbX} from 'vue-icons-plus/tb'
import {computed, h, ref, watch} from "vue";

const props = defineProps({
    departmentId: {
        required: true
    },
    startAt: {
        required: true
    },
    endAt: {
        required: true
    }
})

const reportStore = useReportStore()
const open = defineModel('open')
const loading = ref(true)
const baseColumns = reportStore.getColumnsByKey(['num', 'fullname', 'age', 'birth_date', 'mkb.ds'])

const currentPatient = ref(null)
const showMoveDrawer = ref(false)

const columns = computed(() => {
    // if (!isFillableMode.value) return baseColumns

    const newColumns = []

    const expandColumn = {
        title: '',
        width: '30',
        render: (rowData) => {
            return h(
                NIcon,
                {
                    onClick: () => {
                        currentPatient.value = rowData
                        showMoveDrawer.value = true
                    }
                },
                {
                    default: h(TbEye)
                }
            )
        }
    }

    const fillableColumn = {
        title: '',
        key: 'fillable',
        width: '20',
        render: (row) => h(
            NBadge,
            {
                dot: true,
                color: (row.comment && row.comment.trim()) ? '#7fe7c4' : '#e88080'
            }
        )
    }

    newColumns.push(expandColumn)
    newColumns.push(fillableColumn)
    newColumns.push(...baseColumns)

    return newColumns
})

const observablePatients = ref([])
const fetchUnwantedEvents = () => {
    loading.value = true
    const data = {
        status: 'observation',
        startAt: props.startAt,
        endAt: props.endAt,
        departmentId: props.departmentId
    }
    axios.post('/api/mis/patients', data).then((res) => {
        observablePatients.value = reportStore.addRowNumbers(res.data?.data ?? res.data ?? [])
    }).finally(() => {
        loading.value = false
    })
}

watch(() => [props.departmentId, props.endAt, props.startAt], () => {
    if (props.departmentId && props.endAt && props.startAt) {
        fetchUnwantedEvents()
    }
}, {
    immediate: true,
    deep: true
})
</script>

<template>
    <NModal v-model:show="open"
            title="Пациенты на контроле"
            preset="card"
            :mask-closable="false"
            :close-on-esc="false"
            class="max-w-4xl overflow-clip h-[calc(100vh-220px)]"
            id="modal-observation-patients"
    >
        <template v-if="loading">
            <div class="flex items-center justify-center h-full">
                <NSpin />
            </div>
        </template>
        <template v-else-if="observablePatients.length">
            <NDataTable :columns="columns"
                        ref="tableRef"
                        :data="observablePatients"
                        size="small"
                        :loading="loading"
                        max-height="200"
                        min-height="200"
                        :row-key="(row, index) => row.id"
                        class="text-sm!">
            </NDataTable>
        </template>
        <template v-else>
            <div class="h-full flex items-center justify-center">
                <NEmpty description="Пациентов на контроле не найдено!" />
            </div>
        </template>

        <NDrawer
            v-model:show="showMoveDrawer"
            placement="bottom"
            :min-height="400"
            :max-height="600"
            :default-height="400"
            resizable
            :trap-focus="false"
            :block-scroll="false"
            to="#modal-observation-patients"
        >
            <NDrawerContent title="Причина постановки на контроль" closable>
                <NInput type="textarea" readonly :rows="8" v-model:value="currentPatient.comment" />
            </NDrawerContent>
        </NDrawer>
    </NModal>
</template>

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