<template>
  <!-- 产品尺码表：列数由后端 columns 动态决定（首列固定"尺码"），交替行背景 -->
  <view class="chart-wrap">
    <view class="header-row">
      <text class="title">产品尺码</text>
      <!-- 单位小字：设计稿 1566-1160，11px Medium 黑 50%，与标题底对齐 -->
      <text class="unit">单位：cm</text>
    </view>

    <view class="table">
      <!-- 表头：首列固定"尺码"，其余列名来自后端 columns -->
      <view class="row header">
        <text class="cell">尺码</text>
        <text class="cell" v-for="col in data.columns" :key="col.key">{{ col.name }}</text>
      </view>

      <!-- 数据行：偶数行（第 2、4 行）bg #F7F7F7，圆角 6px -->
      <view
        class="row"
        :class="{ alt: (index + 1) % 2 === 0 }"
        v-for="(row, index) in data.rows"
        :key="index"
      >
        <text class="cell">{{ row.size }}</text>
        <text class="cell" v-for="col in data.columns" :key="col.key">{{ (row.cells && row.cells[col.key]) || '' }}</text>
      </view>
    </view>
  </view>
</template>

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

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

/* 标题行：产品尺码（左） + 单位（右），按文字基线对齐（字下边界齐平） */
.header-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 20rpx; /* 10px */
}
.title {
  font-size: 29rpx; /* 15px */
  color: #000000;
  line-height: 33rpx;
}
/* 单位小字：紧接标题右侧（不靠右对齐），11px → 21rpx，行高 17px → 33rpx，黑色 50% 透明 */
.unit {
  margin-left: 12rpx;
  font-size: 21rpx;
  font-weight: 500;
  color: #000000;
  opacity: 0.5;
  line-height: 33rpx;
}
/* 表格 */
.table {
  display: flex;
  flex-direction: column;
  gap: 8rpx; /* 行间距 4px */
}

/* 单行 */
.row {
  display: flex;
  height: 77rpx; /* 40px */
  align-items: center;
  border-radius: 12rpx; /* 6px */
}

/* 表头行 */
.row.header {
  background: #dfdfdf;
}

/* 偶数行（交替背景） */
.row.alt {
  background: #f7f7f7;
}

/* 单元格：等宽分布 */
.cell {
  flex: 1;
  text-align: center;
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}
.row.header .cell {
  color: #000000;
}
.row:not(.header) .cell {
  opacity: 0.6;
}
.row:not(.header) .cell:first-child {
  opacity: 1; /* 尺码列不透明 */
}
</style>
