<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { http } from '@/utils/request'
import FgTree from '@/components/fg-tree/fg-tree.vue'


// 定义页面配置
definePage({
  title: '工单详情'
})

// 工单详情接口
interface WorkOrderDetail {
  id: string
  orderNo: string
  statusName: string
  status: string
  createBy: string
  ticketTypeName: string
  createTime: string
  stationName?: string
  contact?: string
  phone?: string
  content?: string
  attachments?: string
}

// 工单流程记录接口
interface WorkOrderRecord {
  id: string
  orderId: string
  operationContent: string
  status: string
  operatorName: string
  operationTime: string
  operationType: string
  approveName?: string
  workOrderProcessRecords?: Array<{
    processContent: string
    attachmentsUrl?: string
  }>
  workOrderDelay?: Array<{
    delayReason: string
    delayDuration: string
    approveRemark: string
    approveStatus: string
    approveTime: string
    attachmentsUrl?: string
  }>
  message?: string
}

// 页面数据
const workOrderDetail = ref<WorkOrderDetail>({
  id: '',
  orderNo: '',
  statusName: '',
  status: '',
  createBy: '',
  ticketTypeName: '',
  createTime: '',
  stationName: '',
  contact: '',
  phone: '',
  content: '',
  attachments: ''
})

const workOrderRecords = ref<WorkOrderRecord[]>([])
const loading = ref(true)
const recordsLoading = ref(false)

// 处理表单状态
const showHandleForm = ref(false)
const handleFormData = ref({
  processContent: '',
  attachments: ''
})
const handleLoading = ref(false)
const fileList = ref([])

// 延时表单状态
const showDelayForm = ref(false)
const delayFormData = ref({
  delayDuration: '',
  delayReason: '',
  applyFile: ''
})
const delayLoading = ref(false)
const delayFileList = ref([])

// 抄送表单状态
const showCCForm = ref(false)
const ccFormData = ref({
  ccUserIds: []
})
const ccLoading = ref(false)
// 部门树
const deptTree = ref([])
// 选中的部门
const selectedDept = ref('')
// 部门选择器显示状态
const showDeptPicker = ref(false)
// 人员列表
const userList = ref([])
// 人员选择器列
const userColumns = ref([])

// 获取工单ID（从路由参数中获取）
const getWorkOrderId = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage.options.id || ''
}
const buttonData = ref([])
const getTaskId = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage.options.taskId || ''
}
// 获取按钮（从路由参数中获取）
const getButton = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  return currentPage.options.button || ''
}

