OrderDetail.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, VideoPlay, Download, Picture } from '@element-plus/icons-vue'
import type { OrderDetail, ApiResponse } from '../types/order'
import { qualityApi } from '../api'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const orderDetail = ref<OrderDetail | null>(null)

// Image Preview State
const previewImageList = ref<string[]>([])
const currentVideoUrl = ref('')
const videoDialogVisible = ref(false)
const envImagesVisible = ref(false)
const envImageList = ref<string[]>([])

// Fetch Data
const fetchDetail = async () => {
  loading.value = true
  
  try {
    // 从路由参数获取 applyId
    const applyId = route.params.id as string
    
    // 调用接口获取详情
    const response = await qualityApi.getProcessByApplyId({
      applyId
    }) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      const data = response.data || {}
      const processList = data.processList || []
      const videoList = data.videoList || []
      
      // 格式化时间戳
      const formatTimestamp = (timestamp: number | null) => {
        if (!timestamp) return ''
        const date = new Date(timestamp)
        return date.toLocaleString('zh-CN', { 
          year: 'numeric', 
          month: '2-digit', 
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }).replace(/\//g, '-')
      }
      
      // 获取质检状态描述
      const getStatusDesc = (checkStatus: string) => {
        const statusMap: any = {
          '1': '未开始',
          '2': '进行中',
          '3': '已完成',
          '4': '无法质检'
        }
        return statusMap[checkStatus] || '未知'
      }
      
      // 合并基础信息和详情数据
      orderDetail.value = {
        // 基础信息(从接口 data 获取)
        id: data.applyId || applyId,
        applyId: data.applyId || applyId,
        workerId: data.campaignId || '',
        businessAccount: data.accNbr || '',
        orderIds: data.orderCode || '',  // 直接使用 orderCode 字符串
        city: data.areaName || '',
        status: getStatusDesc(data.checkStatus),
        cannotQcReason: data.failReason || '',
        startTime: formatTimestamp(data.startTime),
        endTime: formatTimestamp(data.endTime),
        completeTime: formatTimestamp(data.endTime),
        noPhotoCount: data.noShowNum || 0,
        manualInputCount: data.manualInputNum || 0,
        envAbnormalCount: data.cheatNum || 0,
        isCheating: data.isCheat === 1 || false,
        
        // 新增字段(从接口 data 获取)
        installAddress: data.addressName || '',
        orderType: data.serviceNames ? data.serviceNames.join(', ') : '',
        deviceType: data.terminalClassList ? data.terminalClassList.join(', ') : '',
        totalDuration: data.videoDuration ? formatDuration(data.videoDuration) : '',
        
        // 质检步骤(从 processList 获取)
        steps: processList.map((item: any, index: number) => ({
          id: item.id || index,
          name: item.process || `步骤${index + 1}`,
          duration: formatDuration(item.useTime),
          result: item.result || '通过',
          imageUrl: item.pubPicUrl || item.picUrl || '',
          isAbnormal: item.findCheat || 0,
          recognizeType: item.recognizeType || 0
        })),
        
        // 视频列表(从 videoList 获取)
        videos: videoList.map((item: any, index: number) => ({
          id: item.id || index,
          name: `视频${index + 1} - ${item.callId || ''}`,
          videoUrl: item.recordFile || '',
          thumbnailUrl: '', // 如果有缩略图字段可以映射
          duration: formatDuration(item.videoDuration || 0)
        }))
      }
      
      // 准备图片预览列表
      previewImageList.value = orderDetail.value.steps
        .map(s => s.imageUrl)
        .filter(url => url)
    }
  } catch (error) {
    console.error('获取工单详情失败:', error)
    // 错误提示已在 request.ts 中统一处理
  } finally {
    loading.value = false
  }
}

// 辅助函数:格式化时长
const formatDuration = (seconds: number): string => {
  if (!seconds) return '0秒'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60
  
  const parts = []
  if (hours > 0) parts.push(`${hours}小时`)
  if (minutes > 0) parts.push(`${minutes}分`)
  if (secs > 0 || parts.length === 0) parts.push(`${secs}秒`)
  
  return parts.join('')
}

