<script setup>
import {NCard, NFlex, NAlert, NCollapse, NCollapseItem} 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"
                                   @item-dragged="handleItemDragged"
                />
            </NCollapseItem>
            <NCollapseItem name="2">
                <template #header>
                    <ReportSectionHeader title="Экстренно" status="emergency" />
                </template>
                <ReportSectionItem status="emergency"
                                   @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"
                    />
                    <NAlert v-if="isFillableMode" type="info" class="w-full">
                        Перетаскивайте строки из верхних таблиц, что бы добавить в наблюдение
                    </NAlert>
                </NFlex>
            </NCollapseItem>
            <NCollapseItem name="4">
                <template #header>
                    <ReportSectionHeader title="Умершие" status="deceased" />
                </template>
                <ReportSectionItem status="deceased"
                                   @item-dragged="handleItemDragged"
                                   @item-dropped="handleItemDropped"
                />
            </NCollapseItem>
        </NCollapse>
    </NCard>
</template>

<style scoped>

</style>
