<script setup lang="ts">
import { status_options, detailColumns, inv_type } from "../../config/configs";
import { inv_type_list } from "/@/utils/status";

defineProps<{
  invDetail: 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 === 'invType'">
        <el-tag>{{
          inv_type.find(t => t.value === invDetail.invType)?.label
        }}</el-tag>
      </template>

      <template v-else-if="item.field === 'invoiceType'">
        <el-tag>{{
          inv_type_list.find(t => t.value === invDetail.invoiceType)?.label
        }}</el-tag>
      </template>

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

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

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