JCSS / jcss-miniprogram

<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" :class="'pb-rows-' + actionBarRows">
      <!-- 顶部固定Tabs -->
      <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>

      <!-- 顶部Tab内容区 -->
      <view class="tab-content">
        <!-- 1. 工单详情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 title="重点巡检区域" :value="orderDetail.keyInspection==0?'否':'是'" align="middle"></up-cell>

            <!-- 希望完成时间 -->
            <up-cell
                v-if="orderDetail.expectedFinishDate!==0"
                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>

          <!-- 图片分类Tabs区块 -->
          <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>

            <!-- 图片Tab内容区 -->
            <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 class="work-field-block" v-if="workFieldValues.length > 0">
            <view class="work-field-title">作业填报</view>
            <up-cell-group :border="false">
              <up-cell
                  v-for="item in workFieldValues"
                  :key="item.fieldCode"
                  :title="item.fieldName"
                  align="middle"
                  :border="false"
              >
                <template #value>
                  <!-- 7图片：value_text 为 URL JSON 数组 -->
                  <view v-if="item.fieldType === 7 && parseFieldUrls(item).length > 0" class="work-field-imgs">
                    <up-album
                        :urls="parseFieldUrls(item)"
                        :singleSize="60"
                        :multipleSize="60"
                        :preview-full-image="true"
                    ></up-album>
                  </view>
                  <!-- 8附件：展示文件名 -->
                  <view v-else-if="item.fieldType === 8 && parseFieldUrls(item).length > 0" class="work-field-files">
                    <text
                        v-for="(url, idx) in parseFieldUrls(item)"
                        :key="idx"
                        class="work-field-file up-line-1"
                    >{{ fileNameOf(url) }}</text>
                  </view>
                  <!-- 其余类型：后端已按配置把编码翻成可读文案 -->
                  <view v-else class="common-text-color work-field-value">{{ fieldDisplayText(item) }}</view>
                </template>
              </up-cell>
            </up-cell-group>
          </view>
        </view>

        <!-- 2. 流程节点Tab -->
        <view v-show="activeTopTab == 1" class="process-content">
          <!-- 竖向步骤条：动态绑定current属性 -->
          <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}`"
              >
                <!-- 唯一自定义模板：content，包含标题、描述、相册所有内容 -->
                <template #content>
                  <view class="step-content-wrap">
                    <!-- 1. 原标题内容：节点名称 + 操作人 -->
                    <view class="step-title">
                      {{ item.name ? item.name.replace('大区经理', '业务调度员') : item.name }}
                    </view>

                    <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
                    <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-if="item.status === 1" 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>

                    <!-- 3. 原相册内容：预留up-album -->
                    <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>

    <!-- activeTab==0的时候才出现， 也就是待办 -->
    <view v-if="activeTab==0&&(configuredActions||nextStepMap[orderDetail.taskKey])"
          class="fixed-bottom-btn-wrap order-action-bar">
      <!-- 已配置工作流动作：每行最多 3 个、超出自动换行，点击直接执行对应动作，不再弹「请选择操作」 -->
      <view v-if="hasConfiguredActions" class="order-action-row">
        <view
            v-for="action in configuredActions"
            :key="action.code"
            :class="['order-action-btn', 'order-action-btn--' + getActionButtonType(action.code)]"
            @click.stop="handleUnifiedProcess(orderDetail, action)"
        >{{ action.name }}</view>
      </view>
      <!-- 未配置：沿用原有节点按钮（整行展示） -->
      <view v-else class="order-action-row order-action-row--single">
        <view v-if="showRejectButton" class="order-action-btn order-action-btn--warning"
              @click.stop="handleUnifiedReject(orderDetail)">回退</view>
        <view v-if="nextStepMap[orderDetail.taskKey]?.renewShow" class="order-action-btn order-action-btn--success"
              @click.stop="handleRenew(orderDetail)">重新提交</view>
        <view class="order-action-btn order-action-btn--primary"
              @click.stop="handleUnifiedProcess(orderDetail)">{{ processButtonText }}</view>
      </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>

        <!-- 第二行：必填textarea，最多200字 -->
        <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>

    <!-- 统一节点动作弹窗（工作流配置化，未配置时回退原有逻辑） -->
    <unified-task-actions ref="unifiedActionsRef" @success="handleUnifiedSuccess" />
  </view>
</template>

<script setup lang="ts">
import {ref, computed, watch} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app';
import {timeFormat} from '@/uni_modules/uview-plus';
import {
  getMyTaskDetail,
  getDoneTaskDetail,
  getTodoTaskDetail,
  getApprovalDetail,
  universalApproval,
  getTaskActions
} from '@/api/work-order-manage/work-order-manage';
import {getWorkRecordValues} from '@/api/common'
import {nextStepMap, buzStatusMap, calculateFormatTimeDiff, getActionButtonType} from '@/common/utils/common'
// 引入图片上传组合式函数
import {useUploadImgs} from '@/common/utils/useUploadImgs'

// 状态管理
const loading = ref(true);
const activeTopTab = ref(0); // 顶部Tab激活索引
const activeImgTab = ref(0); // 图片分类Tab激活索引

// 顶部Tab列表
const topTabList = ref([
  {name: '工单详情'},
  {name: '流程节点'}
]);

// 流程节点数据（初始化适配接口格式）
const processData = ref<any>({
  status: 2,
  activityNodes: [],
  formFieldsPermission: null,
  todoTask: null
});

// 图片分类Tab列表（带角标配置）
const imgTabList = ref([
  {name: '开始', badge: {isDot: true}},
  {name: '进行中'},
  {name: '结束', badge: {isDot: true}},
  {name: '人员'},
  {name: '材料'}
]);

// 工单详情数据（初始化赋值，可被接口数据覆盖）
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: []
});

// ========== 新增：声明eventChannel变量 ==========
const eventChannel = ref(null);

// 作业填报明细（工单实施时按「业务类型+作业类型」动态字段配置落库的值）
const workFieldValues = ref<any[]>([]);

/**
 * 当前激活的图片列表（无需函数调用，直接访问）
 */
const currentImgList = ref([])

const tabKeyMap = ['startImgs', 'processingImgs', 'endImgs', 'personImgs', 'materialImgs'];
const imgTabChange = (({index}: { index: number }) => {
  console.log(index)
  const currentKey = tabKeyMap[index]
  console.log(currentKey)
  console.log(orderDetail.value[currentKey])
  currentImgList.value = orderDetail.value[currentKey]
})

/**
 * 截取reason最多200字
 * @param reason 处理说明
 * @returns 截取后的字符串
 */
const getLimitReason = (reason: string | null | undefined) => {
  if (!reason) return '无处理说明';
  if (reason.length <= 200) return reason;
  return reason.substring(0, 200) + '...';
}

/**
 * 动态获取当前步骤索引（核心：根据接口数据的status字段判断）
 * status=1：当前步骤（处理中）
 * status=2：已完成步骤
 * @returns {number} 当前激活的步骤索引（从0开始）
 */
const getCurrentStepIndex = () => {
  const {activityNodes} = processData.value;
  if (!activityNodes || !activityNodes.length) return 0;

  // 2. 若没有处理中的节点（全部已完成），则激活最后一个节点
  // return activityNodes.length - 1;
  return activityNodes.length;
}

/**
 * 获取工单详情
 */
const DetailQuery = async (taskIdStr: string) => {
  console.log('当前工单ID：', taskIdStr)
  try {
    loading.value = true;
    // 转换activeTab为数字类型，避免类型不一致导致接口调用失败
    const tabType = Number(activeTab.value);
    // 待办详情：与详情请求并行预取当前任务的统一动作配置，用于底部按钮显隐
    const actionPromise = tabType === 0 ? queryUnifiedActions({taskId: taskIdStr}) : Promise.resolve(null);
    let res: any;
    // 0-待办 1-已办 2-我发起的任务
    if (tabType === 0) {
      res = await getTodoTaskDetail({taskId: taskIdStr});
    } else if (tabType === 2) {
      res = await getMyTaskDetail({taskId: taskIdStr});
    } else if (tabType === 1) {
      res = await getDoneTaskDetail({taskId: taskIdStr});
    } else {
      uni.showToast({title: '无效的工单类型', icon: 'none'});
      return;
    }

    // 覆盖工单详情数据
    if (res) {
      configuredActions.value = await actionPromise;
      orderDetail.value = res;
      currentImgList.value = orderDetail.value.startImgs
      // 并行无依赖：填报明细单独拉，失败不影响详情展示
      loadWorkFieldValues(res)
    }
  } catch (error) {
    console.error('获取工单详情失败：', error);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  } finally {
    loading.value = false;
  }
};

/**
 * 加载作业填报明细（动态字段）
 * bizType=1 工单，bizId=workorder_main_info.id
 */
const loadWorkFieldValues = async (detail: any) => {
  workFieldValues.value = []
  if (!detail || !detail.id) return
  try {
    const res = await getWorkRecordValues({bizType: 1, bizId: detail.id})
    workFieldValues.value = Array.isArray(res) ? res : []
  } catch (error) {
    console.error('获取填报明细失败：', error)
  }
}

// 7图片/8附件：value_text 存 URL 的 JSON 数组
const parseFieldUrls = (item: any) => {
  try {
    const arr = JSON.parse(item.valueText || '[]')
    return Array.isArray(arr) ? arr : []
  } catch (e) {
    return []
  }
}

// 附件展示末段文件名
const fileNameOf = (url: string) => {
  if (!url) return ''
  const path = String(url).split('?')[0].split('#')[0]
  const name = path.substring(path.lastIndexOf('/') + 1)
  try {
    return decodeURIComponent(name) || url
  } catch (e) {
    return name || url
  }
}

// 其余类型直接展示后端生成的可读文案（item.text）
const fieldDisplayText = (item: any) => item.text || item.valueText || '--'

// 页面加载参数
const taskId = ref('')
const activeTab = ref('')
const processInstanceId = ref('')

const activeTopTabClick = async (item: any) => {
  console.log(item)
  activeTopTab.value = item.index
  if (activeTopTab.value == 1) {
    let getData = {
      processInstanceId: processInstanceId.value,
    }
    const res = await getApprovalDetail(getData)
    console.log(res)
    // 关键：格式化数据，补充up-steps要求的title字段
    if (res && res.activityNodes && res.activityNodes.length) {
      // 1. 先过滤：剔除 name 为 "结束" 的节点
      // const filteredActivityNodes = res.activityNodes.filter(node => {
      //   // 返回 true 保留节点，返回 false 剔除节点
      //   return node.name !== '结束';
      // });
      // 过滤未开始(status = -1)的预测节点：退回后 BPM 会返回后续待处理节点，工单时间线只展示已发生/进行中的节点
      const filteredActivityNodes = res.activityNodes.filter(node => node.status !== -1)
      const formatActivityNodes = filteredActivityNodes.map(node => ({
        ...node,
        title: node.name // 补充强制字段，满足3.3.48版本组件要求
      }));
      processData.value = {
        ...res,
        activityNodes: formatActivityNodes
      };
    } else {
      processData.value = res;
    }
  }
}

// ========== 回退弹窗相关状态（新增图片上传实例） ==========
const rejectModalShow = ref(false); // 回退modal显示开关
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'); // 单选框值，默认0（通过）
const acceptReason = ref(''); // 验收原因
const currentAcceptItem = ref<any>(null); // 当前验收的工单项
// 验收图片上传配置
const acceptImgs = useUploadImgs({
  maxCount: 3,
  uploadText: '选择验收图片',
  sizeType: ['compressed'],
  formRef: null,
  fieldName: 'acceptImgs'
})

// ========== 生成临时key ==========
const generateTempKey = () => {
  return 'renew_order_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
};

// ========== handleRenew 重新提交工单 ==========
const handleRenew = (item: any) => {
  // 校验工单有效性
  if (!item || !item.id) {
    uni.showToast({title: '工单信息异常，无法重新提交', icon: 'none'});
    return;
  }

  // 1. 生成唯一临时标识
  const tempKey = generateTempKey();

  // 2. 将完整工单数据存入本地临时存储（同步存储，确保数据立即生效）
  try {
    uni.setStorageSync(tempKey, item);
  } catch (error) {
    console.error('存储工单数据失败：', error);
    uni.showToast({title: '数据存储异常，无法重新提交', icon: 'none'});
    return;
  }

  // 3. URL 仅传递「唯一标识」和「重新提交标记」
  uni.navigateTo({
    url: `/pages-sub/problem/work-order-manage/add-order?isRenew=1&tempKey=${tempKey}`
  });
};

// ========== handleReject 打开回退弹窗 ==========
const handleReject = (item: any) => {
  // 校验工单有效性
  if (!item || !item.id) {
    uni.showToast({title: '工单信息异常，无法回退', icon: 'none'});
    return;
  }
  currentRejectItem.value = item;
  rejectReason.value = ''; // 清空上次输入
  rejectImgs.clearImgs(); // 清空上传图片
  rejectModalShow.value = true; // 显示回退modal
};

// ========== 回退弹窗取消按钮 ==========
const handleRejectModalCancel = () => {
  rejectModalShow.value = false;
  rejectReason.value = '';
  rejectImgs.clearImgs(); // 清空上传图片
};

// ========== 确认回退工单（新增returnImgs传参） ==========
const confirmReject = async () => {
  // 严格校验回退原因（去除首尾空格）
  const rejectReasonTrim = rejectReason.value.trim();
  if (!rejectReasonTrim) {
    uni.showToast({title: '请填写回退原因', icon: 'none', duration: 1000});
    return;
  }
  // 校验当前工单有效性
  if (!currentRejectItem.value || !currentRejectItem.value.id) {
    uni.showToast({title: '工单信息异常，无法提交', icon: 'none', duration: 1000});
    rejectModalShow.value = false;
    return;
  }
  try {
    // 显示加载中，防止重复提交
    uni.showLoading({title: '提交中...', mask: true});

    // 构建请求参数（新增returnImgs）
    const requestData = {
      "returnImgs": rejectImgs.getSuccessImgUrls(), // 回退图片URL数组
      "workerDataId": currentRejectItem.value.id,
      "taskKey": currentRejectItem.value.taskKey,
      "taskId": currentRejectItem.value.taskId,
      "operateType": nextStepMap[currentRejectItem.value.taskKey].operateTypeNoPass,
      "agree": 1,
      "reason": rejectReasonTrim
    };
    // 调用回退工单接口
    const res = await universalApproval(requestData);
    uni.showToast({title: '回退成功', icon: 'success', duration: 1000});

    rejectModalShow.value = false;
    // 修复：正确使用eventChannel通知列表页刷新
    if (eventChannel.value) {
      eventChannel.value.emit('needRefresh');
    }
    // 返回列表页
    uni.navigateBack({delta: 1});
  } catch (error) {
    console.error('回退工单失败：', error);
    uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
  } finally {
    // 隐藏加载中
    uni.hideLoading();
  }
};

// ========== 统一节点动作（工作流配置化） ==========
const unifiedActionsRef = ref(null)

/** 当前任务已配置的统一动作；null 表示未配置（回退原有按钮逻辑） */
const configuredActions = ref<any>(null)

/** 驳回类动作编码：只有配置了这些动作，才展示「回退」按钮 */
const REJECT_ACTION_CODES = ['REJECT', 'RETURN', 'RETURN_PREV']

/** 回退按钮显隐：已配置统一动作时以配置为准，未配置时沿用原有节点规则 */
const showRejectButton = computed(() => {
  if (Array.isArray(configuredActions.value)) {
    return configuredActions.value.some((action: any) => REJECT_ACTION_CODES.includes(action.code))
  }
  return !!nextStepMap[orderDetail.value.taskKey]?.backShow
})

/** 是否已配置统一动作（配置后按配置逐个渲染动作按钮） */
const hasConfiguredActions = computed(() =>
    Array.isArray(configuredActions.value) && configuredActions.value.length > 0)

/** 底部操作栏行数：详情内容据此预留底部间距，避免按钮遮挡内容 */
const actionBarRows = computed(() => {
  if (hasConfiguredActions.value) {
    return Math.ceil(configuredActions.value.length / 3)
  }
  let rows = 1
  if (showRejectButton.value) rows++
  if (nextStepMap[orderDetail.value.taskKey]?.renewShow) rows++
  return rows
})

/** 主按钮文案：已配置统一动作时取配置的动作名称，未配置时沿用原有节点规则 */
const processButtonText = computed(() => {
  const actions = configuredActions.value
  if (Array.isArray(actions) && actions.length > 0) {
    return actions[0].name || actions[0].code
  }
  return nextStepMap[orderDetail.value.taskKey]?.btnText
})

/** 查询当前任务是否已配置统一动作；未配置或接口异常时返回 null，回退原有逻辑 */
const queryUnifiedActions = async (item: any) => {
  if (!item || !item.taskId) return null
  try {
    const data = await getTaskActions(item.taskId)
    if (data && data.configured && Array.isArray(data.actions) && data.actions.length > 0) {
      return data.actions
    }
  } catch (e) {
    console.warn('查询统一节点动作失败，回退原有逻辑', e)
  }
  return null
}

/** 处理工单：已配置统一动作时直接执行点击的配置动作，否则回退原有处理 */
const handleUnifiedProcess = async (item: any, action: any = null) => {
  const actions = Array.isArray(configuredActions.value)
      ? configuredActions.value
      : await queryUnifiedActions(item)
  if (actions) {
    // 传入的动作即用户点击的配置按钮，直接执行该动作，不再弹「请选择操作」二次选择
    unifiedActionsRef.value?.open(item, [action || actions[0]])
    return
  }
  handleProcess(item)
}

/** 回退：已配置统一动作时走新逻辑，否则回退原有弹窗 */
const handleUnifiedReject = async (item: any) => {
  const actions = Array.isArray(configuredActions.value)
      ? configuredActions.value
      : await queryUnifiedActions(item)
  if (actions) {
    const rejectActions = actions.filter((action: any) =>
        ['REJECT', 'RETURN', 'RETURN_PREV'].includes(action.code)
    )
    if (rejectActions.length > 0) {
      unifiedActionsRef.value?.open(item, rejectActions)
    } else {
      uni.showToast({ title: '当前节点未配置回退动作', icon: 'none' })
    }
    return
  }
  handleReject(item)
}

/** 统一动作执行成功后通知列表刷新并返回 */
const handleUnifiedSuccess = () => {
  if (eventChannel.value) {
    eventChannel.value.emit('needRefresh')
  }
  uni.navigateBack({delta: 1})
}

// ========== handleProcess 处理工单 ==========
const handleProcess = async (item: any) => {
  console.log(nextStepMap[item.taskKey]?.name)
  try {
    if (nextStepMap[item.taskKey]?.name == '养护组长分配') {
      uni.navigateTo({
        url: `/pages-sub/problem/work-order-manage/distribution-order?taskId=${item.taskId}&orderNo=${item.orderNo}&id=${item.id}&busiLine=${item.busiLine}`
      })
    }
    if (nextStepMap[item.taskKey]?.name == '养护员待实施') {
      // ① 生成唯一临时key
      const tempKey = `maintain_order_${Date.now()}_${Math.floor(Math.random() * 10000)}`;

      // ② 存储完整item到本地缓存
      try {
        uni.setStorageSync(tempKey, item);
      } catch (error) {
        console.error('存储养护工单数据失败：', error);
        uni.showToast({title: '数据存储异常，无法跳转', icon: 'none'});
        return;
      }

      // ③ URL仅传递临时key
      uni.navigateTo({
        url: `/pages-sub/problem/work-order-manage/add-maintain-order?tempKey=${tempKey}`
      })
    }
    // 养护组长验收 - 打开弹窗
    if (nextStepMap[item.taskKey]?.name == '养护组长验收') {
      currentAcceptItem.value = item; // 存储当前工单信息
      acceptReason.value = ''; // 清空上次的验收原因
      acceptRadioValue.value = '0'; // 重置默认选中“通过”
      acceptImgs.clearImgs(); // 清空验收图片
      acceptModalShow.value = true; // 显示验收弹窗
    }
    // 巡查员验收 - 打开弹窗
    if (nextStepMap[item.taskKey]?.name == '巡查员验收') {
      currentAcceptItem.value = item; // 存储当前工单信息
      acceptReason.value = ''; // 清空上次的验收原因
      acceptRadioValue.value = '0'; // 重置默认选中“通过”
      acceptImgs.clearImgs(); // 清空验收图片
      acceptModalShow.value = true; // 显示验收弹窗
    }

    // 发起人确认
    if (nextStepMap[item.taskKey]?.name == '发起人确认') {
      console.log(item)
      uni.showModal({
        title: "结束工单",
        content: "请确定是否结束工单？",
        success: async function (res) {
          if (res.confirm) {
            // 构建请求参数（携带returnImgs）
            const requestData = {
              "returnImgs": rejectImgs.getSuccessImgUrls(),
              "workerDataId": item.id,
              "taskKey": 'ylInspectorStart',
              "taskId": item.taskId,
              "operateType": 200,
              "agree": 1,
              "reason": '结束工单'
            };
            // 调用回退工单接口
            const res = await universalApproval(requestData);
            uni.showToast({title: '结束成功', icon: 'success', duration: 1000});

            // 通知列表页刷新
            if (eventChannel.value) {
              eventChannel.value.emit('needRefresh');
            }
            uni.navigateBack({delta: 1});
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    }
  } catch (error) {
    console.error('处理工单失败：', error);
    uni.showToast({title:  error.msg||'处理失败，请重试', icon: 'none'});
  }
};

// ========== 验收弹窗取消按钮（新增清空图片） ==========
const handleAcceptModalCancel = () => {
  acceptModalShow.value = false;
  acceptReason.value = '';
  acceptRadioValue.value = '0';
  acceptImgs.clearImgs(); // 清空验收图片
};

// ========== 验收弹窗确认按钮（新增returnImgs传参） ==========
const handleAcceptModalConfirm = async () => {
  // 1. 校验验收原因是否为空
  if (acceptRadioValue.value == 1 && !acceptReason.value.trim()) {
    uni.showToast({title: '请填写验收原因', icon: 'none', duration: 1000});
    return;
  }
  // 2. 校验验收原因长度
  if (acceptReason.value.length > 200) {
    uni.showToast({title: '验收原因最多200字', icon: 'none', duration: 1000});
    return;
  }
  try {
    // 3. 调用验收接口
    console.log(currentAcceptItem.value)
    let postData: any = {}
    if (currentAcceptItem.value?.taskKey == 'ylTeamLeaderConfirm') {   // 养护组长验收
      postData = {
        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
        "taskKey": currentAcceptItem.value.taskKey, // ylTeamLeaderConfirm
        "workerDataId": currentAcceptItem.value.id,
        "taskId": currentAcceptItem.value.taskId,
        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
        "reason": acceptReason.value.trim()
      }
    }
    if (currentAcceptItem.value?.taskKey == 'ylInspector') {   // 巡查员验收
      postData = {
        "returnImgs": acceptImgs.getSuccessImgUrls(), // 验收图片URL数组
        "taskKey": currentAcceptItem.value.taskKey,  //ylInspector
        "taskId": currentAcceptItem.value.taskId,
        "workerDataId": currentAcceptItem.value.id,
        "operateType": acceptRadioValue.value == 0 ? nextStepMap[currentAcceptItem.value.taskKey].operateTypePass : nextStepMap[currentAcceptItem.value.taskKey].operateTypeNoPass,
        "reason": acceptReason.value.trim(),
        "agree": acceptRadioValue.value
      }
    }
    const acceptRes = await universalApproval(postData);

    handleAcceptModalCancel(); // 清空状态

    // 通知列表页刷新
    if (eventChannel.value) {
      eventChannel.value.emit('needRefresh');
    }
    // 返回列表页
    uni.navigateBack({delta: 1});

    uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
  } catch (error) {
    // 5. 操作失败处理
    console.error('验收失败：', error);
    uni.showToast({title:  error.msg||'验收提交失败，请重试', icon: 'none', duration: 1000});
  }
};

onLoad((options: any) => {
  console.log('页面入参：', options)
  const {taskId: taskIdOpt, activeTab: activeTabOpt, processInstanceId: processInstanceIdOpt} = options;
  // 0-待办 1-我发起的 2-已办
  taskId.value = taskIdOpt || '';
  activeTab.value = activeTabOpt || '0';
  processInstanceId.value = processInstanceIdOpt;

  // 初始化eventChannel
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  eventChannel.value = currentPage.getOpenerEventChannel();

  DetailQuery(taskId.value);
});

onShow(() => {
  // 注释原有逻辑，避免重复加载
});
</script>

<style scoped lang="scss">
// 全局样式
.page-container {
  min-height: 100vh;
}

// 主内容容器
.main-content {
  padding-bottom: 80rpx;
}

// 顶部Tabs
.top-tabs {
  //background-color: #fff;
}

// Tab内容区
.tab-content {
  //padding: 16rpx;
}

// 工单详情内容
.detail-content {
  .detail-cell-group {
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .cell-content-wrap {
    // 保持原有样式，兼容up-album布局
  }

  .empty-text {
    color: #999;
    font-size: 26rpx;
  }
}

// 图片分类Tabs区块
.img-tabs-block {
  background-color: #fff;
  //border-radius: 12rpx;
  //padding: 16rpx;

  // 图片内容区
  .img-tab-content {
    padding: 20rpx 15px ;
    text-align: center;
    //min-height: 120rpx;
    //display: flex;
    //align-items: center;
    //justify-content: center;
    //
    .img-album {
      //width: 100%;

    }

    .empty-img-text {
      height: 75px;
      line-height: 75px;
      color: #999;
      font-size: 28rpx;
    }
  }
}

// 流程节点区域（完整样式，确保内容可见）
.process-content {
  //padding: 16rpx;
  //min-height: 400rpx;

  .empty-process {
    margin-top: 100rpx;
  }

  // 竖向步骤条容器样式
  .vertical-steps {
    //width: 100%;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx; // 步骤项间距
  }

  // 自定义内容容器样式
  .step-content-wrap {
    width: 100%;
    //padding: 10rpx 0;
    box-sizing: border-box;

    // 节点标题 + 操作人样式
    .step-title {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 12rpx;

      .operator-name {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
        margin-left: 20rpx;
      }
    }

    // 描述（时间 + 处理说明）样式
    .step-desc {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 12rpx;

      .time-line {

        .processing-tag {
          color: #f59e0b;
          margin-left: 10rpx;
        }
      }

      .reason-line {
        word-break: break-all; // 长文本自动换行
      }
    }

    // 相册容器样式
    .step-album-wrap {
      padding: 10rpx 0;

      .step-album {
        //width: 100%;
      }

      .no-img-tip {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
  }
}

// 上传图片通用样式
.upload-wrap {
  margin-top: 20rpx;

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

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

// 回退弹窗样式
.reject-modal-content {
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 0;
}

.reject-textarea {
  width: 100%;
}

// 验收弹窗样式
.accept-modal-content {
  width: 100%;
  box-sizing: border-box;
}

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

.textarea-wrap {
  width: 100%;
  margin-top: 30rpx;
}

.mt-30 {
  margin-top: 30rpx;
}
// 针对 up-album 单图容器的样式（穿透 scoped 限制）
:deep .u-album__row__wrapper image {
  width: 70px !important;  // 与多图保持一致
  height: 70px !important;
}

// 底部动作按钮：动作多时自动换行
// 底部操作栏：白底 + 顶部投影，按钮每行最多 3 个，避免多动作时整屏遮挡工单详情
.order-action-bar {
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
  padding: 10rpx 14rpx;
  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}

.order-action-row {
  display: flex;
  flex-wrap: wrap;
  margin: -6rpx;
}

.order-action-btn {
  box-sizing: border-box;
  width: calc((100% - 36rpx) / 3);
  height: 68rpx;
  line-height: 68rpx;
  margin: 6rpx;
  padding: 0 8rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 未配置统一动作时按钮整行展示，保持原有观感
.order-action-row--single .order-action-btn {
  width: 100%;
}

.order-action-btn--primary {
  background-color: #3c9cff;
}

.order-action-btn--success {
  background-color: #5ac725;
}

.order-action-btn--warning {
  background-color: #f9ae3d;
}

.order-action-btn--error {
  background-color: #f56c6c;
}

.order-action-btn--info {
  background-color: #909399;
}

// 按操作栏行数给内容预留底部间距
.main-content.pb-rows-1 {
  padding-bottom: 190rpx;
}

.main-content.pb-rows-2 {
  padding-bottom: 290rpx;
}

.main-content.pb-rows-3 {
  padding-bottom: 390rpx;
}

// 作业填报明细
.work-field-block {
  margin-top: 20rpx;

  .work-field-title {
    padding: 16rpx 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #303133;
    background: #fff;
  }

  .work-field-value {
    max-width: 420rpx;
    text-align: right;
    word-break: break-all;
  }

  .work-field-imgs {
    width: 100%;
  }

  .work-field-files {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .work-field-file {
      max-width: 420rpx;
      font-size: 26rpx;
      color: #3c9cff;
    }
  }
}
</style>