<script setup>
import About from "@/pages/provider/patient-profile/About.vue";
import UserProfileHeader from "@/pages/provider/patient-profile/UserProfileHeader.vue";
import patienProfilePrecrption from "@/pages/provider/patient-profile/patienProfilePrecrption.vue";


import { onMounted, ref } from "vue";
import { useStore } from "vuex";
const route = useRoute();
const store = useStore();
const profileDataPatient = ref(null)
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    await store.dispatch("OrderPatientProfile", {
        id: route.params.id,
    });
    profileDataPatient.value = store.getters.getOrderPatientProfile;
    console.log('profileDataPatient', profileDataPatient.value);
    store.dispatch("updateIsLoading", false);
});

const userTab = ref(null);

const tabs = [
    {
        icon: "ri-user-line",
        title: "Profile",
    },

    {
        icon: "mdi-prescription",
        title: "Prescriptions",
    },
];
</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>
    <div v-if="profileDataPatient">
        <UserProfileHeader class="mb-5" :user-data="profileDataPatient.patient_details" style="margin-bottom: 10px;" />

        <VTabs v-model="userTab" class="v-tabs-pill mt-5">
            <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>
                <About :user-data="profileDataPatient" />
            </VWindowItem>

            <!--  <VWindowItem>
                <patientProfileNotes :order-data="profileDataPatient" />
            </VWindowItem>-->

            <VWindowItem>
                <patienProfilePrecrption :order-data="profileDataPatient" />
            </VWindowItem>
        </VWindow>

    </div>
</template>
