<script setup lang="ts">
const props = defineProps({
    timeLineList: {
    type: Array, // 类型校验
    required: true, // 必传
  },
  currentStep: {
    type: Number,
    default: 0, // 默认值
  },
});
</script>

<template>
  <div class="flex justify-between items-center">
    <div v-for="(item, index) in props.timeLineList" :key="index" class="flex items-center text-[18px]">
      <div
        :style="props.currentStep >= item.index ? { border: '2px solid #203df5' } : {}"
        class="w-[40px] h-[40px] rounded-full bg-[#eee] text-center flex items-center justify-center"
      >
        {{ item.index }}
      </div>
      <div
        class="ml-2 flex items-center font-bold"
        :style="props.currentStep >= item.index ? { color: '#203df5' } : {}"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style></style>
