<template>
    <LoadingComponent :props="loading" />
    <OrderDetailsComponent :order="order" :orderItems="orderItems" :orderAddress="orderAddress" />
</template>
<script>

import LoadingComponent from "../components/LoadingComponent.vue";
import OrderDetailsComponent from "../components/OrderDetailsComponent.vue";
import { useMyOrderDetailsStore } from '../../../stores/myOrderDetails';
export default {
    name: "EmployeeOrderDetailsComponent",
    components: { LoadingComponent, OrderDetailsComponent },
    data() {
        return {
            loading: {
                isActive: false,
            },
            myOrderDetailsStore: useMyOrderDetailsStore()
        };
    },
    computed: {
        order: function () {
            return this.myOrderDetailsStore.orderDetails;
        },
        orderItems: function () {
            return this.myOrderDetailsStore.orderItems;
        },
        orderAddress: function () {
            return this.myOrderDetailsStore.orderAddress;
        },
    },
    mounted() {
        if (this.$route.params.id) {
            this.loading.isActive = true;
            this.myOrderDetailsStore.fetchOrderDetails({
                id: this.$route.params.id,
                orderId: this.$route.params.orderId
            }).then((res) => {
                this.loading.isActive = false;
            }).catch((error) => {
                this.loading.isActive = false;

            });
        }
    }
}
</script>