<template>
  <div class="difficulty-bar">
    <div v-for="(color, index) in colors" :key="index" class="bar-segment">
      <!-- 背景灰色 -->
      <div class="bar-bg"></div>
      <!-- 前景彩色，宽度根据 value 决定 -->
      <div
        class="bar-fill"
        :style="{
          backgroundColor: color,
          width: getFillWidth(index) + '%'
        }"
      ></div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  value: {
    type: Number,
    required: true // 0 - 100
  }
});

// 每段占比（5 段 → 每段 20%）
const segmentPercent = 20;

// 彩色配置
const colors = [
  '#00B7D4', // 蓝
  '#6CD12A', // 绿
  '#FFE53B', // 黄
  '#FF9F1C', // 橙
  '#FF3C1C' // 红
];

// 计算某一段的填充宽度（0–100%）
const getFillWidth = (index) => {
  const start = index * segmentPercent;
  const end = (index + 1) * segmentPercent;
  if (props.value >= end) return 100;
  if (props.value <= start) return 0;
  return ((props.value - start) / segmentPercent) * 100;
};
</script>

<style scoped>
.difficulty-bar {
  display: flex;
  height: 10px;
  overflow: hidden;
}

.bar-segment {
  width: 108px;
  margin-right: 2px;
  position: relative;

  &:last-child {
    margin-right: 0;
  }
}

.bar-bg {
  background-color: #dde1e6; /* 默认灰色 */
  height: 100%;
  width: 100%;
}

.bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
</style>
