<template>
  <div class="step-progress-bar">
    <div class="step-container">
      <div 
        v-for="(step, index) in steps" 
        :key="index" 
        class="step-item"
      >
        <div 
          class="step-circle"
          :class="{
            'completed': currentStep > index,
            'current': currentStep === index,
            'pending': currentStep < index
          }"
        >
          <span>{{ index + 1 }}</span>
        </div>
        <div class="step-title">{{ step.title }}</div>
        
        <!-- 虚线连接线 -->
        <div v-if="index < steps.length - 1" class="step-line">
          <div 
            class="line-progress"
            :style="{ width: lineProgress(index) }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

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

interface Step {
  title: string;
}

const props = defineProps({
  steps: {
    type: Array as PropType<Step[]>,
    required: true
  },
  currentStep: {
    type: Number,
    default: 0,
    validator: (val: number) => val >= 0
  }
});

// 计算连接线的进度
const lineProgress = (index: number) => {
  if (props.currentStep > index + 1) {
    return '100%';
  } else if (props.currentStep === index + 1) {
    return '50%';
  }
  return '0%';
};
</script>

<style scoped>
.step-progress-bar {
  width: 100%;
  padding: 20px 0;
}

.step-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.step-circle {
  z-index: 1;
  display: flex;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.completed {
  color: #fff;
  background: #A30113;
}

.current {
  color: #fff;
  background: #A30113;
}

.pending {
  color: #000;
  background-color: #f5f5f5;
  /* border: 1px solid #d9d9d9; */
}

.check-icon {
  font-weight: bold;
}

.step-title {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

.step-line {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 1px;
}

.line-progress {
  width: 0;
  height: 100%;
  background-color: #fff;
  transition: width 1s ease;
}

/* 虚线背景 */
.step-line::before {
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 2px;
  background-image: linear-gradient(to right, #A30113 50%, transparent 50%);
  background-repeat: repeat-x;
  background-size: 9px 3px;
  content: '';
}
</style>  
