<script setup>
import {NDataTable, NEllipsis, NTag} from "naive-ui"
import {computed, h, reactive, ref, watch} from "vue"
import {useMedicalHistoryFilter} from "../../../Composables/useMedicalHistoryFilter.js";
import ArchiveHistoryModal from '../ArchiveHistoryModal/Index.vue'

const props = defineProps({
    filters: {
        type: Array,
        default: []
    },
    data: {
        type: Array,
        default: []
    },
    maxHeight: {
        type: String,
        default: null
    },
    minHeight: {
        type: String,
        default: null
    },
})

const { isLoading, handlePageChange, handlePageSizeChange, meta, filtersRef } = useMedicalHistoryFilter(props.filters)
const dataTable = ref(props.data ?? [])

const archiveStatusColumn = (status) => {
    const tagType = status?.variant ?? 'error'
    const tagText = status?.text ?? 'Нет в архиве'
    console.log(tagType)

    return h(
        NEllipsis,
        null,
        {
            default: () => h(NTag, {type: tagType, round: true, size: 'small'}, tagText)
        })
}

const columns = ref([
    {
        title: '№ карты',
        key: 'medcardnum',
        width: 100,
        render: (row) => h(NEllipsis, null, { default: () => row.medcardnum })
    },
    {
        title: 'ФИО',
        key: 'fullname',
        width: 250,
        render: (row) => h(NEllipsis, null, { default: () => row.fullname })
    },
    {
        title: 'Дата рождения',
        key: 'dr',
        width: 130,
        render: (row) => h(NEllipsis, null, { default: () => row.dr })
    },
    {
        title: 'Дата поступления',
        key: 'daterecipient',
        width: 150,
        render: (row) => h(NEllipsis, null, { default: () => row.daterecipient })
    },
    {
        title: 'Дата выписки',
        key: 'dateextract',
        width: 130,
        render: (row) => h(NEllipsis, null, { default: () => row.dateextract })
    },
    {
        title: '№ архива',
        key: 'card_num',
        width: 120,
        render: (row) => h(NEllipsis, null, { default: () => row.card_num || '-' })
    },
    {
        title: 'Дата архива',
        key: 'datearhiv',
        width: 130,
        render: (row) => h(NEllipsis, null, { default: () => row.datearhiv })
    },
    {
        title: 'Статус',
        key: 'status',
        width: 100,
        render: (row) => archiveStatusColumn(row.status)
    }
])
const showArchiveHistoryModal = ref(false)
const selectedPatientId = ref(null)
const rowProps = (row) => ({
    onDblclick: () => {
        selectedPatientId.value = row.id
        showArchiveHistoryModal.value = true
    }
})

const pagination = computed(() => {
    if (filtersRef.value.view_type === 'si') {
        return {
            page: meta.value.si.current_page || 1,
            pageCount: meta.value.si.last_page || 1,
            pageSize: meta.value.si.per_page || 15,
            itemCount: meta.value.si.total || 0,
            pageSizes: [15, 50, 100],
            showSizePicker: true,
            prefix({ itemCount }) {
                return `Всего карт ${itemCount}.`
            },
            onUpdatePage: (page) => {
                handlePageChange(page)
            },
            onUpdatePageSize: handlePageSizeChange
        }
    } else {
        return {
            page: meta.value.mis.current_page || 1,
            pageCount: meta.value.mis.last_page || 1,
            pageSize: meta.value.mis.per_page || 15,
            itemCount: meta.value.mis.total || 0,
            pageSizes: [15, 50, 100],
            showSizePicker: true,
            prefix({ itemCount }) {
                return `Всего карт ${itemCount}.`
            },
            onUpdatePage: (page) => {
                handlePageChange(page)
            },
            onUpdatePageSize: handlePageSizeChange
        }
    }
})

const onCloseWithoutSave = () => {
    selectedPatientId.value = null
}

const onUpdateHistory = ({data, patientId}) => {
    console.log(data)
    if (dataTable.value.length > 0) {
        let needUpdateItem = dataTable.value.findIndex(itm => itm.id === patientId)
        dataTable.value[needUpdateItem] = {
            ...dataTable.value[needUpdateItem],
            status: data.status
        }
    }
}

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

<template>
    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="dataTable" />
    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" @history-updated="onUpdateHistory" @close-without-save="onCloseWithoutSave" />
</template>

<style scoped>

</style>
