<template>
    <div class="order-container">
        <!-- <OrderHome /> -->
        <!-- <OrderDetails /> -->
        <KeepAlive>
            <component
                :orderId="orderId"
                :is="isComponents"
                :orderStatus="orderStatus"
                @onBackOrderHome="onBackOrderHome"
                @onOpenOrderDetails="onOpenOrderDetails"
            />
        </KeepAlive>
    </div>
</template>

<script setup lang="ts">
import OrderHome from './components/order-home.vue'
import OrderDetails from './components/order-details.vue'
const isComponents = ref<any>(OrderHome)
const orderStatus = ref<any>()
const orderId = ref<any>()
const onBackOrderHome = () => {
    isComponents.value = OrderHome
}
const onOpenOrderDetails = (status: any, id: any) => {
    orderStatus.value = status
    orderId.value = id
    isComponents.value = OrderDetails
}
</script>

<style lang="scss" scoped>
.order-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>
