<script setup>
import AppLayout from "../../Layouts/AppLayout.vue";
import {useReportStore} from "../../Stores/report.js";
import {h, onMounted, ref, watch} from "vue";
import {useAuthStore} from "../../Stores/auth.js";
import {NCard, NFlex, NNumberAnimation, NStatistic, NTabPane, NTabs, NTag} from "naive-ui";
import DatePickerQuery from "../../Components/DatePickerQuery.vue";
import AppPanel from "../../Components/AppPanel.vue";
import AppContainer from "../../Components/AppContainer.vue";
import PatientTypeSection from "./Components/PatientSection.vue";
import PatientTypeSectionItem from "./Components/PatientSectionItem.vue";
import PatientDataTable from "./Components/PatientDataTable.vue";
import {format, formatDistanceStrict} from 'date-fns';
import { ru } from 'date-fns/locale';
import TooltipColumn from "./Components/DataTableColumns/TooltipColumn.vue";
import ActionsColumn from "./Components/DataTableColumns/ActionsColumn.vue";
import OperationsColumn from "./Components/DataTableColumns/OperationsColumn.vue";
import ReportWidget from "./Components/ReportWidget.vue";
import OperationInfoModal from "./Components/OperationInfoModal.vue";

const props = defineProps({
    department: {
        type: Object,
        default: {}
    },
    report: {
        type: Object,
        default: {}
    },
    metrikaItems: {
        type: Array,
        default: []
    },
    patients: {
        type: Object,
        default: () => ({})
    },

    inDepartmentHistories: {
        type: Object,
        default: { data: [] }
    },
    plannedHistories: {
        type: Object,
        default: { data: [] }
    },
    emergencyHistories: {
        type: Object,
        default: { data: [] }
    },
    recipientHistories: {
        type: Object,
        default: { data: [] }
    },
    dischargedHistories: {
        type: Object,
        default: { data: [] }
    },
    deceasedHistories: {
        type: Object,
        default: { data: [] }
    },
    transferredHistories: {
        type: Object,
        default: { data: [] }
    },
    reanimationHistories: {
        type: Object,
        default: { data: [] }
    },
    dates: {
        type: Array,
        default: []
    }
})

const reportStore = useReportStore()
const authStore = useAuthStore()
const userDepartment = authStore.userDepartment
const loading = ref(false)
const operationsInModal = ref(null)
const showOperationsModal = ref(false)

const columns = [
    {
        title: 'ФИО',
        key: 'full_name',
        width: 280
    },
    {
        title: 'Возраст',
        key: 'birth_date',
        render: (row) => formatDistanceStrict(new Date(row.birth_date), new Date(), { locale: ru }),
        width: 75,
    },
    {
        title: 'Д/р',
        key: 'birth_date',
        minWidth: 94,
        maxWidth: 100,
        width: 94,
        resizable: false,
        render: (row) => format(new Date(row.birth_date), 'dd.MM.yyyy')
    },
    {
        title: 'Д/п',
        key: 'latest_migration.ingoing_date',
        minWidth: 134,
        maxWidth: 144,
        width: 134,
        resizable: false,
        render: (row) => format(new Date(row.latest_migration.ingoing_date), 'dd.MM.yyyy HH:mm')
    },
    {
        title: 'Диагноз',
        key: 'latest_migration.diagnosis_code',
        width: 75,
        resizable: false,
        render: (row) => h(TooltipColumn, { triggerText: row.latest_migration.diagnosis_code, contentText: row.latest_migration.diagnosis_name })
    },
    {
        title: 'Операции',
        key: 'latest_migration.operations',
        width: 140,
        className: 'relative',
        render: (row) => h(OperationsColumn, { operations: row.latest_migration.operations, onClick: (operations) => onShowOperationsModal(operations) })
    },
    {
        title: '',
        key: 'actions',
        align: 'end',
        render: (row) => {
            return h(
                ActionsColumn,
                {
                    row: row,
                    isMis: true
                }
            )
        }
    }
]

const onShowOperationsModal = (operations) => {
    operationsInModal.value = operations
    showOperationsModal.value = true
}

const syncPageProps = () => reportStore.initializeFromPage(props)

onMounted(syncPageProps)

watch(() => props, (newProps) => {
    reportStore.initializeFromPage(newProps)
}, {
    deep: true,
    immediate: true
})
</script>

<template>
    <AppLayout>
