<template>
  <div class="segment-progress">
    <!-- <div class="label">
      <slot name="label">进度</slot>
    </div> -->
    <div class="bars">
      <div v-for="i in total" :key="i" class="bar" :class="{ active: i <= activeBars }"></div>
    </div>
    <div class="percent">{{ value }}%</div>
  </div>
</template>

<script>
export default {
  name: 'SegmentProgress',
  props: {
    value: { type: Number, default: 0 }, // 百分比
    total: { type: Number, default: 20 }, // 分段数
    color: { type: String, default: '#00cfff' }, // 激活颜色
    bgColor: { type: String, default: '#444' }, // 背景颜色
  },
  computed: {
    activeBars() {
      return Math.round((this.value / 100) * this.total)
    },
  },
}
</script>

<style scoped>
.segment-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9cf;
}

.bars {
  display: flex;
  gap: 5px;
}

.bar {
  width: 6px;
  height: 20px;
  border-radius: 2px;
  background: #294C68; /* 默认背景色，实际会用 style 动态覆盖 */
}

.bar.active {
  background: #00cfff; /* 激活色，实际会用 style 动态覆盖 */
  box-shadow: 0 0 4px #00cfff;
}

.percent {
  font-weight: bold;
  font-size: 16px;
  color: #00cfff;
}
</style>
