<script setup>
import { ref } from 'vue';

import axios from '@axios';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const appiontments = ref([]);
const queueNumber = ref();
const isDialogVisible = ref(false);
const isLoadingVisible = ref(true);
onMounted(() => {
  appiontments.value = [];
  const access_token = localStorage.getItem('access_token');
  axios.post('/agent/api/get-appointment-list', {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${access_token}`
    }
  })
    .then(response => {
      appiontments.value = response.data;
      // console.lg("appiontments",appiontments);
      isLoadingVisible.value = false;
    })
    .catch(error => {
      console.error(error);
      appiontments.value = [];
    });
})
const search = ref('');
const headers = [
  { key: 'appointment_id', title: 'ID' },
  { key: 'patient_name', title: 'Patient Name' },
  { key: 'appointment_time', title: 'Appionment Date' },
  { key: 'id', title: 'Action' },
];
const filteredDesserts = computed(() => {
  // Perform filtering based on the search term
  return appiontments.value.filter(dessert =>
    dessert.name.toLowerCase().includes(search.value.toLowerCase())
  );
});


const formattedAppointments = computed(() => {
  return appiontments.value.map(appointment => ({
    ...appointment,
    appointment_id: appointment.id,
    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
  console.log(firstName + ' ' + lastName)
  return firstName + ' ' + lastName; // For now, just return the first name
}

const openDialog = (item) => {

  localStorage.setItem('appiontment-id', item.id);
  router.push('/provider/patient-appointments-detail');

};

</script>
<template>
  <v-card flat>
    <v-card-title class="d-flex align-center pe-2">
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>

      <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-card-title>

    <v-data-table :headers="headers" :items="formattedAppointments" :search="search">
      <template #item.id="{ item }">
        <VBtn class="text-capitalize text-white" @click="openDialog(item)"> Detail</VBtn>
      </template>
    </v-data-table>
  </v-card>
</template>
