<script setup lang="ts">
interface WorkOrderRecord {
  id: string
  operationContent: string
  operatorName: string
  operationTime: string
  operationType: string
  workOrderProcessRecords?: Array<{
    processContent: string
    attachmentsUrl?: string
  }>
  workOrderDelay?: Array<{
    delayReason: string
    delayDuration: string
    approveRemark: string
    approveStatus: string
    approveTime: string
    attachmentsUrl?: string
  }>
  message?: string
}

defineProps<{
  records: WorkOrderRecord[]
}>()
</script>

<template>
  <wd-card :border="true" :shadow="false">
    <view class="card-content">
      <view v-if="records.length > 0">
        <wd-steps :active="records.length - 1" vertical dot>
          <wd-step 
            v-for="(record, index) in records" 
            :key="record.id"
            :title="record.operationContent">
            <template #description>
              <view class="mt-2 ml-4">
                <text class="text-sm font-medium">{{ `${record.operatorName} · ${record.operationTime}` }}</text>
                <!-- 处理内容 -->
                <view v-if="record.workOrderProcessRecords?.[0]?.processContent" class="mb-2 p-2 bg-gray-50 rounded">
                  <text class="text-sm font-medium">处理内容：</text>
                  <text class="text-sm">{{ record.workOrderProcessRecords[0].processContent }}</text>
                  <!-- 处理内容附件 -->
                  <view v-if="record.workOrderProcessRecords[0].attachmentsUrl" class="mt-2">
                    <view class="flex flex-wrap gap-2">
                      <view 
                        v-for="(url, index) in record.workOrderProcessRecords[0].attachmentsUrl" 
                        :key="index" 
                        class="w-20 h-20 cursor-pointer rounded overflow-hidden">
                        <wd-img :width="100" :height="100" :src="url" :enable-preview="true" />
                      </view>
                    </view>
                  </view>
                </view>
                
                <!-- 延时申请 -->
                <view v-if="record.operationType === 'APPLY_DELAY' && record.workOrderDelay?.[0]" class="mb-2 p-2 bg-gray-50 rounded">
                  <text class="text-sm font-medium">延时原因：</text>
                  <text class="text-sm">{{ record.workOrderDelay[0].delayReason }}</text>
                  <text v-if="record.workOrderDelay[0].delayDuration" class="text-sm block mt-1">
                    延时时长：{{ record.workOrderDelay[0].delayDuration }} 小时
                  </text>
                  <!-- 延时申请附件 -->
                  <view v-if="record.workOrderDelay[0].attachmentsUrl" class="mt-2">
                    <view class="flex flex-wrap gap-2">
                      <view 
                        v-for="(url, index) in record.workOrderDelay[0].attachmentsUrl" 
                        :key="index" 
                        class="w-20 h-20 cursor-pointer rounded overflow-hidden"
                      >
                        <wd-img :width="100" :height="100" :src="url" :enable-preview="true" />
                      </view>
                    </view>
                  </view>
                </view>
                
                <!-- 延时审批 -->
                <view v-if="record.operationType === 'AUDIT_DELAY' && record.workOrderDelay?.[0]" class="mb-2 p-2 bg-gray-50 rounded">
                  <text class="text-sm font-medium">审批意见：</text>
                  <text class="text-sm">{{ record.workOrderDelay[0].approveRemark }}</text>
                  <text v-if="record.workOrderDelay[0].approveStatus" class="text-sm block mt-1">
                    审核状态：{{ record.workOrderDelay[0].approveStatus === '1' ? '同意' : '拒绝' }}
                  </text>
                  <text v-if="record.workOrderDelay[0].approveTime" class="text-sm block mt-1">
                    新截止时间：{{ record.workOrderDelay[0].approveTime }}
                  </text>
                </view>
                
                <!-- 其他消息 -->
                <view v-if="record.message && !['PROCESS', 'APPLY_DELAY', 'AUDIT_DELAY'].includes(record.operationType)" class="mb-2 p-2 bg-gray-50 rounded">
                  <text class="text-sm">{{ record.message }}</text>
                </view>
              </view>
            </template>
          </wd-step>
        </wd-steps>
      </view>
      <text v-else>暂无工单流程记录</text>
    </view>
  </wd-card>
</template>

<style scoped>
.card-content {
  padding: 20rpx 0;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-2 {
  gap: 16rpx;
}

.mt-2 {
  margin-top: 16rpx;
}

.ml-4 {
  margin-left: 32rpx;
}

.mb-2 {
  margin-bottom: 16rpx;
}

.p-2 {
  padding: 16rpx;
}

.bg-gray-50 {
  background-color: #f5f5f5;
}

.rounded {
  border-radius: 8rpx;
}

.text-sm {
  font-size: 24rpx;
}

.font-medium {
  font-weight: 500;
}
</style>