// 获取工单详情
async function fetchWorkOrderDetail() {
  const id = getWorkOrderId()
  if (!id) return
  
  try {
    loading.value = true
    const response = await http.get<WorkOrderDetail>(`/workOrder/order/${id}`)
    workOrderDetail.value = response || workOrderDetail.value
    buttonData.value = getButton().split(',')
    // 获取工单流程记录
    await fetchWorkOrderRecords(id)
  } catch (error) {
    console.error('获取工单详情失败:', error)
    uni.showToast({
      title: '获取工单详情失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 获取工单流程记录
async function fetchWorkOrderRecords(orderId: string) {
  try {
    recordsLoading.value = true
    const response = await http.get<WorkOrderRecord[]>('/workOrderRecord/record/list', {
      orderId: orderId
    })
    workOrderRecords.value = response.rows || []
  } catch (error) {
    console.error('获取工单流程记录失败:', error)
    uni.showToast({
      title: '获取工单流程记录失败',
      icon: 'none'
    })
  } finally {
    recordsLoading.value = false
  }
}

// 处理按钮
function handleHandle() {
  console.log('处理工单')
  showHandleForm.value = true
}

// 处理表单提交
async function submitHandleForm() {
  if (!handleFormData.value.processContent) {
    uni.showToast({ title: '请输入处理内容', icon: 'none' })
    return
  }
  
  try {
    handleLoading.value = true
    const response = await http.put('/workOrder/order/handle', {
      taskId: getTaskId(),
      processContent: handleFormData.value.processContent,
      attachments: handleFormData.value.attachments
    })
    uni.showToast({ title: '处理成功', icon: 'success' })
    showHandleForm.value = false
    uni.navigateBack()
  } catch (error) {
    console.error('处理工单失败:', error)
    uni.showToast({ title: '处理失败', icon: 'none' })
  } finally {
    handleLoading.value = false
  }
}

// 附件上传成功处理
async function handleFileSuccess(data: any) {
   console.log('上传成功:', data.fileList)
  const fileNames = data.fileList.map(f => {
    try {
      const response = JSON.parse(f.response)
      return response.data.fileName
    } catch (error) {
      console.error('解析文件响应失败:', error)
      return ''
    }
  }).filter(Boolean)
  console.log('上传的文件:', fileNames)
  handleFormData.value.attachments = fileNames.join(',')
}
// 延时按钮
function handleDelay() {
  console.log('延时工单')
  showDelayForm.value = true
}

// 延时表单提交
async function submitDelayForm() {
  if (!delayFormData.value.delayDuration) {
    uni.showToast({ title: '请输入延时时长', icon: 'none' })
    return
  }
  if (!delayFormData.value.delayReason) {
    uni.showToast({ title: '请输入延时原因', icon: 'none' })
    return
  }
  
  try {
    delayLoading.value = true
    const response = await http.put('/workOrder/order/delay', {
      taskId: getTaskId(),
      delayDuration: delayFormData.value.delayDuration,
      delayReason: delayFormData.value.delayReason,
      applyFile: delayFormData.value.applyFile
    })
    uni.showToast({ title: '延时申请成功', icon: 'success' })
    showDelayForm.value = false
    uni.navigateBack()
  } catch (error) {
    console.error('延时申请失败:', error)
    uni.showToast({ title: '延时申请失败', icon: 'none' })
  } finally {
    delayLoading.value = false
  }
}

// 延时附件上传成功处理
async function handleDelayFileSuccess(data: any) {
   console.log('上传成功:', data.fileList)
  const fileNames = data.fileList.map(f => {
    try {
      const response = JSON.parse(f.response)
      return response.data.fileName
    } catch (error) {
      console.error('解析文件响应失败:', error)
      return ''
    }
  }).filter(Boolean)
  delayFormData.value.applyFile = fileNames.join(',')
}
// 抄送按钮
function handleCC() {
  console.log('抄送工单')
  showCCForm.value = true
  // 加载部门树
  fetchDeptTree()
}

// 获取部门树
async function fetchDeptTree() {
  try {
    const response = await http.get('/system/user/deptTree')
    console.log('部门树:', response)
    deptTree.value = response || []
  } catch (error) {
    console.error('获取部门树失败:', error)
  }
}

// 获取人员列表
async function fetchUserList(deptId: string) {
  if (!deptId) return
  
  try {
    const response = await http.get('/system/user/list', {
      deptId: deptId,
      pageNum: 1,
      pageSize: 999
    })
    userList.value = response.rows || []
    console.log('人员列表:', userList.value)
    // 转换为选择器列格式
    userColumns.value = userList.value.map(user => ({
      value: user.userId,
      label: user.userName
    }))
    console.log('人员选择器列:', userColumns.value)
  } catch (error) {
    console.error('获取人员列表失败:', error)
  }
}

// 处理部门选择
function handleDeptSelect(node: any) {
  selectedDept.value = node.id
  showDeptPicker.value = false
  fetchUserList(node.id)
}

// 处理人员选择
function handleUserSelect(value: string[]) {
  ccFormData.value.ccUserIds = value
}

// 抄送表单提交
async function submitCCForm() {
  if (ccFormData.value.ccUserIds.length === 0) {
    uni.showToast({ title: '请选择抄送人员', icon: 'none' })
    return
  }
  
  try {
    ccLoading.value = true
    console.log('抄送工单:', ccFormData.value.ccUserIds)
    const response = await http.put('/workOrder/order/cc', {
      taskId: getTaskId(),
      ccUserIds: ccFormData.value.ccUserIds.join(',')
    })
    uni.showToast({ title: '抄送成功', icon: 'success' })
    showCCForm.value = false
    uni.navigateBack({
      delta: 1
    })
  } catch (error) {
    console.error('抄送失败:', error)
    uni.showToast({ title: '抄送失败', icon: 'none' })
  } finally {
    ccLoading.value = false
  }
}
// 退回按钮
function handleBack() {
  console.log('退回工单')
  uni.showModal({
    title: '确认退回',
    content: '确定要退回工单吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用退回接口
        http.post('/workflow/task/backProcess', {
          taskId: getTaskId()
        }).then(() => {
          uni.showToast({
            title: '退回成功',
            icon: 'success'
          })
          uni.navigateBack({
            delta: 1
          })
        }).catch(error => {
          console.error('退回失败:', error)
          uni.showToast({
            title: '退回失败',
            icon: 'none'
          })
        })
      }
    }
  })
}

// 复制工单编号
function handleCopy(text: string) {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制成功',
        icon: 'success'
      })
    }
  })
}

