<script setup lang="ts">
import type {
  AdminKuaishouEticketDetailResult,
  AdminKuaishouEticketConsumeResult,
} from '@/types/admin'

type Props = {
  kuaishouEticketDetailResult: AdminKuaishouEticketDetailResult | null
  kuaishouEticketConsumeResult: AdminKuaishouEticketConsumeResult | null
}

defineProps<Props>()
</script>

<template>
  <!-- 详情结果 -->
  <el-card v-if="kuaishouEticketDetailResult" class="section-card">
    <template #header>
      <div>
        <span class="card-title">核销详情返回</span>
        <p class="card-desc">成功查询后会自动回填 eTicketId、oid、formToken 和建议核销数量。</p>
      </div>
    </template>
    <pre class="debug-pre">{{ JSON.stringify(kuaishouEticketDetailResult.raw, null, 2) }}</pre>
  </el-card>

  <el-card v-if="kuaishouEticketConsumeResult" class="section-card">
    <template #header>
      <div>
        <span class="card-title">核销执行返回</span>
        <p class="card-desc">这里保留接口原始响应，方便核对 result、error_msg 和 requestId。</p>
      </div>
    </template>
    <pre class="debug-pre">{{ JSON.stringify(kuaishouEticketConsumeResult.raw, null, 2) }}</pre>
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.debug-pre {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: #0f172a;
  color: #e2e8f0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xs);
  line-height: 1.6;
  font-family: var(--font-mono);
}
</style>
