<template>
  <!-- 颜色选择：第一行 4 个，第二行 2 个；胶囊样式，选中橙色边框+橙色文字；不可用透明度降低且不可点 -->
  <view class="color-wrap">
    <text class="title">颜色</text>

    <view class="color-list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="color-pill"
        :class="{ active: selectedId === item.id, disabled: item.enabled === false }"
        @tap="selectColor(item)"
      >
        <view class="color-dot" :style="{ background: item.value }"></view>
        <text class="color-name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ColorSelector',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    selectedId: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    selectColor(item) {
      if (item && item.enabled === false) return
      this.$emit('select', item.id)
    }
  }
}
</script>

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

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

/* 胶囊列表 */
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx; /* 8px 横向 / 纵向 */
}

/* 单个胶囊：padding 5px 12px，圆角 60px */
.color-pill {
  display: flex;
  align-items: center;
  gap: 8rpx; /* 4px */
  padding: 10rpx 24rpx; /* 5px 12px */
  border: 1rpx solid #f2f2f2;
  border-radius: 120rpx; /* 60px */
  background: #ffffff;
}
.color-pill.active {
  border-color: #ff6800;
}
.color-pill.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 颜色圆点 15x15，1px 灰色边框 */
.color-dot {
  width: 30rpx; /* 15px */
  height: 30rpx;
  border-radius: 50%;
  border: 1rpx solid #cdcdcd;
}

/* 颜色名称 14px 黑，选中橙色 */
.color-name {
  font-size: 27rpx; /* 14px */
  color: #000000;
  line-height: 33rpx;
}
.color-pill.active .color-name {
  color: #ff6800;
}
</style>
