<template>
  <section class="expense-case-timeline" aria-label="费用事件时间线">
    <div class="expense-case-timeline-head">
      <div>
        <div class="expense-case-timeline-title-row">
          <h4>费用事件时间线</h4>
          <span v-if="timeline" class="expense-case-stage">{{ timeline.stageLabel }}</span>
        </div>
        <p v-if="timeline" class="expense-case-meta">
          <span>{{ timeline.caseNo || '统一费用事件' }}</span>
          <span>已串联 {{ timeline.linkCount }} 张业务单据</span>
        </p>
        <p v-else>记录费用从申请、审批、报销到付款的真实办理轨迹。</p>
      </div>
      <button
        class="expense-case-refresh"
        type="button"
        :disabled="loading"
        aria-label="刷新费用事件时间线"
        @click="refreshExpenseCaseTimeline"
      >
        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
        <span>刷新</span>
      </button>
    </div>

    <div class="expense-case-timeline-body" aria-live="polite">
      <div v-if="loading && !timeline" class="expense-case-state loading">
        <i class="mdi mdi-loading mdi-spin"></i>
        <span>正在同步真实费用事件</span>
      </div>

      <div v-else-if="errorMessage" class="expense-case-state error">
        <i class="mdi mdi-alert-circle-outline"></i>
        <div>
          <strong>费用事件加载失败</strong>
          <span>{{ errorMessage }}</span>
        </div>
        <button type="button" @click="refreshExpenseCaseTimeline">重新加载</button>
      </div>

      <div v-else-if="notAvailable" class="expense-case-state empty">
        <i class="mdi mdi-timeline-alert-outline"></i>
        <div>
          <strong>当前单据尚未纳入统一费用事件</strong>
          <span>上方进度仍可正常使用，后续业务动作写入后将自动展示办理记录。</span>
        </div>
      </div>

      <div v-else-if="timeline && !timeline.events.length" class="expense-case-state empty">
        <i class="mdi mdi-timeline-clock-outline"></i>
        <div>
          <strong>统一费用事件已建立</strong>
          <span>暂无可展示的办理记录。</span>
        </div>
      </div>

      <ol v-else-if="timeline" class="expense-case-event-list">
        <li
          v-for="event in timeline.events"
          :key="event.id"
          class="expense-case-event"
          :class="event.tone"
        >
          <span class="expense-case-event-icon" aria-hidden="true">
            <i :class="event.icon"></i>
          </span>
          <div class="expense-case-event-copy">
            <strong>{{ event.label }}</strong>
            <p>{{ event.summary }}</p>
            <div class="expense-case-event-meta">
              <span><i class="mdi mdi-account-outline"></i>{{ event.actorLabel }}</span>
              <time :datetime="event.occurredAt || undefined">{{ event.occurredAtLabel }}</time>
            </div>
          </div>
        </li>
      </ol>
    </div>
  </section>
</template>

<script setup>
import { toRef } from 'vue'

import { useExpenseCaseTimeline } from '../../composables/requests/useExpenseCaseTimeline.js'

const props = defineProps({
  claimId: { type: String, default: '' },
  refreshKey: { type: String, default: '' }
})

const {
  timeline,
  loading,
  errorMessage,
  notAvailable,
  refreshExpenseCaseTimeline
} = useExpenseCaseTimeline({
  claimId: toRef(props, 'claimId'),
  refreshKey: toRef(props, 'refreshKey')
})
</script>

<style scoped src="../../assets/styles/components/travel-request-expense-case-timeline.css"></style>
