<template>
  <div class="industrial-image-container">
    <!-- 头部按钮栏 -->
    <HeaderToolbar 
      :current-image-id="currentImageId"
      @start="handleStart"
      @auto-annotate="handleAutoAnnotate"
      @manual-annotate="handleManualAnnotate"
      @generate-report="handleGenerateReport"
    />

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 上部区域 -->
      <div class="top-section" :class="{ 
        'auto-recognition-layout': isAutoRecognitionMode, 
        'manual-annotation-layout': isManualAnnotationMode,
        'top-section-expanded': isImageListCollapsed || isAutoRecognitionMode || isManualAnnotationMode 
      }">
        <!-- 自动识别模式三列布局 -->
        <template v-if="isAutoRecognitionMode">
          <!-- 左侧：自动识别设置面板 -->
          <div class="auto-left-panel">
            <AutoRecognitionSettings
              :current-image="selectedImage"
              @close="handleCloseAutoRecognition"
              @start-recognition="handleStartRecognition"
            />
          </div>
          
          <!-- 中间：图像显示区域 -->
          <div class="auto-center-panel">
            <ImagePreview 
              :selected-image="selectedImage"
            />
          </div>
          
          <!-- 右侧：识别结果区域 -->
          <div class="auto-right-panel">
            <RecognitionResults 
              :results="recognitionResults"
              :is-processing="isRecognizing"
              @result-select="handleRecognitionResultSelect"
              @save-results="handleSaveRecognitionResults"
              @export-results="handleExportRecognitionResults"
            />
          </div>
        </template>
        
        <!-- 手动标注模式三列布局 -->
        <template v-else-if="isManualAnnotationMode">
          <!-- 左侧：缺陷列表面板 -->
          <div class="manual-left-panel">
            <DefectListPanel
              :defect-list="defectList"
              :selected-defect="selectedDefect"
              :tree-data="projectTreeData"
              :selected-keys="selectedKeys"
              @defect-select="handleDefectSelect"
              @node-select="handleNodeSelect"
              @load-more="handleLoadMore"
              @turbine-select="handleTurbineSelect"
              @add-defect="handleAddDefectFromPanel"
              @close="handleCloseManualAnnotation"
            />
          </div>
          
          <!-- 中间：图像标注区域 -->
          <div class="manual-center-panel">
            <ImageCanvas 
              :selected-image="selectedImage"
              :annotations="selectedDefectAnnotations"
              @annotation-finish="handleAnnotationFinish"
              @annotation-update="handleAnnotationUpdate"
              @annotation-delete="handleAnnotationDelete"
            />
          </div>
          
          <!-- 右侧：缺陷详情编辑区域 -->
          <div class="manual-right-panel">
            <DefectDetailsForm
              v-if="currentAnnotation"
              :annotation="currentAnnotation"
              @close="handleCloseDefectForm"
              @submit="handleDefectFormSubmit"
            />
            <div v-else class="no-annotation-prompt">
              <icon-bug class="prompt-icon" />
              <p>请在图像上绘制矩形标注缺陷</p>
            </div>
          </div>
        </template>
        
        <!-- 普通模式双列布局 -->
        <template v-else>
          <!-- 左侧面板 -->
          <div class="left-panel">
            <!-- 项目管理 -->
            <ProjectTree 
              v-if="!isManualAnnotationMode"
              :project-tree-data="projectTreeData"
              :selected-keys="selectedKeys"
              @node-select="handleNodeSelect"
              @load-more="handleLoadMore"
            />
            <!-- 手动标注 -->
            <ManualAnnotation 
              v-if="isManualAnnotationMode"
              :tree-data="projectTreeData"
              :selected-keys="selectedKeys"
              :defect-list="defectList"
              :selected-defect="selectedDefect"
              @close="handleCloseManualAnnotation"
              @defect-select="handleDefectSelect"
              @add-defect="handleAddDefect"
              @edit-defect="handleEditDefect"
              @delete-defect="handleDeleteDefectById"
            />
          </div>

          <!-- 右侧面板 -->
          <div class="right-panel">
            <!-- 图像预览区域 -->
            <ImagePreview 
              :selected-image="selectedImage"
            />
          </div>
        </template>
      </div>

      <!-- 下部工业图像列表区域 - 仅在非自动识别和非手动标注模式下显示 -->
      <div v-if="!isAutoRecognitionMode && !isManualAnnotationMode" class="bottom-section" :class="{ 'collapsed': isImageListCollapsed }">
        <IndustrialImageList 
          :image-list="imageList"
          :selected-image-id="selectedImageId"
          @import-images="handleImportImages"
          @image-select="handleImageSelect"
          @image-preview="handleImagePreview"
          @image-process="handleImageProcess"
          @image-delete="handleImageDelete"
          @search="handleSearch"
          @collapsed-change="handleImageListCollapse"
        />
      </div>
    </div>

    <!-- 模态框 -->
    <ImageModals
        :preview-modal-visible="previewModalVisible"
        :preview-image="previewImage"
        :process-image="processImage"
        :selected-image="selectedImage"
        @update:preview-modal-visible="previewModalVisible = $event"
        @save="handleSaveImageSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { IconBug } from '@arco-design/web-vue/es/icon'
