<script setup lang="ts">
import { detailColumns, paymentOptions } from "../../config/configs";
defineProps<{
  detail: Record<string, string>;
}>();
</script>

<template>
  <el-descriptions :column="3" border size="small">
    <el-descriptions-item
      v-for="(item, index) in detailColumns"
      :label="item.label"
      :key="index"
    >
      <template v-if="item.field === 'status'">
        <el-tag>{{
          paymentOptions.find(s => s.value === detail.status)?.label
        }}</el-tag>
      </template>

      <template v-else-if="item.field === 'return_img'">
        <el-image
          style="height: 30px"
          :src="detail.return_img"
          :preview-src-list="[detail.return_img]"
        />
      </template>

      <span v-else>{{ detail[item.field] }}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>
