<template>
  <div class="proj-page">
    <!-- 左侧内部面板：工程类型切换（样式与直管工程一致） -->
    <div class="proj-sidebar">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        :class="['sidebar-item', { active: activeTab === tab.key }]"
        @click="activeTab = tab.key"
      >
        <span>{{ tab.label }}</span>
      </div>
    </div>

    <!-- 右侧内容区：内部切换，不跳转路由 -->
    <div class="proj-main">
      <div class="proj-content">
        <component :is="currentComp" />
      </div>
    </div>
  </div>
</template>

<script setup name="ProjIndex">
import { ref, computed } from 'vue'
import DikeList from '@/views/slgc/dike/index.vue'
import ReservoirList from '@/views/slgc/reservoir/index.vue'
import WagaList from '@/views/slgc/waga/index.vue'
import PustList from '@/views/slgc/pust/index.vue'

const tabs = [
  { key: 'dike', label: '堤防管理', comp: DikeList },
  { key: 'reservoir', label: '水库管理', comp: ReservoirList },
  { key: 'waga', label: '水闸管理', comp: WagaList },
  { key: 'pust', label: '泵站管理', comp: PustList },
]

const activeTab = ref('dike')
const currentComp = computed(() => tabs.find(t => t.key === activeTab.value)?.comp || DikeList)
</script>

<style scoped>
/* 与直管工程 monitor/index.vue 的左侧面板样式保持一致 */
.proj-page {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.proj-sidebar {
  width: 150px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e4e7ed;
  padding: 8px 0;
  overflow-y: auto;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.sidebar-item:hover {
  background: #f5f7fa;
  color: #409eff;
}
.sidebar-item.active {
  background: #ecf5ff;
  color: #409eff;
  font-weight: 600;
  border-left-color: #409eff;
}
.proj-main {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.proj-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f0f2f6;
}
</style>