// 获取状态样式
function getStatusClass(statusName: string) {
  switch (statusName) {
    case '新工单':
      return 'status-new'
    case '待处理':
      return 'status-pending'
    case '已完结':
      return 'status-completed'
    default:
      return 'status-default'
  }
}

// 编辑按钮
function handleEdit() {
  console.log('编辑工单')
  uni.navigateTo({
    url: '/pages/archive/order/creatOrder?id=' + getWorkOrderId()
  })
}

// 删除按钮
function handleDelete() {
  console.log('删除工单')
  uni.showModal({
    title: '确认删除',
    content: '确定删除工单吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用删除接口
        http.delete(`/workOrder/order/${getWorkOrderId()}`).then(() => {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          // 刷新当前页面
          uni.navigateBack({
            delta: 1
          })
        })
      }
    }
  })
}

// 提交按钮
function handleSubmit() {
  console.log('提交工单')
   uni.showModal({
    title: '确认提交',
    content: '确定提交工单吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用提交接口
        http.put(`/workOrder/order/submit/${getWorkOrderId()}`).then(() => {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
          // 刷新当前页面
          uni.navigateBack({
            delta: 1
          })
        })
      }
    }
  })
}

// 页面加载时获取工单详情
onMounted(() => {
  fetchWorkOrderDetail()
})
</script>
<template>
  <view class="work-order-detail">
    <!-- 标题区域 -->
    <view class="detail-header">
      <view class="flex justify-between items-center mb-3">
        <view class="flex items-center gap-2">
          <text class="text-2xl font-bold">{{ workOrderDetail.orderNo }}</text>
          <wd-icon name="copy" size="20px" @click="handleCopy(workOrderDetail.orderNo)"></wd-icon>
          <view :class="['status-tag', getStatusClass(workOrderDetail.statusName)]">
            {{ workOrderDetail.statusName }}
          </view>
        </view>
      </view>
      
      <view class="flex items-center gap-2 mb-4">
        <view class="flex flex-col gap-2">
          <view class="flex items-center gap-1 text-gray-500">
            <wd-icon name="user" size="16px"></wd-icon>
            创建人: {{ workOrderDetail.createBy + '/' + (workOrderDetail.stationName || '无') }}
          </view>
          <view class="flex items-center gap-1 text-gray-500">  
            <wd-icon name="transfer" size="16px"></wd-icon>
            流程分类: {{ workOrderDetail.ticketTypeName }}
          </view>
          <view class="flex items-center gap-1 text-gray-500">
            <wd-icon name="time" size="16px"></wd-icon>
            提交时间: {{ workOrderDetail.createTime }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 工单详情内容 -->
    <view class="detail-content">
      <view class="detail-title">
        <text class="text-lg font-medium">工单详情</text>
      </view>

      <!-- 基本信息 -->
      <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">{{ workOrderDetail.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">{{ workOrderDetail.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">{{ workOrderDetail.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">{{ workOrderDetail.phone || '无' }}</text>
          </view>
          
          <view class="info-item flex flex-col">
            <text class="info-label w-40">提报内容：</text>
            <text class="info-value flex-1">{{ workOrderDetail.content || '无' }}</text>
          </view>
          
          <!-- 附件 -->
          <view class="info-item flex flex-col mt-4">
            <text class="info-label w-40">附件：</text>
            <view v-if="workOrderDetail.attachmentsUrl.length > 0" class="flex flex-wrap gap-2">
              <view 
                v-for="(url, index) in workOrderDetail.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>
       <view class="detail-title">
        <text class="text-lg font-medium">工单流程</text>
      </view>
      <!-- 审批流程 -->
      <wd-card :border="true" :shadow="false">
        <view class="card-content">
          <view v-if="workOrderRecords.length > 0">
            <wd-steps :active="workOrderRecords.length - 1" vertical dot>
              <wd-step 
                v-for="(record, index) in workOrderRecords" 
                :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.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 === '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>
    </view>
    
    <!-- 底部悬浮按钮 -->
    <view v-if="workOrderDetail.status === 'new'" class="bottom-actions">
      <wd-button size="medium" custom-class="action-btn" @click="handleEdit">
        编辑
      </wd-button>
      <wd-button type="error" size="medium" custom-class="action-btn" @click="handleDelete">
        删除
      </wd-button>
      <wd-button size="medium" custom-class="action-btn" @click="handleSubmit">
        提交
      </wd-button>
    </view>
    <!-- 底部悬浮按钮 -->
    <view class="bottom-actions" v-if="buttonData.includes('handle') || buttonData.includes('delay') || buttonData.includes('cc') || buttonData.includes('back')">
      <wd-button v-if="buttonData.includes('handle')" size="medium" custom-class="action-btn" @click="handleHandle">
        处理
      </wd-button>
      <wd-button v-if="buttonData.includes('delay')" type="error" size="medium" custom-class="action-btn" @click="handleDelay">
        延时
      </wd-button>
      <wd-button v-if="buttonData.includes('cc')" type="primary" size="medium" custom-class="action-btn" @click="handleCC">
        抄送
      </wd-button>
      <wd-button v-if="buttonData.includes('back')" size="medium" custom-class="action-btn" @click="handleBack">
        退回
      </wd-button>
    </view>
    
    <!-- 处理工单表单 -->
    <wd-popup
      v-model="showHandleForm"
      position="bottom"
      round
      :overlay="true"
      :close-on-click-overlay="true"
      overlay-class="popup-overlay"
      class="filter-popup-container">
      <view class="filter-popup" style="min-height: 500rpx;">
        <view class="p-4">
          <view class="text-lg font-medium mb-4">处理工单</view>
          
          <!-- 处理内容 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">
              <text class="text-red-500">*</text> 处理内容
            </text>
            <wd-textarea 
              v-model="handleFormData.processContent" 
              placeholder="请输入处理内容" 
              :rows="4"
            />
          </view>
          
          <!-- 附件上传 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">附件</text>
            <wd-upload
              v-model:file-list="uploadFiles" 
              action="/common/upload"
              accept="image/*"
              @success="handleFileSuccess"
              @remove="(file, fileList) => fileList = fileList"
              multiple
              max-count="5"
            />
          </view>
        </view>
        <view class="flex justify-end m-6">
          <wd-button size="large" type="info" @click="showHandleForm = false" style="margin-right: 16rpx;">取消</wd-button>
          <wd-button size="large" type="primary" @click="submitHandleForm" :loading="handleLoading">确定</wd-button>
        </view>
      </view>
    </wd-popup>
    
    <!-- 延时工单表单 -->
    <wd-popup
      v-model="showDelayForm"
      position="bottom"
      round
      :overlay="true"
      :close-on-click-overlay="true"
      overlay-class="popup-overlay"
      class="filter-popup-container">
      <view class="filter-popup" style="min-height: 500rpx;">
        <view class="p-4">
          <view class="text-lg font-medium mb-4">延时申请</view>
          
          <!-- 延时时长 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">
              <text class="text-red-500">*</text> 延时时长(小时)
            </text>
            <wd-input 
              v-model="delayFormData.delayDuration" 
              placeholder="请输入延时时长" 
              type="number"
            />
          </view>
          
          <!-- 延时原因 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">
              <text class="text-red-500">*</text> 延时原因
            </text>
            <wd-textarea 
              v-model="delayFormData.delayReason" 
              placeholder="请输入延时原因" 
              :rows="3"
            />
          </view>
          
          <!-- 申请附件 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">申请附件</text>
            <wd-upload
              v-model:file-list="uploadFiles" 
              action="/common/upload"
              accept="image/*"
              @success="handleDelayFileSuccess"
              @remove="(file, fileList) => fileList = fileList"
              multiple
              max-count="5"
            />
          </view>
        </view>
        <view class="flex justify-end m-6">
          <wd-button size="large" type="info" @click="showDelayForm = false" style="margin-right: 16rpx;">取消</wd-button>
          <wd-button size="large" type="primary" @click="submitDelayForm" :loading="delayLoading">确定</wd-button>
        </view>
      </view>
    </wd-popup>
    
    <!-- 抄送工单表单 -->
    <wd-popup
      v-model="showCCForm"
      position="bottom"
      round
      :overlay="true"
      :close-on-click-overlay="true"
      overlay-class="popup-overlay"
      class="filter-popup-container">
      <view class="filter-popup" style="min-height: 500rpx;">
        <view class="p-4">
          <view class="text-lg font-medium mb-4">抄送工单</view>
          
          <!-- 部门选择 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">
              <text class="text-red-500">*</text> 部门
            </text>
            <view @click="showDeptPicker = true" class="relative" style="border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
              <text v-if="selectedDept" class="block w-full py-3 px-4 border border-gray-300 rounded-md border-b-2 border-blue-500">
                {{ deptTree.find(dept => dept.id === selectedDept)?.deptName || '' }}
              </text>
              <text v-else class="block w-full py-3 px-4 border border-gray-300 rounded-md border-b-2 border-blue-500 text-gray-400">
                请选择部门
              </text>
              <wd-icon name="arrow-right" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400" />
            </view>
            <!-- 部门选择器弹出框 -->
            <wd-popup
              v-model="showDeptPicker"
              position="bottom"
              round
              :overlay="true"
              :close-on-click-overlay="true"
              overlay-class="popup-overlay"
              class="filter-popup-container">
              <view class="filter-popup" style="min-height:600rpx;">
                <view class="flex justify-between items-center p-4 border-b">
                  <text class="text-lg font-medium">选择部门</text>
                  <wd-button size="small" @click="showDeptPicker = false">取消</wd-button>
                </view>
                <view class="h-[calc(100vh-300px)] overflow-auto">
                  <fg-tree 
                :data="deptTree" 
                @node-click="handleDeptSelect"
              />
                </view>
              </view>
            </wd-popup>
          </view>
          
          <!-- 人员选择 -->
          <view class="mb-4">
            <text class="block mb-2 font-medium">
              <text class="text-red-500">*</text> 人员
            </text>
            <wd-select-picker 
              v-model="ccFormData.ccUserIds" 
              :columns="userColumns" 
              placeholder="请选择人员"
            />
          </view>
        </view>
        <view class="flex justify-end m-6">
          <wd-button size="large" type="info" @click="showCCForm = false" style="margin-right: 16rpx;">取消</wd-button>
          <wd-button size="large" type="primary" @click="submitCCForm" :loading="ccLoading">确定</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>



<style scoped>
.work-order-detail {
  padding: 20rpx;
  padding-bottom: 160rpx;
  background-color: #ffffff;
  min-height: 100vh;
}

.detail-header {
  background-color: #fff;
  padding: 20rpx;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
}

.status-new {
  background-color: #E8F5E9;
  color: #4CAF50;
}

.status-pending {
  background-color: #FEF4EB;
  color: #FF9500;
}

.status-completed {
  background-color: #F0F7FF;
  color: #3498DB;
}

.status-default {
  background-color: #F5F5F5;
  color: #666;
}

.avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #3194F2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24rpx;
}

.detail-content {
  background-color: #fff;
  padding: 20rpx;
}

.card-content {
  padding: 20rpx 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.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;
}

.preview-container {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}

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

.justify-between {
  justify-content: space-between;
}

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

.gap-2 {
  gap: 16rpx;
}

.gap-4 {
  gap: 32rpx;
}

.mb-3 {
  margin-bottom: 24rpx;
}

.mb-4 {
  margin-bottom: 32rpx;
}

.mt-4 {
  margin-top: 32rpx;
}

.text-2xl {
  font-size: 36rpx;
}

.font-bold {
  font-weight: bold;
}

.text-gray-500 {
  color: #999;
  font-size: 24rpx;
}

.detail-title {
  margin: 0 0 16rpx 0;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #e5e7eb;
}

.text-lg {
  font-size: 32rpx;
}

.font-medium {
  font-weight: 500;
}

.bg-primary {
  background-color: #3194F2;
}

.size-20px {
  width: 20px;
  height: 20px;
}

.size-28px {
  width: 28px;
  height: 28px;
}

.rounded-full {
  border-radius: 50%;
}

.text-white {
  color: white;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
  z-index: 9;
}

.action-btn {
  flex: 1;
}
</style>