<template>
  <article class="progress-card panel">
    <div class="progress-block">
      <div class="progress-head">
        <h3>{{ isApplicationDocument ? '申请进度' : '报销进度' }}</h3>
      </div>
      <div class="progress-line" :style="{ '--progress-columns': progressSteps.length }">
        <div
          v-for="step in progressSteps"
          :key="step.label"
          class="progress-step"
          :class="{ active: step.active, current: step.current, done: step.done }"
        >
          <span>
            <i
              v-if="step.current"
              v-motion
              class="current-progress-ring"
              :initial="currentProgressRingMotion.initial"
              :enter="currentProgressRingMotion.enter"
              aria-hidden="true"
            ></i>
            <i v-if="step.done" class="mdi mdi-check"></i>
            <template v-else>{{ step.index }}</template>
          </span>
          <div class="progress-step-copy" :title="step.title || step.detail || step.time">
            <strong>{{ step.label }}</strong>
            <small class="progress-step-status">{{ step.time }}</small>
            <em v-if="step.detail" class="progress-step-meta">{{ step.detail }}</em>
          </div>
        </div>
      </div>
    </div>
    <TravelRequestExpenseCaseTimeline
      v-if="claimId"
      :claim-id="claimId"
      :refresh-key="refreshKey"
    />
  </article>
</template>

<script setup>
import TravelRequestExpenseCaseTimeline from './TravelRequestExpenseCaseTimeline.vue'

defineProps({
  isApplicationDocument: { type: Boolean, default: false },
  progressSteps: { type: Array, default: () => [] },
  currentProgressRingMotion: { type: Object, required: true },
  claimId: { type: String, default: '' },
  refreshKey: { type: String, default: '' }
})
</script>

<style scoped src="../../assets/styles/components/travel-request-progress-card.css"></style>
