<template>
  <div class="policy-list">
    <div 
      v-for="(item, index) in policyList" 
      :key="index" 
      class="policy-item"
    >
      <div class="item-left">
        <div class="report-cover">
          <img :src="$withFallbackImage(item.imageUrl, index)" alt="Report Cover" />
        </div>
      </div>

      <div class="item-right">
        <h3 class="item-title">
          {{ item.content }}
        </h3>

        <div class="item-meta">
          <span class="meta-date">{{ formatDate(item.times) }}</span>
          <span class="meta-divider">·</span>
          <span class="meta-source">
            {{ item.name }}
            <el-icon class="link-icon"><TopRight /></el-icon>
          </span>
        </div>

        <div class="item-tags" v-if="item.tags && item.tags.length">
          <span v-for="(tag, tIndex) in item.tags" :key="tIndex" class="tag-pill">
            {{ tag }}
          </span>
        </div>

        <div class="item-actions" v-if="item.statusRaw">
          <div 
            v-for="(statusItem, sIndex) in parseStatus(item.statusRaw)" 
            :key="sIndex" 
            class="status-link"
          >
            <span class="status-type">{{ statusItem.type }}</span>
            <span class="status-year">{{ statusItem.year }}</span>
            <span class="status-name">《{{ statusItem.name }}》</span>
            <el-icon class="arrow-icon"><Right /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TopRight, Right } from '@element-plus/icons-vue'

interface PolicyItem {
  content: string;
  statusRaw: string; // 原始的长字符串
  name: string;
  times: string;
  tags?: string[];
  coverUrl?: string;
}

const props = defineProps<{
  policyList: PolicyItem[]
}>()

// 格式化日期：2025-06-26 -> 2025年6月26日
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
}

// 解析状态字符串
// 输入: "法案 2024 《芯片科学法案》; 政令 2025 《推动美国...》"
// 输出: 数组对象
const parseStatus = (raw: string) => {
  if (!raw) return [];
  // 按分号分割多个条目
  const items = raw.split(/[;；]/).map(s => s.trim()).filter(s => s);
  
  return items.map(itemStr => {
    // 简单正则匹配： "类型 年份 《名称》"
    // 注意：这里假设数据格式比较规范，实际需根据后端数据调整
    // 尝试移除书名号进行提取
    const cleanStr = itemStr.replace(/[《》]/g, '');
    const parts = cleanStr.split(' ');
    return {
      type: parts[0] || '政策',
      year: parts[1] || '',
      name: parts.slice(2).join(' ') || cleanStr // 剩余部分作为名称
    }
  });
}
</script>

<style scoped>
.policy-list {
  display: flex;
  flex-direction: column;
}

.policy-item {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  gap: 16px;
  transition: background-color 0.2s;
}

.policy-item:last-child {
  border-bottom: none;
}

/* 左侧封面 */
.item-left {
  flex-shrink: 0;
}

.report-cover {
  width: 60px;
  height: 80px;
  background-color: #f2f3f5;
  border: 1px solid #e4e7ed;
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧内容 */
.item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 1. 标题 */
.item-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  cursor: pointer;
}

.item-title:hover {
  color: #409EFF;
}

/* 2. 元数据 */
.item-meta {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
}

.meta-divider {
  margin: 0 8px;
  font-weight: bold;
}

.meta-source {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.meta-source:hover {
  color: #409EFF;
}

.link-icon {
  font-size: 12px;
}

/* 3. 标签 */
.item-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tag-pill {
  background-color: #f2f3f5;
  color: #5e6d82;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 4. 底部状态链接 */
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.status-link {
  display: inline-flex;
  align-items: center;
  background-color: #ecf5ff; /* 浅蓝色背景 */
  color: #409EFF;            /* 蓝色文字 */
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.status-link:hover {
  background-color: #d9ecff;
}

.status-type {
  font-weight: bold;
  margin-right: 4px;
}

.status-year {
  margin-right: 4px;
}

.status-name {
  margin-right: 4px;
}

.arrow-icon {
  margin-left: 4px;
  font-size: 12px;
}
</style>