<template>
  <div class="page-container">
    <PageNavigation />
    
    <div class="tech-resources-layout">
      <!-- 左侧分类导航 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h3>科技资源</h3>
        </div>
        
        <el-menu
          :default-active="activeCategory"
          class="category-menu"
          @select="handleCategorySelect"
        >
          <el-sub-menu index="papers">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>科技论文</span>
            </template>
            <el-menu-item index="papers-all">科技资讯</el-menu-item>
            <el-menu-item index="papers-ai">科技专利</el-menu-item>
            <el-menu-item index="papers-bio">科技政策</el-menu-item>
            <el-menu-item index="papers-cs">科技学者</el-menu-item>
            <el-menu-item index="papers-physics">科技院校</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      
      <!-- 右侧内容区域 -->
      <div class="content-area">
        <div class="content-header">
          <h2>科技论文</h2>
          <div class="search-controls">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索"
              class="search-input"
              clearable
            >
              <template #suffix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">导出</el-button>
            <el-button type="primary">批量下载</el-button>
          </div>
        </div>
        
        <!-- 论文列表 -->
        <div class="papers-table">
          <el-table
            :data="papersList"
            style="width: 100%"
            :header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
          >
            <el-table-column prop="title" label="题名" min-width="300" />
            <el-table-column prop="author" label="作者" width="150" />
            <el-table-column prop="journal" label="来源" width="120" />
            <el-table-column prop="date" label="发表时间" width="120" />
            <el-table-column prop="cited" label="被引" width="80" />
            <el-table-column prop="downloads" label="下载次数" width="100" />
            <el-table-column label="操作" width="80">
              <template #default="scope">
                <el-button 
                  type="primary" 
                  link 
                  @click="handleView(scope.row)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-wrapper">
          <div class="pagination-info">
            共 {{ total }} 条记录
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    
    <PageFooter />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Document, Search } from '@element-plus/icons-vue'
import PageNavigation from '@/components/PageNavigation.vue'
import PageFooter from '@/components/PageFooter.vue'

interface Paper {
  id: number
  title: string
  author: string
  journal: string
  date: string
  cited: number
  downloads: number
}

const activeCategory = ref('papers-all')
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(126)

const papersList = ref<Paper[]>([
  {
    id: 1,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 2,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 3,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 4,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 5,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 6,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 7,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 8,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 9,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  },
  {
    id: 10,
    title: '基于深度学习的医疗诊断技术',
    author: '王小明, 黄小红',
    journal: '计算机工程',
    date: '2024/03/03',
    cited: 1587,
    downloads: 1579
  }
])

const handleCategorySelect = (key: string) => {
  activeCategory.value = key
  // 这里可以根据分类加载不同的数据
  console.log('Selected category:', key)
}

const handleView = (row: Paper) => {
  console.log('View paper:', row)
  // 这里可以跳转到论文详情页面
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}

onMounted(() => {
  // 页面加载时的初始化操作
})
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 80px 0 0;
}

.tech-resources-layout {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  gap: 20px;
  padding: 20px 40px;
  margin-top: 20px;
}

/* 左侧边栏 */
.sidebar {
  width: 240px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.category-menu {
  border: none;
}

.category-menu .el-menu-item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.category-menu .el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 600;
}

/* 右侧内容区域 */
.content-area {
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.content-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: 600;
}

.search-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 200px;
}

.search-icon {
  color: #909399;
}

/* 表格样式 */
.papers-table {
  margin-bottom: 24px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: #f8f9fa !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-table tr:hover > td) {
  background-color: #f8f9fa !important;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

:deep(.el-pagination) {
  --el-pagination-font-size: 14px;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next) {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover) {
  color: #409eff;
}

:deep(.el-pager li.is-active) {
  background: #409eff;
  color: #fff;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .tech-resources-layout {
    flex-direction: column;
    padding: 20px;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .content-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .search-controls {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .pagination-wrapper {
    flex-direction: column;
    gap: 16px;
  }
  
  .search-input {
    width: 150px;
  }
}
</style>