<script setup>
import store from '@/store';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const patientId = route.params.patient_id;
const appointmentId = route.params.id;
const notes = ref([]);
const historyNotes = computed(async () => {
    store.dispatch('updateIsLoading', true)
    // console.log('...........', patientId, appointmentId);
    await store.dispatch('getHistoryPatientNotes', {
        patient_id: patientId,
        appointment_id: appointmentId,
    })
    // notes.value = store.getters.getPatientNotes;
    let notesData = store.getters.getPatientNotes;
    for (let data of notesData) {
        if (data.note_type == 'Notes') {
            let dataObject = {}
            dataObject.file_url = data.file_url
            dataObject.note = data.note
            dataObject.doctor = data.telemedPro.name
            dataObject.date = formatDateDate(data.created_at)
            dataObject.id = data.id
            notes.value.push(dataObject)
        }
    }
    notes.value.sort((a, b) => {
        return b.id - a.id;
    });
    // console.log("getHistoryNotes", notes.value);
    store.dispatch('updateIsLoading', false)
});
const formatDateDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    };
    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
};
const downloadFile = (fileUrl) => {
    const link = document.createElement('a');
    link.href = fileUrl;

    // Optional: Provide a filename; defaults to the last segment of the path if omitted
    link.download = 'noteFile.png';

    // Append link to the body, click it, and then remove it
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
</script>

<template>
    <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VList class="pb-0" lines="two" v-if="historyNotes">
        <template v-if="notes.length > 0" v-for="(p_note, index) of notes" :key="index">
            <VListItem class="pb-0" border>
                <VListItemTitle>
                    <span class="pb-0">{{ p_note.note }}</span>
                    <span v-if="p_note.file_url" style="font-size: 12px;float: right;">
                        <a type="button" @click="downloadFile(p_note.file_url)">
                            <VIcon>mdi-file-image</VIcon>
                        </a>
                    </span>
                    <p class="text-start fs-5 mb-0 pb-0 text-grey">
                        <small> {{ p_note.doctor }}</small>
                    </p>
                    <p class="text-end fs-5 mb-0 pb-0 text-grey"><small> {{ p_note.date }}</small></p>
                </VListItemTitle>
            </VListItem>
            <VDivider v-if="index !== notes.length - 1" />
        </template>
        <template v-else>
            <VCard>
                <VAlert border="start" color="rgb(var(--v-theme-yellow))" variant="tonal">
                    <div class="text-center">No data found</div>
                </VAlert>

            </VCard>
        </template>
    </VList>
</template>
