<script setup>
import NotesPanel from '@/pages/patients/NotesPanel.vue'
import PatienTabOverview from '@/pages/patients/PatienTabOverview.vue'
import PatientBioPanel from '@/pages/patients/PatientBioPanel.vue'
import PatientLabTest from '@/pages/patients/PatientLabTest.vue'
import PatientQuestionProfile from '@/pages/patients/PatientQuestionProfile.vue'
import PrescriptionPanel from '@/pages/patients/PrescriptionPanel.vue'

import { useStore } from 'vuex'
const patientDtail = ref(null);

const store = useStore();
const route = useRoute('apps-user-view-id')
const userTab = ref(null)

const tabs = [
  {
    icon: 'ri-group-line',
    title: 'Overview',
  },
  {
    icon: 'ri-lock-2-line',
    title: 'Notes',
  },
  {
    icon: 'ri-bookmark-line',
    title: 'Prescriptions',
  },
   {
    icon: 'ri-flask-line',
    title: 'Lab Test',
  },
  {
    icon: 'ri-survey-line',
    title: 'Profile',
  },
  // {
  //   icon: 'ri-link-m',
  //   title: 'Connections',
  // },
]
const getPatientDeatail = async () => {
  store.dispatch('updateIsLoading', true);
  await store.dispatch('patientDetial', { id: route.params.id });
  store.dispatch('updateIsLoading', false);

  let list = store.getters.getPatientDetail;
  patientDtail.value=list
  console.log(list.patient);
};
onMounted(async () => {
  await getPatientDeatail();
  
});
//const { data: userData } = await useApi(`/apps/users/${ route.params.id }`)
</script>

<template>
  <VRow v-if="patientDtail">
    <VCol
      cols="12"
      md="5"
      lg="4"
    >
      <PatientBioPanel :user-data="patientDtail" />
    </VCol>

    <VCol
      cols="12"
      md="7"
      lg="8"
    >
      <VTabs
        v-model="userTab"
        class="v-tabs-pill"
      >
        <VTab
          v-for="tab in tabs"
          :key="tab.icon"
        >
          <VIcon
            start
            :icon="tab.icon"
          />
          <span>{{ tab.title }}</span>
        </VTab>
      </VTabs>

      <VWindow
        v-model="userTab"
        class="mt-6 disable-tab-transition"
        :touch="false"
      >
        <VWindowItem>
          <PatienTabOverview :user-data="patientDtail"/>
        </VWindowItem>

        <VWindowItem>
          <NotesPanel :notes-data="patientDtail"/>
        </VWindowItem>

        <VWindowItem>
          <PrescriptionPanel :prescription-data="patientDtail"/>
        </VWindowItem>

       <VWindowItem>
          <PatientLabTest :user-data="patientDtail"/>
        </VWindowItem>

        <VWindowItem>
          <PatientQuestionProfile />
        </VWindowItem>

       
      </VWindow>
    </VCol>
  </VRow>
  <VCard v-else>
    <VCardTitle class="text-center">
      No User Found
    </VCardTitle>
  </VCard>
</template>
