<template>
  <a-card class="matter-card" :loading="loading">
    <template #title>
      <div class="matter-card-title-row">
        <div>
          <div class="matter-name">{{ matter.name }}</div>
          <div v-if="matter.description" class="matter-description">{{ matter.description }}</div>
        </div>
        <StatusTag v-if="matter.status" :status="matter.status" />
      </div>
    </template>

    <a-descriptions :column="2" size="small" bordered>
      <a-descriptions-item label="事项类型">{{ matter.matter_type || '-' }}</a-descriptions-item>
      <a-descriptions-item label="办理部门">{{ joinNames(matter.handled_by) }}</a-descriptions-item>
      <a-descriptions-item label="适用地域">{{ joinNames(matter.regions, 'full_name') }}</a-descriptions-item>
      <a-descriptions-item label="适用对象">{{ joinNames(matter.target_groups) }}</a-descriptions-item>
    </a-descriptions>

    <a-collapse ghost class="matter-sections">
      <a-collapse-panel key="conditions" :header="`办理条件 (${matter.conditions.length})`">
        <a-empty v-if="matter.conditions.length === 0" description="暂无办理条件" />
        <a-list v-else :data-source="matter.conditions" item-layout="vertical">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :title="item.name">
                <template #description>
                  <div>{{ item.description || item.structured_value || '—' }}</div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="materials" :header="`所需材料 (${matter.materials.length})`">
        <a-empty v-if="matter.materials.length === 0" description="暂无材料清单" />
        <a-list v-else :data-source="matter.materials" item-layout="vertical">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :title="item.name">
                <template #description>
                  <div>{{ item.description || item.format_requirement || '—' }}</div>
                  <div class="matter-item-meta">
                    <a-tag v-if="item.material_type">{{ item.material_type }}</a-tag>
                    <a-tag v-if="item.is_required" color="red">必需</a-tag>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="time-limits" :header="`办理时限 (${matter.time_limits.length})`">
        <a-empty v-if="matter.time_limits.length === 0" description="暂无办理时限" />
        <a-list v-else :data-source="matter.time_limits" item-layout="vertical">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :title="item.name">
                <template #description>
                  <div>{{ item.context || '—' }}</div>
                  <div class="matter-item-meta">
                    <a-tag>{{ item.duration || '-' }}{{ item.unit || '' }}</a-tag>
                    <a-tag v-if="item.time_type">{{ item.time_type }}</a-tag>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>

      <a-collapse-panel key="governing-docs" :header="`依据文件 (${matter.governing_docs.length})`">
        <a-empty v-if="matter.governing_docs.length === 0" description="暂无依据文件" />
        <a-list v-else :data-source="matter.governing_docs" item-layout="vertical">
          <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>
                  <div class="gov-doc-row">
                    <span>{{ item.doc_code || '无文号' }}</span>
                    <span v-if="item.publish_date">{{ item.publish_date }}</span>
                    <StatusTag v-if="item.status" :status="item.status" />
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </a-collapse-panel>
    </a-collapse>
  </a-card>
</template>

<script setup lang="ts">
import StatusTag from '@/components/StatusTag.vue'
import type { MatterCardResponse } from '@/types/matter'

defineProps<{
  matter: MatterCardResponse
  loading?: boolean
}>()

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

function joinNames<T extends object>(items: T[], field = 'name'): string {
  const names = items.map((item) => (item as Record<string, unknown>)[field]).filter(Boolean)
  return names.length ? names.join('、') : '-'
}
</script>

<style scoped lang="less">
.matter-card {
  .matter-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .matter-name {
    font-size: 18px;
    font-weight: 600;
  }

  .matter-description {
    margin-top: 4px;
    color: #8c8c8c;
    font-size: 13px;
  }

  .matter-sections {
    margin-top: 16px;
  }

  .matter-item-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .gov-doc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
}
</style>