<script setup>
import {NDataTable, NEllipsis} from "naive-ui"
import {computed, h, reactive, ref} 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 } = useMedicalHistoryFilter(props.filters)

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: 'narhiv',
        width: 120,
        render: (row) => h(NEllipsis, null, { default: () => row.narhiv || '-' })
    },
    {
        title: 'Дата архива',
        key: 'datearhiv',
        width: 130,
        render: (row) => h(NEllipsis, null, { default: () => row.datearhiv })
    },
    {
        title: 'Статус',
        key: 'status',
        width: 100,
        render: (row) => h(NEllipsis, null, { default: () => row.status || '-' })
    }
])
const showArchiveHistoryModal = ref(false)
const selectedPatientId = ref(null)
const rowProps = (row) => ({
    onDblclick: () => {
        selectedPatientId.value = row.id
        showArchiveHistoryModal.value = true
    }
})

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

<template>
    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" />
</template>

<style scoped>

</style>
