<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: isSelected(item), disabled: !isEnabled(item) }"
        @tap="selectSize(item)"
      >
        <text class="size-text">{{ itemName(item) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SizeSelector',
  props: {
    // 支持两种格式：字符串数组 ['S','M','L'] 或 对象数组 [{name:'S',enabled:true}]
    list: {
      type: Array,
      default: () => []
    },
    selected: {
      type: [String, Number, Object],
      default: ''
    }
  },
  methods: {
    itemName(item) {
      if (item == null) return ''
      if (typeof item === 'object') return item.name
      return String(item)
    },
    isEnabled(item) {
      if (item == null) return false
      if (typeof item === 'object') return item.enabled !== false
      return true
    },
    isSelected(item) {
      const name = this.itemName(item)
      const selName =
        this.selected == null
          ? ''
          : typeof this.selected === 'object'
            ? this.selected.name
            : String(this.selected)
      return name === selName
    },
    selectSize(item) {
      if (!this.isEnabled(item)) return
      this.$emit('select', this.itemName(item))
    }
  }
}
</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;
  flex-wrap: wrap;
  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-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}

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