<template>
  <a-card class="budget-card" :loading="loading">
    <template #title>
      <div class="card-title-row">
        <div class="card-name">{{ card.name }}</div>
        <a-tag color="#faad14">预算</a-tag>
      </div>
    </template>

    <a-collapse ghost class="card-sections">
      <a-collapse-panel
        v-if="card.funded_tasks.length"
        key="tasks"
        :header="`资助任务 (${card.funded_tasks.length})`"
      >
        <a-list :data-source="card.funded_tasks" size="small">
          <template #renderItem="{ item }">
            <a-list-item>{{ item.name }}</a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel
        v-if="card.funded_projects.length"
        key="projects"
        :header="`资助项目 (${card.funded_projects.length})`"
      >
        <a-list :data-source="card.funded_projects" size="small">
          <template #renderItem="{ item }">
            <a-list-item>{{ item.name }}</a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="docs" :header="`相关文档 (${card.related_docs.length})`">
        <a-empty v-if="card.related_docs.length === 0" description="暂无相关文档" />
        <a-list v-else :data-source="card.related_docs" size="small">
          <template #renderItem="{ item }">
            <a-list-item>
              <template #actions>
                <a-button type="link" size="small" @click="$emit('openDocument', item.doc_id)">查看</a-button>
              </template>
              <a-list-item-meta :title="item.title || item.doc_code || item.doc_id">
                <template #description>
                  <span>{{ item.doc_code || '无文号' }}</span>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>
    </a-collapse>
  </a-card>
</template>

<script setup lang="ts">
import type { BudgetCard } from '@/api/graph'

defineProps<{
  card: BudgetCard
  loading?: boolean
}>()

defineEmits<{
  (e: 'openDocument', docId: string): void
}>()
</script>

<style scoped lang="less">
.budget-card {
  .card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .card-name { font-size: 16px; font-weight: 600; }
  .card-sections { margin-top: 12px; }
}
</style>