// Handlers
const handleBack = () => {
  router.back()
}

const showEnvImages = () => {
    // Show abnormal images
    if (orderDetail.value?.steps) {
        const abnormalSteps = orderDetail.value.steps.filter(s => s.isAbnormal > 0)
        const sources = abnormalSteps.length > 0 ? abnormalSteps : orderDetail.value.steps.slice(0, 3)
        
        envImageList.value = sources.map(s => s.imageUrl).filter(url => url)
        
        if (envImageList.value.length > 0) {
            envImagesVisible.value = true
        } else {
            ElMessage.warning('暂无异常图片')
        }
    }
}

const playVideo = async (recordFile: string) => {
  // 检查 recordFile 是否存在
  if (!recordFile) {
    ElMessage.warning('暂不支持播放')
    return
  }
  
  try {
    // 调用接口获取视频播放地址
    const response = await qualityApi.getVideoUrl({
      url: recordFile
    }) as ApiResponse<any>
    
    if (response.code === 200 || response.code === 0) {
      // 假设接口返回的视频地址在 data 字段中
      const videoUrl = response.data || recordFile
      currentVideoUrl.value = videoUrl
      videoDialogVisible.value = true
    }
  } catch (error) {
    console.error('获取视频地址失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
}

const downloadVideo = (url: string) => {
    const link = document.createElement('a')
    link.href = url
    link.target = '_blank'
    link.download = 'video.mp4'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

const downloadAllVideos = async () => {
  try {
    const applyId = route.params.id as string
    const blob = await qualityApi.downloadAllVideos({ applyId })
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `视频_${applyId}.zip`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载视频失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
}

const downloadScreenshots = async () => {
  try {
    const applyId = route.params.id as string
    const blob = await qualityApi.downloadScreenshots({ applyId })
    
    // 创建下载链接
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `截图_${applyId}.zip`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载截图失败:', error)
    // 错误提示已在 request.ts 中统一处理
  }
}

onMounted(() => {
  fetchDetail()
})
</script>

<template>
  <div v-loading="loading" class="order-detail">
    <!-- Header -->
    <div class="flex items-center gap-4 mb-6">
      <el-button :icon="ArrowLeft" circle @click="handleBack" />
      <h2 class="text-xl font-bold">质检工单详情</h2>
    </div>

    <div v-if="orderDetail">
      <!-- 1. Basic Info -->
      <el-card shadow="never" class="mb-4">
        <template #header>
          <div class="font-bold">基础信息</div>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="Apply_id">{{ orderDetail.applyId }}</el-descriptions-item>
          <el-descriptions-item label="业务账号">{{ orderDetail.businessAccount }}</el-descriptions-item>
          <el-descriptions-item label="所属地市">{{ orderDetail.city }}</el-descriptions-item>
          
          <el-descriptions-item label="装机地址">{{ orderDetail.installAddress || '-' }}</el-descriptions-item>
          <el-descriptions-item label="师傅工号">{{ orderDetail.workerId }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">{{ orderDetail.orderType || '-' }}</el-descriptions-item>
          
          <el-descriptions-item label="设备类型">{{ orderDetail.deviceType || '-' }}</el-descriptions-item>
          <el-descriptions-item label="工单ID">
            {{ orderDetail.orderIds || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="质检状态">
            <el-tag :type="orderDetail.status === '已完成' ? 'success' : ''">{{ orderDetail.status }}</el-tag>
          </el-descriptions-item>
          
          <el-descriptions-item label="无法质检原因">{{ orderDetail.cannotQcReason || '-' }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ orderDetail.startTime }}</el-descriptions-item>
          <el-descriptions-item label="完成时间">{{ orderDetail.completeTime || '-' }}</el-descriptions-item>
          
          <el-descriptions-item label="不能拍/手动">
            <div class="flex gap-4">
              <span>不能拍: <span class="font-bold text-red-500">{{ orderDetail.noPhotoCount }}</span></span>
              <span>手动: <span class="font-bold text-orange-500">{{ orderDetail.manualInputCount }}</span></span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="环境异常">
             <span class="font-bold text-red-500 mr-2">{{ orderDetail.envAbnormalCount }}</span>
             <el-button v-if="orderDetail.envAbnormalCount > 0" size="small" :icon="Picture" @click="showEnvImages">查看图片</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="总耗时">{{ orderDetail.totalDuration }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 2. QC Details -->
      <el-card shadow="never" class="mb-4">
         <template #header>
          <div class="font-bold">质检详情</div>
        </template>
        <el-table :data="orderDetail.steps" border style="width: 100%">
           <el-table-column type="index" label="序号" width="60" align="center" />
           <el-table-column prop="name" label="检测环节" />
           <el-table-column prop="duration" label="环节耗时" />
           <el-table-column prop="result" label="通过类型">
              <template #default="{ row }">
                 <el-tag type="success" v-if="row.result === '通过'">{{ row.result }}</el-tag>
                 <el-tag type="danger" v-else>{{ row.result }}</el-tag>
              </template>
           </el-table-column>
           <el-table-column label="查看图片">
              <template #default="{ row, $index }">
                  <el-image 
                    v-if="row.imageUrl"
                    style="width: 50px; height: 50px"
                    :src="row.imageUrl" 
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="previewImageList"
                    :initial-index="$index"
                    fit="cover"
                    preview-teleported
                    hide-on-click-modal
                  />
                  <span v-else class="text-gray-400">无图片</span>
              </template>
           </el-table-column>
           <el-table-column prop="recognizeType" label="识别方式">
               <template #default="{ row }">
                 <span>{{ row.recognizeType === 1 ? '自动识别' : row.recognizeType === 2 ? '手输' : '-' }}</span>
               </template>
           </el-table-column>
           <el-table-column prop="isAbnormal" label="是否异常">
               <template #default="{ row }">
                  <span :class="{'text-red-500 font-bold': row.isAbnormal === 1}">{{ row.isAbnormal === 1 ? '是' : '否' }}</span>
               </template>
           </el-table-column>
        </el-table>
      </el-card>

      <!-- 3. Videos -->
      <el-card shadow="never" class="mb-4">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="font-bold">质检视频</span>
            <div class="gap-2 flex">
               <el-button type="primary" :icon="Download" @click="downloadAllVideos">下载全部视频</el-button>
               <el-button type="success" :icon="Download" @click="downloadScreenshots">下载质检截图</el-button>
            </div>
          </div>
        </template>
        
        
        <div v-if="orderDetail.videos.length > 0" class="space-y-2">
          <div 
            v-for="(video, index) in orderDetail.videos" 
            :key="video.id" 
            class="flex items-center justify-between p-3 border rounded hover:bg-gray-50 transition"
          >
            <div class="flex items-center gap-3 flex-1">
              <el-icon class="text-blue-500"><VideoPlay /></el-icon>
              <span 
                class="text-blue-600 hover:text-blue-800 cursor-pointer hover:underline" 
                @click="playVideo(video.videoUrl)"
              >
                视频{{ index + 1 }}{{ video.name ? ' - ' + video.name : '' }}
              </span>
            </div>
            <el-button 
              v-if="video.videoUrl" 
              link 
              type="primary" 
              :icon="Download" 
              @click="downloadVideo(video.videoUrl)"
            >
              下载
            </el-button>
          </div>
        </div>
        
        <div v-else class="text-center text-gray-400 py-8">
           暂无视频
        </div>
      </el-card>
    </div>

    <!-- Video Player Dialog -->
    <el-dialog v-model="videoDialogVisible" title="视频播放" width="800px" destroy-on-close align-center>
        <video controls autoplay class="w-full max-h-[60vh] bg-black">
          <source :src="currentVideoUrl" type="video/mp4">
          您的浏览器不支持 Video 标签。
        </video>
    </el-dialog>

    <!-- Environment Images Dialog (Using Image Viewer) -->
    <el-image-viewer 
      v-if="envImagesVisible" 
      :url-list="envImageList" 
      @close="envImagesVisible = false"
    />
  </div>
</template>

<style scoped>
:deep(.el-descriptions__label) {
  font-weight: bold;
  background-color: #fafafa;
}
</style>