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

const { t } = useI18n()

// 定义步骤类型
interface OrderStep {
  label: string
  value: number
}

const props = defineProps<{
  steps?: OrderStep[]
  currentStatus?: number
}>()

const steps = computed(() => props.steps ?? [
  { label: t('orderStatus.ordered'), value: 1 },
  { label: t('orderStatus.paid'), value: 2 },
  { label: t('orderStatus.received'), value: 3 },
  { label: t('orderStatus.delivering'), value: 4 },
  { label: t('orderStatus.delivered'), value: 5 },
])

const currentStatus = computed(() => props.currentStatus ?? 1)

// 计算每个步骤的激活状态
const processedSteps = computed(() => {
  return steps.value.map(step => ({
    ...step,
    active: currentStatus.value >= step.value
  }))
})

// 计算进度条的宽度百分比
const progressWidth = computed(() => {
  if (steps.value.length <= 1) return 0

  // 找到当前状态在步骤数组中的位置
  const currentStepIndex = steps.value.findIndex(step => step.value === props.currentStatus)
  const activeStepIndex = currentStepIndex >= 0 ? currentStepIndex : -1
  
  if (activeStepIndex < 0) return 0
  
  const totalSteps = steps.value.length
  const width = Math.min(activeStepIndex / (totalSteps - 1) * 100, 100)
  
  if(width >= 50 && width < 100) {
    return width - 3
  }
  return width
})
</script>

<template>
  <view class="order-progress">
    <view class="relative">
      <!-- 进度条背景 -->
      <view class="progress-bg w-full h-12rpx bg-#F2F2F2   rounded-10rpx absolute top-18rpx left-0"></view>
      
      <!-- 进度条填充 -->
      <view 
        class="progress-fill h-12rpx bg-#333333 rounded-10rpx absolute top-18rpx left-0 transition-all duration-300"
        :style="{ width: `${progressWidth}%` }"
      ></view>
      
      <!-- 进度步骤 -->
      <view class="flex-center-sb relative z-1">
        <view 
          v-for="(step, index) in processedSteps" 
          :key="step.value"
          :class="[index === 0 ? '!items-start' : '', index === processedSteps.length - 1 ? '!items-end' : '']"
          class="flex flex-col items-center step-item"
        >
          <!-- 步骤圆点 -->
          <view 
            :class="[
              'w-48rpx h-48rpx  rounded-full transition-all duration-300',
              index === processedSteps.length - 1 ? 'flex items-center justify-end' : 'center'
            ]"
          >
            <!-- 激活状态显示勾选图标 -->
            <image
              v-if="step.active"
              src="@img/chef/1338.png"
              mode="aspectFill"
              class="w-48rpx h-48rpx"
            />
            <!-- 未激活状态显示空心圆 -->
             <image
              v-else
              src="@img/chef/1339.png"
              mode="aspectFill"
              class="w-36rpx h-36rpx"
            />
          </view>
          <!-- 步骤文字 -->
          <view :class="[step.active ? 'text-#333 font-500' : 'text-#9E9E9E' ]" class="text-24rpx lh-24rpx mt-12rpx">{{ step.label }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.order-progress {
  position: relative;
}

.step-item {
  position: relative;
  z-index: 2;
}

.check-icon {
  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjIyIDMuNDJMMTEuODIgMTcuODJDMTEuMSAxOC41NCA5LjkgMTguNTQgOS4xOCAxNy44Mkw5LjQyIDE3LjgyQzkuMTggMTcuODIgOC43IDE3LjU4IDguNDYgMTcuMzRMMC41NCA5LjQyQy0wLjE4IDguNyAtMC4xOCA3LjUgMC41NCA2LjU0QzEuMjYgNS44MiAyLjQ2IDUuODIgMy40MiA2LjU0TDEwLjYyIDEzLjc0TDIzLjgyIDAuNTM5OTk5QzI0LjU0IC0wLjE3OTk5OSAyNS43NCAtMC4xNzk5OTkgMjYuNDYgMC41Mzk5OTlMMjYuNyAwLjc4QzI2Ljk0IDEuNSAyNi45NCAyLjcgMjYuMjIgMy40MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=') no-repeat center;
  mask-size: contain;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI2LjIyIDMuNDJMMTEuODIgMTcuODJDMTEuMSAxOC41NCA5LjkgMTguNTQgOS4xOCAxNy44Mkw5LjQyIDE3LjgyQzkuMTggMTcuODIgOC43IDE3LjU4IDguNDYgMTcuMzRMMC41NCA5LjQyQy0wLjE4IDguNyAtMC4xOCA3LjUgMC41NCA2LjU0QzEuMjYgNS44MiAyLjQ2IDUuODIgMy40MiA2LjU0TDEwLjYyIDEzLjc0TDIzLjgyIDAuNTM5OTk5QzI0LjU0IC0wLjE3OTk5OSAyNS43NCAtMC4xNzk5OTkgMjYuNDYgMC41Mzk5OTlMMjYuNyAwLjc4QzI2Ljk0IDEuNSAyNi45NCAyLjcgMjYuMjIgMy40MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=') no-repeat center;
  -webkit-mask-size: contain;
}

.progress-bg {
  z-index: 0;
}

.progress-fill {
  z-index: 1;
}
</style>