yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/pipechecker/components/StatusOperationPanel.vue

<template>
  <div class="container-panel">
    <el-row class="info-panel">
      <div class="info-item">
        <span class="label">报告编号:</span>
        <span class="value">{{ selectedItem?.reportNo || '-' }}</span>
      </div>
      <div class="info-item" style="margin: 0 auto;" v-if="isShowRecordOrReportBtn">
<!--        <el-switch-->
<!--          v-model="isShowReportPdf"-->
<!--          active-text="报告"-->
<!--          inactive-text="记录"-->
<!--          @change="handleChangeShowReportPdf"-->
<!--        />-->
<!--        <el-radio-group v-model="showReportPdfType" @change="handleChangeShowReportPdf">-->
<!--          <el-radio-button label="record">记录</el-radio-button>-->
<!--          <el-radio-button label="report">报告</el-radio-button>-->
<!--          <el-radio-button label="result" v-if="selectedItem?.reportType === 100">结论报告</el-radio-button>-->
<!--        </el-radio-group>-->
        <div class="capsule-tabs">
          <div
            class="tab-item"
            :class="{ active: showReportPdfType === 'record' }"
            @click="handleChangeShowReportPdf('record')"
            v-if="hasRecord"
          >
            <span>记录</span>
          </div>
          <div
            class="tab-item"
            :class="{ active: showReportPdfType === 'report' }"
            @click="handleChangeShowReportPdf('report')"
          >
            <span>报告</span>
          </div>
        </div>
      </div>
      <div class="info-item" style="margin: 0 auto;">
        <span class="label">检验项目:</span>
        <span class="value" :title="selectedItem?.reportName || '-'">{{
          selectedItem?.reportName || '-'
        }}</span>
      </div>
      <div v-if="selectedItem?.reportType === 300">
        <span>{{ selectedItem.instructionId ? '已' : '未'}}关联操作指导书</span>
        <el-button
          type="primary"
          size="small"
          link
          class="edit-checker-btn"
          @click="handleShowAssociationOperationManual"
        >
          <Icon icon="ep:edit" />
        </el-button>
      </div>
      <div class="info-item" style="flex-basis: 300px; text-align: end;">
        <span class="label">{{ selectedItem?.reportType === 100 ? '主检人' : '检验员' }}:</span>
        <span
          class="value"
          :title="
            selectedItem?.reportType === 100
              ? taskOrderItem?.mainCheckerUser?.nickname || '-'
              : getCheckersName()
          "
          >{{
            selectedItem?.reportType === 100
              ? taskOrderItem?.mainCheckerUser?.nickname || '-'
              : getCheckersName()
          }}</span
        >
        <el-button
          v-if="!isAuditMode"
          type="primary"
          size="small"
          link
          class="edit-checker-btn"
          @click="
            () =>
              selectedItem?.reportType === 100 ? handleModifyMainChecker() : handleModifyChecker()
          "
          :disabled="(selectedItem?.reportType === 100)
          || (selectedItem?.checkUsers?.length > 0 && selectedItem?.checkUsers?.[0]?.id !== userStore?.user?.id && taskOrderItem?.mainCheckerUser?.id !== userStore?.user?.id)
          || isCompleteInput"
        >
          <!-- 主报告：登录用户为主检人的时，才可以修改主检人 -->
          <!-- 子报告：登录用户为检验员或主检人的时候，才可以修改检验员 -->
          <Icon icon="ep:edit" />
        </el-button>
      </div>
    </el-row>

    <el-row class="status-operation-panel">
      <!-- 未选择任何项目时的提示 -->
      <div v-if="!selectedItem" class="no-selection">
        <el-empty description="请选择一个检验项目查看详情" :image-size="100" />
      </div>

      <!-- 选择单个项目时显示详情操作 -->
      <div v-else class="single-item-panel">
        <!-- 
          1、重大问题线索告知表
          2、作业指导书
          3、检验方案
          以上报告类型不显示做进度栏目
        -->
        <InspectionItemProgress
          v-if="!onlyShowPdf"
          :selected-item="selectedItem"
          :task-info="taskInfo"
          :is-audit-mode="isAuditMode"
          @modify-checker="handleModifyChecker"
        />
        <!-- <div class="pdf-panel" :style="{ maxWidth: !onlyShowPdf ? '1200px' : 'unset' }"> -->
        <div ref="pdfPanelRef" class="pdf-panel" >
          <!-- PDF预览区域 -->
          <div class="!h-full" :style="{ width: pdfContentWidth + 'px'}">
            <SpreadViewer :initData="initData" ref="spreadRef" isFullscreen  @saveSuccess="saveSuccess"/>
          </div>
        </div>
        <!--
          1、重大问题线索告知表
          2、作业指导书
          3、检验方案
          以上报告类型不显示右侧栏目
        -->
        <template v-if="showCheckBook && getReportStatusEnd">
          <div class="right-panel-container">
            <!-- 收缩展开按钮 -->
            <div class="toggle-btn" @click="togglePanel" :class="{ 'collapsed': !isExpanded }">
              <el-icon>
                <Back v-if="!isExpanded" />
                <Right v-else />
              </el-icon>
            </div>
            <div class="operation-panel" :class="{ 'expanded': isExpanded, 'collapsed': !isExpanded }">
              <div class="operation-inner custom-inner">
                <template v-if="checkBookDetail.rectificationStatus === 2">
                  <div class="operation-item">
                    <div class="item-header"> 回退原因 </div>
                    <div class="item-content">
                      <el-form
                        ref="returnFormRef"
                        :model="returnForm"
                        :rules="returnFormRules"
                        label-position="right"
                        label-width="80px"
                      >
                        <el-form-item label="回退原因" prop="rejectionReason">
                          <el-input
                            v-model="returnForm.rejectionReason"
                            type="textarea"
                            :rows="5"
                            maxlength="100"
                            placeholder="请输入回退原因"
                          />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </template>
                <div class="operation-item1">
                  <div class="item-header"> 处理人信息 </div>
                  <div class="item-content">
                    <div class="item-content-item">
                      <span class="item-content-item-label">联系人姓名：</span>
                      <span class="item-content-item-value">{{ checkBookDetail?.recipient || '-' }}</span>
                    </div>
                    <div class="item-content-item">
                      <span class="item-content-item-label">联系人电话：</span>
                      <span class="item-content-item-value">{{ checkBookDetail?.recipientPhone || '-'}}</span>
                    </div>
                    <div class="item-content-item">
                      <span class="item-content-item-label">当前状态：</span>
                      <span class="item-content-item-value">{{
                          rectificationStatusMap[checkBookDetail?.rectificationStatus] || '-'
                        }}</span>
                    </div>
                  </div>
                </div>
                <div class="operation-item1 videoAndImg">
                  <div class="item-header"> 整改材料 </div>
                  <div class="item-content1">
                    <div class="item-content1-item">图片：</div>
                    <div class="item-content1-img">
                      <template
                        v-for="(path, index) in checkBookDetail.rectificationImage?.split(',') || []"
                        :key="index"
                      >
                        <div class="item-content1-img-item">
                          <img class="img-item" :src="buildFileUrl(path)" alt="" @click="handlePreview(buildFileUrl(path), 'image')" />
                          <div class="list-item-tool">
                            <el-icon class="icon"  @click="() => handlePreview(buildFileUrl(path), 'image')"><View /></el-icon>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                  <div class="item-content1">
                    <div class="item-content1-item">视频：</div>
                    <div class="item-content1-img">
                      <template
                        v-for="(path, index) in checkBookDetail.rectificationVideo?.split(',') || []"
                        :key="index"
                      >
                        <div class="item-content1-img-item">
                          <video class="img-item" :src="buildFileUrl(path)" alt="" @click="handlePreview(buildFileUrl(path), 'video')"></video>
                          <!-- 视频播放按钮 -->
                          <div class="list-item-tool">
                            <el-icon class="icon"  @click="() => handlePreview(buildFileUrl(path), 'video')"><View /></el-icon>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="right-panel-container">
            <!-- 收缩展开按钮 -->
            <div class="toggle-btn" @click="togglePanel" :class="{ 'collapsed': !isExpanded }"  v-if="!onlyShowPdf">
              <el-icon>
                <Back v-if="!isExpanded" />
                <Right v-else />
              </el-icon>
            </div>
            <div class="operation-panel" :class="{ 'expanded': isExpanded, 'collapsed': !isExpanded }" v-if="!onlyShowPdf">
              <div class="operation-inner">
                <!-- 流转记录 -->
                <div class="operation-item">
                  <div class="item-header"> 流转记录 </div>
                  <div class="item-content">
                    <el-empty
                      v-if="!recordList.length"
                      description="暂无流转记录"
                      :image-size="120"
                    />
                    <div class="record-item" v-for="record in recordList" :key="record.id">
                      <div class="record-item-title">{{ PressureReportType['SUGGUESTION'] === props.selectedItem?.reportType ? record.processName : PressureCheckerMyTaskStatusMap[record.process]

                        }}</div>
                      <div class="record-item-inner">
                        <div class="content">
                          <span>{{ record.createUser.nickname }}</span>
                          <el-button
                            :type="
                              OAApprovalResultType[record.result] ||
                                (record.result === 100
                                  ? 'success'
                                  : record.result === 200
                                    ? 'danger'
                                    : 'default')
                            "
                            round
                            size="small"
                          >{{
                              OAApprovalResultMap[record.result] ||
                                (record.result === 100
                                  ? '通过'
                                  : record.result === 200
                                    ? '拒绝'
                                    : record.result || '-')
                            }}</el-button
                          >
                          <span class="time">{{
                              !record.createTime
                                ? '-'
                                : dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
                            }}</span>
                        </div>
                        <p class="desc">
                          <span>描述</span>
                          {{ record.remark && record.remark.trim() !== '' ? record.remark : '-' }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 智能纠错 -->
                <div class="operation-item">
                  <div class="item-header"> 智能纠错 </div>
                  <div class="item-content">
                    <el-empty
                      v-if="!checkInputList.length"
                      description="暂无纠错内容"
                      :image-size="120"
                    />
                    <div class="error-item" v-for="input in checkInputList" :key="input.code">
                      <el-icon color="#E0534E" :size="20"><InfoFilled /></el-icon>
                      {{ input.code }}：{{ input.name }}
                    </div>
                  </div>
                </div>
                <!-- 历史版本 -->
                <div class="operation-item">
                  <div class="item-header"> 历史版本 </div>
                  <div class="item-content" v-if="historyList.length">
                    <!-- <template> -->
                    <div class="history-item" v-for="item in historyList" :key="item.id">
                      <div class="history-title">{{ item.versionNoStr || '-' }}号版本</div>
                      <p
                      >修改原因：<span>{{ item.modifiedReason || '人工修改' }}</span></p
                      >
                      <div class="history-footer">
                        <span class="name">{{ item.creatorName || '-' }}</span>
                        <span class="time"
                        >修改于{{
                            dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss') || '-'
                          }}</span
                        >
                      </div>
                      <div class="my-2">
                        <el-button type="primary" link @click="handleShowVersionInfo(item)"
                        >查看详情</el-button
                        >
                        <el-button v-if="!checkerIsLoginUser" type="primary" link @click="restoreVersion(item)"
                        >恢复版本</el-button
                        >
                      </div>
                    </div>
                    <!-- </template> -->
                  </div>
                  <template v-else>
                    <el-empty description="暂无历史版本" :image-size="120" />
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- 审批人选择对话框 -->
      <AuditUserDialog
        v-if="isShowApprovalDialog"
        v-model="isShowApprovalDialog"
        :apiFn="getPipeRecheckUserList"
        title="请选择审批人"
        selectedAlertText="已选择审批人"
        width="700px"
        :columns="[
          {
            type: 'selection',
            fieldProps: {
              reserveSelection: true
            }
          },
          {
            label: '姓名',
            prop: 'nickname',
            search: {
              type: 'input',
              span: 12,
              prop: 'nickName'
            }
          },
          {
            label: '部门',
            prop: 'deptName',
            search: {
              type: 'input',
              span: 12
            }
          }
        ]"
        @confirm="handleApprovalSelectConfirm"
      />
      <Dialog
        v-model="isShowAuditDialog"
        width="400"
        :title="schemaFlag == 'proofread' ? '请选择校核人' : '请选择审核人'"
      >
        <CustomLargeListSelect
          v-model="form.recheckUser"
          :fetchFunc="getPipeRecheckUserList"
          label-key="nickname"
          value-key="id"
          searchKeyProp="nickName"
          @change="handleChangeEntrustUnit"
        />
        <template #footer>
          <el-button type="primary" @click="handleAuditSelectConfirm" :loading="submitting">保 存</el-button>
          <el-button @click="isShowAuditDialog = false">取 消</el-button>
        </template>
      </Dialog>
      <!-- 批量提交校核 -->
      <Dialog
        v-model="showBatchSubmitToRecheckDialog"
        width="400"
        title="批量提交校核"
      >
        <el-form ref="batchRecheckFormRef" :model="batchRecheckForm" :rules="batchRecheckFormRules" label-width="80px">
          <el-form-item label="提交记录" prop="reportIds">
            <el-select
              v-model="batchRecheckForm.reportIds"
              multiple
              clearable
              placeholder="请选择报告"
            >
              <el-option
                v-for="item in getCanSubmitRecheckReport"
                :key="item.id"
                :value="item.id"
                :label="item.reportName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="校核人" prop="recheckUser">
            <CustomLargeListSelect
              v-model="batchRecheckForm.recheckUser"
              :fetchFunc="getPipeRecheckUserList"
              label-key="nickname"
              value-key="id"
              searchKeyProp="nickName"
              @change="handleChangeEntrustUnit"
              placeholder="请选择校核人"
            />
          </el-form-item>
          <el-form-item label="">
            <span style="font-size: 13px; white-space: nowrap; margin-top: -16px; color: #999;">
              您已完成{{getCanSubmitRecheckReport.length}}份记录录入,可以进行批量提交校核
            </span>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="handleBatchSubmitToRecheck">提 交</el-button>
          <el-button @click="showBatchSubmitToRecheckDialog = false">取 消</el-button>
        </template>
      </Dialog>
      <!-- 校核人选择对话框 暂时作废
      -->
      <!-- <AuditUserDialog
        v-if="isShowAuditDialog"
        v-model="isShowAuditDialog"
        :apiFn="getUserList"
        title="请选择校核人"
        selectedAlertText="已选择校核人"
        width="700px"
        :pageType="0"
        :columns="[
          {
            type: 'selection',
            fieldProps: {
              reserveSelection: true
            }
          },
          {
            label: '姓名',
            prop: 'nickname',
            search: {
              type: 'input',
              span: 12,
              prop: 'nickName'
            }
          },
          {
            label: '部门',
            prop: 'deptName',
            search: {
              type: 'input',
              span: 12
            }
          }
        ]"
        @confirm="handleAuditSelectConfirm"
      /> -->

      <!-- 报告审核人选择对话框 -->
      <AuditUserDialog
        v-if="isShowReportAuditDialog"
        v-model="isShowReportAuditDialog"
        :apiFn="getPipeRecheckUserList"
        title="请选择审核人"
        selectedAlertText="已选择审核人"
        width="700px"
        :columns="[
          {
            type: 'selection',
            fieldProps: {
              reserveSelection: true
            }
          },
          {
            label: '姓名',
            prop: 'nickname',
            search: {
              type: 'input',
              span: 12,
              prop: 'nickName'
            }
          },
          {
            label: '部门',
            prop: 'deptName',
            search: {
              type: 'input',
              span: 12
            }
          }
        ]"
        @confirm="handleReportAuditSelectConfirm"
      />
    </el-row>

    <!-- 检验结果录入-葡萄城模板 -->
    <InlineInspectionResultInput
      v-if="showInlineInspectionResultInput"
      v-model:visible="showInlineInspectionResultInput"
      :template-params="inspectionResultTemplateParams"
      @confirm="handleInspectionResultConfirm"
      @cancel="handleReturnToNormalMode"
    />

    <!-- 检验录入-模板 -->
