<template>
  <a-card class="system-card" :loading="loading">
    <template #title>
      <div class="card-title-row">
        <div class="card-name">{{ card.name }}</div>
        <a-tag color="#1890ff">系统</a-tag>
      </div>
    </template>

    <a-descriptions :column="2" size="small" bordered>
      <a-descriptions-item label="运维单位">{{ joinList(card.operated_by) }}</a-descriptions-item>
      <a-descriptions-item label="技术栈">{{ joinList(card.technologies) }}</a-descriptions-item>
    </a-descriptions>

    <a-collapse ghost class="card-sections">
      <a-collapse-panel
        v-if="card.managed_data.length"
        key="data"
        :header="`管理数据资源 (${card.managed_data.length})`"
      >
        <a-list :data-source="card.managed_data" size="small">
          <template #renderItem="{ item }">
            <a-list-item>{{ item }}</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 { SystemCard } from '@/api/graph'

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

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

function joinList(items: string[]): string {
  return items.length ? items.join('、') : '-'
}
</script>

<style scoped lang="less">
.system-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>
