<template>
  <div>
    <Header
      :tabs="headerTabs"
      v-model:active-tab="activeTabKey"
      :is-sidebar-collapsed="isSidebarCollapsed"
      :unread-notifications="unreadNotifications"
      @tab-change="handleTabChange"
      :headerSchema="headerSchema"
    />

    <component
      :is="currentComponent"
      v-if="currentComponent"
      :activeTabKey="activeTabKey"
    />
  </div>
</template>

<script setup>
definePageMeta({
  name: "DashboardBasePage",
  layout: "dashboard-layout",
});
import { ref, onMounted } from "vue";
import tabBarData from "@/json/tab-bar/data-entry/dataEntry.json";
import { defineAsyncComponent } from "vue";
const route = useRoute();

// State‌های Header
const isSidebarCollapsed = ref(false);
const unreadNotifications = ref(5);
const headerTabs = ref([]);
headerTabs.value = tabBarData.tabs;
const activeTabKey = ref(tabBarData.tabs[0]?.key || "");
// const contentSchema = computed(() => ({
//   items: items.value,
// }));
const tabComponents = {
  MainList: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/MainList.vue"),
  ),
  RelationEdit: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/RelationEdit.vue"),
  ),
  RuleEdit: defineAsyncComponent(
    () => import("~/components/lazy-load/data-entry/RuleEdit.vue"),
  ),
  // "DataEntryFarhangestan": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryFarhangestan.vue")),
  // "DataEntryMirbagheri": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryMirbagheri.vue")),
  // ...
};
const currentComponent = computed(() => {
  if (activeTabKey.value == "MainList") {
    return tabComponents.MainList;
  } else if (activeTabKey.value === "RelationEdit") {
    return tabComponents.RelationEdit;
  } else if (activeTabKey.value === "RuleEdit") {
    return tabComponents.RuleEdit;
  }
});
// تابع مدیریت تغییر تب
const handleTabChange = (tab) => {
  // منطق تغییر مسیر یا لود داده
  switch (tab.id) {
    case "dashboard":
      break;
    case "analytics":
      break;
    case "users":
      break;
    case "settings":
      break;
    default:
  }
};
const headerSchema = ref({});
headerSchema.value = {
  breadcrumb: true,
  logo: false,
};
onMounted(() => {
  activeTabKey.value = headerTabs.value[0]?.id || "";
});
</script>