<!--    <InlineEditCheckRecord-->
<!--      v-if="showInlineEditCheckRecord"-->
<!--      :templateId="templateId"-->
<!--      v-model:visible="showInlineEditCheckRecord"-->
<!--      :report-list="reportList"-->
<!--      :task-order-item="taskOrderItem"-->
<!--      :template-params="templateParams"-->
<!--      @confirm="handleTemplateConfirm"-->
<!--      @cancel="handleRefresh"-->
<!--    />-->

    <!-- 检验录入-模板 -->
    <CustomDialog v-model="showInlineEditCheckRecord" :show-footer="false" fullscreen :show-close="false">
      <SpreadViewer :initData="editData" ref="editSpreadRecordRef" @saveSuccess="saveSuccessRecord" @close="handleClose">
        <template #title>
          <div style="font-size: 20px; ">检测录入</div>
        </template>
      </SpreadViewer>
    </CustomDialog>

    <!-- 报告编制 - 模板 -->
<!--    <InlineReportEdit-->
<!--      v-if="showInlineReportEdit"-->
<!--      v-model:visible="showInlineReportEdit"-->
<!--      :template-params="templateParams"-->
<!--      :report-list="reportList || []"-->
<!--      :report-type="showReportPdfType"-->
<!--      @confirm="handleTemplateConfirm"-->
<!--      @cancel="handleRefresh"-->
<!--      @refresh="()=>{refreshPdf = !refreshPdf}"-->
<!--    />-->

    <!-- 报告编制 - 模板 -->
    <CustomDialog v-model="showInlineReportEdit" :show-footer="false" fullscreen  :show-close="false">
      <SpreadViewer :initData="editData" ref="editSpreadReportRef" @saveSuccess="saveSuccessReport"  @close="handleClose">
        <template #title>
          <div style="font-size: 20px; ">报告编制</div>
        </template>
      </SpreadViewer>
    </CustomDialog>

    <!-- 修改主检人弹窗 -->
    <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelect" :single="true" />

    <CustomDialog v-model="showReportDialog" :show-footer="false" width="1000px">
<!--      <VuePdfEmbed
        v-loading="pdfLoading"
        :height="500"
        :width="968"
        :source="reportSource"
        @rendered="handlePdfRendered"
      />-->
      <SpreadViewer :initData="reportInitData" ref="reportSpreadRef" />
    </CustomDialog>

    <!-- 查看版本详情的弹窗 -->
    <CustomDialog v-model="showVersionDetail" title="查看详情" :show-footer="false" width="1000px">
      <SmartTable
        v-model:columns="versionColumns"
        :buttons="versionDetailButtons"
        :data="versionDataCompareList"
        :is-pagination="false"
        :show-refresh="false"
      />
    </CustomDialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      class="preview-dialog"
      title="Warning"
      width="500"
      :show-footer="false"
      :show-close="false"
      align-center
    >
      <div class="preview-container">
        <video class="preview-video" v-if="previewType === 'video'" :src="previewUrl" auto-play controls></video>
        <img class="preview-image" v-else :src="previewUrl" />
      </div>
    </el-dialog>
    <dialog ref="previewDialogRef"></dialog >

    <ReportListUploadModal 
      ref="reportListUploadModalRef"
      :selectedItem="selectedItem"
      :reportList="reportList"
      @confirm="handleRefresh"
    />
  </div>

  <!-- 新加 -->
  <Teleport v-if="teleportBtnRef" to=".teleport-btn">
    <div class="operation-btns">
      <!-- 报告办结后，这部分按钮不再显示 -->
      <template v-if="!getReportStatusEnd && selectedItem">
        <!-- 根据报告类型和配置显示相应按钮 -->
        <template
          v-if="
                    selectedItem.reportType === PressureReportType.SINGLE &&
                    'PipeCheckerTaskDetail' === routeName
                  "
        >
          <!-- 独审报告根据配置显示按钮 -->
          <el-button
            v-if="currentReportConfig?.isApproval && isCanSubmitToAudit"
            type="danger"
            @click="handleSubmitAudit"
            :disabled="checkerIsLoginUser"
            size="small"
          >
            提交报告审核
          </el-button>
          <!-- 没有审核只有审批 -->
          <el-button
            v-if="
                      currentReportConfig?.isRatify &&
                      !currentReportConfig?.isApproval &&
                      isCanSubmitToAudit
                    "
            type="danger"
            @click="handleApprovalSelectConfirm"
            :disabled="checkerIsLoginUser"
            size="small"
          >
            提交报告审批
          </el-button>
        </template>
        <!-- 非独审报告默认显示审核按钮 -->
        <el-button
          v-if="
                    selectedItem.reportType !== PressureReportType.SUB &&
                    selectedItem.reportType !== PressureReportType.SINGLE &&
                    isCanSubmitToAudit &&
                    'PipeCheckerTaskDetail' === routeName
                  "
          type="danger"
          @click="handleSubmitAudit"
          :disabled="checkerIsLoginUser"
          size="small"
        >
          {{ selectedItem.reportType === PressureReportType['SUGGUESTION'] ? '提交审核' : '提交报告审核' }}
        </el-button>
        <el-button
          v-if="selectedItem.reportType === PressureReportType.SUB && selectedItem.taskStatus == PressureCheckerMyTaskStatus.REPORT_INPUT "
          type="danger"
          @click="handleCompletion"
          :disabled="checkerIsLoginUser"
          size="small"
        >
          报告办结
        </el-button>
        <el-button type="primary" size="small" plain v-if="isCanEditReport" @click="handleEditRreport" :disabled="checkerIsLoginUser"
        >编制报告</el-button>
        <el-button v-if="isCanSubmitRecheck" type="primary" @click="handleSelectVerfiyer" :disabled="checkerIsLoginUser" size="small"
        >提交校核</el-button>
        <el-button
          type="primary"
          v-if="isCanEditTestRecord"
          plain
          @click="handleEditSpreadRecord"
          :disabled="checkerIsLoginUser"
          size="small"
        >{{ selectedItem.reportType === PressureReportType['SUGGUESTION'] ? '编制意见书' : '填写记录' }}</el-button>
        <!-- 撤销流程：报告审核或审批阶段，有OA流程ID且当前用户是发起人时显示 -->
        <el-button
          v-if="isCanCancelFlow"
          type="warning"
          @click="handleCancelFlow"
          size="small"
        >撤销流程</el-button>
        <!-- OA审核：报告审核或审批阶段，有OA流程ID时显示 -->
        <el-button
          v-if="isCanOAAudit"
          type="success"
          @click="handleOpenOAAudit"
          size="small"
        >OA审核</el-button>
