<script setup>
import {NModal, NThing, NTag, NButton, NSpace, NDrawer, NDrawerContent, NInput, NText} from "naive-ui";
import {ref, watch} from "vue";
import {TbClockCheck, TbCalendar, TbTag} from 'vue-icons-plus/tb'
import {format} from "date-fns";
import AppPanel from "../../../Components/AppPanel.vue";
import UrgencyBadge from "../../../Components/UrgencyBadge.vue";
import OperationUrgencyTag from "./Tags/OperationUrgencyTag.vue";

const props = defineProps({
    operations: Array,
    patient: Object
})

const show = defineModel('show')
const showInfoDrawer = ref(false)
const showedOperation = ref(null)

const onShowInfoDrawer = (operation) => {
    showedOperation.value = {...operation}
    showInfoDrawer.value = true
}
</script>

<template>
    <NModal v-model:show="show"
            :mask-closable="false"
            segmented
            class="max-w-xl overflow-clip h-[400px]"
            draggable
            content-scrollable
            preset="card"
            id="modal-operation"
    >
        <template #header>
            <NSpace vertical :size="1" class="text-base font-normal">
                <NText strong>
                    {{ patient.full_name ?? '' }}
                </NText>
                <NText depth="3" class="text-sm">
                    Проведенные операции
                </NText>
            </NSpace>
        </template>
        <div class="space-y-4">
            <NThing v-for="operation in operations">
                <template #header>
                    Операция №{{operation.number}}
                </template>
                <template #header-extra>
                    <NTag size="small" type="info" round :bordered="false">
                        <template #icon>
                            <TbClockCheck size="16" />
                        </template>
                         мин.
                    </NTag>
                </template>
                <template #description>
                    <NSpace align="center" size="small">
                        <NTag type="success" round :bordered="false" size="small">
                            <template #icon>
                                <TbCalendar size="16" />
                            </template>
                            {{format(operation.start_date, 'dd.MM.yyyy')}}
                        </NTag>
                        <NTag type="success" round :bordered="false" size="small">
                            <template #icon>
                                <TbTag size="16" />
                            </template>
                            {{operation.code_service}}
                        </NTag>
                        <OperationUrgencyTag :urgency-id="operation.urgent_status" size="small" />
                    </NSpace>
                </template>
                {{operation.name_service}}
                <template #action>
                    <NButton type="primary" size="small" @click="onShowInfoDrawer(operation)">
                        Просмотреть
                    </NButton>
                </template>
            </NThing>
        </div>
        <NDrawer v-model:show="showInfoDrawer" width="100%" height="100%" to="#modal-operation" placement="bottom">
            <NDrawerContent closable>
                <template #header>
                    Операция №{{showedOperation.number}}
                </template>
                <AppPanel no-padding header="Описание" class="h-full!">
                    <NInput type="textarea" :resizable="false" class="h-full!" readonly v-model:value="showedOperation.description" />
                </AppPanel>
            </NDrawerContent>
        </NDrawer>
    </NModal>
</template>

<style scoped>

</style>