import { Message } from '@arco-design/web-vue'
import HeaderToolbar from './components/HeaderToolbar.vue'
import ProjectTree from './components/ProjectTree.vue'
import ImagePreview from './components/ImagePreview.vue'
import ImageCanvas from '@/views/project-operation-platform/data-processing/industrial-image/components/ImageCanvas.vue'
import IndustrialImageList from '@/components/IndustrialImageList/index.vue'
import ImageModals from './components/ImageModals.vue'
import RecognitionResults from './components/RecognitionResults.vue'
import DefectListPanel from './components/DefectListPanel.vue'
import DefectDetailsForm from './components/DefectDetailsForm.vue'
import AutoRecognitionSettings from './components/AutoRecognitionSettings.vue'
import { useIndustrialImage } from './hooks/useIndustrialImage'
import type { TreeNode } from './components/DefectListPanel.vue'
import type { Annotation } from '@/views/project-operation-platform/data-processing/industrial-image/components/ImageCanvas.vue'
import type { ManualDefectAddRequest, DefectInfo, AttachInfoData } from '@/apis/industrial-image/defect'
import { addManualDefect, getDefectList, uploadAnnotatedImage, getDefectTypes, getDefectLevels, type DefectType, type DefectLevelType } from '@/apis/industrial-image/defect'

defineOptions({ name: 'IndustrialImageProcessing' })

// 控制图像列表展开/收起
const isImageListCollapsed = ref(false)

const handleImageListCollapse = (collapsed: boolean) => {
  isImageListCollapsed.value = collapsed
}

// 当前标注状态
const currentAnnotation = ref<Annotation | null>(null)

// 缺陷类型映射
const defectTypes = ref<DefectType[]>([])

// 缺陷等级映射
const defectLevels = ref<DefectLevelType[]>([])

