<script setup lang="ts">
import { paymentOptions } from "/@/views/purchase/purchPay/config/configs";
import { inv_status_list } from "/@/utils/status";
import { detailcolumns, statusOptions } from "../../config/configs";

defineProps<{
  statementDetail: 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>{{
          statusOptions.find(s => s.value === statementDetail.status)?.label
        }}</el-tag>
      </template>

      <template v-else-if="item.field === 'pay_status'">
        <el-tag>
          {{
            paymentOptions.find(s => s.value === statementDetail.pay_status)
              ?.label
          }}
        </el-tag>
      </template>

      <template v-else-if="item.field === 'inv_status'">
        <el-tag>
          {{
            inv_status_list.find(s => s.value === statementDetail.inv_status)
              ?.label
          }}
        </el-tag>
      </template>

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