<template>
  <view class="timeline">
    <view v-if="!records || records.length === 0" class="py-4 text-center">
      <text class="text-xs text-gray-400">暂无记录</text>
    </view>
    <view
      v-for="(record, index) in records"
      :key="index"
      class="timeline-item"
    >
      <view class="timeline-marker">
        <view
          class="timeline-dot"
          :class="isActive(record, index) ? 'timeline-dot-active' : ''"
        />
        <view v-if="index !== records.length - 1" class="timeline-line" />
      </view>
      <view class="timeline-content">
        <view class="flex items-center justify-between mb-1">
          <text class="text-sm font-medium text-gray-800">{{ record.action }}</text>
          <text v-if="isActive(record, index)" class="timeline-current">当前</text>
        </view>
        <view class="flex items-center text-xs text-gray-400">
          <text class="uni-icons uniui-clock-filled mr-1"></text>
          <text>{{ record.time }}</text>
        </view>
        <view v-if="record.operator" class="flex items-center mt-1">
          <text class="timeline-role" :class="roleClass(record.role)">{{ roleText(record.role) }}</text>
          <text class="text-xs text-gray-500 ml-1">{{ record.operator }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export interface TimelineRecord {
  time: string
  action: string
  operator: string
  role: string
  isCurrent?: boolean
}
</script>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    records: TimelineRecord[]
  }>(),
  {
    records: () => []
  }
)

function isActive(record: TimelineRecord, index: number): boolean {
  return record.isCurrent === true || index === props.records.length - 1
}

function roleText(role: string): string {
  const map: Record<string, string> = {
    sales: '销售',
    dispatch: '调度',
    construction: '施工',
    worker: '施工'
  }
  return map[role] || role || '系统'
}

function roleClass(role: string): string {
  const map: Record<string, string> = {
    sales: 'role-sales',
    dispatch: 'role-dispatch',
    construction: 'role-construction',
    worker: 'role-construction'
  }
  return map[role] || 'role-default'
}
</script>

<style scoped>
.timeline {
  padding: 4px 0;
}

.timeline-item {
  display: flex;
  position: relative;
}

.timeline-marker {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #d1d5db;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d1d5db;
  margin-top: 4px;
  z-index: 1;
}

.timeline-dot-active {
  background-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.timeline-line {
  width: 2px;
  flex: 1;
  background-color: #e5e7eb;
  margin-top: 4px;
  margin-bottom: -4px;
}

.timeline-content {
  flex: 1;
  padding-left: 12px;
  padding-bottom: 16px;
  min-width: 0;
}

.timeline-current {
  font-size: 10px;
  color: #2563eb;
  background-color: #eff6ff;
  padding: 1px 6px;
  border-radius: 8px;
}

.timeline-role {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
}

.role-sales {
  color: #2563eb;
  background-color: #eff6ff;
}

.role-dispatch {
  color: #f59e0b;
  background-color: #fff7ed;
}

.role-construction {
  color: #10b981;
  background-color: #ecfdf5;
}

.role-default {
  color: #6b7280;
  background-color: #f3f4f6;
}
</style>
