<script setup>
import { ref } from 'vue'
import {useVueFlow, VueFlow} from '@vue-flow/core'
import AppLayout from "../../Layouts/AppLayout.vue";

const props = defineProps({
    path: {
        type: Object,
        default: {}
    }
})


const elements = ref([
    // Ноды (блоки)
    {
        id: '1',
        type: 'input',
        label: 'Поступление',
        position: { x: 100, y: 50 },
        data: {
            patient: 'Иванов И.И.',
            time: '09:00',
            status: 'arrival'
        },
        class: 'node-arrival'
    },
    {
        id: '2',
        label: 'Первичный осмотр',
        position: { x: 300, y: 50 },
        data: {
            doctor: 'Петров П.П.',
            diagnosis: 'Предварительный',
            duration: '30 мин'
        },
        class: 'node-examination'
    },
    {
        id: '3',
        label: 'Анализы',
        position: { x: 500, y: 50 },
        data: {
            tests: ['Кровь', 'Моча', 'УЗИ'],
            lab: 'Лаборатория №1'
        },
        class: 'node-tests'
    },
    {
        id: '4',
        label: 'Лечение',
        position: { x: 300, y: 200 },
        data: {
            procedures: ['Капельница', 'Уколы'],
            ward: 'Палата 304'
        },
        class: 'node-treatment'
    },
    {
        id: '5',
        type: 'output',
        label: 'Выписка',
        position: { x: 100, y: 350 },
        data: {
            outcome: 'Выздоровление',
            date: '2024-01-15'
        },
        class: 'node-discharge'
    },
])

const edges = ref([
    { id: 'e1-2', source: '1', target: '2', label: 'Направлен' },
    { id: 'e2-3', source: '2', target: '3', label: 'На анализы' },
    { id: 'e3-4', source: '3', target: '4', label: 'Результаты' },
    { id: 'e4-5', source: '4', target: '5', label: 'Завершено' }
])
</script>

<template>
    <AppLayout>
        <div class="h-[calc(100vh-48px)]">
            <VueFlow v-model:nodes="elements" v-model:edges="edges" :fit-view-on-init="true">
                <template #node-custom="{ data, label }">
                    <div class="patient-node">
                        <div class="node-icon">
                            <span v-if="data.status === 'arrival'">🏥</span>
                            <span v-else-if="data.doctor">👨‍⚕️</span>
                            <span v-else-if="data.tests">🧪</span>
                            <span v-else-if="data.procedures">💉</span>
                            <span v-else>✅</span>
                        </div>
                        <div class="node-info">
                            <strong>{{ label }}</strong>
                            <div v-if="data.patient" class="patient-name">
                                {{ data.patient }}
                            </div>
                            <div v-if="data.time" class="node-time">
                                ⏰ {{ data.time }}
                            </div>
                        </div>
                    </div>
                </template>
            </VueFlow>
        </div>
    </AppLayout>
</template>

<style scoped>
/* Цвета для разных типов нод */
.node-arrival { border-color: #4CAF50; }
.node-examination { border-color: #2196F3; }
.node-tests { border-color: #FF9800; }
.node-treatment { border-color: #9C27B0; }
.node-discharge { border-color: #607D8B; }
</style>
