<template>
  <view class="result-card" v-if="scanResult && codeStatus !== undefined">
    <!-- 头部：标题+时间 -->
    <view class="result-header">
      <text class="result-title">扫码信息</text>
      <text class="result-time">{{ currentTime }}</text>
    </view>

    <!-- 主体：根据配置循环渲染字段，无v-if -->
    <view class="result-body">
      <view 
        class="info-item" 
        v-for="(column, index) in displayColumns" 
        :key="index"
        v-if="column.showCondition(codeStatus, scanResult)"
      >
        <text class="info-label">{{ column.label }}：</text>
        <text class="info-value">
          {{ column.formatter ? column.formatter(scanResult[column.key], codeStatus) : scanResult[column.key] || '无' }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import { formatIoType, formatItemType } from '@/utils/wms';
import { CODE_STATUS } from '@/constants/wms';

export default {
  name: 'ScanResultCard',
  props: {
    scanResult: {
      type: Object,
      default: () => null,
      required: true
    },
    currentTime: {
      type: String,
      default: '',
      required: true
    },
    codeStatus: {
      type: Number,
      default: CODE_STATUS.UNUSED, // 默认未使用
      required: true
    }
  },
  computed: {
    // 字段显示配置：集中定义“显示哪些字段、怎么显示”
    displayColumns() {
      return [
        // 操作类型：仅状态0/1显示
        {
          label: '操作类型',
          key: 'ioType', // scanResult中的键
          formatter: formatIoType, // 调用工具函数格式化
          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK // 状态2（已出库）不显示
        },
        // 物品类型：所有状态显示
        {
          label: '物品类型',
          key: 'itemType',
          formatter: formatItemType,
          showCondition: () => true // 始终显示
        },
        // 数量：所有状态显示（注意：原组件用count，父组件用quantity，这里统一为quantity）
        {
          label: '数量',
          key: 'quantity',
          formatter: (val) => val || 0,
          showCondition: () => true
        },
        // 仓库ID：仅状态0/1显示
        {
          label: '仓库ID',
          key: 'warehouseName',
          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK
        },
        // 来源仓库：仅状态0/1且有fromWarehouseId时显示
        {
          label: '来源仓库',
          key: 'fromWarehouseName',
          showCondition: (status, result) => status !== CODE_STATUS.OUT_STOCK && result.fromWarehouseId
        },
        // 物品名称：所有状态显示
        {
          label: '物品名称',
          key: 'itemName',
          showCondition: () => true
        },
        // 物品编码：所有状态显示
        {
          label: '物品编码',
          key: 'itemCode',
          showCondition: () => true
        },
        // 批次号：所有状态显示
        {
          label: '批次号',
          key: 'batchNo',
          showCondition: () => true
        },
        // 库存单ID：仅状态0/1显示
        {
          label: '库存单ID',
          key: 'stockIoId', // 状态1时也用stockIoId，无需额外判断
          showCondition: (status) => status !== CODE_STATUS.OUT_STOCK
        }

        // 新增字段：直接在这里加配置，模板无需修改
        // 示例：
        // {
        //   label: '有效期',
        //   key: 'expireDate',
        //   showCondition: () => true
        // }
      ];
    }
  }
};
</script>

<style scoped>
/* 原有样式不变，仅保留隔离的scoped样式 */
.result-card { width: 680rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 15rpx rgba(0,0,0,0.05); overflow: hidden; }
.result-header { padding: 30rpx; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.result-title { font-size: 34rpx; color: #333; font-weight: bold; }
.result-time { font-size: 24rpx; color: #999; }
.result-body { padding: 30rpx; }
.info-item { display: flex; padding: 15rpx 0; border-bottom: 1px dashed #f0f0f0; align-items: flex-start; }
.info-item:last-child { border-bottom: none; }
.info-label { font-size: 28rpx; color: #666; width: 200rpx; font-weight: 500; flex-shrink: 0; }
.info-value { font-size: 28rpx; color: #333; flex: 1; word-break: break-all; }
</style>