<template>
  <div class="report-page-container">
    <!-- 顶部过滤区域 -->
    <div class="top-filters">
      <div class="filter-left">
        <span class="filter-label" :class="{ 'active': activeTab === 'report' }" @click="activeTab = 'report'">智库报告</span>
        <span class="filter-label" :class="{ 'active': activeTab === 'policy' }" @click="activeTab = 'policy'">政策建议</span>
      </div>
      <div class="filter-right">
        <el-select v-model="selectedDateRange" placeholder="请选择" class="filter-select">
          <el-option label="近一年发布" value="last_year"></el-option>
          <el-option label="近三年发布" value="last_three_years"></el-option>
        </el-select>
        <el-select v-model="selectedSort" placeholder="请选择" class="filter-select">
          <el-option label="发布时间" value="publish_time"></el-option>
          <el-option label="热度" value="popularity"></el-option>
        </el-select>
      </div>
    </div>
    <el-row :gutter="24" v-if="activeTab === 'report'">
      <el-col :span="5">
        <div class="sidebar-filters">
          <div class="filter-group">
            <CardTitle title="地区筛选" style="margin-bottom: 10px"/>
            <div class="checkbox-group">
              <el-checkbox 
                v-for="region in filters.regions" 
                :key="region.id"
                v-model="activeFilters.regions"
                :label="region.id"
                class="filter-checkbox"
              >
                {{ region.name }}
              </el-checkbox>
            </div>
          </div>

          <div class="filter-group">
            <CardTitle title="智库类型" style="margin-bottom: 10px"/>
            <div class="checkbox-group">
              <el-checkbox 
                v-for="type in filters.types" 
                :key="type.id"
                v-model="activeFilters.types"
                :label="type.id"
                class="filter-checkbox"
              >
                {{ type.name }}
              </el-checkbox>
            </div>
          </div>

          <div class="filter-group">
            <CardTitle title="研究类型" style="margin-bottom: 10px"/>
            <div class="checkbox-group">
              <el-checkbox 
                v-for="research in filters.researches" 
                :key="research.id"
                v-model="activeFilters.researches"
                :label="research.id"
                class="filter-checkbox"
              >
                {{ research.rtypeName }}
              </el-checkbox>
            </div>
          </div>

          <div class="subscription-box">
            <h3>动态订阅</h3>
            <p>选择您感兴趣的研究领域，获取最新报告和相关书目。</p>
            <el-button type="primary" style="width: 100%;">保存订阅设置</el-button>
          </div>
        </div>
      </el-col>

      <el-col :span="19">
        <div class="main-content">
          <el-row :gutter="20">
            <el-col :span="8" v-for="report in reportList" :key="report.id" class="card-col"
            @click="handleReportClick(report)">
              <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">{{ report.thinkTankName }}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <PolicyTab v-if="activeTab === 'policy'" :showSearch="false" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import PolicyTab from '@/components/PolicyTab.vue'
import { getOverviewReport, getThinkTankResearchType } from '@/api'
import { mockReportList } from '../mockData';

const router = useRouter()
const activeTab = ref('report')
// --- Reactive Data for Filters ---
const filters = reactive({
  regions: [
    { id: 'north_america', name: '北美' },
    { id: 'europe', name: '欧洲' },
    { id: 'asia', name: '亚洲' },
    { id: 'other', name: '其他地区' },
  ],
  types: [
    { id: 'gov', name: '政府背景' },
    { id: 'university', name: '高校附庸' },
    { id: 'independent', name: '独立智库' },
    { id: 'corporate', name: '企业视景' },
  ],
  researches: [],
});

const activeFilters = reactive({
  regions: ['north_america'],
  types: ['gov'],
  researches: [],
});

// --- Reactive Data for Right Content ---
const selectedDateRange = ref('last_year');
const selectedSort = ref('publish_time');

const reportList = ref([]);

const getReports = async () => {
  const { data } = await getOverviewReport({
    areas: activeFilters.regions,
    researchTypeIds: activeFilters.researches,
  })
  // reportList.value = data
  reportList.value = mockReportList
}
const handleReportClick = (report) => {
  router.push({ name: 'ReportDetail', params: { id: report.id } })
}

const getResearchType = async () => {
  const { data } = await getThinkTankResearchType()
  console.log('getResearchType', data)
  filters.researches = data
}

onMounted(() => {
  getReports()
  getResearchType()
})
</script>

<style scoped>
.report-page-container {
  /* padding: 24px; */
  margin-top: 20px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

/* --- Left Sidebar Styles --- */
.sidebar-filters {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.filter-group {
  margin-bottom: 25px;
}

.filter-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
}

.filter-title .icon-square {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #409EFF;
  margin-right: 8px;
  border-radius: 2px;
}

/* 复选框组样式 */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-checkbox {
  margin: 0 !important;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  align-items: center;
}

.filter-checkbox:hover {
  background-color: #f0f2f5;
}


.subscription-box {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
  text-align: center;
}

.subscription-box p {
  font-size: 13px;
  color: #909399;
  line-height: 1.6;
  margin: 10px 0 15px 0;
}

/* --- Right Content Styles --- */
.main-content {
  /* background-color: #fff; */
  /* padding: 20px; */
  border-radius: 4px;
}

/* 顶部过滤区域样式 */
.top-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  /* background: #fff; */
  border-radius: 8px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  margin-bottom: 10px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.filter-label {
  font-size: 16px;
  color: #606266;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
  transition: color 0.3s ease;
  border-radius: 14px;
  padding: 4px 10px;
}

.filter-label.active {
  color: #fff;
  background: #1459BB;
}

.filter-label:hover {
  color: #409EFF;
}

.filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-select {
  width: 140px;
}

.filter-select :deep(.el-input__wrapper) {
  border-radius: 6px;
  box-shadow: 0 0 0 1px #dcdfe6;
  transition: box-shadow 0.3s ease;
}

.filter-select :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF;
}

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

.report-card {
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

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

.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;
  /* For multi-line ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

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

/* 响应式设计 */
@media (max-width: 768px) {
  .top-filters {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .filter-left {
    width: 100%;
    justify-content: center;
    gap: 24px;
  }
  
  .filter-right {
    width: 100%;
    justify-content: center;
    gap: 8px;
  }
  
  .filter-select {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .filter-left {
    gap: 16px;
  }
  
  .filter-label {
    font-size: 14px;
  }
  
  .filter-right {
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-select {
    width: 100%;
    max-width: 200px;
  }
}
</style>