<template>
  <el-row :gutter="24">
    <el-col :span="6">
      <aside class="filter-sidebar">
        <div class="filter-group">
          <CardTitle title="报告类型" style="margin-bottom: 10px"/>
          <el-checkbox-group v-model="selectedReportTypes">
            <el-checkbox label="研究报告" />
            <el-checkbox label="简报" />
            <el-checkbox label="会议记录" />
            <el-checkbox label="期刊文章" />
          </el-checkbox-group>
        </div>
        <div class="filter-group">
          <CardTitle title="研究类型" style="margin-bottom: 10px"/>
           <el-checkbox-group v-model="selectedResearchTypes">
            <el-checkbox label="人工智能" />
            <el-checkbox label="半导体/芯片" />
            <el-checkbox label="能源与气候" />
            <el-checkbox label="国际关系" />
            <el-checkbox label="经济决策" />
            <el-checkbox label="国防与安全" />
          </el-checkbox-group>
        </div>
        <div class="filter-group">
          <CardTitle title="作者" style="margin-bottom: 10px"/>
          <el-input v-model="authorName" placeholder="输入作者名称" />
        </div>
      </aside>
    </el-col>
    <el-col :span="18">
      <div class="report-content">
        <div class="content-toolbar">
          <el-input
            v-model="searchQuery"
            placeholder="按报告标题检索"
            :prefix-icon="Search"
            style="width: 240px;"
          />
          <div class="sort-options">
             <el-select v-model="sourceType" placeholder="来源类型" style="width: 120px; margin-right: 10px;">
                <el-option label="全部" value="all"></el-option>
                <el-option label="原创" value="original"></el-option>
              </el-select>
              <el-select v-model="publishDateSort" placeholder="发布时间" style="width: 120px;">
                <el-option label="最新" value="desc"></el-option>
                <el-option label="最早" value="asc"></el-option>
              </el-select>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="report in reportList" :key="report.id" class="card-col">
            <el-card shadow="hover" class="report-card" :body-style="{ padding: '0px' }">
              <el-image :src="$withFallbackImage(report.imageUrl, report.id) " fit="cover" class="card-image" lazy></el-image>
              <div class="card-content">
                <h4 class="card-title">{{ report.name }}</h4>
                <div class="card-meta">
                  <span class="card-date">{{ report.times }}</span>
                  <span class="card-source">{{ props.thinkTankName }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { getThinkTankReport } from '@/api';
import { useRoute } from 'vue-router';
import { mockReportList } from '../mockData';

const route = useRoute();
const props = defineProps({
  thinkTankName: {
    type: String,
    required: true
  }
});
// Filters State
const selectedReportTypes = ref(['研究报告', '简报']);
const selectedResearchTypes = ref(['人工智能']);
const authorName = ref('');

// Toolbar State
const searchQuery = ref('');
const sourceType = ref('all');
const publishDateSort = ref('desc');

// Mock Data for Report Cards
const reportList = ref([
  { id: 1, title: '中国对AI的转型产业政策', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
  { id: 2, title: '中美对抗、竞争和合作将跨越人工智能通用领域的五个...', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1574015974293-817f0e62f0f3?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
  { id: 3, title: '中国、智慧城市和中东：地区和美国的选择', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1593989931843-3f17374312b3?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
  { id: 4, title: '中国对AI的转型产业政策', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1695423635441-89d968a528f4?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
  { id: 5, title: '中美经济竞争：复杂经济和地缘政治关系中的收益...', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1616121213037-1439247c6178?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
  { id: 6, title: '中国、智慧城市和中东：留给地区和美国的选择', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://images.unsplash.com/photo-1542372147-7a2846215392?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600' },
]);

onMounted(() => {
  getThinkTankReport({ id: route.params.id }).then(res => {
    // reportList.value = res.data;
    reportList.value = mockReportList;
  });
})
</script>

<style scoped>
.filter-sidebar .filter-group {
  margin-bottom: 24px;
}

.filter-sidebar .filter-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
}

.filter-sidebar .el-checkbox-group {
  display: flex;
  flex-direction: column;
}

.filter-sidebar .el-checkbox {
  margin-bottom: 10px;
}
.filter-sidebar .el-checkbox:last-child {
  margin-bottom: 0;
}

/* Right Content Grid Styles */
.content-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-col {
  margin-bottom: 20px;
}

.report-card {
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid #e4e7ed;
  padding: 10px;
}

.report-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-image {
  width: 100%;
  height: 160px;
  display: block;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
  line-height: 1.4;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}
</style>