<!--        <template #headerSuffix>-->
<!--            <StatisticRecipientPlanOfYear :plan="reportStore.reportInfo.department.recipientPlanOfYear" :progress="reportStore.reportInfo.department.progressPlanOfYear" />-->
<!--        </template>-->
<!--        <ReportForm :mode />-->

        <AppContainer>
            <AppPanel>
                <NFlex justify="space-between" align="center">
                    <NTag type="info" :bordered="false">
                        {{ userDepartment.name_full }}
                    </NTag>
                    <DatePickerQuery :date="dates" :is-head-or-admin="true" class="text-lg!" />
                </NFlex>
            </AppPanel>
            <div class="grid grid-cols-[1fr_auto] gap-x-2">
                <AppPanel>
                    <NFlex justify="space-between" align="center">

                    </NFlex>
                </AppPanel>
                <NFlex :wrap="false" :size="8">
                    <ReportWidget :to="deceasedHistories.data.length">
                        Умерло
                    </ReportWidget>
                    <ReportWidget :to="deceasedHistories.data.length">
                        <NSpace vertical :size="0">
                            <div>Летальность</div>
                            <div>%</div>
                        </NSpace>
                    </ReportWidget>
                    <ReportWidget :to="deceasedHistories.data.length">
                        <NSpace vertical :size="0">
                            <div>Операций</div>
                            <div>Э / П</div>
                        </NSpace>
                    </ReportWidget>
                </NFlex>
            </div>
            <AppPanel>
              <NTabs type="segment">
                  <NTabPane name="mis" tab="МИС">
                      <PatientTypeSection>
                          <PatientTypeSectionItem label="Планово" :counter="plannedHistories.data.length">
                              <PatientDataTable :data="plannedHistories.data" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Экстренно" :counter="emergencyHistories.data.length">
                              <PatientDataTable :data="emergencyHistories.data" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Находятся на контроле" :counter="recipientHistories.data.length">
                              <PatientDataTable :data="recipientHistories.data" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Находятся в реанимации" :counter="reanimationHistories.data.length">
                              <PatientDataTable :data="reanimationHistories.data" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Выбывшие" :counter="dischargedHistories.data.length + deceasedHistories.data.length">
                              <NTabs type="segment" animated>
                                  <NTabPane name="1" :tab="`Выписанные (${dischargedHistories.data.length})`">
                                      <PatientDataTable :data="dischargedHistories.data" :columns="columns" />
                                  </NTabPane>
                                  <NTabPane name="2" :tab="`Умершие (${deceasedHistories.data.length})`">
                                      <PatientDataTable :data="deceasedHistories.data" :columns="columns" />
                                  </NTabPane>
                                  <NTabPane name="3" :tab="`Переведенные (${transferredHistories.data.length})`">
                                      <PatientDataTable :data="transferredHistories.data" :columns="columns" />
                                  </NTabPane>
                              </NTabs>
                          </PatientTypeSectionItem>
                      </PatientTypeSection>
                  </NTabPane>
                  <NTabPane name="nurse" tab="Мед. сестра">
                      <PatientTypeSection>
                          <PatientTypeSectionItem label="Планово" :counter="plannedHistories.length">
                              <PatientDataTable :data="plannedHistories" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Экстренно" :counter="emergencyHistories.length">
                              <PatientDataTable :data="emergencyHistories" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Поступившие" :counter="recipientHistories.length">
                              <PatientDataTable :data="recipientHistories" :columns="columns" />
                          </PatientTypeSectionItem>
                          <PatientTypeSectionItem label="Выбывшие" :counter="recipientHistories.length">
                              <NTabs type="segment" animated>
                                  <NTabPane name="1" tab="Выписанные">
                                      <PatientDataTable :data="recipientHistories" :columns="columns" />
                                  </NTabPane>
                                  <NTabPane name="2" tab="Умершие">
                                      <PatientDataTable :data="recipientHistories" :columns="columns" />
                                  </NTabPane>
                                  <NTabPane name="3" tab="Переведенные">
                                      <PatientDataTable :data="recipientHistories" :columns="columns" />
                                  </NTabPane>
                              </NTabs>
                          </PatientTypeSectionItem>
                      </PatientTypeSection>
                  </NTabPane>
              </NTabs>
            </AppPanel>
        </AppContainer>
    </AppLayout>
    <OperationInfoModal :operations="operationsInModal" v-model:show="showOperationsModal" />
</template>
