<script setup>
import {NCard, NFlex, NAlert, NCollapse, NCollapseItem, NTabPane, NTabs} from 'naive-ui'
import ReportSectionItem from "./ReportSectionItem.vue";
import {computed} from "vue";
import {useReportStore} from "../../../Stores/report.js";
import {storeToRefs} from "pinia";
import ReportSectionHeader from "./ReportSectionHeader.vue";

const props = defineProps({
    mode: {
        type: String,
        default: 'fillable' // 'fillable', 'readonly'
    }
})

const reportStore = useReportStore()
const {patientsData} = storeToRefs(reportStore)

const handleItemDragged = (event) => {
    // console.log('Начато перетаскивание:', event)
}

// Обработка события drop
const handleItemDropped = (event) => {
    const { item, fromStatus, toStatus } = event

    console.log(event)

    // Добавляем в целевую таблицу
    if (toStatus && patientsData.value[toStatus]) {
        // Проверяем, нет ли уже такого элемента
        if (!patientsData.value[toStatus].some(i => i.id === item.id)) {
            patientsData.value[toStatus].push(item)
        }
    }
}

const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
</script>

<template>
    <NCard>
        <NCollapse>
            <NCollapseItem name="1">
                <template #header>
                    <ReportSectionHeader title="Планово" status="plan" />
                </template>
                <ReportSectionItem status="plan"
                                   :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                   is-draggable
                                   @item-dragged="handleItemDragged"
                />
            </NCollapseItem>
            <NCollapseItem name="2">
                <template #header>
                    <ReportSectionHeader title="Экстренно" status="emergency" />
                </template>
                <ReportSectionItem status="emergency"
                                   :accent-ids="reportStore.reportInfo?.department?.recipientIds"
                                   is-draggable
                                   @item-dragged="handleItemDragged"
                />
            </NCollapseItem>
            <NCollapseItem name="3">
                <template #header>
                    <ReportSectionHeader title="Находятся на контроле" status="observation" />
                </template>
                <NFlex :size="12">
                    <ReportSectionItem status="observation"
                                       @item-dragged="handleItemDragged"
                                       @item-dropped="handleItemDropped"
                                       is-removable
                    />
                    <NAlert v-if="isFillableMode" type="info" class="w-full">
                        Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение
                    </NAlert>
                </NFlex>
            </NCollapseItem>
            <NCollapseItem name="4">
                <template #header>
                    <ReportSectionHeader title="Выбывшие" status="outcome" />
                </template>
                <NTabs type="segment" animated>
                    <NTabPane name="transferred">
                        <template #tab>
                            <ReportSectionHeader title="Переведённые" status="outcome-transferred" />
                        </template>
                        <ReportSectionItem status="outcome-transferred"
                                           @item-dragged="handleItemDragged"
                                           @item-dropped="handleItemDropped"
                        />
                    </NTabPane>
                    <NTabPane name="discharged">
                        <template #tab>
                            <ReportSectionHeader title="Выписанные" status="outcome-discharged" />
                        </template>
                        <ReportSectionItem status="outcome-discharged"
                                           @item-dragged="handleItemDragged"
                                           @item-dropped="handleItemDropped"
                        />
                    </NTabPane>
                    <NTabPane name="deceased">
                        <template #tab>
                            <ReportSectionHeader title="Умершие" status="outcome-deceased" />
                        </template>
                        <ReportSectionItem status="outcome-deceased"
                                           @item-dragged="handleItemDragged"
                                           @item-dropped="handleItemDropped"
                        />
                    </NTabPane>
                </NTabs>
            </NCollapseItem>
        </NCollapse>
    </NCard>
</template>

<style scoped>

</style>
