<script setup lang="ts">
interface WorkOrderDetail {
  ticketTypeName: string
  stationName?: string
  contact?: string
  phone?: string
  content?: string
  attachments?: string
  attachmentsUrl?: string[]
}

defineProps<{
  workOrder: WorkOrderDetail
}>()
</script>

<template>
  <wd-card :border="true" :shadow="false" style="margin-bottom: 16rpx;">
    <view class="card-content">
      <view class="info-item flex items-center py-2">
        <text class="info-label w-40">工单类型：</text>
        <text class="info-value flex-1">{{ workOrder.ticketTypeName }}</text>
      </view>
      <view class="info-item flex items-center py-2">
        <text class="info-label w-40">场站：</text>
        <text class="info-value flex-1">{{ workOrder.stationName || '无' }}</text>
      </view>
      <view class="info-item flex items-center py-2">
        <text class="info-label w-40">联系人：</text>
        <text class="info-value flex-1">{{ workOrder.contact || '无' }}</text>
      </view>
      <view class="info-item flex items-center py-2">
        <text class="info-label w-40">联系电话：</text>
        <text class="info-value flex-1">{{ workOrder.phone || '无' }}</text>
      </view>
      
      <view class="info-item flex flex-col">
        <text class="info-label w-40">提报内容：</text>
        <text class="info-value flex-1">{{ workOrder.content || '无' }}</text>
      </view>
      
      <!-- 附件 -->
      <view class="info-item flex flex-col mt-4">
        <text class="info-label w-40">附件：</text>
        <view v-if="workOrder.attachmentsUrl && workOrder.attachmentsUrl.length > 0" class="flex flex-wrap gap-2">
          <view 
            v-for="(url, index) in workOrder.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>
        <text v-else class="info-value">无</text>
      </view>
    </view>
  </wd-card>
</template>

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

.info-item {
  display: flex;
  gap: 16rpx;
}

.info-item.flex-col {
  flex-direction: column;
  align-items: flex-start;
}

.w-40 {
  width: 160rpx;
  flex-shrink: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.flex {
  display: flex;
}

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

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 16rpx;
}

.py-2 {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.mt-4 {
  margin-top: 32rpx;
}
</style>