<template>
    <div>
        <BreadCrumb></BreadCrumb>
        <div class="card mg-b-20">
            <div class="card-body">
                <div class="panel panel-primary tabs-style-2">
                    <div class="tab-menu-heading">
                        <div class="tabs-menu1">
                            <!-- Tabs -->
                            <ul class="nav panel-tabs main-nav-line">
                                <li>
                                    <a href="#tabMonitor" @click="setActiveTab(1)"
                                        :class="{ 'active': activeTab === 1 }" class="nav-link me-1"
                                        data-bs-toggle="tab">Theo dõi
                                        triển khai</a>
                                </li>
                                <li>
                                    <a href="#tabPickup" @click="setActiveTab(2)" :class="{ 'active': activeTab === 2 }"
                                        class="nav-link me-1" data-bs-toggle="tab">Lấy hàng</a>
                                </li>
                                <li>
                                    <a href="#tabDelivery" @click="setActiveTab(3)"
                                        :class="{ 'active': activeTab === 3 }" class="nav-link me-1"
                                        data-bs-toggle="tab">Giao hàng</a>
                                </li>
                                <li>
                                    <a href="#tabInbound" @click="setActiveTab(5)"
                                        :class="{ 'active': activeTab === 5 }" class="nav-link me-1"
                                        data-bs-toggle="tab">Nhập hàng</a>
                                </li>
                                <li>
                                    <a href="#tabTransit" @click="setActiveTab(4)"
                                        :class="{ 'active': activeTab === 4 }" class="nav-link me-1"
                                        data-bs-toggle="tab">Xuất hàng</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body tabs-menu-body main-content-body-right border">
                        <div class="tab-content">
                            <div v-if="activeTab === 1" :class="{ 'active': activeTab === 1 }" class="tab-pane"
                                id="tabMonitor">
                                <Monitor></Monitor>
                            </div>
                            <div v-if="activeTab === 2" :class="{ 'active': activeTab === 2 }" class="tab-pane "
                                id="tabPickup">
                                <Pickup></Pickup>
                            </div>
                            <div v-if="activeTab === 3" :class="{ 'active': activeTab === 3 }" class="tab-pane"
                                id="tabDelivery">
                                <Delivery></Delivery>
                            </div>
                            <div v-if="activeTab === 4" :class="{ 'active': activeTab === 4 }" class="tab-pane"
                                id="tabTransit">
                                <Transit>
                                </Transit>
                            </div>
                            <div v-if="activeTab === 5" :class="{ 'active': activeTab === 5 }" class="tab-pane"
                                id="tabInbound">
                                <Inbound>
                                </Inbound>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
<script setup>
import { ref } from 'vue';

//#region Components
import BreadCrumb from './components/breadcrumb.vue';
import Pickup from './pickup/index.vue';
import Delivery from './delivery/index.vue';
import Transit from './transit/index.vue';

import Inbound from './inbound/index.vue';
import Monitor from './monitor/index.vue';
//#endregion

const activeTab = ref(1);


const setActiveTab = (id) => {
    activeTab.value = id;
    console.log('vao setactivetab');
};

</script>