<template>
  <div class="project-detail-layout" v-loading="loading">
    <!-- Header 顶部区域 -->
    <DetailHeader :project-id="projectId" :project-name="projectData?.name" @back="handleBack" />

    <!-- Main 主体区域 -->
    <div class="detail-main">
      <!-- Sidebar 侧边栏 -->
      <DetailSidebar :active-menu="activeMenu" @menu-select="handleMenuSelect" />

      <!-- Content 内容区域 -->
      <div class="detail-content">
        <el-card shadow="never" class="content-card">
          <!-- 动态加载页面组件 -->
          <component :is="currentPageComponent" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, computed, onMounted, provide } from 'vue';
import { useI18n } from 'vue-i18n';
import DetailHeader from './components/header.vue';
import DetailSidebar from './components/sidebar.vue';

// 导入页面组件
import BasicInfoPage from './pages/basicInfo.vue';
import CenterInfoPage from './pages/centerInfo.vue';
import ProjectMemberPage from './pages/projectMember.vue';
import CenterMemberPage from './pages/centerMember.vue';

// 导入API
import { getManagement } from '@/api/project/management';
import { ManagementVO } from '@/api/project/management/types';

const { t } = useI18n();

// 接收从父组件传递的项目ID
const projectId = inject<any>('projectId', ref(null));

// 当前选中的菜单（默认显示基本信息）
const activeMenu = ref('basicInfo');

// 页面加载状态
const loading = ref(false);

// 项目详细数据
const projectData = ref<ManagementVO>();

// 页面组件映射
const pageComponents: Record<string, any> = {
  basicInfo: BasicInfoPage,
  centerInfo: CenterInfoPage,
  projectMember: ProjectMemberPage,
  centerMember: CenterMemberPage
};

// 当前显示的页面组件
const currentPageComponent = computed(() => {
  return pageComponents[activeMenu.value] || BasicInfoPage;
});

// 返回列表
const handleBack = () => {
  // Header 组件内部已处理返回逻辑
}

// 菜单选择事件
const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
}

// 获取项目详细信息
const getProjectDetail = async () => {
  if (!projectId.value) {
    console.warn('项目ID不存在');
    return;
  }
  
  try {
    loading.value = true;
    const res = await getManagement(projectId.value);
    projectData.value = res.data;
    console.log('项目详情数据:', projectData.value);
  } catch (error) {
    console.error('获取项目详情失败:', error);
  } finally {
    loading.value = false;
  }
}

// 通过 provide 将项目数据提供给子组件
provide('projectData', projectData);
provide('loading', loading);

// 组件挂载时获取数据
onMounted(() => {
  getProjectDetail();
});
</script>

<style scoped>
.project-detail-layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px); /* 根据实际顶部导航栏高度调整 */
  background-color: #f0f2f5;
}

/* Main 主体区域 */
.detail-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: 16px;
  padding: 0 16px;
  gap: 16px;
}

/* Content 样式 */
.detail-content {
  flex: 1;
  overflow-y: auto;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.content-card {
  height: 100%;
}

.content-card :deep(.el-card__body) {
  height: 100%;
  padding: 24px;
}

/* 滚动条样式 */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
}
</style>
