<template>
  <div class="kole-segmented">
    <button
      v-for="opt in options" :key="opt.value"
      class="kole-segmented-item"
      :class="{ 'is-active': value === 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>
export default {
  name: 'KoleSegmented',
  props: {
    value: { type: [String, Number], default: '' },
    options: { type: Array, required: true }   // [{ label, value, icon?, disabled? }]
  },
  methods: {
    choose(opt) {
      if (opt.disabled) return;
      this.$emit('input', opt.value);
      this.$emit('change', opt.value);
    }
  }
};
</script>

<!-- 样式对齐 组件2.txt Segmented 规范 -->
<style>
.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>
