<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" />

      <!-- Content 内容区域 -->
      <div class="detail-content">
        <el-card shadow="never" class="content-card">
          <!-- 使用 router-view 渲染子路由 -->
          <router-view />
        </el-card>
      </div>
    </div>
  </div>
</template>

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

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

const { t } = useI18n();
const route = useRoute();
const router = useRouter();

// 从路由参数获取项目ID
const projectId = ref<string | number | null>(route.query.id as string || null);

// 当前激活的菜单（根据路由路径计算）
const activeMenu = computed(() => {
  const path = route.path;
  if (path.includes('/basicInfo')) return 'basicInfo';
  if (path.includes('/centerInfo')) return 'centerInfo';
  if (path.includes('/projectMember')) return 'projectMember';
  if (path.includes('/centerMember')) return 'centerMember';
  return 'basicInfo';
});

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

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

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

// 获取项目详细信息
const getProjectDetail = async () => {
  if (!projectId.value) {
    console.warn('项目ID不存在');
    return;
  }

  try {
    loading.value = true;
    const res = await getManagement(projectId.value);
    projectData.value = res.data;
  } catch (error) {
    console.error('获取项目详情失败:', error);
  } finally {
    loading.value = false;
  }
};

// 监听路由query变化，更新projectId
watch(() => route.query.id, (newId) => {
  if (newId) {
    projectId.value = newId as string;
    getProjectDetail();
  }
});

// 通过 provide 将项目数据和项目ID提供给子组件
provide('projectData', projectData);
provide('projectId', projectId);
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>
