<script setup>
import {
    NDataTable,
    NFlex,
    NText,
    NDivider,
    NBadge,
    NIcon,
    NPopover,
    NTag,
    NSpace,
    NButton,
    NNumberAnimation
} from 'naive-ui'
import AppLayout from "../../Layouts/AppLayout.vue";
import {h, ref} from "vue";
import DatePickerQuery from "../../Components/DatePickerQuery.vue";
import {Link, router, usePage} from "@inertiajs/vue3";
import {TbAlertCircle, TbEye, TbBuildingSkyscraper} from "vue-icons-plus/tb";
import {PiMicrosoftExcelLogo} from "vue-icons-plus/pi";
import ModalUnwantedEvents from "./Components/ModalUnwantedEvents.vue";
import ModalObservablePatients from "./Components/ModalObservablePatients.vue";
import StatisticRecipientPlanOfYear from "../../Layouts/Components/Statistic/StatisticRecipientPlanOfYear.vue";
import {percentType} from "../../Utils/numbers.js";
import OutcomeColumn from "./Components/OutcomeColumn.vue";
import ModalDeathPatients from "./Components/ModalDeathPatients.vue";
import DeceasedColumn from "./Components/DeceasedColumn.vue";

const props = defineProps({
    data: {
        type: Object,
        default: []
    },
    isHeadOrAdmin: {
        type: Boolean
    },
    date: {
        type: [Number, Array]
    },
    isOneDay: {
        type: Boolean
    },
    recipientPlanOfYear: {
        type: Object,
        default: {}
    }
})

const columns = ref([
    {
        title: 'Отделение',
        key: 'department',
        width: 200,
        titleAlign: 'center',
        cellProps: (row) => ({
            style: '--n-merged-td-color: var(--n-merged-th-color); --n-merged-td-color-striped: var(--n-merged-th-color); --n-td-text-color: var(--color-zinc-400); --n-th-text-color: var(--color-zinc-400);'
        }),
        colSpan: (row) => row.colspan,
        render(row) {
            if (row.isGroupHeader) {
                return h(NFlex, {
                    align: "center",
                    justify: "center"
                }, h(NText, { style: 'font-weight: 600; color: var(--color-zinc-400)' }, row.groupName))
            }

            if (row.isTotalRow) {
                return row.department
            }

            // Получаем текущие query параметры
            const { url } = usePage()
            const currentUrl = new URL(url, window.location.origin)
            const searchParams = currentUrl.searchParams

            // Берем startAt и endAt из текущего URL
            const propsStartAt = Array.isArray(props.date) ? props.date[0] : props.date
            const propsEndAt = Array.isArray(props.date) ? props.date[1] : props.date
            const startAt = searchParams.get('startAt') ?? propsStartAt
            const endAt = searchParams.get('endAt') ?? propsEndAt

            const reportHref = buildReportHref(row.department_id, startAt, endAt)

            return h(NFlex, {align: 'center', justify: 'start'}, [
                h(NBadge, {
                    dot: true,
                    type: row.isReportToday ? 'success' : 'error'
                }),
                h(Link, {
                    href: reportHref,
                    class: 'underline decoration-dashed'
                }, row.department),
                h(NSpace, {align: 'center', size: 'small'}, [
                    h(NPopover, {
                        trigger: 'hover',
                    }, {
                        trigger: h(NTag, {
                            round: true,
                            size: 'small',
                            bordered: false,
                            class: 'cursor-pointer!',
                            onClick: () => onShowUnwantedEventsModal(row.department_id)
                        }, {
                            icon: h(NIcon, { }, {
                                default: () => h(TbAlertCircle)
                            }),
                            default: row.countUnwanted
                        }),
                        default: 'Нежелательные события'
                    }),
                    h(NPopover, {
                        trigger: 'hover',
                    }, {
                        trigger: h(NTag, {
                            round: true,
                            size: 'small',
                            bordered: false,
                            class: 'cursor-pointer!',
                            onClick: () => onShowObservablePatientsModal(row.department_id)
                        }, {
                            icon: h(NIcon, { }, {
                                default: () => h(TbEye)
                            }),
                            default: row.countObservable
                        }),
                        default: 'Пациенты на контроле'
                    }),
                ])
            ])
        }
    },
    {
        title: 'Кол-во коек',
        key: 'beds',
        width: 60,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: 'Поступило',
        key: 'recipients',
        titleAlign: 'center',
        children: [
            {
                title: 'Всего',
                key: 'recipients.all',
                width: 60,
                titleAlign: 'center',
                align: 'center',
            },
            {
                title: 'План',
                key: 'recipients.plan',
                width: 60,
                titleAlign: 'center',
                align: 'center',
            },
            {
                title: 'Экстр',
                key: 'recipients.emergency',
                width: 60,
                titleAlign: 'center',
                align: 'center',
            },
            {
                title: 'Перевод',
                key: 'recipients.transferred',
                width: 84,
                titleAlign: 'center',
                align: 'center',
            },
        ]
    },
    {
        title: 'Выбыло',
        key: 'outcome',
        width: 84,
        titleAlign: 'center',
        align: 'center',
        render(row) {
            return h(
                OutcomeColumn,
                {
                    isTotalRow: row.isTotalRow,
                    value: row.outcome,
                    plan: row.plan,
                }
            )
        }
    },
    {
        title: 'Состоит',
        key: 'consist',
        width: 84,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: 'Ср. койко-день',
        key: 'averageBedDays',
        width: 44,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: 'Пред. опер. койко-день',
        key: 'preoperativeDays',
        width: 82,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: '% загруженности',
        key: 'percentLoadedBeds',
        width: 78,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: '% летальности',
        key: 'lethality',
        width: 66,
        titleAlign: 'center',
        align: 'center',
    },
    {
        title: 'Операции',
        key: 'surgical',
        titleAlign: 'center',
        children: [
            {
                title: 'Э',
                key: 'surgical.emergency',
                width: 44,
                titleAlign: 'center',
                align: 'center',
            },
            {
                title: 'П',
                key: 'surgical.plan',
                width: 44,
                titleAlign: 'center',
                align: 'center',
            },
        ]
    },
    {
        title: 'Умерло',
        key: 'deceased',
        width: 48,
        titleAlign: 'center',
        align: 'center',
        cellProps: (row) => ({
            class: 'relative'
        }),
        render: (row) => {
            return h(
                DeceasedColumn,
                {
                    isTotalRow: row.isTotalRow,
                    value: row.deceased,
                    onOpenModal: () => onShowDeathPatientsModal()
                },
            )
        }
    },
    {
        title: 'Мед. персонал',
        key: 'countStaff',
        width: 54,
        titleAlign: 'center',
        align: 'center',
    },
])

