<template>
  <div class="p-2">
    <!-- 组件容器：默认显示列表页面，可扩展其他页面如详情、统计等 -->
    <component :is="currentComponent" />
  </div>
</template>

<script setup name="Management" lang="ts">
import { shallowRef, ref, provide } from 'vue';
import ListComponent from './list.vue';
import DetailComponent from './detail/index.vue';

// 当前显示的组件，默认为列表页
const currentComponent = shallowRef(ListComponent);

// 当前选中的项目ID（用于传递给详情页）
const projectId = ref<string | number | null>(null);

// 切换组件的方法
const switchComponent = (component: any, params?: any) => {
  if (params?.projectId) {
    projectId.value = params.projectId;
  }
  currentComponent.value = component;
}

// 通过 provide 向子组件提供数据和方法
provide('switchComponent', switchComponent);
provide('projectId', projectId);
provide('ListComponent', ListComponent);
provide('DetailComponent', DetailComponent);

// 暴露给父组件或其他地方使用的方法（如果需要）
defineExpose({
  switchComponent
});
</script>
