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">
      <!-- 顶部固定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.roadName || '--' }}</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>
              <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="街道名称" :value="orderDetail.streetName || '--'" align="middle"></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"
                      :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>

          <!-- 图片分类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="80"
                  multipleSize="80"
                  :preview-full-image="true"
                  class="img-album"
              ></up-album>
              <text v-else class="empty-img-text">暂无图片</text>
            </view>
          </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 }}
                      <text class="operator-name">
                        {{ item.tasks && item.tasks[0]?.assigneeUser?.nickname ? '（' + item.tasks[0].assigneeUser.nickname + '）' : '（未知操作人）' }}
                      </text>
                    </view>

                    <!-- 2. 原描述内容：时间 + 处理说明（最多200字） -->
                    <view class="step-desc">
                      <!-- 时间行 -->
                      <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>

                    <!-- 3. 原相册内容：预留up-album -->
                    <view class="step-album-wrap">
                      <up-album
                          v-if="item.tasks && item.tasks[0]?.returnImgs && item.tasks[0].returnImgs.length"
                          :urls="item.tasks[0].returnImgs.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&&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>
    </up-modal>

    <!-- 验收弹窗 -->
    <up-modal
        :show="acceptModalShow"
        title="验收"
        :closeOnClickOverlay="false"
        :showConfirmButton="true"
        :showCancelButton="true"
        @cancel="acceptModalShow=false"
        @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>
    </up-modal>

  </view>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue';
import {onLoad, onShow} from '@dcloudio/uni-app';
import {timeFormat} from '@/uni_modules/uview-plus';
import {
  getMyTaskDetail,
  getDoneTaskDetail,
  getTodoTaskDetail,
  getApprovalDetail,
  universalApproval
} from '@/api/work-order-manage/work-order-manage';
import { nextStepMap, buzStatusMap, calculateFormatTimeDiff } 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: []
});

/**
 * 当前激活的图片列表（无需函数调用，直接访问）
 */
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;
}

/**
 * 获取工单详情
 */
const DetailQuery = async (taskIdStr: string) => {
  console.log('当前工单ID：', taskIdStr)
  try {
    loading.value = true;
    // 转换activeTab为数字类型，避免类型不一致导致接口调用失败
    const tabType = Number(activeTab.value);
    let res: any;

    if (tabType === 0) {
      res = await getTodoTaskDetail({taskId: taskIdStr});
    } else if (tabType === 1) {
      res = await getMyTaskDetail({taskId: taskIdStr});
    } else if (tabType === 2) {
      res = await getDoneTaskDetail({taskId: taskIdStr});
    } else {
      uni.showToast({title: '无效的工单类型', icon: 'none'});
      return;
    }

    // 覆盖工单详情数据
    if (res) {
      orderDetail.value = res;
      currentImgList.value = orderDetail.value.startImgs
    }
  } catch (error) {
    console.error('获取工单详情失败：', error);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  } finally {
    loading.value = false;
  }
};

// 页面加载参数
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 !== '结束';
      });
      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'
})
// 监听上传实例响应式变化
watch(() => rejectImgs.rawImgList.value, (newVal) => {
  rejectImgs.imgList = newVal
}, { deep: true })

// ========== 新增：验收弹窗相关状态 ==========
const acceptModalShow = ref(false); // 验收弹窗显示开关
const acceptRadioValue = ref('0'); // 单选框值，默认0（通过）
const acceptReason = ref(''); // 验收原因
const currentAcceptItem = ref<any>(null); // 当前验收的工单项

// ========== 新增：生成临时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(); // 清空上传图片
};

// ========== 新增：确认回退工单 ==========
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});

    // 构建请求参数
    const requestData = {
      "returnImgs": rejectImgs.getSuccessImgUrls(),
      "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;
    // 重新获取工单详情，刷新页面
    await DetailQuery(taskId.value);
  } catch (error) {
    console.error('回退工单失败：', error);
    uni.showToast({title: '网络异常，回退失败', icon: 'none', duration: 1000});
  } finally {
    // 隐藏加载中
    uni.hideLoading();
  }
};

// ========== 新增：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}`
      })
    }
    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'; // 重置默认选中“通过”
      acceptModalShow.value = true; // 显示验收弹窗
    }
    // 巡查员验收 - 打开弹窗
    if (nextStepMap[item.taskKey]?.name == '巡查员验收') {
      currentAcceptItem.value = item; // 存储当前工单信息
      acceptReason.value = ''; // 清空上次的验收原因
      acceptRadioValue.value = '0'; // 重置默认选中“通过”
      acceptModalShow.value = true; // 显示验收弹窗
    }

    // 发起人确认
    if (nextStepMap[item.taskKey]?.name == '发起人确认') {
      console.log(item)
      uni.showModal({
        title: "结束工单",
        content: "请确定是否结束工单？",
        success: async function (res) {
          if (res.confirm) {
            // 构建请求参数
            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});
            // 重新获取工单详情，刷新页面
            await DetailQuery(taskId.value);
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    }
  } catch (error) {
    console.error('处理工单失败：', error);
    uni.showToast({title: '处理失败，请重试', icon: 'none'});
  }
};

// ========== 新增：验收弹窗确认按钮 ==========
const handleAcceptModalConfirm = async () => {
  // 1. 校验验收原因是否为空
  if (!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 = {
        "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 = {
        "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);
    // 4. 操作成功处理
    uni.showToast({title: '提交成功', icon: 'success', duration: 1000});
    acceptModalShow.value = false;
    acceptReason.value = ''; // 清空验收原因
    // 重新获取工单详情，刷新页面
    await DetailQuery(taskId.value);
  } catch (error) {
    // 5. 操作失败处理
    console.error('验收失败：', error);
    uni.showToast({title: '验收提交失败，请重试', 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;
  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 ;
    min-height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .img-album {
      width: 100%;
    }

    .empty-img-text {
      height: 100px;
      line-height: 100px;
      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 {
        margin-bottom: 8rpx;

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

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

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

      .step-album {
        width: 100%;
        max-width: 300rpx;
      }

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



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


// 验收弹窗样式
.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;
}
</style>