<template>
  <div class="level-container">
    <!-- SVG 轨道 + 滤镜定义 -->
    <svg class="level-svg" viewBox="0 0 500 150">
      <!-- 高光滤镜定义 -->
      <defs>
        <filter id="glowFilter">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
          <feColorMatrix type="matrix" values="
                        1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 0.5 0" />
          <feBlend in2="SourceGraphic" mode="normal" />
        </filter>
      </defs>

      <!-- 绘制向上弯曲的轨道曲线 -->
      <path class="track" d="M 50 75 
                   Q 250 25 450 75" />
			<template v-for="(ele,index) in lvList" :key="index">
				<circle v-if="index === 0" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="50" cy="75" r="6" />
				<circle v-if="index === 1" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="250" cy="50" r="8" fill="#fff"
				  style="filter: drop-shadow(0 0 8px rgba(255,255,255,1));" />
				  <circle v-if="index === 2" :class="ele.level === currentIndex ? 'highlight-dot' : 'normal-dot'" cx="450" cy="75" r="6" />
			</template>     
    </svg>
	<template v-if="lvList && lvList.length">
		<div v-for="(ele,index) in lvList" class="level-text" :class="`text-${index+1}`">{{`Lv.${ele.level}`}}</div>
	</template>
  </div>
</template>
<script>
	export default {
		props: {
			lvList: {
				type: Array,
				default: () => [],
			},
			currentIndex:{
				type: Number,
				default: () => 0,
			}
		},
	}

</script>
<style scoped>
    .level-container {
      position: relative;
      width: 100%;
      height: 110px;
      /* 深色背景模拟原图 */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .level-svg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    /* 绘制曲线轨道 */
    .track {
      stroke: rgba(255, 255, 255, 0.3);
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      filter: url(#glowFilter);
      /* 应用高光滤镜 */
    }

    /* Lv.2 高光节点样式 */
    .highlight-dot {
      fill: #fff;
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
      /* 发光效果 */
    }

    /* 普通节点样式 */
    .normal-dot {
      fill: rgba(255, 255, 255, 0.3);
    }

    /* 文字样式 */
    .level-text {
      position: absolute;
      color: #fff;
      font-size: 14px;
      bottom: 10px;
    }

    /* 文字位置 */
    .text-1 {
      left: 60rpx;
    }

    .text-2 {
      /* left: 250px; */
    }

    .text-3 {
      right: 60rpx;
    }

    /* SVG 高光滤镜定义 */
    svg {
      overflow: visible;
    }

    #glowFilter {
      filterUnits: userSpaceOnUse;
    }

    #glowFilter feGaussianBlur {
      stdDeviation: 3;
      /* 高光模糊范围 */
      result: blur;
    }

/*    #glowFilter feMerge {
      <feMergeNode in="blur" /><feMergeNode in="SourceGraphic" />
    } */
</style>