<script setup>
import {NDataTable} from 'naive-ui'
import AppLayout from "../../Layouts/AppLayout.vue";
import {ref} from "vue";

const props = defineProps({
    data: {
        type: Object,
        default: []
    }
})

const columns = ref([
    {
        title: 'Отделение',
        key: 'department',
        width: 240,
        titleAlign: 'center'
    },
    {
        title: 'Кол-во коек',
        key: 'beds',
        width: 60,
        titleAlign: 'center',
        align: 'center'
    },
    {
        title: 'Состояло',
        key: '',
        width: 84,
        titleAlign: 'center',
        align: 'center'
    },
    {
        title: 'Поступило',
        key: 'received',
        titleAlign: 'center',
        children: [
            {
                title: 'Всего',
                key: 'all',
                width: 60,
                titleAlign: 'center',
                align: 'center'
            },
            {
                title: 'План',
                key: 'plan',
                width: 60,
                titleAlign: 'center',
                align: 'center'
            },
            {
                title: 'Экстр',
                key: 'emergency',
                width: 60,
                titleAlign: 'center',
                align: 'center'
            },
            {
                title: 'Перевод',
                key: '',
                width: 84,
                titleAlign: 'center',
                align: 'center'
            },
        ]
    },
    {
        title: 'Выбыло',
        key: 'leave',
        width: 84,
        titleAlign: 'center',
        align: 'center'
    },
    {
        title: 'Состоит',
        key: 'consist',
        width: 84,
        titleAlign: 'center',
        align: 'center'
    },
    {
        title: '% загруженности',
        key: 'percentLoadedBeds',
        width: 84,
        titleAlign: 'center',
        align: 'center'
    },
    {
        title: 'Операции',
        key: '',
        titleAlign: 'center',
        children: [
            {
                title: 'Э',
                key: '',
                width: 60,
                titleAlign: 'center',
                align: 'center'
            },
            {
                title: 'П',
                key: '',
                width: 60,
                titleAlign: 'center',
                align: 'center'
            },
        ]
    },
])
</script>

<template>
    <AppLayout>
        <NDataTable :columns="columns"
                    :data="data"
                    size="small"
                    :single-line="false"
                    striped
                    min-height="calc(100vh - 48px - 70px)"
                    max-height="calc(100vh - 48px - 70px)"
        >

        </NDataTable>
    </AppLayout>
</template>

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