<template>
  <div 
    class="progress-container"
    :style="{ 
      '--progress-width': `${percentage}%`, 
      '--progress-start-color': startColor,
      '--progress-end-color': endColor || startColor,
      '--progress-bg-color': backgroundColor,
      '--progress-height': height 
    }"
  >
    <div class="progress-bar">
      <div class="progress-inner">
        <div class="progress-text" v-if="showText">
          {{ percentage }}%
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface ProgressProps {
  percentage: number
  startColor?: string
  endColor?: string
  backgroundColor?: string
  showText?: boolean
  striped?: boolean
  animated?: boolean
  height?: string
}

const props = withDefaults(defineProps<ProgressProps>(), {
  percentage: 0,
  startColor: 'rgba(41,241,250,0)',
  endColor: '#29F1FA',
  backgroundColor: '#0e2e65',
  showText: false,
  striped: false,
  animated: false,
  height: '30px'
})

// 确保百分比在0-100之间
const percentage = computed(() => {
  if (props.percentage < 0) return 0
  if (props.percentage > 100) return 100
  return props.percentage
})
</script>

<style lang="scss" scoped>
.progress-container {
  --progress-width: 0%;
  --progress-start-color: #44F1FF;
  --progress-end-color: #44F1FF;
  --progress-bg-color: #031743;
  width: 100%;
  position: relative;
}

.progress-bar {
  width: 100%;
  height: var(--progress-height);
  background-color: var(--progress-bg-color);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress-width);
  background: linear-gradient(90deg, var(--progress-start-color), var(--progress-end-color));
  border-radius: 15px;
  transition: width 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px 1px var(--progress-start-color);
  z-index: auto; 
  
  // 条纹效果
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: v-bind('props.striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none"');
    background-size: 40px 40px;
    opacity: 0.6;
    z-index: auto;
    animation: v-bind('props.animated && props.striped ? "progress-animation 2s linear infinite" : "none"');
  }
}

.progress-text {
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@keyframes progress-animation {
  0% {
    background-position: 40px 0;
  }
  100% {
    background-position: 0 0;
  }
}
</style>
