<template>
  <!-- 通用文本选项选择（物流/印花/工艺）：胶囊样式，选中橙色边框+橙色文字 -->
  <view class="option-wrap">
    <text class="title">{{ title }}</text>

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

<script>
export default {
  name: 'OptionSelector',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    selected: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    selectOption(item) {
      this.$emit('select', item)
    }
  }
}
</script>

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

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

/* 选项列表 */
.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx; /* 8px */
}

/* 单个胶囊：与颜色选择样式一致 */
.option-item {
  padding: 10rpx 24rpx; /* 5px 12px */
  border: 1rpx solid #f2f2f2;
  border-radius: 120rpx; /* 60px */
  background: #ffffff;
}
.option-item.active {
  border-color: #ff6800;
}

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