<template>
  <!-- 包装规格表：4 列 × 4 行，每个数据单元格双单位（cm + in） -->
  <view class="pack-wrap">
    <view class="header-row">
      <text class="title">包装规格</text>
      <text class="unit">单位：{{ data.unit }}</text>
    </view>

    <view class="table">
      <!-- 表头：bg #DFDFDF，圆角 6px -->
      <view class="row header">
        <text
          class="cell"
          v-for="(col, index) in data.columns"
          :key="index"
        >{{ col }}</text>
      </view>

      <!-- 数据行：偶数行 bg #F7F7F7，行高 60px（双行内容） -->
      <view
        class="row data-row"
        :class="{ alt: (index + 1) % 2 === 0 }"
        v-for="(row, index) in data.rows"
        :key="index"
      >
        <!-- 尺码列：单行居中 -->
        <view class="cell size-cell">
          <text class="size-text">{{ row.size }}</text>
        </view>

        <!-- 尺寸列：cm + in 双行 -->
        <view class="cell dual-cell">
          <text class="dual-top">{{ row.dimension.cm }}</text>
          <text class="dual-bottom">{{ row.dimension.in }}</text>
        </view>

        <!-- 体积列：cm + in 双行 -->
        <view class="cell dual-cell">
          <text class="dual-top">{{ row.volume.cm }}</text>
          <text class="dual-bottom">{{ row.volume.in }}</text>
        </view>

        <!-- 重量列：cm + in 双行 -->
        <view class="cell dual-cell">
          <text class="dual-top">{{ row.weight.cm }}</text>
          <text class="dual-bottom">{{ row.weight.in }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PackagingSpec',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.pack-wrap {
  padding: 30rpx 20rpx; /* 15px 10px */
  background: #ffffff;
}

/* 标题行 */
.header-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx; /* 10px */
}
.title {
  font-size: 29rpx; /* 15px */
  color: #000000;
  line-height: 33rpx;
}
.unit {
  margin-left: 16rpx;
  font-size: 21rpx; /* 11px */
  color: rgba(0, 0, 0, 0.5);
  line-height: 33rpx;
}

/* 表格 */
.table {
  display: flex;
  flex-direction: column;
  gap: 8rpx; /* 4px 行间距 */
}

/* 单行 */
.row {
  display: flex;
  border-radius: 12rpx; /* 6px */
  align-items: center;
}
.row.header {
  height: 77rpx; /* 40px */
  background: #dfdfdf;
}
.row.data-row {
  height: 115rpx; /* 60px 双行内容更高 */
}
.row.alt {
  background: #f7f7f7;
}

/* 单元格 */
.cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表头文字 */
.row.header .cell {
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}

/* 尺码列：单行 13px */
.size-text {
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}

/* 双单位单元格：cm 在上，in 在下 */
.dual-cell {
  gap: 4rpx; /* 2px */
}
.dual-top,
.dual-bottom {
  font-size: 19rpx; /* 10px */
  color: rgba(0, 0, 0, 0.6);
  line-height: 33rpx;
}
</style>
