<script setup>
import {NModal, NThing, NTag, NButton, NSpace, NDrawer, NDrawerContent, NInput} 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";

const props = defineProps({
    historyId: {
        type: Number,
        required: true
    }
})

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

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

watch(() => props.historyId, (value) => {
    console.log(value)
    axios.get(`/api/mis/operations`, {
        params: {
            historyId: value
        }
    })
        .then(response => {
            operations.value = response.data
        })
})
</script>

<template>
    <NModal v-model:show="show"
            title="Операции"
            :mask-closable="false"
            class="max-w-xl overflow-clip min-h-[420px] max-h-[600px]"
            preset="card"
            id="modal-operation"
    >
        <div class="h-full flex flex-col gap-y-4">
            <NThing v-for="operation in operations">
                <template #header>
                    Операция №{{operation.num}}
                </template>
                <template #header-extra>
                    <NTag size="small" type="info" round :bordered="false">
                        <template #icon>
                            <TbClockCheck size="16" />
                        </template>
                        {{operation.duration}} мин.
                    </NTag>
                </template>
                <template #description>
                    <NSpace align="center" size="small">
                        <NTag type="success" round :bordered="false">
                            <template #icon>
                                <TbCalendar size="18" />
                            </template>
                            {{format(operation.startAt, 'dd.MM.yyyy')}}
                        </NTag>
                        <NTag type="success" round :bordered="false">
                            <template #icon>
                                <TbTag size="18" />
                            </template>
                            {{operation.service.ServiceMedicalCode}}
                        </NTag>
                    </NSpace>
                </template>
                {{operation.service.ServiceMedicalName}}
                <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.num}}
                </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>
