<template>
  <div class="detail-page">
    <!-- 顶部导航栏 -->
    <header class="dashboard-header">
      <div class="logo">
        <img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
        <img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
        <h1 class="main-title">
          <div class="title-line"></div>
          <span class="title-text">智慧科研评估系统</span>
          <div class="title-line"></div>
        </h1>
      </div>
    </header>

    <div class="page-header">
      <button class="back-button" @click="goBack">
        <el-icon><back /></el-icon> 返回仪表盘
      </button>
      <h1>科研成果详情</h1>
    </div>

    <div class="page-content">
      <!-- 筛选条件 -->
      <div class="filter-panel">
        <h2>筛选条件</h2>
        <div class="filter-form">
          <div class="filter-row">
            <div class="filter-item">
              <label>时间范围</label>
              <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              />
            </div>
            <div class="filter-item">
              <label>成果类型</label>
              <el-select v-model="researchType">
                <el-option label="全部" value="" />
                <el-option label="论文" value="paper" />
                <el-option label="专利" value="patent" />
              </el-select>
            </div>
            <div class="filter-item">
              <label>学院</label>
              <el-select v-model="college">
                <el-option label="全部" value="" />
                <el-option label="计算机学院" value="cs" />
                <el-option label="材料学院" value="material" />
              </el-select>
            </div>
          </div>
          <div class="filter-buttons">
            <el-button type="primary">应用筛选</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-panel">
        <h2>研究成果列表</h2>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="title" label="标题" min-width="250" />
          <el-table-column prop="author" label="作者" width="150" />
          <el-table-column prop="type" label="类型" width="100" />
          <el-table-column prop="journal" label="期刊/来源" width="180" />
          <el-table-column prop="date" label="发表日期" width="120" />
          <el-table-column prop="citations" label="引用次数" width="100" />
          <el-table-column label="操作" width="120">
            <template #default>
              <el-button size="small">查看</el-button>
              <el-button size="small" type="primary">导出</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="100"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 跳转回仪表盘
const emit = defineEmits(['back-to-dashboard', 'logout'])
const goBack = () => {
  emit('back-to-dashboard')
}

// 处理Logo点击事件
const handleLogoClick = () => {
  emit('logout')
}

// 筛选条件
const dateRange = ref([])
const researchType = ref('')
const college = ref('')

// 模拟表格数据
const tableData = ref([
  {
    id: 1,
    title: '基于深度学习的图像识别算法研究',
    author: '张三, 李四',
    type: '论文',
    journal: 'IEEE Transactions on Image Processing',
    date: '2024-10-15',
    citations: 25
  },
  {
    id: 2,
    title: '新型高效电池材料的合成与表征',
    author: '王五, 赵六',
    type: '论文',
    journal: 'Advanced Materials',
    date: '2024-09-22',
    citations: 18
  },
  {
    id: 3,
    title: '一种新型智能机器人控制方法',
    author: '张三, 王五',
    type: '专利',
    journal: '国家知识产权局',
    date: '2024-08-10',
    citations: 0
  },
  {
    id: 4,
    title: '高性能计算在流体力学中的应用',
    author: '李四, 赵六',
    type: '论文',
    journal: 'Journal of Computational Physics',
    date: '2024-07-05',
    citations: 12
  },
  {
    id: 5,
    title: '纳米材料在催化领域的应用研究',
    author: '王五, 张三',
    type: '论文',
    journal: 'ACS Catalysis',
    date: '2024-06-18',
    citations: 30
  }
])
</script>

<style scoped>
.detail-page {
  width: 100%;
  min-height: 100vh;
  background-color: #0c1633;
  color: white;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background-color: #1a2b56;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.main-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.title-line {
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 0 10px;
}

.title-text {
  color: #fff;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #1a2b56;
}

.back-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #4080ff;
  cursor: pointer;
  margin-right: 20px;
  font-size: 14px;
}

.page-header h1 {
  margin: 0;
  font-size: 20px;
}

.page-content {
  padding: 20px;
}

.filter-panel, .table-panel {
  background-color: #1a2b56;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.filter-panel h2, .table-panel h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
}

.filter-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  flex: 1;
}

.filter-item label {
  display: block;
  margin-bottom: 5px;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

/* Element Plus 暗色主题定制 */
:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: #2a3b66;
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: white;
}

:deep(.el-table) {
  background-color: transparent;
  color: white;
}

:deep(.el-table th.el-table__cell) {
  background-color: #2a3b66;
  color: white;
}

:deep(.el-table tr) {
  background-color: #1a2b56;
}

:deep(.el-table td.el-table__cell) {
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-button) {
  border: 1px solid #4080ff;
  color: #4080ff;
  background: transparent;
}

:deep(.el-button--primary) {
  background-color: #4080ff;
  color: white;
}
</style>