<template>
  <!-- 尺码选择：5 个按钮横排，选中态橙色边框+橙色文字（背景仍为浅灰） -->
  <view class="size-wrap">
    <text class="title">尺码</text>

    <view class="size-list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="size-item"
        :class="{ active: selected === item }"
        @tap="selectSize(item)"
      >
        <text class="size-text">{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SizeSelector',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    selected: {
      type: String,
      default: ''
    }
  },
  methods: {
    selectSize(size) {
      this.$emit('select', size)
    }
  }
}
</script>

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

/* 标题 */
.title {
  display: block;
  font-size: 29rpx; /* 15px */
  color: #000000;
  line-height: 33rpx;
  margin-bottom: 30rpx; /* 15px */
}

/* 尺码列表横排 */
.size-list {
  display: flex;
  gap: 12rpx; /* 6px */
}

/* 单个尺码按钮 44x34，圆角 4px，背景 #F7F7F7 */
.size-item {
  width: 85rpx; /* 44px */
  height: 65rpx; /* 34px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  border: 1rpx solid transparent;
  border-radius: 8rpx; /* 4px */
}

/* 选中：橙色边框 + 橙色文字（背景保持 #F7F7F7） */
.size-item.active {
  border-color: #ff6800;
}

.size-text {
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}
.size-item.active .size-text {
  color: #ff6800;
}
</style>
