<script setup lang="ts">
type FactItem = {
  label: string
  value: string
}

const props = defineProps<{
  resultFacts: FactItem[]
  screenshotEmptyMessage: string
  screenshotEmptyTitle: string
  screenshotUrl: string
  showScreenshot: boolean
}>()

const emit = defineEmits<{
  openScreenshotPreview: []
}>()
</script>

<template>
  <section class="result-card">
    <div class="section-head">
      <strong>兑换结果</strong>
    </div>

    <div class="result-layout">
      <div class="fact-grid result-grid">
        <article v-for="fact in props.resultFacts" :key="fact.label" class="fact-card">
          <span>{{ fact.label }}</span>
          <strong>{{ fact.value }}</strong>
        </article>
      </div>

      <button
        v-if="props.showScreenshot"
        class="screenshot-figure"
        type="button"
        @click="emit('openScreenshotPreview')"
      >
        <img :src="props.screenshotUrl" alt="Tencent redeem screenshot" />
      </button>

      <div v-else class="empty-block">
        <strong>{{ props.screenshotEmptyTitle }}</strong>
        <p>{{ props.screenshotEmptyMessage }}</p>
      </div>
    </div>
  </section>
</template>

<style scoped>
.result-card {
  padding: 22px 22px 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(86, 108, 138, 0.1);
  box-shadow: 0 22px 70px rgba(30, 49, 78, 0.08);
  backdrop-filter: blur(18px);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head strong {
  display: block;
  font-size: 16px;
  color: #22354e;
}

.result-layout {
  display: grid;
  gap: 14px;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fact-card {
  padding: 14px;
  border-radius: 14px;
  background: #f7f9fc;
}

.fact-card span {
  display: block;
  font-size: 12px;
  color: #708096;
  letter-spacing: 0.02em;
}

.fact-card strong {
  display: block;
  margin-top: 6px;
  color: #1f324a;
  line-height: 1.5;
  word-break: break-word;
}

.screenshot-figure {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #e2e9f2;
  border-radius: 22px;
  overflow: hidden;
  background: #f4f8fc;
  cursor: zoom-in;
}

.screenshot-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.empty-block {
  margin-top: 14px;
  min-height: 180px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  background: #f8fbff;
  border: 1px dashed #d5dfec;
}

.empty-block strong {
  color: #2c4058;
  font-size: 16px;
}

.empty-block p {
  margin: 8px 0 0;
  color: #6b7a91;
  line-height: 1.7;
}

@media (max-width: 1140px) {
  .fact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .result-card {
    padding: 18px;
  }
}
</style>
