<template>
  <div class="result-card" :class="{ 'result-card--selected': selected }">
    <div class="result-card__header">
      <div class="result-title-row">
        <a-checkbox
          v-if="selectable"
          :checked="selected"
          @click.stop
          @change="$emit('toggleSelect', doc.doc_id)"
        />
        <!-- 标题：点击跳转详情 -->
        <div
          class="result-title"
          v-html="sanitizeHtml(doc.title || '')"
          @click="$emit('click', doc.doc_id)"
        />
      </div>
      <div class="result-tags">
        <a-tag v-if="doc.doc_type" color="blue">{{ doc.doc_type }}</a-tag>
        <a-tag v-if="doc.knowledge_category" color="green">{{ doc.knowledge_category }}</a-tag>
      </div>
    </div>

    <div class="result-meta">
      <span v-if="doc.doc_number" class="meta-item">
        <FileTextOutlined /> {{ doc.doc_number }}
      </span>
      <span v-if="doc.issuing_org" class="meta-item">
        <BankOutlined /> {{ doc.issuing_org }}
      </span>
      <span v-if="doc.publish_date" class="meta-item">
        <CalendarOutlined /> {{ doc.publish_date }}
      </span>
      <span v-if="doc.version_count > 1" class="meta-item">
        <BranchesOutlined /> 同内容 {{ doc.version_count }} 个版本
      </span>
    </div>

    <!-- 主题词展示 -->
    <div v-if="doc.subject_words && doc.subject_words.length > 0" class="result-subject-words">
      <TagsOutlined class="subject-words-icon" />
      <a-tag v-for="word in doc.subject_words.slice(0, 5)" :key="word" class="subject-word-tag">
        {{ word }}
      </a-tag>
      <span v-if="doc.subject_words.length > 5" class="subject-words-more">
        +{{ doc.subject_words.length - 5 }}
      </span>
    </div>

    <div
      v-if="doc.highlights && doc.highlights.length > 0"
      class="result-highlight"
    >
      <div
        v-for="(hl, idx) in doc.highlights.slice(0, 2)"
        :key="idx"
        class="highlight-item"
        v-html="'...' + sanitizeHtml(hl) + '...'"
      />
    </div>

    <div class="result-actions" @click.stop>
      <a-space wrap>
        <a-button type="primary" size="small" @click="$emit('click', doc.doc_id)">
          查看详情
        </a-button>
        <a-button size="small" :disabled="inBasket" @click="$emit('addToBasket', doc)">{{ inBasket ? '已在资料篮' : '加入资料篮' }}</a-button>
        <a-button size="small" @click="$emit('quickPreview', doc)">快速预览</a-button>
        <a-button size="small" @click="$emit('viewRelations', doc)">查看关系</a-button>
      </a-space>
    </div>
  </div>
</template>

/**
 * 搜索结果卡片组件
 * 展示单条文档搜索结果：标题（支持高亮 HTML）、元数据、主题词、高亮摘要片段、
 * 以及查看详情 / 加入 Research / 预览 / 查看关系等操作按钮。
 * 支持多选模式（selectable）用于批量操作。
 */
<script setup lang="ts">
import {
  FileTextOutlined,
  BankOutlined,
  CalendarOutlined,
  BranchesOutlined,
  TagsOutlined,
} from '@ant-design/icons-vue'
import type { DocumentResult } from '@/types/search'
// 导入 HTML 清洗函数，防止 v-html 注入 XSS
import { sanitizeHtml } from '@/utils/sanitize'

const props = defineProps<{
  doc: DocumentResult
  selectable?: boolean
  selected?: boolean
  inBasket?: boolean
}>()

defineEmits<{
  (e: 'click', docId: string): void
  (e: 'toggleSelect', docId: string): void
  (e: 'addToBasket', doc: DocumentResult): void
  (e: 'quickPreview', doc: DocumentResult): void
  (e: 'viewRelations', doc: DocumentResult): void
}>()
</script>

<style scoped lang="less">
.result-card {
  margin-bottom: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.25s ease;

  &:hover {
    border-color: #d6e4ff;
    box-shadow: 0 4px 16px rgba(24, 144, 255, 0.08);
  }

  &--selected {
    border-color: #91d5ff;
    background: #f0f9ff;
  }

  .result-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
  }

  .result-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .result-tags {
    flex-shrink: 0;
  }

  .result-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    line-height: 1.5;
    transition: color 0.2s;

    &:hover {
      color: #1890ff;
    }

    :deep(em) {
      color: #f5222d;
      font-style: normal;
      font-weight: 600;
    }
  }

  .result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
    color: #8c8c8c;
    font-size: 13px;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }

  .result-subject-words {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;

    .subject-words-icon {
      color: #8c8c8c;
      font-size: 13px;
      margin-right: 4px;
    }

    .subject-word-tag {
      color: #8c8c8c;
      background: #fafafa;
      border-color: #e8e8e8;
      font-size: 12px;
      line-height: 20px;
      margin: 0;
    }

    .subject-words-more {
      color: #bfbfbf;
      font-size: 12px;
    }
  }

  .result-highlight {
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #fafafa;
    border-radius: 6px;
    border-left: 3px solid #e6f7ff;

    .highlight-item {
      color: #595959;
      font-size: 13px;
      line-height: 1.7;
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      :deep(em) {
        color: #f5222d;
        font-style: normal;
        background: #fff1f0;
        padding: 0 2px;
        border-radius: 2px;
      }
    }
  }

  .result-actions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
}
</style>
