<script setup>
import { computed, onMounted, ref } from "vue";

import Notes from "@/pages/patient/OrderDetailNotes.vue";
import Prescription from "@/pages/patient/OrderDetailPrecrption.vue";

import OrderDetail from "@/pages/patient/orders-detail.vue";

const route = useRoute();
const isConfirmDialogVisible = ref(false);
const isUserInfoEditDialogVisible = ref(false);
const isEditAddressDialogVisible = ref(false);
const currentTab = ref("tab-1");

import { useStore } from "vuex";
const store = useStore();
const orderData = ref(null);
const pateintDetail = ref({});
const productItems = ref([]);
const userTab = ref(null);

const tabs = [
    {
        icon: "mdi-clipboard-text-outline",
        title: "Order Detail",
    },
    // {
    //     icon: "mdi-note-text-outline",
    //     title: "Notes",
    // },
    // {
    //     icon: "mdi-prescription",
    //     title: "Prescriptions",
    // },
];
const filteredOrders = computed(() => {
    let filtered = store.getters.getPatientOrderDetail;

    return filtered;
});
onMounted(async () => {
    store.dispatch("updateIsLoading", true);
    await store.dispatch("orderDetailPatient", {
        id: route.params.id,
    });
    orderData.value = store.getters.getPatientOrderDetail;
    console.log(orderData.value);
});
</script>
<template>
    <VTabs v-model="userTab" grow>
        <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>
            <OrderDetail />
        </VWindowItem>

        <VWindowItem>
            <Notes :order-data="orderData" />
        </VWindowItem>

        <VWindowItem>
            <Prescription :order-data="orderData" />
        </VWindowItem>
    </VWindow>
</template>
<style scoped>
.text-primary {
    color: rgb(var(--v-theme-yellow)) !important;
}

.text-primary span {
    color: rgb(var(--v-theme-yellow-theme-button)) !important;
}

.text-primary svg {
    color: rgb(var(--v-theme-yellow-theme-button)) !important;
}
</style>
