<template>
    <div>
        <div class="breadcrumb-header justify-content-between">
            <div class="my-auto">
                <h4 class="page-title">Nghiệp vụ kho</h4>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Trang chủ</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Triển khai</li>
                </ol>
            </div>

        </div>

        <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="#tabGeneral" @click="setActiveTab(1)"
                                        :class="{ 'active': activeTab === 1 }" class="nav-link me-1"
                                        data-bs-toggle="tab">
                                        Tổng quan
                                    </a>
                                </li>
                                <li>
                                    <a href="#tabInbound" @click="setActiveTab(2)"
                                        :class="{ 'active': activeTab === 2 }" class="nav-link me-1"
                                        data-bs-toggle="tab">
                                        Nhập hàng
                                    </a>
                                </li>
                                <li>
                                    <a href="#tabOutbound" @click="setActiveTab(3)"
                                        :class="{ 'active': activeTab === 3 }" 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-show="activeTab === 1" :class="{ 'active': activeTab === 1 }" class="tab-pane"
                                id="tabMonitor">
                                Tổng quan
                            </div>
                            <div v-show="activeTab === 2" :class="{ 'active': activeTab === 2 }" class="tab-pane "
                                id="tabInbound" style="min-height: 300px;">

                                <Inbound></Inbound>
                            </div>
                            <div v-show="activeTab === 3" :class="{ 'active': activeTab === 3 }" class="tab-pane"
                                id="tabOutbound">
                                Nội dung xuất hàng
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

</template>
<script setup>
import { ref } from 'vue';
const activeTab = ref(1);



//#region Components
import Inbound from "./inbound.vue";
//#endregion


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

</script>