<template>
  <view class="page-container">
    <!-- 页面加载 -->
    <up-loading-page
      v-if="loading"
      :loading="true"
      title="加载中..."
      color="#3c9cff"
    ></up-loading-page>

    <view v-else class="main-content">
      <!-- 顶部标签栏 -->
      <up-sticky :bgColor="'#fff'">
        <up-tabs
          v-model="activeTopTab"
          :list="topTabList"
          :scrollable="false"
          sticky
          active-color="#3c9cff"
          inactive-color="#666"
          class="top-tabs"
          @click="activeTopTabClick"
        ></up-tabs>
      </up-sticky>

      <view class="tab-content">
        <!-- 工单详情 Tab -->
        <view v-show="activeTopTab === 0" class="detail-content">
          <up-cell-group :border="false" class="detail-cell-group">
            <up-cell title="工单编号" :value="orderDetail.orderNo || '--'" align="middle"></up-cell>

            <up-cell align="middle">
              <template #title>
                <view style="min-width: 200rpx">工单位置</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.lonLatAddress || '--' }}</view>
              </template>
            </up-cell>

            <up-cell align="middle">
              <template #title>
                <view style="min-width: 200rpx">问题类型</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.orderName || '--' }}</view>
              </template>
            </up-cell>

            <up-cell title="街道名称" :value="orderDetail.streetName || '--'" align="middle"></up-cell>

            <up-cell v-if="orderDetail.roadName">
              <template #title>
                <view style="min-width: 200rpx">道路名称</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.roadName || '--' }}</view>
              </template>
            </up-cell>

            <up-cell>
              <template #title>
                <view style="min-width: 200rpx">情况描述</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.remark || '--' }}</view>
              </template>
            </up-cell>

            <up-cell
              title="紧急程度"
              :value="uni.$dict.getDictLabel('workorder_pressing_type', orderDetail.pressingType) || '--'"
              align="middle"
            ></up-cell>

            <up-cell title="提交人" :value="orderDetail.userName || '--'" align="middle"></up-cell>

            <up-cell
              title="提交时间"
              :value="timeFormat(orderDetail.createTime, 'yyyy-mm-dd hh:MM:ss') || '--'"
              align="middle"
            ></up-cell>

            <up-cell v-if="orderDetail.handleResult">
              <template #title>
                <view style="min-width: 200rpx">处理结果</view>
              </template>
              <template #value>
                <view class="common-text-color up-line-1">{{ orderDetail.handleResult || '--' }}</view>
              </template>
            </up-cell>

            <up-cell title="问题照片">
              <template #value>
                <view class="cell-content-wrap">
                  <up-album
                    v-if="!!orderDetail.problemsImgs?.length"
                    :urls="orderDetail.problemsImgs.slice(0, 3)"
                    :singleSize="70"
                    :multipleSize="70"
                    :preview-full-image="true"
                  ></up-album>
                  <text v-else class="empty-text">暂无问题照片</text>
                </view>
              </template>
            </up-cell>

            <up-cell
              v-if="orderDetail.expectedFinishDate"
              title="希望完成时间"
              :value="timeFormat(orderDetail.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss')"
              align="middle"
              :border="false"
            ></up-cell>

            <up-cell
              v-if="orderDetail.finishDate"
              title="工单完结时间"
              :value="timeFormat(orderDetail.finishDate, 'yyyy-mm-dd hh:MM:ss')"
              align="middle"
              :border="false"
            ></up-cell>
          </up-cell-group>

          <!-- 图片分类区域 -->
          <view class="img-tabs-block" v-if="orderDetail.startImgs.length > 0">
            <up-cell-group :border="false">
              <up-cell>
                <template #title>
                  <view style="min-width: 200rpx">共同处理人</view>
                </template>
                <template #value>
                  <view class="common-text-color up-line-1">
                    {{ Array.isArray(orderDetail.coHandlersName) && orderDetail.coHandlersName.length > 0 ? orderDetail.coHandlersName.join(',') : '--' }}
                  </view>
                </template>
              </up-cell>
            </up-cell-group>
            <up-tabs
              @change="imgTabChange"
              v-model="activeImgTab"
              :list="imgTabList"
              :scrollable="false"
              active-color="#3c9cff"
              inactive-color="#666"
              class="img-tabs"
            ></up-tabs>
            <view class="img-tab-content">
              <up-album
                v-if="currentImgList.length"
                :urls="currentImgList.slice(0, 3)"
                :singleSize="70"
                :multipleSize="70"
                :preview-full-image="true"
                class="img-album custom-album"
              ></up-album>
              <text v-else class="empty-img-text">养护员未上传图片</text>
            </view>
          </view>
        </view>

        <!-- 流程节点 Tab -->
        <view v-show="activeTopTab === 1" class="process-content">
          <up-steps
            v-if="processData.activityNodes && processData.activityNodes.length"
            :list="processData.activityNodes"
            :current="getCurrentStepIndex()"
            direction="column"
            active-color="#3c9cff"
            inactive-color="#999"
            class="vertical-steps"
          >
            <template>
              <up-steps-item
                v-for="(item, index) in processData.activityNodes"
                :key="`${item.id}_${index}`"
              >
                <template #content>
                  <view class="step-content-wrap">
                    <view class="step-title">
                      {{ item.name ? item.name.replace('大区经理', '业务调度员') : item.name }}
                    </view>
                    <view class="step-desc">
                      <view class="operator-name up-line-1" v-if="item.tasks">
                        处理人：
                        <text>{{ item.tasks?.map(itemName => itemName.assigneeUser?.nickname).filter(Boolean).join('，') }}</text>
                      </view>
                      <view class="time-line">
                        处理时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd hh:MM:ss') }}
                        <text v-if="item.endTime"> 至 {{ timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
                        <text v-else class="processing-tag">（处理中）</text>
                      </view>
                      <view class="reason-line up-line-1" v-if="index !== 0 && item.endTime">
                        总耗时：{{ calculateFormatTimeDiff(item.startTime, item.endTime) }}
                      </view>
                      <view class="reason-line up-line-2" v-if="item.tasks && item.tasks[0]?.reason">
                        描述：{{ getLimitReason(item.tasks && item.tasks[0]?.reason) }}
                      </view>
                    </view>
                    <view class="step-album-wrap">
                      <up-album
                        v-if="item.tasks && item.tasks[0]?.attattmentUrls && item.tasks[0].attattmentUrls.length"
                        :urls="item.tasks[0].attattmentUrls.slice(0, 3)"
                        :singleSize="70"
                        :multipleSize="70"
                        :preview-full-image="true"
                        class="step-album"
                      ></up-album>
                    </view>
                  </view>
                </template>
              </up-steps-item>
            </template>
          </up-steps>
          <up-empty
            v-else
            mode="data"
            title="暂无流程节点数据"
            class="empty-process"
          ></up-empty>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view v-if="activeTab === '0' && nextStepMap[orderDetail.taskKey]" class="fixed-bottom-btn-wrap">
      <view class="u-body-item u-flex common-justify-between common-item-center">
        <up-button
          type="warning"
          size="normal"
          @click="handleReject(orderDetail)"
          v-show="nextStepMap[orderDetail.taskKey].backShow"
        >回退</up-button>
        <up-button
          type="success"
          size="normal"
          @click="handleRenew(orderDetail)"
          v-show="nextStepMap[orderDetail.taskKey].renewShow"
        >重新提交</up-button>
        <up-button type="primary" size="normal" @click="handleProcess(orderDetail)">
          {{ nextStepMap[orderDetail.taskKey].btnText }}
        </up-button>
      </view>
    </view>

    <!-- 回退弹窗 -->
    <up-modal
      :show="rejectModalShow"
      title="回退原因"
      :closeOnClickOverlay="false"
      :showConfirmButton="true"
      :showCancelButton="true"
      @cancel="handleRejectModalCancel"
      @confirm="confirmReject"
    >
      <view class="reject-modal-content">
        <up-textarea
          v-model.trim="rejectReason"
          placeholder="请输入回退原因（必填）"
          rows="6"
          :count="200"
          maxlength="200"
          class="reject-textarea"
        />
        <view class="upload-wrap mt-20">
          <view class="upload-title">上传回退图片（选填）</view>
          <up-upload
            :file-list="rejectImgs.rawImgList.value || []"
            @after-read="rejectImgs.uploadImgs"
            @delete="rejectImgs.deleteImg"
            multiple
            width="70"
            height="70"
            :max-count="rejectImgs.uploadConfig.maxCount"
            :upload-text="rejectImgs.uploadConfig.uploadText"
            :size-type="rejectImgs.uploadConfig.sizeType"
          />
        </view>
      </view>
    </up-modal>

    <!-- 验收弹窗 -->
    <up-modal
      :show="acceptModalShow"
      title="验收"
      :closeOnClickOverlay="false"
      :showConfirmButton="true"
      :showCancelButton="true"
      @cancel="handleAcceptModalCancel"
      @confirm="handleAcceptModalConfirm"
    >
      <view class="accept-modal-content">
        <view class="radio-group-wrap">
          <up-radio-group v-model="acceptRadioValue">
            <up-radio name="0" label="通过"></up-radio>
            <up-radio name="1" label="不通过"></up-radio>
          </up-radio-group>
        </view>
        <view class="textarea-wrap mt-30">
          <up-textarea
            v-model.trim="acceptReason"
            placeholder="请输入验收原因（必填，最多200字）"
            :required="true"
            maxlength="200"
            rows="5"
            count
          />
        </view>
        <view class="upload-wrap mt-20">
          <view class="upload-title">上传验收图片（选填）</view>
          <up-upload
            :file-list="acceptImgs.rawImgList.value || []"
            @after-read="acceptImgs.uploadImgs"
            @delete="acceptImgs.deleteImg"
            multiple
            width="70"
            height="70"
            :max-count="acceptImgs.uploadConfig.maxCount"
            :upload-text="acceptImgs.uploadConfig.uploadText"
            :size-type="acceptImgs.uploadConfig.sizeType"
          />
        </view>
      </view>
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { timeFormat } from '@/uni_modules/uview-plus'
import { getApprovalDetail,workOrderDetailByID } from '@/api/regional-order-manage/regional-order-manage'

import { nextStepMap, calculateFormatTimeDiff } from '@/common/utils/common'
import { useUploadImgs } from '@/common/utils/useUploadImgs'
import { useUserStore } from '@/pinia/user'

// 全局实例
const userStore = useUserStore()
const USER_ROLES = userStore.userInfo?.roles || []
const eventChannel = ref<any>(null)

// 通用方法
const showToast = (title: string, icon: 'none' | 'success' | 'loading' = 'none', duration = 2000) => {
  uni.showToast({ title, icon, duration })
}

const generateTempKey = (prefix = 'order') => {
  return `${prefix}_${Date.now()}_${Math.floor(Math.random() * 10000)}`
}

const setOrderStorage = (item: any, prefix: string) => {
  if (!item?.id) return null
  const tempKey = generateTempKey(prefix)
  try {
    uni.setStorageSync(tempKey, item)
    return tempKey
  } catch (err) {
    console.error('存储失败：', err)
    showToast('数据存储异常')
    return null
  }
}

const callApprovalApi = async (params: any, taskKey: string) => {
  if (taskKey === 'aiRegionManager') return await aiUniversalApproval(params)
  if (taskKey === 'shRegionManager') return await dcyUniversalApproval(params)
  if (taskKey === 'regionManager') return await qyUniversalApproval(params)
  if (USER_ROLES.includes('regional_manager')) return await daquUniversalApproval(params)
  if (USER_ROLES.includes('Inspector_global')) return await dcyUniversalApproval(params)
  if (USER_ROLES.includes('patrol_global')) return await qyUniversalApproval(params)
  if (USER_ROLES.includes('AI_dispatcher')) return await aiUniversalApproval(params)
  throw new Error('未匹配对应接口')
}

const navToOrderPage = (path: string, query = {}) => {
  const queryStr = Object.keys(query)
    .map(k => `${k}=${encodeURIComponent(query[k])}`)
    .join('&')
  const url = queryStr ? `${path}?${queryStr}` : path
  uni.navigateTo({ url })
}

// 页面状态
const loading = ref(true)
const activeTopTab = ref(0)
const activeImgTab = ref(0)

const topTabList = ref([
  { name: '工单详情' },
  { name: '流程节点' }
])

const imgTabList = ref([
  { name: '开始', badge: { isDot: true } },
  { name: '进行中' },
  { name: '结束', badge: { isDot: true } },
  { name: '人员' },
  { name: '材料' }
])

const processData = ref<any>({
  status: 2,
  activityNodes: [],
  formFieldsPermission: null,
  todoTask: null
})

// 工单详情数据
const orderDetail = ref<any>({
  id: 0,
  busiLine: '',
  orderNo: '',
  orderName: '',
  sourceId: 0,
  sourceName: '',
  roadId: 0,
  roadName: '',
  streetId: '',
  streetName: '',
  curingLevelId: 0,
  curingLevelName: '',
  commitDate: 0,
  finishDate: 0,
  expectedFinishDate: 0,
  pressingType: 0,
  userId: 0,
  userName: '',
  companyId: 0,
  latLonType: 0,
  lat: 0,
  lon: 0,
  lonLatAddress: '',
  thirdWorkNo: '',
  thirdPushState: 0,
  buzStatus: null,
  status: 0,
  processInstanceId: '',
  remark: '',
  handleResult: '',
  createTime: 0,
  fileNames: null,
  coHandlers: null,
  coHandlersName: null,
  companyName: null,
  userMobile: null,
  taskId: '',
  taskName: '',
  taskKey: '',
  processDefinitionName: '',
  startTime: 0,
  endTime: 0,
  key_: '',
  problemsImgs: [],
  startImgs: [],
  processingImgs: [],
  endImgs: [],
  personImgs: [],
  materialImgs: []
})

const currentImgList = ref<any[]>([])
const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs']
const imgTabChange = ({ index }: { index: number }) => {
  currentImgList.value = orderDetail.value[tabKeyMap[index]]
}

// 路由参数
const taskId = ref('')
const activeTab = ref('')
const processInstanceId = ref('')
const orderId = ref('')

// 文本截取
const getLimitReason = (reason: string | null | undefined) => {
  if (!reason) return '无处理说明'
  return reason.length > 200 ? reason.substring(0, 200) + '...' : reason
}

// 步骤索引
const getCurrentStepIndex = () => {
  const { activityNodes } = processData.value
  if (!activityNodes || !activityNodes.length) return 0
  return activityNodes.length
}

/**
 * 核心：工单详情接口 workOrderDetailByID
 * @param id 上一页传递的工单ID
 */
const DetailQuery = async (id: string | number) => {
  console.log('请求工单ID：', id)
  try {
    loading.value = true
    const res = await workOrderDetailByID({ id })
    if (res) {
      orderDetail.value = res
      currentImgList.value = orderDetail.value.startImgs
      // 赋值流程实例ID，供流程节点接口使用
      processInstanceId.value = res.processInstanceId || ''
    }
  } catch (err) {
    console.error('获取工单详情失败：', err)
    showToast('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 切换顶部Tab（流程节点使用原接口）
const activeTopTabClick = async (item: any) => {
  activeTopTab.value = item.index
  if (activeTopTab.value === 1) {
    const res = await getApprovalDetail({ processInstanceId: processInstanceId.value })
    if (res && res.activityNodes && res.activityNodes.length) {
      const formatNodes = res.activityNodes.map(node => ({ ...node, title: node.name }))
      processData.value = { ...res, activityNodes: formatNodes }
    } else {
      processData.value = res
    }
  }
}

// 回退弹窗
const rejectModalShow = ref(false)
const rejectReason = ref('')
const currentRejectItem = ref<any>(null)
const rejectImgs = useUploadImgs({
  maxCount: 3,
  uploadText: '选择回退图片',
  sizeType: ['compressed'],
  formRef: null,
  fieldName: 'rejectImgs'
})

// 验收弹窗
const acceptModalShow = ref(false)
const acceptRadioValue = ref('0')
const acceptReason = ref('')
const currentAcceptItem = ref<any>(null)
const acceptImgs = useUploadImgs({
  maxCount: 3,
  uploadText: '选择验收图片',
  sizeType: ['compressed'],
  formRef: null,
  fieldName: 'acceptImgs'
})

// 重新提交工单
const handleRenew = (item: any) => {
  if (!item?.id) return showToast('工单信息异常')
  const tempKey = setOrderStorage(item, 'renew_order')
  if (!tempKey) return
  const url = USER_ROLES.includes('patrol_global')
    ? '/pages-sub/problem/regional-order-manage/add-patrol-order'
    : '/pages-sub/problem/regional-order-manage/add-order'
  navToOrderPage(url, { isRenew: 1, tempKey })
}

// 打开回退弹窗
const handleReject = (item: any) => {
  if (!item?.id) return showToast('工单信息异常')
  currentRejectItem.value = item
  rejectReason.value = ''
  rejectImgs.clearImgs()
  rejectModalShow.value = true
}

// 关闭回退弹窗
const handleRejectModalCancel = () => {
  rejectModalShow.value = false
  rejectReason.value = ''
  rejectImgs.clearImgs()
}

// 确认回退
const confirmReject = async () => {
  const reason = rejectReason.value.trim()
  if (!reason) return showToast('请填写回退原因')
  const item = currentRejectItem.value
  if (!item?.id) return showToast('工单信息异常')

  uni.showLoading({ title: '提交中...', mask: true })
  try {
    const params = {
      returnImgs: rejectImgs.getSuccessImgUrls(),
      workerDataId: item.id,
      taskKey: item.taskKey,
      taskId: item.taskId,
      operateType: nextStepMap[item.taskKey].operateTypeNoPass,
      agree: 1,
      reason
    }
    await callApprovalApi(params, item.taskKey)
    showToast('回退成功', 'success')
    handleRejectModalCancel()
    eventChannel.value.emit('needRefresh')
    uni.navigateBack()
  } catch (err: any) {
    console.error('回退失败：', err)
    showToast(err.msg || '回退失败，请重试')
  } finally {
    uni.hideLoading()
  }
}

// 处理工单操作
const handleProcess = async (item: any) => {
  if (!item) return showToast('工单信息异常')
  const stepName = nextStepMap[item.taskKey]?.name
  if (!stepName) return showToast('暂无操作权限')

  uni.showLoading({ title: '处理中...', mask: true })
  try {
    if (stepName === '大区经理分配') {
      const tempKey = setOrderStorage(item, 'distribute_order')
      tempKey && navToOrderPage('/pages-sub/problem/regional-order-manage/distribution-order', { tempKey })
    } else if (stepName === '养护员待实施') {
      const tempKey = setOrderStorage(item, 'maintain_order')
      tempKey && navToOrderPage('/pages-sub/problem/regional-order-manage/add-maintain-order', { tempKey })
    } else if (stepName === '督察员单子大区经理分配') {
      uni.showModal({
        title: '分配工单',
        content: '确定分配该工单？',
        success: async (res) => {
          if (res.confirm) {
            const params = {
              taskKey: item.taskKey,
              taskId: item.taskId,
              operateType: 60,
              workerDataId: item.id,
              agree: 0,
              reason: item.remark,
              roadId: item.roadId,
              roadName: item.roadName,
              pressingType: item.pressingType,
              orderName: item.orderName,
              expectedFinishDate: item.expectedFinishDate,
              busiLine: item.busiLine
            }
            await dcyUniversalApproval(params)
            showToast('分配成功', 'success')
            eventChannel.value.emit('needRefresh')
            uni.navigateBack()
          }
        }
      })
    } else if (stepName === 'ai单子大区经理分配') {
      uni.showModal({
        title: '分配工单',
        content: '确定分配该工单？',
        success: async (res) => {
          if (res.confirm) {
            const params = {
              taskKey: item.taskKey,
              taskId: item.taskId,
              operateType: 40,
              workerDataId: item.id,
              agree: 0,
              reason: item.remark,
              roadId: item.roadId,
              roadName: item.roadName,
              pressingType: item.pressingType,
              orderName: item.orderName,
              expectedFinishDate: item.expectedFinishDate,
              busiLine: item.busiLine
            }
            await aiUniversalApproval(params)
            showToast('分配成功', 'success')
            eventChannel.value.emit('needRefresh')
            uni.navigateBack()
          }
        }
      })
    } else if (['养护组长验收', '巡查员验收'].includes(stepName)) {
      currentAcceptItem.value = item
      acceptReason.value = ''
      acceptRadioValue.value = '0'
      acceptModalShow.value = true
    } else if (stepName === '发起人确认') {
      uni.hideLoading()
      uni.showModal({
        title: '结束工单',
        content: '确定结束该工单？',
        success: async (res) => {
          if (res.confirm) {
            const params = {
              workerDataId: item.id,
              taskKey: 'ylInspectorStart',
              taskId: item.taskId,
              operateType: 200,
              agree: 1,
              reason: '结束工单'
            }
            await callApprovalApi(params, item.taskKey)
            showToast('结束成功', 'success')
            eventChannel.value.emit('needRefresh')
            uni.navigateBack()
          }
        }
      })
    } else if (stepName === 'AI工单派发人员') {
      uni.showModal({
        title: '结束工单',
        content: '确定结束该工单？',
        success: async (res) => {
          if (res.confirm) {
            const params = {
              workerDataId: item.id,
              taskKey: 'ylInspectorStart',
              taskId: item.taskId,
              operateType: 200,
              agree: 1,
              reason: 'AI工单派发人员结束工单'
            }
            await callApprovalApi(params, item.taskKey)
            showToast('结束成功', 'success')
            eventChannel.value.emit('needRefresh')
            uni.navigateBack()
          }
        }
      })
    }
  } catch (err: any) {
    console.error('操作失败：', err)
    showToast(err.msg || '操作失败，请重试')
  } finally {
    uni.hideLoading()
  }
}

// 关闭验收弹窗
const handleAcceptModalCancel = () => {
  acceptModalShow.value = false
  acceptReason.value = ''
  acceptRadioValue.value = '0'
  acceptImgs.clearImgs()
}

// 确认验收（已修复 value 拼写错误）
const handleAcceptModalConfirm = async () => {
  const reason = acceptReason.value.trim()
  if (!reason) return showToast('请填写验收原因')
  if (reason.length > 200) return showToast('验收原因最多200字')
  const item = currentAcceptItem.value
  if (!item?.id) return showToast('工单信息异常')

  uni.showLoading({ title: '提交中...', mask: true })
  try {
    let params: any = {}
    if (item.taskKey === 'ylTeamLeaderConfirm') {
      params = {
        returnImgs: acceptImgs.getSuccessImgUrls(),
        taskKey: item.taskKey,
        workerDataId: item.id,
        taskId: item.taskId,
        operateType: acceptRadioValue.value === '0'
          ? nextStepMap[item.taskKey].operateTypePass
          : nextStepMap[item.taskKey].operateTypeNoPass,
        reason
      }
    }
    if (item.taskKey === 'ylInspector') {
      params = {
        returnImgs: acceptImgs.getSuccessImgUrls(),
        taskKey: item.taskKey,
        taskId: item.taskId,
        workerDataId: item.id,
        operateType: acceptRadioValue.value === '0'
          ? nextStepMap[item.taskKey].operateTypePass
          : nextStepMap[item.taskKey].operateTypeNoPass,
        reason,
        agree: acceptRadioValue.value
      }
    }
    await callApprovalApi(params, item.taskKey)
    showToast('提交成功', 'success')
    handleAcceptModalCancel()
    eventChannel.value.emit('needRefresh')
    uni.navigateBack()
  } catch (err: any) {
    console.error('验收失败：', err)
    showToast(err.msg || '验收失败，请重试')
  } finally {
    uni.hideLoading()
  }
}

// 页面加载：接收上一页路由参数 id
onLoad((options: any) => {
  console.log('路由参数：', options)
  const { taskId: taskIdOpt, activeTab: activeTabOpt, processInstanceId: processInstanceIdOpt, id: orderIdOpt } = options

  taskId.value = taskIdOpt || ''
  activeTab.value = activeTabOpt || '0'
  processInstanceId.value = processInstanceIdOpt || ''
  orderId.value = orderIdOpt || ''

  // 监听页面返回刷新
  eventChannel.value = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel()

  // 有工单ID则请求详情接口
  if (orderId.value) {
    DetailQuery(orderId.value)
  } else {
    showToast('缺少工单ID')
  }
})
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding-bottom: 80rpx;
}

.detail-content {
  .detail-cell-group {
    background-color: #fff;
    margin-bottom: 20rpx;
  }
  .empty-text {
    color: #999;
    font-size: 26rpx;
  }
}

.img-tabs-block {
  background-color: #fff;
  .img-tab-content {
    padding: 20rpx 15px;
    text-align: center;
    .empty-img-text {
      height: 75px;
      line-height: 75px;
      color: #999;
      font-size: 28rpx;
    }
  }
}

.process-content {
  .empty-process {
    margin-top: 100rpx;
  }
  .vertical-steps {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  .step-content-wrap {
    width: 100%;
    box-sizing: border-box;
    .step-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 12rpx;
    }
    .step-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
      .processing-tag {
        color: #f59c26;
        margin-left: 10rpx;
      }
    }
  }
}

.fixed-bottom-btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.upload-title {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.mt-20 {
  margin-top: 20rpx;
}
.mt-30 {
  margin-top: 30rpx;
}

.radio-group-wrap {
  display: flex;
  align-items: center;
  gap: 40rpx;
  font-size: 28rpx;
}

:deep .u-album__row__wrapper image {
  width: 70px !important;
  height: 70px !important;
}
</style>