const currentDepartmentId = ref(null)
const showUnwantedEventsModal = ref(false)
const showObservablePatientsModal = ref(false)
const showDeathPatientsModal = ref(false)

const onShowUnwantedEventsModal = (departmentId) => {
    currentDepartmentId.value = departmentId
    showUnwantedEventsModal.value = true
}
const onShowObservablePatientsModal = (departmentId) => {
    currentDepartmentId.value = departmentId
    showObservablePatientsModal.value = true
}
const onShowDeathPatientsModal = () => {
    showDeathPatientsModal.value = true
}

const rowProps = (row) => {
    if (row.isGroupHeader) return {
        style: `--n-merged-td-color: var(--n-merged-th-color)`
    }
    if (row.isTotalRow) return {
        style: `--n-merged-td-color: var(--n-merged-th-color);`
    }
}

const rowClassName = (row) => {
    if (row.isTotalRow)
        return `total-row`
}

const downloadReport = async () => {
    try {
        const response = await fetch(`/statistic/report?startAt=${props.date[0]}&endAt=${props.date[1]}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            },
        })

        if (!response.ok) {
            throw new Error('Ошибка загрузки файла')
        }

        const blob = await response.blob()
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = 'Статистика по отделениям.xlsx'
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
    } catch {
        // silent
    }
}

const buildReportHref = (departmentId, startAt, endAt) => {
    const params = new URLSearchParams()

    if (startAt !== null && startAt !== undefined && startAt !== '') {
        params.set('startAt', String(startAt))
    }

    if (endAt !== null && endAt !== undefined && endAt !== '') {
        params.set('endAt', String(endAt))
    }

    if (departmentId !== null && departmentId !== undefined && departmentId !== '') {
        params.set('departmentId', String(departmentId))
    }

    const query = params.toString()
    return query ? `/report?${query}` : '/report'
}
</script>

<template>
    <AppLayout>
        <template #headerExtra>
            <NSpace align="center">
                <DatePickerQuery :is-head-or-admin="isHeadOrAdmin" :is-show-current-date-switch="true" :date="date" :is-one-day="isOneDay" />
                <NDivider vertical />
                <Link :href="`/statistic/headquarters?startAt=${props.date[0]}&endAt=${props.date[1]}`">
                    <NButton type="primary" secondary>
                        <template #icon>
                            <TbBuildingSkyscraper />
                        </template>
                        Штаб
                    </NButton>
                </Link>
                <NButton type="info" secondary @click="downloadReport">
                    <template #icon>
                        <PiMicrosoftExcelLogo />
                    </template>
                    Сохранить в Excel
                </NButton>
            </NSpace>
        </template>
        <template #headerSuffix>
            <StatisticRecipientPlanOfYear :plan="recipientPlanOfYear.plan" :progress="recipientPlanOfYear.progress" />
        </template>
        <NDataTable :columns="columns"
                    :data="data"
                    size="small"
                    :single-line="false"
                    striped
                    table-layout="fixed"
                    min-height="calc(100vh - 48px - 70px)"
                    max-height="calc(100vh - 48px - 70px)"
                    :row-props="rowProps"
                    :row-class-name="rowClassName"
        >

        </NDataTable>
        <ModalUnwantedEvents v-model:open="showUnwantedEventsModal" :department-id="currentDepartmentId" />
        <ModalObservablePatients v-model:open="showObservablePatientsModal" :department-id="currentDepartmentId" />
        <ModalDeathPatients v-model:open="showDeathPatientsModal" />
    </AppLayout>
</template>

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

:deep(.n-data-table-th) {
    color: var(--color-zinc-400);
}

:deep(.total-row td) {
    --n-td-text-color: var(--n-th-icon-color-active);
    font-weight: 500;
}
</style>
