<script setup>
import store from '@/store';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const getHistory = ref([]);
const doctorAppiontments = ref([]);
const selectedFilter = ref(null);
onMounted(async () => {
    await store.dispatch('getHistory')
    getHistory.value = store.getters.getHistory.history;
    console.log("getHistory", getHistory.value);
    store.dispatch('updateIsLoading', false)
})

const filter = [
    {
        value: 'This Month',
        key: 'current_month'
    },
    {
        value: 'Past Month',
        key: '1_month'
    },
    {
        value: 'Past 2 Month from today',
        key: '2_months'
    },
    {
        value: 'Past 3 Month from today',
        key: '3_months'
    },
    {
        value: 'Past 6 Month from today',
        key: '6_months'
    },
    {
        value: 'Past 12 Month from today',
        key: '12_months'
    },

    {
        value: 'All Time',
        key: 'all_time'
    },
];

const handleDateInput = async () => {
    getHistory.value = [];
    await store.dispatch('getHistoryFilter', {
        filter: selectedFilter.value,
    })
    getHistory.value = store.getters.getHistoryFilter.patients;
    console.log("getHistoryFilter", getHistory.value);
    store.dispatch('updateIsLoading', false)
}

const search = ref('');
const headers = [
    { align: 'start', key: 'name', title: 'Name' },
    { key: 'description', title: 'Description' },
    { key: 'price', title: 'Price' },
    { key: 'image', title: 'Image' },
    { key: 'status', title: 'Status' },
];

// const formattedAppointments = computed(() => {
//     return getHistory.value.map(getHistory => ({
//         ...getHistory,
//         // patient_name: getFullName(appointment.first_name, appointment.last_name),
//     }));
// });

function getFullName(firstName, lastName) {
    // You may need to adjust this function based on your actual data structure
    // For example, if you have separate first name and last name properties in each appointment object
    return firstName + ' ' + lastName; // For now, just return the first name
}

// const filteredDesserts = computed(() => {
//     // Perform filtering based on the search term
//     return getHistory.value.filter(history =>
//     history.start_time.toLowerCase().includes(search.value.toLowerCase())
//     );
// });
</script>
<template>
    <VRow>
        <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>
        <VCol cols="12">
            <VCard title="Preceptions">
                <v-card flat>
                    <v-card-title class="d-flex align-center pe-2">
                        <!-- <v-select label="April(Month to date)" v-model="selectedFilter" :items="filter"
                            item-title="value" item-value="key" @update:modelValue="handleDateInput"></v-select> -->
                        <!-- <v-text-field v-model="search" prepend-inner-icon="mdi-magnify" density="compact" label="Search"
                            single-line flat hide-details variant="solo-filled"></v-text-field> -->
                        <v-spacer></v-spacer>
                        <v-spacer></v-spacer>
                        <v-spacer></v-spacer>
                    </v-card-title>

                    <v-data-table :headers="headers" :items="getHistory">
                    </v-data-table>

                </v-card>

            </VCard>
        </VCol>

    </VRow>

</template>
