<script setup lang="ts">
import type {AiKnowledgeHit} from './types';

defineProps<{ items: AiKnowledgeHit[] }>();

function resolveTitle(item: AiKnowledgeHit, index: number) {
  return item.title || item.source || `知识片段 ${index + 1}`;
}
</script>

<template>
  <div class="ai-knowledge-card">
    <div class="ai-knowledge-card__title">知识检索</div>
    <div
      v-for="(item, index) in items"
      :key="item.id || index"
      class="ai-knowledge-card__item"
    >
      <div class="ai-knowledge-card__item-title">
        {{ resolveTitle(item, index) }}
      </div>
      <div v-if="item.content" class="ai-knowledge-card__content">
        {{ item.content }}
      </div>
      <div v-if="item.score" class="ai-knowledge-card__score">
        相似度 {{ item.score }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.ai-knowledge-card {
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
}

.ai-knowledge-card__title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.ai-knowledge-card__item + .ai-knowledge-card__item {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.ai-knowledge-card__item-title {
  font-size: 13px;
  font-weight: 500;
}

.ai-knowledge-card__content,
.ai-knowledge-card__score {
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
}
</style>
