<script setup>
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter()
const route = useRoute()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const appointmentId = ref('');
const defaultItem = ref({
  id: -1,
  avatar: '',
  name: '',
  email: '',
  dob: '',
  phone_no: '',

})

const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientMeetingList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
  {
    text: 'Active',
    value: 1,
  },
  {
    text: 'InActive',
    value: 2,
  },
  
]

const refVForm = ref(null)

onBeforeMount(async () => {});
onMounted(async () => {});
onUnmounted(async () => {});

// headers
const headers = [
{
    title: 'Appiontment Id',
    key: 'id',
  },
  {
    title: 'Patient',
    key: 'patient_name',
  },
  { key: 'appointment_date', sortable: false, title: 'Date' },
    { key: 'start_time', title: 'Start Time' },
    { key: 'end_time', title: 'End Time' },
    { key: 'duration', title: 'Duration' },
  
 
  // {
  //   title: 'ACTIONS',
  //   key: 'actions',
  // },
]



const getPatientMeetingList = computed(async () => {
  patientMeetingList.value = [];
  store.dispatch('updateIsLoading', true)
  await store.dispatch('patientMeetingList', {
    id: route.params.id
  })
  console.log('patientMeetingList',store.getters.getPatientMeetingList)
    let list = store.getters.getPatientMeetingList
    store.dispatch('updateIsLoading', false)
    patientMeetingList.value = list
    return patientMeetingList.value
});

onMounted(() => {
 

})
</script>

<template>
    
  <v-row>
    <v-col cols="12" md="12" v-if="getPatientMeetingList">
      <VCard title="Meetings">
      <VCardText >
          <VRow>
            <VCol
              cols="12"
              offset-md="8"
              md="4"
            >
              <VTextField
                v-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
          </VRow>
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="patientMeetingList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
      <template #item.id="{ item }">
      {{ item.id }}
      </template>
        
        <!-- Actions -->
        <template #item.actions="{ item }">
          <div class="d-flex gap-1">
            
          </div>
        </template>
      </VDataTable>
    </VCard>  
    </v-col>
  </v-row>

  <!-- 👉 Delete Dialog  -->
  
</template>