// 加载缺陷类型
const loadDefectTypes = async () => {
  try {
    const response = await getDefectTypes()
    if (response.data && response.data.code === 0) {
      defectTypes.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载缺陷类型失败:', error)
    defectTypes.value = []
  }
}

// 加载缺陷等级
const loadDefectLevels = async () => {
  try {
    const response = await getDefectLevels()
    if (response.data && response.data.code === 0) {
      defectLevels.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载缺陷等级失败:', error)
    defectLevels.value = []
  }
}

// 添加保存成功处理
const handleSaveImageSuccess = (updatedData: any) => {
  // 可以在这里更新本地数据或执行其他操作
  Message.success('图片信息已更新')
  // 如果需要更新selectedImage或previewImage
  if (selectedImage.value && selectedImage.value.id === updatedData.id) {
    selectedImage.value = { ...selectedImage.value, ...updatedData }
  }
  if (previewImage.value && previewImage.value.id === updatedData.id) {
    previewImage.value = { ...previewImage.value, ...updatedData }
  }
}

// 使用组合式函数
const {
  // 数据
  projectTreeData,
  selectedKeys,
  currentProjectId,
  imageList,
  selectedImage,
  selectedImageId,
  searchKeyword,
  previewModalVisible,
  previewImage,
  processModalVisible,
  processImage,
  importModalVisible,
  annotationModalVisible,
  loading,
  currentImageId,
  
  // 向导相关状态
  importWizardVisible,
  selectedTurbineId,
  currentTurbineParts,
  
  // 自动识别相关状态
  isAutoRecognitionMode,
  recognitionResults,
  isRecognizing,
  
  // 手动标注相关状态
  isManualAnnotationMode,
  defectList,
  selectedDefect,
  selectedDefectAnnotations,
  
  // 报告生成相关状态
  reportGenerationVisible,
  reportUnitData,
  
  // 方法
  loadProjectTree,
  handleLoadMore,
  handleNodeSelect,
  loadImageList,
  handleImageSelect,
  handleImagePreview,
  handleImageProcess,
  handleImageDelete,
  handleSearch,
  handleStart,
  handleImportImages,
  handleAutoAnnotate,
  handleManualAnnotate,
  handleGenerateReport,
  handleImportSuccess,
  handleAnnotationSaved,
  handleProcessSuccess,
  handleWizardImportSuccess,
  
  // 自动识别相关方法
  handleCloseAutoRecognition,
  handleStartRecognition,
  handleRecognitionResultSelect,
  handleSaveRecognitionResults,
  handleExportRecognitionResults,
  
  // 手动标注相关方法
  handleCloseManualAnnotation,
  handleDefectSelect,
  handleAddDefect,
  handleEditDefect,
  handleDeleteDefectById,
  
  // Canvas 标注相关方法
  handleAnnotationAdd,
  handleAnnotationUpdate,
  handleAnnotationDelete,
  
  // 报告生成相关方法
  handleReportGenerated,
  
  init
} = useIndustrialImage()

// 转换项目树数据为树形结构
const treeData = computed(() => {
  console.log('计算treeData, projectTreeData:', projectTreeData.value)
  
  if (!projectTreeData.value || !Array.isArray(projectTreeData.value)) {
    console.log('projectTreeData为空或不是数组，返回测试数据')
    // 返回测试数据
    return [
      {
        key: 'test-project-1',
        title: '测试项目1',
        type: 'project',
        defectCount: 0,
        children: [
          {
            key: 'test-turbine-1',
            title: '测试机组1',
            type: 'turbine',
            defectCount: 0,
            children: [
              {
                key: 'test-part-1',
                title: '测试部件1',
                type: 'part',
                defectCount: 0
              }
            ]
          }
        ]
      }
    ] as TreeNode[]
  }
  
  const result = projectTreeData.value.map(project => {
    if (!project) {
      console.warn('发现空的project对象')
      return null
    }
    
    const projectNode = {
      key: project.id || `project-${Math.random().toString(36).substr(2, 9)}`,
      title: project.name || '未命名项目',
      type: 'project' as const,
      defectCount: 0,
      children: project.children?.map(turbine => {
        if (!turbine) {
          console.warn('发现空的turbine对象')
          return null
        }
        
        const turbineNode = {
          key: turbine.id || `turbine-${Math.random().toString(36).substr(2, 9)}`,
          title: turbine.name || '未命名机组',
          type: 'turbine' as const,
          defectCount: 0,
          children: turbine.children?.map(part => {
            if (!part) {
              console.warn('发现空的part对象')
              return null
            }
            
            return {
              key: part.id || `part-${Math.random().toString(36).substr(2, 9)}`,
              title: part.name || '未命名部件',
              type: 'part' as const,
              defectCount: 0
            }
          }).filter(Boolean) || []
        }
        
        return turbineNode
      }).filter(Boolean) || []
    }
    
    console.log('创建的project节点:', projectNode)
    return projectNode
  }).filter(item => item !== null) as TreeNode[]
  
  console.log('最终的treeData:', result)
  return result
})

// 重写Canvas标注添加方法，显示缺陷详情表单
const handleCanvasAnnotationAdd = (annotation: Annotation) => {
  currentAnnotation.value = annotation
}

// 处理多区域标注完成
const handleAnnotationFinish = async (annotations: Annotation[], imageBlob: Blob) => {
  try {
    // 检查是否有选中的图像
    if (!selectedImageId.value && !selectedImage.value?.imageId) {
      Message.error('请先选择一张图像')
      return
    }
    
    // 上传标注后的图片
    const fileName = `annotated_${selectedImage.value?.imageName || 'image'}_${Date.now()}.png`
    const uploadResponse = await uploadAnnotatedImage(imageBlob, fileName)
    
    if ( !uploadResponse.data) {
      Message.error('上传标注图片失败')
      return
    }
    
    const attachInfo = uploadResponse.data
    console.log('上传成功，附件信息:', attachInfo)
    
    // 创建包含所有标注信息的虚拟标注对象
    const combinedAnnotation: Annotation = {
      id: `multi-annotation-${Date.now()}`,
      type: 'rectangle',
      points: annotations[0]?.points || [{ x: 0, y: 0 }, { x: 100, y: 100 }],
      color: '#ff4d4f',
      label: `${annotations.length}个标注区域`,
      metadata: {
        isMultiAnnotation: true,
        attachId: attachInfo,
        // attachPath: attachInfo.attachPath,
        // attachInfo: attachInfo,
        allAnnotations: annotations
      }
    }
    
    // 显示缺陷详情表单
    currentAnnotation.value = combinedAnnotation
    Message.success(`成功绘制${annotations.length}个区域，请填写缺陷详情`)
    
  } catch (error) {
    console.error('处理标注完成失败:', error)
    Message.error('处理标注失败')
  }
}

// 关闭缺陷详情表单
const handleCloseDefectForm = () => {
  currentAnnotation.value = null
}

// 从左侧面板添加缺陷
const handleAddDefectFromPanel = () => {
  // 检查是否选择了节点
  if (!selectedKeys.value || selectedKeys.value.length === 0) {
    Message.warning('请先选择一个项目节点')
    return
  }
  
  // 检查是否选择了图像
  if (!selectedImage.value) {
    Message.warning('请先选择一张图像')
    return
  }
  
  // 创建一个虚拟的标注对象，用于触发表单显示
  const virtualAnnotation: Annotation = {
    id: `virtual-${Date.now()}`,
    type: 'rectangle',
    points: [
      { x: 100, y: 100 },
      { x: 200, y: 200 }
    ],
    color: '#ff4d4f',
    label: '手动添加的缺陷'
  }
  
  // 显示缺陷详情表单
  currentAnnotation.value = virtualAnnotation
  Message.info('请在右侧表单中填写缺陷详情')
}

// 处理机组选择，加载缺陷列表
const handleTurbineSelect = async (turbineId: string) => {
  try {
    console.log('选中机组:', turbineId, '开始查询缺陷列表')
    
    // 调用API获取该机组的缺陷列表，使用与loadDefectList相同的方式
    const response = await getDefectList({ turbineId })
    
    console.log('API响应:', response)
    
    if (response.data && response.data.code === 0 && response.data.data) {
      // 检查返回数据结构
      const resultData = response.data.data
      
      // 将结果转换为DefectInfo[]类型
      let defects: DefectInfo[] = []
      
      if ('list' in resultData && Array.isArray(resultData.list)) {
        // 分页结构
        defects = resultData.list.map((item: any) => ({
          id: item.id || item.defectId || `defect-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
          turbineId: turbineId,
          ...item
        }))
      } else if (Array.isArray(resultData)) {
        // 直接数组结构
        defects = resultData.map((item: any) => ({
          id: item.id || item.defectId || `defect-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
          turbineId: turbineId,
          ...item
        }))
      }
      
      // 更新缺陷列表
      defectList.value = defects
      console.log('查询到缺陷列表:', defects.length, '条记录')
    } else {
      console.error('加载机组缺陷列表失败:', response)
      defectList.value = []
    }
  } catch (error) {
    console.error('加载机组缺陷列表出错:', error)
    Message.error('加载缺陷列表失败')
    defectList.value = []
  }
}

// 加载缺陷列表
const loadDefectList = async () => {
  try {
    // 检查是否有选中的图像
    if (!selectedImageId.value && !selectedImage.value?.imageId) {
      console.warn('未选择图像，无法加载缺陷列表')
      return
    }
    
    // 获取有效的图像ID
    const imageId = selectedImageId.value || selectedImage.value?.imageId || selectedImage.value?.id
    
    if (!imageId) {
      console.error('无法获取图像ID，选中的图像数据:', selectedImage.value)
      return
    }
    
    // 调用API获取缺陷列表
    const response = await getDefectList({ imageId })
    
    if (response.data && response.data.code === 0 && response.data.data) {
      // 检查返回数据结构
      const resultData = response.data.data
      
      // 将结果转换为DefectInfo[]类型
      let defects: DefectInfo[] = []
      
      if ('list' in resultData && Array.isArray(resultData.list)) {
        // 分页结构
        defects = resultData.list.map((item: any) => ({
          id: item.id || item.defectId || `defect-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
          ...item
        }))
      } else if (Array.isArray(resultData)) {
        // 直接数组结构
        defects = resultData.map((item: any) => ({
          id: item.id || item.defectId || `defect-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`,
          ...item
        }))
      }
      
      // 更新缺陷列表
      defectList.value = defects
    } else {
      console.error('加载缺陷列表失败:', response)
      defectList.value = []
    }
  } catch (error) {
    console.error('加载缺陷列表出错:', error)
    Message.error('加载缺陷列表失败')
    defectList.value = []
  }
}

// 提交缺陷详情表单
const handleDefectFormSubmit = async (formData: any, annotation: Annotation) => {
  try {
    // 检查是否有选中的图像
    if (!selectedImageId.value && !selectedImage.value?.imageId) {
      Message.error('请先选择一张图像')
      return
    }
    
    // 获取有效的图像ID
    const imageId = selectedImageId.value || selectedImage.value?.imageId || selectedImage.value?.id
    
    if (!imageId) {
      console.error('无法获取图像ID，选中的图像数据:', selectedImage.value)
      Message.error('无法获取图像ID，请重新选择图像')
      return
    }
    
    // 检查是否是多区域标注
    const isMultiAnnotation = annotation.metadata?.isMultiAnnotation
    const attachId = annotation.metadata?.attachId || ''
    // const attachPath = annotation.metadata?.attachPath || ''
    
    // 构造符合新API要求的缺陷数据
    const defectData = {
      attachId: attachId,
      attachPath: '',
      axial: formData.axialDimension,
      chordwise: formData.chordDimension,
      // defectCode: `MANUAL_${Date.now()}`,
      defectId: '',
      defectLevel: formData.defectLevel,
      defectLevelLabel: formData.defectLevelLabel || getDefectLevelLabel(formData.defectLevel),
      defectName: formData.defectName,
      defectPosition: formData.defectPosition,
      defectType: formData.defectType,
      defectTypeLabel: formData.defectTypeLabel || getDefectTypeLabel(formData.defectType),
      description: formData.description,
      detectionDate: new Date().toISOString().split('T')[0],
      imageId: imageId,
      labelInfo: '',
      // labelInfo: isMultiAnnotation ? 
      //   JSON.stringify(annotation.metadata?.allAnnotations || []) : 
      //   JSON.stringify(annotation),
      markInfo: {
        bbox: isMultiAnnotation ? 
          // 对于多区域，每个区域一个bbox数组
          (annotation.metadata?.allAnnotations || []).map(ann => [
            Math.min(ann.points[0].x, ann.points[1].x),
            Math.min(ann.points[0].y, ann.points[1].y),
            Math.abs(ann.points[1].x - ann.points[0].x),
            Math.abs(ann.points[1].y - ann.points[0].y)
          ]) :
          // 单区域直接计算
          annotation.type === 'rectangle' ? [
            Math.min(annotation.points[0].x, annotation.points[1].x),
            Math.min(annotation.points[0].y, annotation.points[1].y),
            Math.abs(annotation.points[1].x - annotation.points[0].x),
            Math.abs(annotation.points[1].y - annotation.points[0].y)
          ] : [],
        clsId: 1,
        confidence: 1.0,
        label: formData.defectType
      },
      repairIdea: formData.repairIdea,
      repairStatus: 'PENDING',
      repairStatusLabel: '待处理',
      source: 'MANUAL',
      sourceLabel: '手动标注'
    }
    
    console.log('发送给后端的缺陷数据:', defectData)
    
    // 调用API添加缺陷
    await addManualDefect(defectData as ManualDefectAddRequest, imageId)
    
    // 清除loading状态
    Message.clear()
    
    // 重新加载缺陷列表
    await loadDefectList()
    
    // 关闭表单
    currentAnnotation.value = null
    
    // 显示成功消息
    const annotationCount = annotation.metadata?.allAnnotations?.length || 1
    Message.success({
      content: isMultiAnnotation ? 
        `成功保存包含${annotationCount}个标注区域的缺陷信息！` :
        '缺陷信息保存成功！',
      duration: 3000
    })
    
  } catch (error) {
    console.error('添加缺陷失败:', error)
    Message.clear()
    Message.error('保存缺陷失败，请重试')
  }
}

// 计算多个标注区域的包围盒
const calculateBoundingBox = (annotations: Annotation[]): number[] => {
  if (!annotations || annotations.length === 0) return [0, 0, 0, 0]
  
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity
  
  annotations.forEach(annotation => {
    if (annotation.points && annotation.points.length >= 2) {
      const [p1, p2] = annotation.points
      minX = Math.min(minX, p1.x, p2.x)
      minY = Math.min(minY, p1.y, p2.y)
      maxX = Math.max(maxX, p1.x, p2.x)
      maxY = Math.max(maxY, p1.y, p2.y)
    }
  })
  
  return [minX, minY, maxX - minX, maxY - minY]
}

// 获取缺陷等级标签
const getDefectLevelLabel = (levelCode: string): string => {
  const level = defectLevels.value.find(l => l.code === levelCode)
  return level ? level.name : levelCode
}

// 获取缺陷类型标签
const getDefectTypeLabel = (typeCode: string): string => {
  const type = defectTypes.value.find(t => t.code === typeCode)
  return type ? type.name : typeCode
}

// 初始化
onMounted(() => {
  init()
  loadDefectTypes()
  loadDefectLevels()
})
</script>

<style scoped lang="scss">
.industrial-image-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-section {
  display: flex;
  flex: 1; /* 改为flex布局，自适应高度 */
  border-bottom: 1px solid #e5e7eb;
  min-height: 400px; /* 最小高度，确保有足够空间 */
  max-height: calc(100vh - 100px - 300px); /* 最大高度，减去头部高度和底部默认高度 */
  transition: max-height 0.3s ease, flex 0.3s ease;

  &.top-section-expanded {
    max-height: 100%; /* 当底部收起时，高度更大 */
  }

  .left-panel {
    width: 300px;
    border-right: 1px solid #e5e7eb;
    overflow: visible; /* 允许滚动条显示 */
    display: flex;
    flex-direction: column;
  }

  .right-panel {
    flex: 1;
    overflow: hidden;
  }
}

/* 自动识别模式三列布局 */
.top-section.auto-recognition-layout {
  display: flex;
  height: 100%; /* 自动识别模式占据全部高度 */
  
  .auto-left-panel {
    width: 280px;
    border-right: 1px solid #e5e7eb;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    flex-shrink: 0;
  }
  
  .auto-center-panel {
    flex: 1;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    min-width: 0; /* 确保flex项目可以收缩 */
    
    /* 让图像区域居中显示 */
    align-items: center;
    justify-content: center;
  }
  
  .auto-right-panel {
    width: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    flex-shrink: 0;
  }
}

/* 手动标注模式三列布局 */
.top-section.manual-annotation-layout {
  display: flex;
  height: 100%; /* 手动标注模式占据全部高度 */
  
  .manual-left-panel {
    width: 280px;
    border-right: 1px solid #e5e7eb;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    flex-shrink: 0;
  }
  
  .manual-center-panel {
    flex: 1;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
    min-width: 0; /* 确保flex项目可以收缩 */
    
    /* 让图像区域居中显示 */
    align-items: center;
    justify-content: center;
  }
  
  .manual-right-panel {
    width: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    flex-shrink: 0;
  }
}

.bottom-section {
  flex: 0 0 300px; /* 固定高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex 0.3s ease, height 0.3s ease;
  
  &.collapsed {
    flex: 0 0 0;
    min-height: 0;
    max-height: 0;
  }
}

.no-annotation-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  background: white;
  margin: 20px;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
  
  .prompt-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: #9ca3af;
  }
  
  p {
    margin: 0;
    font-size: 14px;
    text-align: center;
  }
}
</style> 