<!--
=============================================================================
企微IT智能服务台 — 快速回复卡片组件
=============================================================================
说明：快速回复模板卡片，显示分类、标题、内容、状态
  对于待审核模板，显示通过/驳回操作按钮
-->
<template>
  <div class="reply-card" :class="{ 'is-pending': reply.status === 'pending_review' }">
    <!-- 卡片头部 -->
    <div class="reply-card-header">
      <div class="reply-card-title">
        <el-tag size="small" effect="plain" style="margin-right: 8px">
          {{ reply.category }}
        </el-tag>
        {{ reply.title }}
      </div>
      <div class="reply-card-status">
        <!-- 已审核 -->
        <el-tag v-if="reply.status === 'approved'" type="success" size="small">
          已审核
        </el-tag>
        <!-- 待审核 -->
        <template v-else-if="reply.status === 'pending_review'">
          <div class="review-actions">
            <el-button size="small" type="primary" @click="$emit('approve', reply)">
              通过
            </el-button>
            <el-button size="small" @click="$emit('reject', reply)">
              驳回
            </el-button>
          </div>
        </template>
        <!-- 已驳回 -->
        <el-tag v-else-if="reply.status === 'rejected'" type="danger" size="small">
          已驳回
        </el-tag>
        <!-- 草稿 -->
        <el-tag v-else type="info" size="small">
          草稿
        </el-tag>
      </div>
    </div>

    <!-- 内容预览 -->
    <div class="reply-card-content">
      {{ reply.content }}
    </div>

    <!-- 底部信息 -->
    <div class="reply-card-footer">
      <template v-if="reply.variables && reply.variables.length > 0">
        <span class="footer-label">变量:</span>
        <span class="footer-value">{{ reply.variables.join(', ') }}</span>
        <span class="footer-sep">·</span>
      </template>
      <template v-if="reply.submitted_by_name">
        <span class="footer-label">提交人:</span>
        <span class="footer-value">{{ reply.submitted_by_name }}</span>
        <span class="footer-sep">·</span>
      </template>
      <span class="footer-label">版本:</span>
      <span class="footer-value">v{{ reply.version }}</span>
      <span class="footer-sep">·</span>
      <span class="footer-label">更新:</span>
      <span class="footer-value">{{ formatDate(reply.updated_at) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import type { QuickReplyTemplate } from '@/types'

// ==========================================================================
// Props / Emits
// ==========================================================================
defineProps<{
  /** 快速回复模板数据 */
  reply: QuickReplyTemplate
}>()

defineEmits<{
  /** 通过审核 */
  approve: [reply: QuickReplyTemplate]
  /** 驳回 */
  reject: [reply: QuickReplyTemplate]
}>()

// ==========================================================================
// 工具方法
// ==========================================================================

/** 格式化日期 */
function formatDate(dateStr: string): string {
  if (!dateStr) return '-'
  try {
    const d = new Date(dateStr)
    return d.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
  } catch {
    return dateStr
  }
}
</script>

<style scoped>
/* 卡片 */
.reply-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.reply-card:hover {
  border-color: var(--border-hover);
}
.reply-card.is-pending {
  border-color: var(--warning);
}

/* 卡片头部 */
.reply-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.reply-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

/* 内容预览 */
.reply-card-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  background: var(--bg-primary);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 8px;
}

/* 底部信息 */
.reply-card-footer {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.footer-label {
  color: var(--text-muted);
}
.footer-value {
  color: var(--text-secondary);
}
.footer-sep {
  margin: 0 4px;
  color: var(--text-muted);
}
</style>
