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

<template>
  <div class="inspection-item-list">

    <!-- 胶囊形状的 Tabs -->
    <div class="capsule-tabs">
      <el-badge
        :value="inspectionItems.length"
        :hidden="inspectionItems.length === 0"
        :type="activeTab === 'inspection' ? 'primary' : 'danger'"
        style="flex: 1"
      >
        <div
          class="tab-item"
          :class="{ active: activeTab === 'inspection' }"
          @click="activeTab = 'inspection'"
        >
          <span style="font-size: 12px">检验项目</span>
        </div>
      </el-badge>
      <el-badge
        :value="documentItems.length"
        :hidden="documentItems.length === 0"
        :type="activeTab === 'document' ? 'primary' : 'danger'"
        style="flex: 1"
      >
        <div
          class="tab-item"
          :class="{ active: activeTab === 'document' }"
          @click="activeTab = 'document'"
        >
          <span style="font-size: 12px">记录文件</span>
        </div>
      </el-badge>
    </div>

    <div class="list-content">
      <div v-if="currentTabItems.length === 0" class="empty-state">
        <el-empty
          :description="`暂无${activeTab === 'inspection' ? '检验项目' : '记录文件'}`"
          :image-size="120"
        />
      </div>

      <div v-else class="item-list">
        <div
          v-for="item in currentTabItems"
          :key="item.id"
          :class="getItemClass(item)"
          @click="handleItemClick(item)"
          @contextmenu.prevent="handleContextMenu($event, item)"
          @dblclick.prevent="handleDoubleClick($event, item)"
        >
          <div class="item-header">
            <div class="item-title-wrapper break-all">
              <div class="title-content">
                <div
                  v-if="getReportTypeIcon(item.reportType)"
                  :class="getReportTypeIconClass(item.reportType)"
                >
                  {{ getReportTypeIcon(item.reportType) }}
                </div>
                <div class="item-title">
                  <span
                    v-if="activeTab == 'inspection'"
                    :style="{color: getStatusBgColor(item.taskStatus) }"
                  >
                    <span>{{ item.reportName || '检验项目' }}</span>
                    <span >({{ getCurrentStepName(item) }})</span>
                  </span>
                  <span v-else>
                    {{ item.reportName || '检验项目' }}
                  </span>
                  <span style="color: red" v-if="isOtherReport(item) && getOtherStepName(item)">({{ getOtherStepName(item) }})</span>
                  <span>&nbsp;&mdash;&nbsp;</span>
                  <span v-if="activeTab == 'inspection'" :style="{color: getStatusBgColor(item.taskStatus) }">{{
                      item.checkUsers.length ? item.checkUsers[0].nickname : '未分配'
                    }}</span>
                  <span v-else>{{ item.checkUsers.length ? item.checkUsers[0]?.nickname : '' }}</span>
                  <div
                    class="text-[14px]"
                    v-if="item.reportType === 300 && !item.instructionId && item.instructionTempId"
                  >
                    <el-button
                      link
                      :type="item.instructionId ? 'warning' : 'primary'"
                      size="small"
                      :disabled="isDisabledBtn(item)"
                      @click.stop.prevent="() => handleCorrelationReport(item)"
                    >
                      {{ `（${item.instructionId ? '已' : '未'}关联操作指导书）` }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="activeTab == 'inspection'" class="fee-btn">
              <el-button
                :disabled="item?.taskStatus === PressureTaskOrderTaskStatus['REPORT_END']"
                link
                type="primary"
                @click.stop.prevent="() => handleInputCalcField(props.taskOrderItem, item)"
              >
                <span
                  v-if="activeTab == 'inspection'"
                >
                  {{ getCheckItemFeeType(item) }}
                </span>
                <span v-else>{{ getCheckItemFeeType(item) }}</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div 
      v-show="contextMenuVisible" 
      class="context-menu"
      :style="contextMenuStyle"
      @click.stop
    >
      <div 
        class="context-menu-item" 
        :class="{ disabled: contextMenuItem && !canMoveUp(contextMenuItem) }"
        @click="handleContextMenuCommand('moveUp')"
      >
        <el-icon><ArrowUp /></el-icon>
        <span>上移</span>
      </div>
      <div 
        class="context-menu-item" 
        :class="{ disabled: contextMenuItem && !canMoveDown(contextMenuItem) }"
        @click="handleContextMenuCommand('moveDown')"
      >
        <el-icon><ArrowDown /></el-icon>
        <span>下移</span>
      </div>
      <div class="context-menu-divider"></div>
      <div
        class="context-menu-item"
        @click="handleContextMenuCommand('setPipeDetail')"
        :class="{ disabled: checkerIsLoginUser }"
      >
        <el-icon><Setting /></el-icon>
        <span>选择管线</span>
      </div>
      <div class="context-menu-divider"></div>
      <div
        class="context-menu-item"
        @click="handleContextMenuCommand('modifyChecker')"
        :class="{ disabled: checkerIsLoginUser }"
      >
        <el-icon><User /></el-icon>
        <span>修改检验员</span>
      </div>
      <div class="context-menu-divider"></div>
      <div
        class="context-menu-item"
        :class="{ disabled: (contextMenuItem && !canSyncReport(contextMenuItem) || checkerIsLoginUserForSync) }"
        @click="handleContextMenuCommand('syncAllReport')"
      >
        <el-icon><RefreshLeft /></el-icon>
        <span>同步报表</span>
      </div>
      <div class="context-menu-divider"></div>
      <div 
        class="context-menu-item danger" 
        :class="{ disabled: (contextMenuItem && !canVoidItem(contextMenuItem) || checkerIsLoginUser) }"
        @click="handleContextMenuCommand('voidItem')"
      >
        <el-icon><Delete /></el-icon>
        <span>作废项目</span>
        <!-- <span v-if="contextMenuItem && !canVoidItem(contextMenuItem)" class="disabled-tip">（当前状态不可作废）</span> -->
      </div>
    </div>
        <!-- 检验录入-模板 -->
    <InlineEditCheckRecord
      v-if="showInlineEditCheckRecord"
      v-model:visible="showInlineEditCheckRecord"
      :task-order-item="taskOrderItem"
      :report-list="reportList"
      :template-params="templateParams"
      @confirm="handleTemplateConfirm"
      @cancel="handleRefresh"
    />
  <Teleport to="body">
    <!-- 费用计算弹窗 -->
    <calcCheckItemFee
      v-if="showCalcCheckItemFeeDialog"
      v-model="showCalcCheckItemFeeDialog"
      :equipmentId="calcEquipmentId"
      :templateInfo="calcTemplateInfo"
      @save="handleSaveCalcFee"
    />
  </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import calcCheckItemFee from '@/views/pressure2/boilertaskorder/components/calcCheckItemFee.vue'

import { User, Delete, ArrowUp, ArrowDown,Setting, RefreshLeft } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { 
  PressureCheckerMyTaskStatusMap,
  PressureCheckerMyTaskStatus,
  PressureTaskOrderTaskStatus,
  PressureReportType
} from '@/utils/constants'
import InlineEditCheckRecord from './InlineEditCheckRecord.vue'
import type { ReportItemVO, PipeTaskOrderOrderItemVO } from '@/api/pressure2/pipetaskorder'
import { PipeTaskOrderApi } from '@/api/pressure2/pipetaskorder'
import { is } from '@/utils/is'
import { useUserStore } from '@/store/modules/user'
import { useTaskProgress } from './useTaskProgress'
import { cloneDeep } from 'lodash-es'

interface Props {
  reportList: ReportItemVO[]
  reportGroupList: []
  orderInfo: []
  equipmentIds: []
  orderItemIds: []
  selectedItem: ReportItemVO | null
  taskOrderItem: PipeTaskOrderOrderItemVO
  isAuditMode?: boolean
}

interface Emits {
  (e: 'refresh'): void
  (e: 'template-confirm', templateUrl?: string): void
  (e: 'item-select', item: ReportItemVO): void
  (e: 'modify-checker', item: ReportItemVO): void
  (e: 'void-item', item: ReportItemVO): void
  (e: 'set-pipe-detail', item: ReportItemVO): void
  (e: 'sort-report'): void
  (e: 'correlation-report', item: ReportItemVO): void
  (e: 'sync-all-report', item: ReportItemVO)
}


const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const userStore = useUserStore()
const showCalcCheckItemFeeDialog = ref(false)
const calcEquipmentId = ref('')
const calcTemplateInfo = ref({})
// 注意：过滤逻辑已移到父组件中处理

// 主报告处于 报告审核审核/报告审批/报告办结,是则不能添加检验项目
const canAddReportItem = computed(()=>{
  const disabledStatus = [PressureCheckerMyTaskStatus.REPORT_AUDIT, PressureCheckerMyTaskStatus.REPORT_APPROVE, PressureCheckerMyTaskStatus.REPORT_END]
  const mainReport = unref(props.reportList).find(x => x.reportType === PressureReportType['MAIN'])
  // console.log(mainReport, 'mainReport')
  return mainReport && disabledStatus.includes(mainReport.taskStatus)
})

// 右键菜单相关
const contextMenuRef = ref()
const contextMenuVisible = ref(false)
const contextMenuStyle = ref<Record<string, string>>({ left: '0px', top: '0px' })
const contextMenuItem = ref<ReportItemVO | null>(null)
// 判断“填写记录”按钮是否显示
const isCanEditTestRecord = computed(
  () =>
    props.selectedItem &&
    (props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['RECORD_INPUT'] ||
      props.selectedItem.taskStatus === PressureCheckerMyTaskStatus['CONFIRMED'])
)
// 模板参数
const templateParams = computed(() => {
  if (!props.selectedItem) return {}
  return {
    ...props.selectedItem,
    equipCode: props.taskOrderItem?.equipCode || '',
    equipId: props.taskOrderItem?.id || ''
  }
})
const handleInputCalcField = async (taskOrderItem, item) => {
  try {
    showCalcCheckItemFeeDialog.value = true
    calcTemplateInfo.value = item
    calcEquipmentId.value = taskOrderItem.equipId
  } catch (error) {
    ElMessage.error('录入费用出错啦！')
    console.error('录入费用出错啦！', error)
  }
}

// 独走报告关联操作指导书
const handleCorrelationReport = (item: ReportItemVO) => {
  emit('item-select', item)
  emit('correlation-report', item)
} 

// 获取状态颜色
const getStatusColor = (status: number): 'success' | 'warning' | 'info' | 'primary' | 'danger' => {
  const statusMap: Record<number, 'success' | 'warning' | 'info' | 'primary' | 'danger'> = {
    [PressureCheckerMyTaskStatus.CONFIRMED]: 'success',
    [PressureCheckerMyTaskStatus.RECORD_INPUT]: 'warning',
    [PressureCheckerMyTaskStatus.RECORD_CHECK]: 'info',
    [PressureCheckerMyTaskStatus.REPORT_INPUT]: 'warning',
    [PressureCheckerMyTaskStatus.REPORT_AUDIT]: 'warning',
    [PressureCheckerMyTaskStatus.REPORT_APPROVE]: 'warning',
    [PressureCheckerMyTaskStatus.REPORT_END]: 'success'
  }
  return statusMap[status] || 'info'
}

const getReportStatusText = (item: ReportItemVO): string => {
  return item.taskStatus === PressureCheckerMyTaskStatus.CONFIRMED && item.reportType === PressureReportType.SUBCONTRACT ? '待审核' : PressureCheckerMyTaskStatusMap[item.taskStatus] || '未知状态'
}

// 获取报告类型图标
const getReportTypeIcon = (reportType?: number): string | null => {
  switch (reportType) {
    case PressureReportType.MAIN: // 100 主报告
      return '主'
    case PressureReportType.SINGLE: // 300 独审报告
      return '独'
    case PressureReportType.SUB: // 200 子报告
      return '子'
    case PressureReportType.SUGGUESTION:
      return '附'
    case PressureReportType.SUBCONTRACT:
      return '分'
    default:
      return null
  }
}

// 获取报告类型图标样式类
const getReportTypeIconClass = (reportType?: number): string => {
  switch (reportType) {
    case PressureReportType.MAIN: // 100 主报告
      return 'report-type-icon main'
    case PressureReportType.SINGLE: // 300 独审报告
      return 'report-type-icon single'
    case PressureReportType.SUB: // 200 子报告
      return 'report-type-icon sub'
    case PressureReportType.SUBCONTRACT:
      return 'report-type-icon subcontract'
    default:
      return 'report-type-icon'
  }
}

// 获取检验结果录入状态文本
const getConclusionStatusText = (item: ReportItemVO): string => {
  const hasConclusion = (item as any)?.feeConfirm
  return hasConclusion ? '费用已确认' : '费用未确认'
}

// 获取检验结果录入状态类型
const getConclusionStatusType = (item: ReportItemVO): 'success' | 'info' => {
  const hasConclusion = (item as any)?.feeConfirm
  return hasConclusion ? 'success' : 'info'
}

// 判断是否允许作废
const canVoidItem = (item: ReportItemVO): boolean => {
  const forbiddenStatuses = [
    PressureCheckerMyTaskStatus.RECORD_CHECK, // 记录校核
    PressureCheckerMyTaskStatus.REPORT_AUDIT, // 报告审核
    PressureCheckerMyTaskStatus.REPORT_APPROVE, // 报告审批
    PressureCheckerMyTaskStatus.REPORT_END // 报告办结
  ]
  return [PressureReportType.MAINQUESTION, PressureReportType.INSPECTIONPLAN, PressureReportType.WORKINSTRUCTION].includes(item.reportType) || !forbiddenStatuses.includes(item.taskStatus)
}

// 判断是否允许同步报表数据
const canSyncReport = (item: ReportItemVO): boolean => {
  const forbiddenStatuses = [
    PressureCheckerMyTaskStatus.REPORT_AUDIT, // 报告审核
    PressureCheckerMyTaskStatus.REPORT_APPROVE, // 报告审批
    PressureCheckerMyTaskStatus.REPORT_END // 报告办结
  ]
  return !forbiddenStatuses.includes(item.taskStatus)
}

// 判断当前检验员或主检人是否为登录用户，如果不是，则功能按钮disabled
const checkerIsLoginUser = computed(() => {
  //记录校核后不允许修改
  if (contextMenuItem.value?.taskStatus >= PressureCheckerMyTaskStatus.RECORD_CHECK) return true
  const checkerUserIds = contextMenuItem.value?.checkUsers.map(checker => checker?.id)
  return !(checkerUserIds?.includes(userStore?.user?.id) || props.taskOrderItem?.mainCheckerUser?.id === userStore?.user?.id)
})

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

// 判断是否可以上移
const canMoveUp = (item: ReportItemVO): boolean => {
  const currentIndex = props.reportList.findIndex(report => report.id === item.id)
  return currentIndex > 0
}

// 判断是否可以下移
const canMoveDown = (item: ReportItemVO): boolean => {
  const currentIndex = props.reportList.findIndex(report => report.id === item.id)
  return currentIndex >= 0 && currentIndex < props.reportList.length - 1
}

// 处理报告移动
const handleMoveReport = async (item: ReportItemVO, direction: 'up' | 'down') => {
  try {
    const sortList = activeTab.value === 'inspection' ? inspectionItems.value : documentItems.value
    const currentIndex = sortList.findIndex((report) => report.id === item.id)
    if (currentIndex === -1) return

    // 创建新的排序数组
    const sortedItems = cloneDeep(props.reportList)
    const prevReport = sortList[currentIndex - 1]
    const currentReport = sortList[currentIndex]
    const nextReport = sortList[currentIndex + 1]
    const prevSort = prevReport?.sort || 0
    const curSort = currentReport.sort
    const nextSort = nextReport?.sort || 0

    if (direction === 'up' && currentIndex > 0) {
      // 上移：与前一个交换位置, 修改sort字段值
      sortedItems.forEach((item) => {
        if(item.id === prevReport.id){
          item.sort = curSort
        } else if(item.id === currentReport.id){
          item.sort = prevSort
        }
      })
      // sortedItems[currentIndex].sort = sortedItems[currentIndex-1].sort
      // sortedItems[currentIndex-1].sort = curSort
      // ;[sortedItems[currentIndex - 1], sortedItems[currentIndex]] = [
      //   sortedItems[currentIndex],
      //   sortedItems[currentIndex - 1]
      // ]
    } else if (direction === 'down' && currentIndex < sortedItems.length - 1) {
      // 下移：与后一个交换位置, 修改sort字段值
      sortedItems.forEach((item) => {
        if(item.id === currentReport.id){
          item.sort = nextSort
        } else if(item.id === nextReport.id){
          item.sort = curSort
        }
      })
      // sortedItems[currentIndex].sort = sortedItems[currentIndex+1].sort
      // sortedItems[currentIndex+1].sort = curSort
      // ;[sortedItems[currentIndex], sortedItems[currentIndex + 1]] = [
      //   sortedItems[currentIndex + 1],
      //   sortedItems[currentIndex]
      // ]
    } else {
      return // 无法移动
    }

    // 构造API参数，重新分配sort值（从1开始）
    const newItems = sortedItems.sort((a, b) =>  (a.sort || 0) - (b.sort || 0))
    const items = newItems.map((report, index) => ({
      id: report.id,
      sort: index + 1
    }))

    // 调用API
    await PipeTaskOrderApi.sortReport({ items })
    ElMessage.success('排序已更新')

    // 通知父组件刷新数据
    emit('sort-report')
  } catch (error) {
    console.error('移动报告失败:', error)
    ElMessage.error('移动报告失败')
  }
}

// 获取项目样式类
const getItemClass = (item: ReportItemVO) => {
  return [
    'list-item',
    {
      'selected': props.selectedItem?.id === item.id
    }
  ]
}
const handleTemplateConfirm = (templateUrl: string) => {
  emit('template-confirm', templateUrl)
}
const handleRefresh = () => {
  emit('refresh')
}
// 处理项目点击 - 开放所有状态
const handleItemClick = (item: ReportItemVO) => {
  emit('item-select', item)
}

// 处理右键菜单 - 审核模式下不显示右键菜单
const handleContextMenu = (event: MouseEvent, item: ReportItemVO) => {
  // 审核模式下不显示右键菜单
  if (props.isAuditMode) {
    return
  }

  event.preventDefault()
  event.stopPropagation()
  
  contextMenuItem.value = item
  contextMenuStyle.value = {
    left: `${event.clientX}px`,
    top: `${event.clientY}px`,
    position: 'fixed',
    zIndex: '9999'
  }

  nextTick(() => {
    contextMenuVisible.value = true
  })
}
// 获取检验员名称
const getCheckersName = (): string => {
  if (!props.selectedItem?.checkUsers || props.selectedItem.checkUsers.length === 0) {
    return '未分配'
  }
  return props.selectedItem.checkUsers.map((user) => user.nickname).join('、')
}
// 处理双击事件 - 填写记录存在则开启
const handleDoubleClick = (event: MouseEvent, item: ReportItemVO) => {
  // 审核模式下不显示右键菜单
  // if (isCanEditTestRecord.value === false) {
  //   return
  // }
  // const reportType = props.selectedItem?.reportType || -1
  // if([PressureReportType.SUBCONTRACT].includes(reportType)){
  //   return
  // }
  // event.preventDefault()
  // event.stopPropagation()
  // showInlineEditCheckRecord.value = true
}
const showInlineEditCheckRecord = ref(false)
// 处理右键菜单命令
const handleContextMenuCommand = async (command: string) => {
  if (!contextMenuItem.value) return
  
  switch (command) {
    case 'moveUp':
      if (!canMoveUp(contextMenuItem.value)) {
        return
      }
      await handleMoveReport(contextMenuItem.value, 'up')
      break
    case 'moveDown':
      if (!canMoveDown(contextMenuItem.value)) {
        return
      }
      await handleMoveReport(contextMenuItem.value, 'down')
      break
    case 'modifyChecker':
      if(unref(checkerIsLoginUser)) return
      emit('modify-checker', contextMenuItem.value)
      break
    case 'voidItem':
      // 检查是否允许作废
      if ((contextMenuItem.value && !canVoidItem(contextMenuItem.value)) || unref(checkerIsLoginUser)) {
        return
      }
      emit('void-item', contextMenuItem.value)
      break
    case 'setPipeDetail':
      if(unref(checkerIsLoginUser)) return
      emit('set-pipe-detail', contextMenuItem.value)
      break
    case 'syncAllReport':
      if((contextMenuItem.value && !canSyncReport(contextMenuItem.value) || unref(checkerIsLoginUserForSync)) ) return
      emit('sync-all-report', contextMenuItem.value)
      break
  }
  
  contextMenuVisible.value = false
  contextMenuItem.value = null
}

// 点击其他地方关闭右键菜单
const handleDocumentClick = (event: Event) => {
  // 如果点击的是右键菜单内部，不关闭菜单
  const target = event.target as HTMLElement
  if (target && target.closest('.context-menu')) {
    return
  }
  
  contextMenuVisible.value = false
  contextMenuItem.value = null
}
const getCheckItemFeeType = computed(() => {
  return ({isAutoAmount, fee}) => {
    if(is(fee, 'Number')) return fee
    else if(is(fee, 'Null') && isAutoAmount === '1') return '录入计算'
    else return '无'
  }
})
const handleSaveCalcFee = async (templateInfo: any) => {
  // 更新检验项目的费用
  const updateRes = await PipeTaskOrderApi.updateCheckItemFee({id: templateInfo.id, fee: templateInfo.fee, feeCalculateJson: templateInfo.feeCalculateJson })
  if(updateRes) {
    emit('refresh');
    ElMessage.success('费用已更新')
  }
}
// 处理文档右键点击
const handleDocumentContextMenu = (event: MouseEvent) => {
  // 如果不是在我们的列表项上右键，关闭菜单
  const target = event.target as HTMLElement
  if (!target || !target.closest('.list-item')) {
    contextMenuVisible.value = false
    contextMenuItem.value = null
  }
}

onMounted(() => {
  document.addEventListener('click', handleDocumentClick)
  document.addEventListener('contextmenu', handleDocumentContextMenu)
})

onUnmounted(() => {
  document.removeEventListener('click', handleDocumentClick)
  document.removeEventListener('contextmenu', handleDocumentContextMenu)
})

//新加
// 使用任务进度逻辑
const { getCurrentStepName } = useTaskProgress()

// 检验项目类型：主报告(100)、子报告(200)、独审报告(300)、检验意见通知书(400)、分包项目(900)
const inspectionTypes = [
  PressureReportType.MAIN,
  PressureReportType.SUB,
  PressureReportType.SINGLE,
  PressureReportType.SUGGUESTION,
  PressureReportType.SUBCONTRACT
]

// 项目文件类型：操作指导书(700)、检验方案(600)、重大问题线索告知表(500)
const documentTypes = [
  PressureReportType.WORKINSTRUCTION,
  PressureReportType.INSPECTIONPLAN,
  PressureReportType.MAINQUESTION,
]

// 获取状态字体颜色
const getStatusBgColor = (status: number): '#5B9BD5' | '#70AD47' | '#ED7D31' | '#9973C2' | '#FF8DC7' | '#FFC000' | '#A7D78B' | 'primary' | 'danger' => {
  const statusMap: Record<number, '#5B9BD5' | '#70AD47' | '#FFC000'| '#9973C2' | '#ED7D31'| '#FF8DC7' | '#A7D78B' | 'primary' | 'danger'> = {
    [PressureCheckerMyTaskStatus.CONFIRMED]: '#5B9BD5', //待录入
    [PressureCheckerMyTaskStatus.RECORD_INPUT]: '#70AD47', //记录录入
    [PressureCheckerMyTaskStatus.RECORD_CHECK]: '#9973C2', //记录校核
    [PressureCheckerMyTaskStatus.REPORT_INPUT]: '#FFC000', //报告编制
    [PressureCheckerMyTaskStatus.REPORT_AUDIT]: '#ED7D31', //报告审核
    [PressureCheckerMyTaskStatus.REPORT_APPROVE]: '#FF8DC7', //报告审批
    [PressureCheckerMyTaskStatus.REPORT_END]: '#303133' //报告办结
  }
  return statusMap[status] || '#A7D78B'
}

// 操作指导书名称
const getWorkInstructionStepName = (item: ReportItemVO): string => {
  switch (item.status) {
    case 0:
      return '待提交'
    case 100:
      return '待批准'
    case 300:
      return '退回'
    default:
      return ''
  }
}

// Tabs 状态
const activeTab = ref<'inspection' | 'document'>('inspection')

// 根据类型分类数据
const inspectionItems = computed(() => {
  return props.reportList.filter((item) => inspectionTypes.includes(item.reportType))
})

const documentItems = computed(() => {
  return props.reportList.filter((item) => documentTypes.includes(item.reportType))
})

// 当前激活的 tab 对应的数据
const currentTabItems = computed(() => {
  return activeTab.value === 'inspection' ? inspectionItems.value : documentItems.value
})

// 判断是否为其他报告类型
const isOtherReport = (item: ReportItemVO): boolean => {
  return [PressureReportType.WORKINSTRUCTION].includes(item.reportType)
}

// 获取其他报告类型的步骤名称
const getOtherStepName = (item: ReportItemVO): string => {
  if(PressureReportType.WORKINSTRUCTION == item.reportType) return getWorkInstructionStepName(item)
  return getCurrentStepName(item)
}

// 独走报告关联操作指导书
const isDisabledBtn = (item) => {
  const checkerUserIds = item.checkUsers.map(checker => checker?.id)
  return !(checkerUserIds?.includes(userStore?.user?.id))
}

</script>

<style lang="scss" scoped>
.inspection-item-list {
  height: 100%;
  display: flex;
  flex-direction: column;

  .capsule-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    background: #f5f7fa;
    border-radius: 8px;
    margin: 8px;

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 10px;
      font-size: 12px;
      background: white;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 14px;
      color: #606266;
      font-weight: 500;
      border: 2px solid transparent;
      user-select: none;

      &: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);

        // 激活状态下的 badge 样式调整
        :deep(.el-badge__content) {
          background-color: white;
          color: #409eff;
          border: 1px solid rgba(255, 255, 255, 0.3);
        }
      }

      // el-badge 样式优化
      :deep(.el-badge) {
        display: flex;
        align-items: center;
      }

      :deep(.el-badge__content) {
        transform: translateY(-50%) translateX(50%);
        font-weight: bold;
      }
    }
  }

  .list-content {
    flex: 1;
    overflow-y: auto;

    .empty-state {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item-list {
      padding: 8px;

      .list-item {
        border: 1px solid #e4e7ed;
        border-radius: 6px;
        // padding: 8px 12px;
        margin-bottom: 6px;
        cursor: pointer;
        transition: all 0.2s;
        background-color: white;

        &:hover {
          border-color: #409eff;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);

          .fee-btn {
            border-color: #409eff !important;
          }
        }

        &.selected {
          border-color: #409eff;
          background-color: #f0f9ff;

          .fee-btn {
            border-color: #409eff !important;
          }
        }

        .item-header {
          display: flex;
          // flex-direction: column;
          // gap: 8px;

          .item-title-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            line-height: 1.5;
            padding: 8px 12px;
            flex: 1;

            .title-content {
              display: flex;
              gap: 6px;
              // flex-wrap: wrap;
              flex: 1;
              min-width: 0;
            }

            .report-type-icon {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 20px;
              background-color: var(--el-color-primary);
              color: white;
              border-radius: 3px;
              font-size: 12px;
              font-weight: bold;
              flex-shrink: 0;

              &.main {
                background-color: var(--el-color-primary);
              }

              &.single {
                background-color: #e6a23c;
              }

              &.sub {
                background-color: #91d5ff;
              }

              &.subcontract {
                background-color: #afadf6;
              }

              &.work {
                background-color: #67c23a;
              }

              &.zdwtxsgz {
                background-color: #ff579b;
              }

              &.jyfa {
                background-color: #d6e645;
              }

              &.plan {
                background-color: #909399;
              }

              &.question {
                background-color: #f56c6c;
              }
            }

            .item-title {
              // display: inline-flex;
              // flex-wrap: wrap;
              font-weight: 500;
              color: #303133;
              font-size: 14px;
              flex: 1;

              > span {
                // display: inline-flex;
                // align-items: center;
              }

              .el-button {
                padding: 0 4px;
                height: auto;
                line-height: 1.5;
                font-size: 14px;
                vertical-align: baseline;
              }
            }
          }

          .fee-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-basis: 60px;
            border-left: 1px solid #e4e7ed;
          }

          .pl-\[28px\] {
            padding-left: 28px;
          }

          .status-wrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-left: 28px;
            gap: 6px;
            box-sizing: border-box;

            .el-tag {
              margin: 0;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .inspection-item-list {
    .capsule-tabs {
      padding: 10px 12px;

      .tab-item {
        padding: 8px 16px;
        font-size: 13px;
      }
    }

    .list-content .item-list .list-item {
      padding: 10px;

      .item-header {
        gap: 6px;

        .item-title-wrapper {
          gap: 4px;
        }
      }
    }
  }
}
</style>
<style>
/* 右键菜单全局样式 */
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 6px 0;
  min-width: 120px;
}

.context-menu .context-menu-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.2s;
}

.context-menu .context-menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.context-menu .context-menu-item.danger {
  color: #f56c6c;
}

.context-menu .context-menu-item.danger:hover {
  background-color: #fef0f0;
  color: #f56c6c;
}

.context-menu .context-menu-item.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.context-menu .context-menu-item.disabled:hover {
  background-color: transparent;
  color: #c0c4cc;
}

.context-menu .context-menu-item .disabled-tip {
  font-size: 12px;
  margin-left: 4px;
}

.context-menu .context-menu-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.context-menu .context-menu-item span {
  flex: 1;
}

.context-menu .context-menu-divider {
  height: 1px;
  background-color: #e4e7ed;
  margin: 6px 0;
}
</style>