<template>
  <div class="resource-center-page">
    <!-- 导航栏 -->
    <div class="resource-nav">
      <div 
        class="nav-tab" 
        v-for="tab in tabs" 
        :key="tab.key"
        :class="{ active: activeTab === tab.key }"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="resource-content">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import MediaArchive from './components/MediaArchive.vue';
import PartyHistoryLearning from './PartyHistoryLearningView.vue';
import PolicySpeech from './components/PolicySpeech.vue';
import PolicyInterpretation from './PolicyInterpretationView.vue';
import RedClassic from './RedClassicView.vue';
import SpecialReport from './SpecialReportView.vue';
import WorldCase from './WorldCaseView.vue';

const activeTab = ref('media');

const tabs = [
  { key: 'media', label: '媒体档案' },
  { key: 'party-history', label: '党史学习' },
  { key: 'policy-speech', label: '政策讲话' },
  { key: 'policy-interpretation', label: '政策解读' },
  { key: 'red-classic', label: '红色经典' },
  { key: 'special-report', label: '专题报告' },
  { key: 'world-case', label: '世界案例' }
];

const componentMap: Record<string, any> = {
  'media': MediaArchive,
  'party-history': PartyHistoryLearning,
  'policy-speech': PolicySpeech,
  'policy-interpretation': PolicyInterpretation,
  'red-classic': RedClassic,
  'special-report': SpecialReport,
  'world-case': WorldCase
};

const currentComponent = computed(() => componentMap[activeTab.value]);
</script>

<style lang="scss" scoped>
.resource-center-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.resource-nav {
  background: white;
  padding: 0 40px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.nav-tab {
  padding: 16px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  position: relative;
  transition: all 0.3s;
  
  &:hover {
    color: #C62828;
  }
  
  &.active {
    color: #C62828;
    font-weight: 600;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: #C62828;
    }
  }
}

.resource-content {
  padding: 20px;
}
</style>

