<template>
  <div class="kole-segmented">
    <button
      v-for="opt in options" :key="opt.value"
      class="kole-segmented-item"
      :class="{ 'is-active': modelValue === opt.value, 'is-disabled': opt.disabled }"
      :disabled="opt.disabled"
      @click="choose(opt)"
    >
      <span v-if="opt.icon" class="ico">{{ opt.icon }}</span>
      {{ opt.label }}
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  options: { type: Array, required: true }   // [{ label, value, icon?, disabled? }]
});
const emit = defineEmits(['update:modelValue', 'change']);

function choose(opt) {
  if (opt.disabled) return;
  emit('update:modelValue', opt.value);
  emit('change', opt.value);
}
</script>

<!-- 样式对齐 组件2.txt Segmented 规范 -->
<style scoped>
.kole-segmented {
  display: inline-flex; align-items: center; background: #F5F7FA; border-radius: 4px; padding: 2px;
}
.kole-segmented-item {
  height: 28px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 4px; cursor: pointer; font-size: 14px; color: #262626; border: none; background: none;
  transition: background .15s, color .15s;
}
.kole-segmented-item:hover:not(.is-active):not(.is-disabled) { color: #2F54EB; }
.kole-segmented-item.is-active { background: #fff; color: #262626; box-shadow: 0 1px 2px rgba(0,0,0,0.08); font-weight: 500; }
.kole-segmented-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }
</style>