<!--        <el-button v-if="isCanSyncReportData" type="primary" @click="handleSyncReportData" :disabled="checkerIsLoginUser" size="small"-->
<!--        >同步报表</el-button>-->
      </template>
    </div>
  </Teleport>


  <AssociationOperationManual 
    v-if="showAssociationOperationManual"
    :selectedItem="selectedItem"
    :reportList="reportList"
    :equipCode="props.taskOrderItem?.equipCode"
    @close="()=>{
      showAssociationOperationManual = false
      handleRefresh()
    }"
  />
</template>

<script setup lang="tsx">
import SmartTable from '@/components/SmartTable/SmartTable'
import {computed, defineAsyncComponent, nextTick, ref, watch} from 'vue'
import {useRoute} from 'vue-router'
import { InfoFilled, View, Back, Right, WarningFilled } from '@element-plus/icons-vue'
import {dayjs, ElMessage, ElMessageBox} from 'element-plus'
import * as UserApi from '@/api/system/user'
import {
  PressureCheckerMyTaskStatus,
  PressureCheckerMyTaskStatusMap,
  PressureReportType,
  PressureTaskOrderTaskStatus,
} from '@/utils/constants'
import { OAApprovalResultMap, OAApprovalResultType } from '@/utils/pressure2/oaConstants'
import type {
  PipeTaskOrderDetailVO,
  PipeTaskOrderOrderItemVO,
  ReportItemVO
} from '@/api/pressure2/pipetaskorder'
import {PipeTaskOrderApi} from '@/api/pressure2/pipetaskorder'
import InspectionItemProgress from './InspectionItemProgress.vue'
import InlineInspectionResultInput from './InlineInspectionResultInput.vue'
import UserSelectForm from '@/components/UserSelectForm/index.vue'
import {reportInfoApi} from '@/api/reportInfoService'
import {buildFileUrl} from '@/utils'
import {useUserStore} from '@/store/modules/user'
import {is} from '@/utils/is'
import _ from 'lodash'
import {uploadFile} from '@/api/common/index'
import ReportListUploadModal from './reportListUploadModal.vue'
import AssociationOperationManual from './AssociationOperationManual.vue'
import {SpreadViewer} from "@/components/DynamicReport";
import {InitParams} from "@/components/DynamicReport/SpreadInterface";
import { cloneDeep, debounce } from 'lodash-es'
import {BoilerTaskOrderApi} from "@/api/pressure2/boilertaskorder";

const CustomDialog = defineAsyncComponent(() => import('@/components/CustomDialog/index.vue'))
const AuditUserDialog = defineAsyncComponent(
  () => import('@/views/Functional/components/AuditUserDialog.vue')
)

interface Props {
  selectedItem: ReportItemVO | null
  taskInfo: PipeTaskOrderDetailVO | null
  taskOrderItem: PipeTaskOrderOrderItemVO
  isAuditMode?: boolean
  reportId?: string | null
  reportList?: ReportItemVO[]
  taskId: string
  teleportBtnRef: Ref<HTMLDivElement | null>
  isFullscreen?: boolean
}

