<template>
  <div class="evidence-panel">
    <div class="evidence-head">
      <strong>关联切片正文</strong>
      <span>{{ safeEvidence.chunkCount }} 段</span>
    </div>

    <div v-if="safeEvidence.items.length" class="evidence-list">
      <article
        v-for="item in safeEvidence.items"
        :key="item.documentId"
        class="evidence-document"
      >
        <div class="evidence-document-head">
          <div>
            <strong>{{ item.name }}</strong>
            <small>{{ item.matchType }}</small>
          </div>
          <span>{{ item.chunks.length }} 段</span>
        </div>

        <div v-if="item.chunks.length" class="evidence-chunks">
          <div v-for="chunk in item.chunks" :key="chunk.id" class="evidence-chunk">
            <span>#{{ chunk.order + 1 }}</span>
            <p>{{ chunk.excerpt || chunk.summary || '暂无正文片段' }}</p>
            <small>{{ chunk.tokens }} tokens</small>
          </div>
        </div>

        <div v-else class="evidence-empty compact">
          命中了该实体，但当前日志只返回了 chunk id，未返回对应正文片段。
        </div>
      </article>
    </div>

    <div v-else class="evidence-empty">
      当前日志没有返回该实体和切片的映射；新归纳日志会优先显示精确切片，旧日志按文档实体降级匹配。
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  evidence: {
    type: Object,
    default: () => ({ items: [], chunkCount: 0 })
  }
})

const safeEvidence = computed(() => ({
  items: Array.isArray(props.evidence?.items) ? props.evidence.items : [],
  chunkCount: Number(props.evidence?.chunkCount || 0)
}))
</script>

<style scoped>
.evidence-panel,
.evidence-list,
.evidence-chunks {
  display: grid;
  gap: 8px;
}

.evidence-head,
.evidence-document-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.evidence-head strong {
  color: #0f172a;
  font-size: 13px;
}

.evidence-head span,
.evidence-document-head small,
.evidence-document-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
}

.evidence-document {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  background: #f8fafc;
}

.evidence-document-head {
  align-items: flex-start;
}

.evidence-document-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.evidence-document-head strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-chunk {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}

.evidence-chunk span {
  color: #2563eb;
  font-size: 11px;
  font-weight: 850;
}

.evidence-chunk p {
  margin: 0;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}

.evidence-chunk small {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.evidence-empty {
  min-height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.evidence-empty.compact {
  min-height: 56px;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #fff;
}
</style>