interface Emits {
  (e: 'refresh'): void
  (e: 'template-confirm', templateUrl?: string): void
  (e: 'modify-checker', item: ReportItemVO): void
  (e: 'submit-approval'): void
  (e: 'reject'): void
  (e: 'cancel'): void
  (e: 'submit-ratify'): void
  (e: 'update:selected-item', item: ReportItemVO): void
  (e: 'item-select', item: ReportItemVO): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const route = useRoute()
const userStore = useUserStore()
const schemaFlag = ref<string | null>(null) //等于proofread = 校核  audit=审核
// 获取当前的路由Name
const routeName = computed(() => route.name)
const form = ref<Record<string, any>>({
  recheckUser: {}
})
const refreshPdf = ref(true)
// 视图模式状态管理
const viewMode = ref<'normal' | 'inspection-result'>('normal')
// 批量提交的表单
const batchRecheckForm = ref({
  reportIds: [],
  recheckUser: {}
})
const batchRecheckFormRules = {
  reportIds: [{required: true, message: '请选择提交记录', trigger: 'change'}],
  recheckUser: [{required: true, message: '请选择校核人', trigger: 'change'}]
}

// 格式化记录结果状态显示
const formatRecordResult = (record) => {
  const resultMap = {
    100: '通过',
    200: '拒绝',
    300: '已阅',
    400: '同意',
    500: '不同意'
  }
  return resultMap[record.result] || record.result || '-'
}

// 获取记录结果的按钮类型
const getRecordResultButtonType = (record) => {
  if ([100, 300, 400].includes(record.result)) {
    return 'success'
  } else if ([200, 500].includes(record.result)) {
    return 'danger'
  } else {
    return 'default'
  }
}

const spreadRef=ref();
const reportSpreadRef=ref();

const initData=ref<InitParams>(
  {
    templateId: '',
    refId: '',
    refName:'',
    insId:'',
    opType: 0, // 0:excel,1: pdf
    manualUrl: '',
  });
const reportInitData=ref<InitParams>(
  {
    templateId: '',
    refId: '',
    refName:'',
    insId:'',
    opType: 1, // 0:excel,1: pdf
  });
const editSpreadRecordRef=ref();
const editSpreadReportRef=ref();
const editData=ref<InitParams>(
  {
    templateId: '',
    refId: '',
    refName:'',
    insId:'',
    opType: 0, // 0:excel,1: pdf
  });

const batchRecheckFormRef = ref()
// const isShowReportPdf = ref([PressureCheckerMyTaskStatus.REPORT_INPUT,PressureCheckerMyTaskStatus.REPORT_AUDIT,PressureCheckerMyTaskStatus.REPORT_APPROVE,PressureCheckerMyTaskStatus.REPORT_END].includes(props.selectedItem.taskStatus)
//   && ![400,500,600,700].includes(props.selectedItem.reportType))
const showReportPdfType = ref('record')
const refreshPdfFlag = ref(true)

const hasRecord = ref(false)
// 获取可以批量提交的报告
const getCanSubmitRecheckReport = computed(() => {
  if(!props.reportList || !props.reportList.length) return []
  return props.reportList.filter((report: any) => {
    // 主报告、子报告、独审报告才有记录校核
    const reportTypes = [PressureReportType['SUB'], PressureReportType['SINGLE']]
    const status = PressureTaskOrderTaskStatus['RECORD_INPUT'] // 记录录入状态
    // report.reportUrl 已经录入数据
    // if(report.taskStatus !== status || !report.reportUrl) return false
    if(report.taskStatus !== status) return false
    else if(report.reportType === PressureReportType['MAIN'] && userStore.user.id === props.taskOrderItem?.mainCheckerUser?.id) return true
    else
    return reportTypes.includes(report.reportType) && (report.checkUsers?.[0]?.id === userStore.user.id || !report.checkUsers || !report.checkUsers.length)
    // 过滤掉主报告存在未办结检验意见通知书时
  }).filter((report: any) => {
    if(report.reportType !== PressureReportType['MAIN']){
      return true
    }
    const sugguestionReport = props.reportList?.find(x => x.reportType === PressureReportType['SUGGUESTION'])
    // 不存在检验意见通知书返回true
    if(!sugguestionReport) return true
    // 检验意见通知书已办结，返回true
    return sugguestionReport.taskStatus === PressureCheckerMyTaskStatus['REPORT_END'];

  })
})

// 当意见通知书未办结时，主报告不能流转到后续流程(提交校核)
const canSubmitMainReportType = (tipsText: string)=>{
  // 不是主报告，直接返回true
  if(PressureReportType.MAIN !== props?.selectedItem?.reportType) return true
  // 判断检验意见通知书的状态
  const report = props.reportList?.find(x => x.reportType === PressureReportType['SUGGUESTION'])
  console.log('检验意见通知书', report)
  // 不存在检验意见通知书返回true
  if(!report) return true
  // 检验意见通知书已办结，返回true
  if(report.taskStatus === PressureCheckerMyTaskStatus['REPORT_END']) return true
  ElMessageBox.alert(tipsText, '提示', {
    showCancelButton: false,
    confirmButtonText: '确定',
    type: 'warning'
  })
  return false
}


// 校核人选择对话框状态
const showBatchSubmitToRecheckDialog = ref(false)
const isShowAuditDialog = ref(false)
const handleSelectVerfiyer = async () => {

  try {
    await spreadRef.value?.handleSave()
  } catch (error) {
    console.error('保存数据失败:', error)
    ElMessage.error('保存数据失败，请重试')
    return
  }

  const canSubmit = canSubmitMainReportType('该报告存在未办结检验意见通知书，无法提交校核')
  if(!canSubmit) return
  // 获取审核人\校核人配置信息
  let res = await UserApi.getApprovalDetail({})
  // 如果存在多份待提交校核的报告,执行批量校核弹窗
  console.log('getCanSubmitRecheckReport', getCanSubmitRecheckReport,props.reportList,res)
  if(getCanSubmitRecheckReport.value.length > 1) {
    if(res && res.recheckUser) {
      batchRecheckForm.value.recheckUser = res.recheckUser
    }
    batchRecheckForm.value.reportIds = getCanSubmitRecheckReport.value.map(x => x?.id)
    showBatchSubmitToRecheckDialog.value = true
    return
  }
  // 只有一份待提交校核的报告,执行以下逻辑
  if(res && res.recheckUser) {
    form.value.recheckUser = res.recheckUser
  }
  schemaFlag.value = 'proofread'
  isShowAuditDialog.value = true
}

// 批量提交

const handleBatchSubmitToRecheck = async () => {
  try {
    await batchRecheckFormRef.value.validate()
  } catch (err) {
    ElMessage.error('请完善表单数据！')
    return
  }

  if (_.isEmpty(batchRecheckForm.value.recheckUser)) {
    return ElMessage.error('请选择校核人')
  }

  // 待提交的数据
  const params = {
    reportList: getCanSubmitRecheckReport.value.filter((x: any) => batchRecheckForm.value.reportIds.includes(x?.id)).map((x: any) => ({
      id: x.id,
      reportUrl: x.reportUrl,
      dataJson: x?.prepareJson
    })),
    recheckId: batchRecheckForm.value.recheckUser?.id
  }

  const submitResult = await PipeTaskOrderApi.batchSubmitToRecheck(params)

  if (submitResult) {
    ElMessage.success('提交校核成功！')
    showBatchSubmitToRecheckDialog.value = false
    selectNextItem(getCanSubmitRecheckReport.value.filter((x: any) => batchRecheckForm.value.reportIds.includes(x?.id)))
    // 这里可以做页面刷新
    emit('template-confirm')
  }
}
const submitting = ref(false)
const handleAuditSelectConfirm = async () => {
  if (_.isEmpty(form.value.recheckUser)) {
    return ElMessage.error(schemaFlag.value == 'proofread' ? '请选择校核人' : '请选择审核人')
  }
  // 审核
  if (schemaFlag.value === 'audit') {
    submitting.value = true
    const submitResult = await PipeTaskOrderApi.submitReportAudit({
      id: templateParams.value?.id,
      approveId: form.value?.recheckUser?.id
    })
    submitting.value = false
    if (submitResult) {
      ElMessage.success('提交审核成功！')
      isShowAuditDialog.value = false
      selectNextItem([props.selectedItem])
      // 这里可以做页面刷新
      emit('template-confirm')
    }
  } else if (schemaFlag.value === 'proofread') {
    // 校核
    const saveResult = await PipeTaskOrderApi.submitTaskReportTemplate({
      id: props?.selectedItem?.id,
      recheckId: form.value?.recheckUser?.id
    })
    if (saveResult) {
      ElMessage.success('提交校核成功！')
      isShowAuditDialog.value = false
      selectNextItem([props.selectedItem])
      // 这里可以做页面刷新
      emit('template-confirm')
    }
  }
}
/**
 * 项目切换
 */
const selectNextItem = (items:ReportItemVO[]) => {
  // 找到其他在记录录入或者报告编制状态的第一项目
  const ids = items.map(item => item.id)
  const inputReportList= props.reportList.filter(
    item => {
      return !ids.includes(item.id)
    }
  ).filter(item =>{
    return item.taskStatus === PressureTaskOrderTaskStatus['RECORD_INPUT'] || item.taskStatus === PressureTaskOrderTaskStatus['REPORT_INPUT']
  })
  console.log(inputReportList)
  if (inputReportList.length > 0){
    emit('item-select', inputReportList[0])
  }
}


// 审批人选择对话框状态
const isShowApprovalDialog = ref(false)
// 监听项目切换，自动重置视图模式
watch(
  () => props.selectedItem,
  (newItem, oldItem) => {
    if (newItem) {
      showReportPdfType.value = [PressureCheckerMyTaskStatus.REPORT_INPUT,PressureCheckerMyTaskStatus.REPORT_AUDIT,PressureCheckerMyTaskStatus.REPORT_APPROVE,PressureCheckerMyTaskStatus.REPORT_END].includes(props.selectedItem.taskStatus)
        && ![400,500,600,700].includes(props.selectedItem.reportType) ? 'report':'record'
      handleRefreshData()
      props.taskId && getReportAuditInfo()
      console.log('切换项目', props.selectedItem)
      hasRecord.value = props.selectedItem.templateId != null
      if (props.selectedItem?.reportTemplateId == null){
        showReportPdfType.value = 'record'
      }
      if (props.selectedItem?.templateId == null){
        showReportPdfType.value = 'report'
      }
    }
    // 当切换到不同的项目时，重置视图模式为normal
    if (newItem?.id !== oldItem?.id) {
      viewMode.value = 'normal'
    }
  },
  { immediate: false }
)

const previewUrl = ref('')
const previewVisible = ref(false)
const previewType = ref('')
const handlePreview = (path: string, type: 'video' | 'image') => {
    previewUrl.value = path;
    previewType.value = type;
    previewVisible.value = true;
}
/**
 * 如果是"已经审核完的检验意见通知书，则查询相关的检验意见通知信息，显示在最右侧
 */
const checkBookDetail = ref<Record<string, any>>({})
const showCheckBook = computed(() => {
  const { reportType, taskStatus } = props.selectedItem || {}
  // console.log(taskStatus, 'taskStatus', reportType)
  // taskStatus:  800
  return reportType === PressureReportType['SUGGUESTION']
})
const rectificationStatusMap = reactive({
  0: '待确认',
  1: '待整改',
  2: '已递交',
  3: '材料有误',
  4: '整改通过',
  5: '整改不通过'
})
const getReportAuditInfo = async () => {
  if (props.selectedItem?.reportType === PressureReportType['SUGGUESTION']) {
    const res = await reportInfoApi.exportCheckBookDetail({
      id: props.taskId
    })
    console.log(res, '查询检验意见通知书详细信息')
    if (res) {
      checkBookDetail.value = res
    }
  }
}

const returnForm = ref({
  rejectionReason: ''
})
const returnFormRules = ref({
  rejectionReason: [{ required: true, message: '请输入回退原因', trigger: 'blur' }]
})
const returnFormRef = ref()

const isCompleteInput = computed(() => {
  return props.selectedItem?.taskStatus >= PressureCheckerMyTaskStatus.RECORD_CHECK
})

const isShowRecordOrReportBtn = computed(() => {
  return [PressureReportType.MAIN,PressureReportType.SUB,PressureReportType.SINGLE].includes(props.selectedItem?.reportType)
})

// 通过 退回
const handlePass = async (type) => {
  const params: Record<string, any> = {
    reportId: props.selectedItem?.id,
    approvalType: type
  }
  if (type === 1) {
    const valid = await returnFormRef.value.validate()
    if (!valid) return
    params.rejectionReason = returnForm.value.rejectionReason
  }
  const tipText = type === 1 ? '退回' : type === 2 ? '整改不通过' : '整改通过'
  ElMessageBox.confirm(`确定${tipText}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    PipeTaskOrderApi.inspectionApproval(params).then((res) => {
      props.taskId && getReportAuditInfo()
      emit('refresh')
    }).catch(() => {
      ElMessage.error('操作失败')
    })
  })
}

// 获取检验员名称
const getCheckersName = (): string => {
  if (!props.selectedItem?.checkUsers || props.selectedItem.checkUsers.length === 0) {
    return '未分配'
  }
  return props.selectedItem.checkUsers.map((user) => user.nickname).join('、')
}

// 切换主检人
const handleUserSelect = async (id, userList) => {
  const result = await PipeTaskOrderApi.updateReportMainChecker({
    id: props.taskOrderItem?.id,
    mainChecker: userList[0]?.id
  })
  if (result) {
    ElMessage.success('修改主检人成功！')
    emit('refresh')
  }
}
const userSelectFormRef = ref()
const handleModifyMainChecker = () => {
  userSelectFormRef.value.open(props.taskOrderItem?.mainCheckerUser?.id)
}

// 判断当前检验员或主检人是否为登录用户，如果不是，则功能按钮disabled
const checkerIsLoginUser = computed(() => {
  const checkerUserIds = props.selectedItem?.checkUsers.map(checker => checker?.id)
  return !(checkerUserIds?.includes(userStore?.user?.id) || props.taskOrderItem?.mainCheckerUser?.id === userStore?.user?.id)
})

// 判断当前项目是否已经到报告办结阶段
const getReportStatusEnd = computed(
  () =>{
    return props.selectedItem && props.selectedItem.taskStatus >= PressureCheckerMyTaskStatus['REPORT_CONFIRMATION']
  }
)

// 判断“提交校核”按钮是否显示
const isCanSubmitRecheck = computed(() => {
  if (props.selectedItem?.reportType === PressureReportType['SUGGUESTION'])
    return props.selectedItem?.isRecheck || false
  else if (props.selectedItem?.reportType === PressureReportType['MAINQUESTION']) return false
  else
    return (
      props.selectedItem &&
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['RECORD_INPUT']
      // && props.selectedItem.reportUrl
    )
})

// 判断“提交审核&提交审批”按钮是否显示
const isCanSubmitToAudit = computed(() => {
  const { selectedItem } = props
  if (selectedItem && selectedItem?.reportType === PressureReportType['SUBCONTRACT']){
    return selectedItem.taskStatus === PressureCheckerMyTaskStatus['CONFIRMED']
  }
  if (props.selectedItem && props.selectedItem?.reportType === PressureReportType['SUGGUESTION'])
    return (
      props.selectedItem?.isApproval &&
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['RECORD_INPUT']
    )
  else if (
    props.selectedItem &&
    props.selectedItem?.reportType === PressureReportType['MAINQUESTION']
  )
    return (
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['RECORD_INPUT'] &&
      props.selectedItem?.reportUrl
    )
  else
    return (
      props.selectedItem &&
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['REPORT_INPUT']
    )
})

// 判断“填写记录”按钮是否显示
const isCanEditTestRecord = computed(
  () =>
    props.selectedItem &&
    (props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['RECORD_INPUT'] ||
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['CONFIRMED']) && props.selectedItem.reportType !== PressureReportType['SUBCONTRACT']
)

// 判断“编制报告”按钮是否显示
const isCanEditReport = computed(
  () =>
    props.selectedItem &&
    props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['REPORT_INPUT']
)

// 判断"撤销流程"按钮是否显示：报告审核或审批阶段，且有OA流程ID，且当前用户是发起人
const isCanCancelFlow = computed(() => {
  if (!props.selectedItem) return false
  const isAuditOrApprove = [
    PressureCheckerMyTaskStatus['REPORT_AUDIT'],
    PressureCheckerMyTaskStatus['REPORT_APPROVE']
  ].includes(props.selectedItem.taskStatus)
  if (!isAuditOrApprove) return false
  if (!props.selectedItem.summaryId) return false
  return !checkerIsLoginUser.value
})

// 撤销流程
const handleCancelFlow = async () => {
  if (!props.selectedItem?.summaryId) {
    ElMessage.warning('未找到OA流程ID，无法撤销')
    return
  }
  ElMessageBox.confirm('确定要撤销该流程吗？撤销后报告将回到报告编制阶段，您可以重新发起。', '撤销流程', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const result = await PipeTaskOrderApi.cancelOAFlow(props.selectedItem.summaryId)
      if (result) {
        ElMessage.success('流程已撤销')
        handleRefresh()
      }
    } catch (error) {
      console.error('撤销流程失败:', error)
      ElMessage.error('撤销流程失败，请稍后重试')
    }
  }).catch(() => {})
}

// 判断"OA审核"按钮是否显示：报告审核或审批阶段，且有OA流程ID，且当前用户是对应阶段的审核人/审批人
const isCanOAAudit = computed(() => {
  if (!props.selectedItem) return false
  const { taskStatus, summaryId, approvalId, ratifyId } = props.selectedItem
  const currentUserId = userStore?.user?.id
  
  // 审核阶段：只有审核人才能点击
  if (taskStatus === PressureCheckerMyTaskStatus['REPORT_AUDIT']) {
    return !!summaryId && approvalId === currentUserId
  }
  
  // 审批阶段：只有审批人才能点击
  if (taskStatus === PressureCheckerMyTaskStatus['REPORT_APPROVE']) {
    return !!summaryId && ratifyId === currentUserId
  }
  
  return false
})

// OA审核：弹出独立窗口
const oaAuditTimer = ref<ReturnType<typeof setInterval> | null>(null)

const handleOpenOAAudit = async () => {
  // 清除之前的定时器
  if (oaAuditTimer.value) {
    clearInterval(oaAuditTimer.value)
    oaAuditTimer.value = null
  }
  // 先打开空白弹窗
  const win = window.open('', 'OAAudit', 'width=1200,height=800,left=100,top=50,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes')
  try {
    const link = await PipeTaskOrderApi.getAffairLink(props.selectedItem.summaryId)
    if (link && win) {
      win.location.href = link
      // 轮询监听窗口关闭，关闭后触发报告状态更新
      oaAuditTimer.value = setInterval(() => {
        if (win.closed) {
          clearInterval(oaAuditTimer.value!)
          oaAuditTimer.value = null
          PipeTaskOrderApi.updateReportBySummaryId(props.selectedItem.summaryId).finally(() => handleRefresh())
        }
      }, 500)
    } else if (!win) {
      ElMessage.warning('浏览器拦截了弹窗，请允许弹窗后重试')
    } else {
      win.close()
      ElMessage.warning('未找到对应的OA审批链接')
    }
  } catch (error) {
    console.error('获取OA审批链接失败:', error)
    win?.close()
    ElMessage.error('获取OA审批链接失败，请稍后重试')
  }
}

// 判断"填写结果"按钮是否显示
const isCanEditRecordResult = computed(() => {
  // 非我的任务详情页面，不显示
  if ('PipeCheckerTaskDetail' !== routeName.value) return false
  if (!props.selectedItem?.isAutoAmount || props.selectedItem?.isAutoAmount === '0') return false
  if (
    (props.selectedItem?.reportType === 100 || props.selectedItem?.reportType === 300) &&
    props.selectedItem.taskStatus !== PressureCheckerMyTaskStatus['REPORT_END']
  ) {
    // 独审报告&主报告--“填写结果”：报告办结之前都可以填写
    return true
  }
  // 查找主报告
  const mainReport = props.reportList?.find((item) => item.reportType === 100) || {
    taskStatus: null
  }
  if (
    props.selectedItem?.reportType !== 100 &&
    props.selectedItem?.reportType !== 300 &&
    mainReport?.taskStatus !== PressureCheckerMyTaskStatus['REPORT_END']
  ) {
    // 非主报告 & 非独审报告 -- “填写结果”：主报告办结之前都可以填写
    return true
  }
  return false
})

// 1、重大问题线索告知表 2、作业指导书 3、检验方案 只显示pdf
const onlyShowPdf = computed(() => {
  const reportTypes = [
    PressureReportType.MAINQUESTION,
    PressureReportType.INSPECTIONPLAN,
    PressureReportType.WORKINSTRUCTION
  ]
  return !props.selectedItem?.reportType
    ? false
    : reportTypes.includes(props.selectedItem?.reportType)
})

// 模板参数
const templateParams = computed(() => {
  if (!props.selectedItem) return {}
  return {
    ...props.selectedItem,
    equipCode: props.taskOrderItem?.equipCode || '',
    equipId: props.taskOrderItem?.id || ''
  }
})

// 判断是否为独审报告且不需要审批
const isApprovalWithoutRatify = computed(() => {
  if (!props.selectedItem) return false

  const reportType = (props.selectedItem as any).reportType
  const isApproval = (props.selectedItem as any).isApproval
  const isRatify = (props.selectedItem as any).isRatify

  return (
    reportType === PressureReportType.SINGLE &&
    isApproval === true &&
    isRatify === false &&
    props.reportId === props.selectedItem.id
  )
})

/**** 葡萄城：记录录入的显示和隐藏 ****/
const showInlineEditCheckRecord = ref(false)
const templateId = ref('')
const handleEditSpreadRecord = () => {
  // console.log('templateParams', templateParams.value)
  // DynamicTbInsApi.getOrCreatePreviewData('dc8fbb6078b2a2f0eadc0f6aedbeafa0').then(res => {
  //   showInlineEditCheckRecord.value = true
  //   templateId.value = res.id
  // })
  editPreview('record')
  showInlineEditCheckRecord.value = true
}
const handleTemplateConfirm = (templateUrl: string) => {
  console.log('templateUrl', templateUrl)
  emit('template-confirm', templateUrl)
}
const handleRefresh = () => {
  emit('refresh')
}
/**** 葡萄城：记录录入的显示和隐藏 end****/

/**** 葡萄城：检验结果录入的显示和隐藏 ****/
const showInlineInspectionResultInput = ref(false)
const inspectionResultTemplateParams = ref({})
// 检验结果录入模板参数
const handleInputCheckConclusion = () => {
  showInlineInspectionResultInput.value = true
  if (!props.selectedItem) return {}
  inspectionResultTemplateParams.value = {
    ...props.selectedItem,
    equipCode: props.taskOrderItem?.equipCode || ''
  }
}
const handleInspectionResultConfirm = (resultUrl: string) => {
  emit('template-confirm', resultUrl)
  viewMode.value = 'normal'
}
const handleReturnToNormalMode = () => {
  viewMode.value = 'normal'
}
/**** 葡萄城：检验结果录入的显示和隐藏 end ****/

/**** 葡萄城：报告编制的显示和隐藏 ****/
const showInlineReportEdit = ref(false)
const handleEditRreport = () => {
  if (showReportPdfType.value !== 'report' && showReportPdfType.value !== 'result'){
    ElMessage.warning('请切换报告后再进行报告编制！')
    return
  }
  editPreview('report')
  showInlineReportEdit.value = true
}

// 获取当前报告的配置信息
const currentReportConfig = computed(() => {
  if (
    !props.selectedItem ||
    props.selectedItem.reportType !== PressureReportType.SINGLE ||
    !props.reportList
  ) {
    return null
  }
  // 从reportList中找到当前报告的配置
  const currentReport = props.reportList.find((report) => report.id === templateParams.value?.id)
  return currentReport
    ? {
        isApproval: (currentReport as any).isApproval,
        isRatify: (currentReport as any).isRatify
      }
    : null
})

// 选择报告审核人弹窗的显示和隐藏
const isShowReportAuditDialog = ref(false)
// 提交报告审核
const handleSubmitAudit = async () => {

  try {
    await spreadRef.value?.handleSave()
  } catch (error) {
    console.error('保存数据失败:', error)
    ElMessage.error('保存数据失败，请重试')
    return
  }

  if([PressureReportType.SUGGUESTION, PressureReportType.MAINQUESTION].includes(props?.selectedItem?.reportType) && !props?.selectedItem?.reportUrl) {
    // 【重大问题线索告知表，检验意见通知书】必须先填写记录，才能提交审核
    ElMessage.warning('请先“填写记录”！再提交审核！')
    return
  }

  if(PressureReportType.SINGLE === props?.selectedItem?.reportType && !props?.selectedItem?.prepareUrl) {
    // 独审报告：用户可以不走报告编制环节直接提交审核，需要调用handleUploadAPIReportPreviewBlob将reportPreview接口的文件流拿来提交一遍
    return handleUploadAPIReportPreviewBlob(handleSubmitAudit)
  }
  // 检查检验意见通知书是否“报告完结”
  const canSubmit = canSubmitMainReportType('该报告存在未办结检验意见通知书，无法提交审核、审批')
  if(!canSubmit) return
  // 检查其他报告状态
  const checkResult = checkOtherReportsFinished()

  if (!checkResult.canSubmit) {
    try {
      await ElMessageBox.alert(
        checkResult.message || '请先办结其他报告再提交主报告审核',
        '无法提交审核'
      )
    } catch (error) {
      // 用户关闭对话框，不需要处理
    }
    return
  }

  // if(PressureReportType.MAIN === props?.selectedItem?.reportType && !props?.selectedItem?.prepareUrl) {
  //   // 主报告：用户可以不走报告编制环节直接提交审核，需要调用handleUploadAPIReportPreviewBlob将reportPreview接口的文件流拿来提交一遍
  //   return handleUploadAPIReportPreviewBlob(handleSubmitAudit)
  // }

  // 检验意见通知书 && 重大问题线索通知 不需要选择审核人
  if (
    [PressureReportType['SUGGUESTION'], PressureReportType['MAINQUESTION']].includes(
      templateParams.value?.reportType
    )
  ) {
    ElMessageBox.confirm(`确定提交【${templateParams.value?.reportName}】`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
      .then(async () => {
        const submitResult = await PipeTaskOrderApi.submitOpinionNoticeApproval({
          id: templateParams.value?.id
        })
        if (submitResult) {
          // 这里可以做页面刷新
          emit('template-confirm')
        }
      })
      .catch(() => {
        console.log('用户取消提交审核')
      })
  } else {
    let res = await UserApi.getApprovalDetail({}) // 判断是否有审批信息

    if (res && res.approveUser) {
      form.value.recheckUser = res.approveUser
    }
    
    schemaFlag.value = 'audit'
    isShowAuditDialog.value = true
    // isShowReportAuditDialog.value = true
  }
}

const handleCompletion = async () => {
  await PipeTaskOrderApi.handleCompletion(props.selectedItem.id)
  handleRefresh()
  ElMessage.success('报告已办结')
}

// 上传主报告文件流
const handleUploadAPIReportPreviewBlob = async (submitApprovalFn) => {
  if(!props.selectedItem || props.selectedItem.taskStatus !== PressureTaskOrderTaskStatus.REPORT_INPUT) return 
  // 获取文件流
  const blob = await PipeTaskOrderApi.getReportPreview({
    reportId: props.selectedItem?.id,
    type:  300, // 报告模板
    fileType: 100 // xlsx
  })
  if(blob) {
    // 上传文件流
    const formData = new FormData()
    formData.append('file', blob)
    const response = await uploadFile(formData)

    // 保存报告编制的url
    const saveResult = await PipeTaskOrderApi.saveReportPrepare({
      id: props.selectedItem.id,
      prepareUrl: response,
    })
    
    if(saveResult) {
      await emit('update:selected-item', {...props.selectedItem, prepareUrl: response})
      // 提交审核
      await submitApprovalFn()
    }
  }
}
const handleChangeEntrustUnit = (unit: Record<string, any>) => {
  form.value.recheckUser = unit
}
// 检查其他报告是否已办结
const checkOtherReportsFinished = (): { canSubmit: boolean; message?: string } => {
  if (!props.selectedItem) return { canSubmit: false }
  // 如果不是主报告，直接允许提交
  if (props.selectedItem.reportType !== PressureReportType.MAIN) {
    return { canSubmit: true }
  }

  // 主报告需要检查其他报告状态
  const unfinishedReports = !props.reportList
    ? []
    : props.reportList.filter((report) => {
        // 排除当前报告
        if (report.id === templateParams.value?.id) {
          return false
        }

        // 检查子报告和独审报告是否已办结
        const isSubReport = report.reportType === PressureReportType.SUB
        const isSingleReport = report.reportType === PressureReportType.SINGLE
        const isSUGGUESTIONReport = report.reportType === PressureReportType.SUGGUESTION

        if (isSubReport || isSingleReport || isSUGGUESTIONReport) {
          return report.taskStatus !== PressureCheckerMyTaskStatus.REPORT_END
        }

        return false
      })

  if (unfinishedReports.length > 0) {
    const unfinishedNames = unfinishedReports.map((report) => report.reportName).join('、')
    return {
      canSubmit: false,
      message: `请先办结其他报告再提交主报告审核。未办结的报告：${unfinishedNames}`
    }
  }

  // 检查是否确认费用
  // const reportsWithoutConfirmFee: any[] = []

  // 检查当前报告中是否存在应确认费用，但未确认的报错
  const reportsWithoutConfirmFee: any[] = !props.reportList
    ? []
    : props.reportList.filter(
        (report: any) => report.isAutoAmount === '1' && report.feeConfirm === false
      )
  // if (currentReport) {
  //   reportsWithoutConfirmFee.push(currentReport)
  // }

  // 检查子报告是否都已录入结果
  // const subReports = !props.reportList ? [] : props.reportList.filter(report => {
  //   return report.id !== templateParams.value?.id &&
  //          report.reportType === PressureReportType.SUB
  // })

  // subReports.forEach(report => {
  //   if (!report.formulaJson) {
  //     reportsWithoutConfirmFee.push(report)
  //   }
  // })

  if (reportsWithoutConfirmFee.length > 0) {
    const reportNames = reportsWithoutConfirmFee.map((report) => report.reportName).join('、')
    return {
      canSubmit: false,
      message: `请先确认费用再提交主报告审核。未确认费用的报告：${reportNames}`
    }
  }

  return { canSubmit: true }
}

// 报告审核人选择确认
const handleReportAuditSelectConfirm = async (res: any) => {
  const approveId = res[0]
  const submitResult = await PipeTaskOrderApi.submitReportAudit({
    id: templateParams.value?.id,
    approveId
  })
  if (submitResult) {
    // 这里可以做页面刷新
    emit('template-confirm')
  }
  isShowReportAuditDialog.value = false
}
/**** 葡萄城：报告编制的显示和隐藏 end ****/

const handleModifyChecker = () => {
  if (props.selectedItem) {
    emit('modify-checker', props.selectedItem)
  }
}

// 审批人选择确认
const handleApprovalSelectConfirm = async (res: any) => {
  if (!props.selectedItem || !res || res.length === 0) {
    ElMessage.warning('请选择审批人')
    return
  }

  const ratifyId = res[0] // 获取选中的审批人ID

  try {
    await PipeTaskOrderApi.submitReportApprove({
      id: props.selectedItem.id,
      ratifyId: ratifyId
    })

    ElMessage.success('提交审批成功')
    isShowApprovalDialog.value = false
    emit('submit-approval')
  } catch (error: any) {
    console.error('提交审批失败:', error)
    ElMessage.error('提交审批失败，请稍后重试')
    isShowApprovalDialog.value = false
  }
}

// 加载流转记录列表
const recordList = ref<any[]>([])
const recordListLoading = ref(false)
const loadRecordList = async () => {
  if (!props.selectedItem) return
  try {
    let response = null
    // 检验意见通知书&重大问题线索
    switch (props.selectedItem.reportType) {
      case PressureReportType['SUGGUESTION']:
      case PressureReportType['MAINQUESTION']:
        response = await PipeTaskOrderApi.getOpinionNoticeApprovalRecordList({
          id: props.selectedItem.id
        })
        break
      default:
        // 其他
        response = await PipeTaskOrderApi.getTaskOrderItemReportRecordPage({
          pageSize: 10,
          pageNo: 1,
          reportId: props.selectedItem.id
        })
    }
    // 根据实际接口返回的数据结构获取数据
    console.log("XXXX",recordList.value)
    recordList.value = response?.data?.list || response?.list || response || []

  } catch (error: any) {
    console.error('获取流转记录失败:', error)
    ElMessage.error('获取流转记录失败，请稍后重试')
    recordList.value = []
  } finally {
    recordListLoading.value = false
  }
}

// 获取报告字段纠错列表
const checkInputList = ref<any[]>([])
const handleGetCheckKeyInputs = async () => {
  checkInputList.value = []
  //if (!dataJson) return
  if (!props.selectedItem?.id) return ElMessage.warning('字段纠错传参有误')
  let reportId = props.selectedItem?.id
  //const templateId = showReportPdfType.value  === 'report'? props.selectedItem?.reportTemplateId : props.selectedItem?.templateId;
  let templateId = showReportPdfType.value === 'report' ? props.selectedItem?.reportTemplateId :
    showReportPdfType.value === 'result' ? props.selectedItem?.resultTemplateId : props.selectedItem?.templateId;
  if (showReportPdfType.value === 'report'){
    reportId = "report_" + reportId;
  }else if (showReportPdfType.value === 'result'){
    reportId = "result_" + reportId;
  }
  const response = await PipeTaskOrderApi.getCheckKeyIsInput(
    { id: templateId,reportId: reportId },
    JSON.parse("{}")
  )
  //console.log(JSON.parse(dataJson))

  if (response) checkInputList.value = formatCheckInputList(response)
}
function formatCheckInputList(response, checkInputList = [] as any[]) {
  if (!response) return []
  for (let checkItem of response) {
    if (!checkItem.child) {
      checkInputList.push({ code: checkItem.code, name: checkItem.name })
    }
    if (is(checkItem.child, 'Array') && checkItem.type === 'object') {
      formatCheckInputList(checkItem.child, checkInputList)
    }
    if (is(checkItem.child, 'Array') && checkItem.type === 'array') {
      const childMapper = checkItem.child.map((item, i) => {
        return {
          code: `${checkItem.code}： ${item.code}`,
          name: item.name
        }
      })
      formatCheckInputList(childMapper, checkInputList)
    }
  }
  return checkInputList
}

// 获取版本记录列表
const showVersionDetail = ref(false)
const historyList = ref<any[]>([])
async function getOrderHistoryVersion(id: string) {
  try {
    const response = await PipeTaskOrderApi.getSafetyCheckRecordVersionPage({
      pageNo: 1,
      pageSize: 100,
      businessType: 0,
      orderItemReportId: id
    })
    historyList.value = response.list || []
  } catch (error) {
    console.error('获取历史版本失败:', error)
    ElMessage.error('获取历史版本失败')
  }
}
const versionDataCompareList = ref([])
const versionColumns = ref([
  {
    label: '字段名',
    prop: 'displayName'
  },
  {
    label: '修改前',
    prop: 'oldValue',
    render: (row, value) => (
      <el-text link type="default">
        {value || '-'}
      </el-text>
    )
  },
  {
    label: '修改后',
    prop: 'newValue',
    render: (row, value) => <el-text type="primary">{value || '-'}</el-text>
  }
])
const versionDetailButtons = ref([
  {
    render: () => (
      <el-button type="success" onClick={() => handleShowReportPdf()}>
        查看原文件PDF
      </el-button>
    )
  }
])
const showReportDialog = ref(false)
const currentUrl = ref('')
const reportSource = ref<any | null>(null)
const pdfLoading = ref(false)
// 恢复版本
const restoreVersion = (item: any) => {
  ElMessageBox.confirm('是否确定恢复到该版本？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info',
    center: true
  })
    .then(async () => {
      const result = await PipeTaskOrderApi.saveTaskReportTemplate({
        id: props.selectedItem?.id,
        reportUrl: item.oldReportUrl,
        prepareJson: item.oldPrepareJson,
        reportType: showReportPdfType.value,
        modifiedReason: '恢复版本'
      })
      console.log('restoreVersion', result)
      if (result) {
        ElMessage({
          type: 'success',
          message: '操作成功'
        })
        handleRefresh()
      } else {
        ElMessage.warning('操作失败，请联系管理员！')
      }
    })
    .catch(() => {})
}
// 查看版本详情的pdf
const handleShowReportPdf = async () => {
  if (currentUrl.value) {
    const reportId = props.selectedItem?.id;
    reportInitData.value.refId = showReportPdfType.value === 'report' ? "report_" + reportId :
      showReportPdfType.value === 'result' ? "result_" + reportId : reportId
    reportInitData.value.templateId = showReportPdfType.value === 'report' ? templateParams.value.reportTemplateId :
      showReportPdfType.value === 'result' ? templateParams.value.resultTemplateId : templateParams.value.templateId
    reportInitData.value.dataSource = currentUrl.value.oldPrepareJson ? JSON.parse(currentUrl.value.oldPrepareJson) : {}
    showReportDialog.value = true
    setTimeout(()=> {
      reportSpreadRef.value?.reloadView();
    })
    pdfLoading.value = false
  } else {
    ElMessage.warning('报告缺失，请联系管理员！')
  }
}
const handlePdfRendered = () => {
  pdfLoading.value = false
  currentUrl.value = ''
}

// 查看详情
const handleShowVersionInfo = (item) => {
  showVersionDetail.value = true
  console.log(item)
  currentUrl.value = item
  versionDataCompareList.value = JSON.parse(item.modifiedObject)
}


// 检验项目添加上传附件功能
const reportListUploadModalRef = ref<InstanceType<typeof ReportListUploadModal>>()
const handleUploadItem = () => {
  reportListUploadModalRef.value?.openModal(route.query.type === 'PipeMyTask')
}

//切换记录和报告的显示
const handleChangeShowReportPdf = (showType: string) => {

  if (showType === 'report' || showType === 'result'){
    if (![PressureCheckerMyTaskStatus.REPORT_INPUT,PressureCheckerMyTaskStatus.REPORT_AUDIT,PressureCheckerMyTaskStatus.REPORT_APPROVE,PressureCheckerMyTaskStatus.REPORT_END].includes(props.selectedItem.taskStatus)){
      ElMessage.error('该检验项目暂未生成报告！')
      showReportPdfType.value = 'record';
      return;
    }
  }

  if (showType === 'result'){
    if (!props.selectedItem?.resultTemplateId){
      ElMessage.error('该检验项目没有结论报告！')
      showReportPdfType.value = 'record';
      return;
    }
  }

  showReportPdfType.value = showType;
  handleRefreshData()

}

const isCanSyncReportData = computed(() => {
  return true
  //return [PressureCheckerMyTaskStatus.CONFIRMED,PressureCheckerMyTaskStatus.RECORD_INPUT].includes(props.selectedItem.taskStatus)
})

const handleSyncReportData = async () => {

  try {
    const response = await PipeTaskOrderApi.syncReportData({
      refId: props.selectedItem.id,
      reportType : showReportPdfType.value
    })
    if (response){
      ElMessage.success('同步数据成功')
      handleRefresh()
    }else{
      ElMessage.error('同步数据失败，请稍后重试')
    }

  } catch (error: any) {
    console.error('同步数据失败:', error)
    ElMessage.error('同步数据失败，请稍后重试')
  }

}

const getPipeRecheckUserList = async (params) => {
  params.orderId = props.taskInfo.id
  return await PipeTaskOrderApi.getPipeRecheckUserList(params)
}

const showAssociationOperationManual = ref(false)
const handleShowAssociationOperationManual = () => {
  showAssociationOperationManual.value = true
}
// onMounted(() => {
//   console.log(props)
//   //initPreview()
// })

const initPreview=()=>{

  const reportId = props.selectedItem?.id;
  const refId = showReportPdfType.value === 'report' ? "report_" + reportId :
    showReportPdfType.value === 'result' ? "result_" + reportId : reportId
  const templateId = showReportPdfType.value === 'report' ? templateParams.value.reportTemplateId :
    showReportPdfType.value === 'result' ? templateParams.value.resultTemplateId : templateParams.value.templateId

  initData.value.templateId = templateId;
  initData.value.refId = refId;
  initData.value.refName =  props.selectedItem?.reportName;
  initData.value.opType = (props.selectedItem.taskStatus == 510 || props.selectedItem.taskStatus >= 600 || (showReportPdfType.value === 'record' && props.selectedItem.taskStatus > 500) ||  props?.selectedItem?.checkUsers?.[0]?.id != userStore?.user?.id) ? 1 : 0;

  if (props.selectedItem.reportType === PressureReportType['INSPECTIONPLAN'] && props.selectedItem.manualUrl){
    initData.value.manualUrl = props.selectedItem.manualUrl;
  }else{
    initData.value.manualUrl = '';
  }

  //spreadRef.value?.reloadView();

  setTimeout(()=>{
    spreadRef.value?.reloadView();
  },50)

  console.log('initPreview', initData.value)
}

const editPreview=(reportType: string)=>{

  const reportId = props.selectedItem?.id;
  const refId = showReportPdfType.value === 'report' ? "report_" + reportId :
    showReportPdfType.value === 'result' ? "result_" + reportId : reportId
  const templateId = showReportPdfType.value === 'report' ? templateParams.value.reportTemplateId :
    showReportPdfType.value === 'result' ? templateParams.value.resultTemplateId : templateParams.value.templateId

  editData.value.templateId = templateId;
  editData.value.refId = refId;
  editData.value.opType = 0;

  setTimeout(()=>{
    if (reportType === 'record'){
      editSpreadRecordRef.value?.reloadView();
    }else if(reportType === 'report'){
      editSpreadReportRef.value?.reloadView();
    }

  },50)

  console.log('editDataPreview', editData.value)
}

const saveSuccess = async (data)=>{
  if (props.selectedItem.taskStatus >= PressureCheckerMyTaskStatus.REPORT_INPUT){
    saveSuccessReport(data)
  }else {
    saveSuccessRecord(data)
  }
}
const saveSuccessRecord = async (data)=>{

  const dataJson = !data.dataSource ? '' : JSON.stringify(data.dataSource)
  const params = {
    id: props.selectedItem?.id,
    reportUrl: props.selectedItem?.id,
    prepareJson: dataJson
  }
  const saveResult = await PipeTaskOrderApi.saveTaskReportTemplate(params)
  if (saveResult) {
    showInlineEditCheckRecord.value = false
    handleRefresh()
  }

}

const handleClose = () => {
  ElMessageBox.confirm('是否关闭？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    showInlineEditCheckRecord.value = false
    showInlineReportEdit.value = false
    handleRefresh()
  })
}

const saveSuccessReport = async (data)=>{

  const dataJson = !data.dataSource ? '' : JSON.stringify(data.dataSource)
  const saveResult = PipeTaskOrderApi.saveReportPrepare({
    id: props.selectedItem?.id,
    prepareJson: dataJson,
  })
  if(saveResult) {
    showInlineReportEdit.value = false
    handleRefresh()
  }

}

const handleRefreshData = () => {

  loadRecordList()
  initPreview()
  handleGetCheckKeyInputs()
  getOrderHistoryVersion(props.selectedItem?.id)

}

// 应用项目 - 使用模板数据填充当前记录
const handleApplyTemplate = (defaultJson: Recordable) => {
  if (!isCanEditTestRecord.value) {
    return ElMessage.warning('非可编辑状态，不能应用模板')
  }
  initData.value = {
    ...initData.value,
    dataSource: defaultJson
  }
  setTimeout(() => {
    spreadRef.value?.reloadView()
  }, 50)
}

// 更新模板 - 打开记录编辑器供用户更新模板
const handleUpdateTemplateUrl = (item: ReportItemVO) => {
  handleEditSpreadRecord()
}

const getData = () => {
  return spreadRef.value?.getData()
}

defineExpose({
  handleShowAssociationOperationManual,
  handleApplyTemplate,
  handleUpdateTemplateUrl,
  getData
})

//新加
// 添加控制展开/收缩状态的变量
const isExpanded = ref(false);

// 添加切换面板展开/收缩的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value;

  setTimeout((() => {
    nextTick(handleWindowResize)
  }), 300);
};

// 获取PDF宽度
const pdfContentWidth = ref<number>(1030)
const pdfPanelRef = ref<HTMLDivElement>()
const handleWindowResize = debounce(async () => {
  if(!pdfPanelRef.value) return
  const width = pdfPanelRef.value?.clientWidth - 20
  pdfContentWidth.value = props.isFullscreen ? width : (width > 1030 ? 1030 : width)

  if (initData.value.opType == 1){
    spreadRef.value?.reloadView();
  }else {
    spreadRef.value?.handleSave();
  }

}, 100)

onMounted(() => {
  handleWindowResize()
  window.addEventListener('resize', handleWindowResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', handleWindowResize)
})

// 全屏切换时重新计算PDF区域宽度
watch(() => props.isFullscreen, () => {
  nextTick(() => {
    handleWindowResize()
  })
})

</script>

<style lang="scss" scoped>
.capsule-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 20px;
  margin-right: 12px;
  flex-shrink: 0;

  .tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 12px;
    background: white;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #606266;
    font-weight: 500;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
    min-width: 50px;

    span {
      font-size: 12px !important;
    }

    &:hover {
      color: #409eff;
      border-color: #409eff;
    }

    &.active {
      background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      color: white;
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    }
  }
}
.container-panel {
  height: 100%;
  border: 1px solid var(--el-border-color);

  .info-panel {
    display: flex;
    height: 32px;
    padding: 0 8px 0 22px;
    font-size: 14px;
    color: #41475c;
    background-color: #effaff;
    justify-content: space-between;
    align-items: center;
  }

  .status-operation-panel {
    height: calc(100% - 32px);

    .single-item-panel {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }

    .pdf-panel {
      height: 100%;
      padding: 10px;
      flex: 1;
      overflow: hidden;
    }

    .right-panel-container {
      display: flex;
      position: relative;

      // 收缩展开按钮样式
      .toggle-btn {
        position: absolute;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 60px;
        background-color: #fff;
        border: 1px solid var(--el-border-color);
        border-radius: 10px 0 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        &:hover {
          background-color: #f5f5f5;
        }
        &.collapsed {
          left: -18px;
          // border-radius: 0 10px 10px 0;
        }
      }
    }

    .operation-panel {
      flex-basis: 300px;
      padding: 10px 10px 10px 0;
      box-sizing: border-box;
      transition: all 0.3s ease;

      // 展开状态样式
      &.expanded {
        width: 300px;
      }

      // 收缩状态样式
      &.collapsed {
        width: 0;
        padding: 0;
        border: none;
        .default-toolbar,
        .operation-inner {
          display: none;
        }
      }

      .operation-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        .el-button {
          margin-bottom: 10px;
          margin-left: 0;
        }
      }
    }

    .operation-inner {
      height: 100%;
      padding: 7px 10px 20px;
      background-color: #fff;
      border: 1px solid var(--el-border-color);
      box-sizing: border-box;
    }

    .custom-inner{
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      padding: 7px 10px 20px;
      background-color: #fff;
      border: 1px solid var(--el-border-color);
      box-sizing: border-box;

      .operation-item1 {
          position: relative;
          margin-bottom: 10px;
          overflow-y: auto;

          .item-header {
            position: sticky;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%;
            height: 28px;
            padding-left: 20px;
            font-size: 16px;
            line-height: 28px;
            color: #fff;
            background: #fff url('@/assets/imgs/pressure/my-task-detail-operation-bg.png') no-repeat
              left top;
            background-size: 100% 28px;
          }

        

          .item-content1 {
            display: flex;
            margin-top: 10px;

            &-item {
              font-size: 14px;
            }

            &-img {
              flex: 1;
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-gap: 10px;

              .item-content1-img-item{
                width: 100px;
                height: 100px;
                position: relative;

                .list-item-tool {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  z-index: 99;
                  border-radius: 8px;
                  transition: all 0.5s ease;
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 5px;
                  &:hover {
                    backdrop-filter: blur(2px);
                    background-color: #00000076;
                    z-index: 1;
                    .icon {
                      display: inline-block;
                      opacity: 1;
                      &:hover {
                        color: #ffffff;
                        transition: all 0.5s ease;
                      }
                    }
                  }
                  .icon {
                    color: #ffffff99;
                    opacity: 0;
                    transition: all 0.5s ease;
                    font-size: 16px;
                  }
                }
              }

              .img-item {
                width: 100px;
                height: 100px;
              }
            }
          }

          .record-item {
            margin-bottom: 10px;
            background-color: #f5f5fa;
            border-radius: 2px;
          }

          .item-content {
            padding: 10px 0;
            font-size: 14px;

            .el-empty {
              width: 100%;
              height: 150px;
              padding: 0;
              box-sizing: border-box;
            }

            &-item {
              height: 32px;
              display: flex;
              align-items: center;
              gap: 8px;
            }
          }

          .record-item-title {
            height: 31px;
            padding: 0 13px;
            line-height: 31px;
            background: linear-gradient(270deg, rgb(128 176 251 / 20%) 0%, rgb(73 120 246 / 20%) 100%);
            border-radius: 2px;
          }

          .record-item-inner {
            padding: 11px 13px 8px;

            .content {
              display: flex;
              align-items: center;

              .el-button {
                margin-left: 8px;
              }

              :deep(.el-button--small.is-round) {
                height: auto;
                padding: 3px 11px;
              }

              .time {
                color: rgb(31 31 31 / 88%);
                text-align: right;
                opacity: 0.5;
                flex: 1;
              }
            }

            .desc {
              margin-top: 7px;
              color: #41475c;
              opacity: 0.8;

              span {
                opacity: 0.5;
              }
            }
          }

          .error-item {
            display: flex;
            padding: 7px 10px;
            color: #41475c;
            background-color: #f5f5fa;
            border: 1px solid var(--el-border-color);
            border-width: 1px 0;
            align-items: center;

            .el-icon {
              margin-right: 6px;
            }

            &:nth-child(n + 1) {
              margin-top: -1px;
            }

            &:nth-child(even) {
              background-color: #fff;
            }
          }

          .history-item {
            padding: 7px 10px 10px;
            margin-bottom: 13px;
            color: #41475c;
            background-color: #f5f5fa;
            border-radius: 2px;

            .history-title {
              display: flex;
              align-items: center;
              margin-left: -10px;
              font-weight: 600;
              line-height: 20px;

              &::before {
                display: block;
                width: 4px;
                height: 15px;
                margin-right: 7px;
                background: #4978f6;
                content: '';
              }
            }

            p {
              margin: 10px 0;
              line-height: 20px;
            }

            .history-footer {
              display: flex;
              // align-items: center;
              font-size: 12px;

              .name {
                color: #4978f6;
              }

              .time {
                margin-left: 2px;
                color: rgb(65 71 92 / 50%);
              }

              div {
                flex: 1;
                display: flex;
                justify-content: flex-end;

                .el-button span {
                  font-size: 12px;
                }
              }
            }
          }
        }

       .videoAndImg {
        flex: 1;
        width: 100%;
        overflow-y: auto;
      }
    }

    .operation-item {
      position: relative;
      max-height: calc(100% / 3 - 10px);
      margin-bottom: 10px;
      overflow-y: auto;

      .item-header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 28px;
        padding-left: 20px;
        font-size: 16px;
        line-height: 28px;
        color: #fff;
        background: #fff url('@/assets/imgs/pressure/my-task-detail-operation-bg.png') no-repeat
          left top;
        background-size: 100% 28px;
      }

     

      .item-content1 {
        display: flex;
        margin-top: 10px;

        &-item {
          font-size: 14px;
        }

        &-img {
          flex: 1;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;

          .item-content1-img-item{
            width: 100px;
            height: 100px;
            position: relative;

            .list-item-tool {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 99;
              border-radius: 8px;
              transition: all 0.5s ease;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 5px;
              &:hover {
                backdrop-filter: blur(2px);
                background-color: #00000076;
                z-index: 1;
                .icon {
                  display: inline-block;
                  opacity: 1;
                  &:hover {
                    color: #ffffff;
                    transition: all 0.5s ease;
                  }
                }
              }
              .icon {
                color: #ffffff99;
                opacity: 0;
                transition: all 0.5s ease;
                font-size: 16px;
              }
            }
          }

          .img-item {
            width: 100px;
            height: 100px;
          }
        }
      }

      .record-item {
        margin-bottom: 10px;
        background-color: #f5f5fa;
        border-radius: 2px;
      }

      .item-content {
        padding: 10px 0;
        font-size: 14px;

        .el-empty {
          width: 100%;
          height: 150px;
          padding: 0;
          box-sizing: border-box;
        }

        &-item {
          height: 32px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      .record-item-title {
        height: 31px;
        padding: 0 13px;
        line-height: 31px;
        background: linear-gradient(270deg, rgb(128 176 251 / 20%) 0%, rgb(73 120 246 / 20%) 100%);
        border-radius: 2px;
      }

      .record-item-inner {
        padding: 11px 13px 8px;

        .content {
          display: flex;
          align-items: center;

          .el-button {
            margin-left: 8px;
          }

          :deep(.el-button--small.is-round) {
            height: auto;
            padding: 3px 11px;
          }

          .time {
            color: rgb(31 31 31 / 88%);
            text-align: right;
            opacity: 0.5;
            flex: 1;
          }
        }

        .desc {
          margin-top: 7px;
          color: #41475c;
          opacity: 0.8;

          span {
            opacity: 0.5;
          }
        }
      }

      .error-item {
        display: flex;
        padding: 7px 10px;
        color: #41475c;
        background-color: #f5f5fa;
        border: 1px solid var(--el-border-color);
        border-width: 1px 0;
        align-items: center;

        .el-icon {
          margin-right: 6px;
        }

        &:nth-child(n + 1) {
          margin-top: -1px;
        }

        &:nth-child(even) {
          background-color: #fff;
        }
      }

      .history-item {
        padding: 7px 10px 10px;
        margin-bottom: 13px;
        color: #41475c;
        background-color: #f5f5fa;
        border-radius: 2px;

        .history-title {
          display: flex;
          align-items: center;
          margin-left: -10px;
          font-weight: 600;
          line-height: 20px;

          &::before {
            display: block;
            width: 4px;
            height: 15px;
            margin-right: 7px;
            background: #4978f6;
            content: '';
          }
        }

        p {
          margin: 10px 0;
          line-height: 20px;
        }

        .history-footer {
          display: flex;
          // align-items: center;
          font-size: 12px;

          .name {
            color: #4978f6;
          }

          .time {
            margin-left: 2px;
            color: rgb(65 71 92 / 50%);
          }

          div {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .el-button span {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
.default-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  white-space: nowrap;
  ::v-deep .el-button {
    margin-left: 0;
  }
}

// 退回对话框样式
.reject-dialog-content {
  .form-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #606266;
    }
  }
}

:deep(.preview-dialog) {
  background-color: transparent !important;
  width: auto !important;
  padding: 0 !important;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body{
    padding: 0;

    .preview-container{
      padding: 0;
      position: relative;
    }

    .preview-image,.preview-video {
      height: 65vh;
      max-width: 100vw;
      // object-fit: cover;
    }
  }
}
</style>