<template>
  <div class="labeling-page-container">
    <!-- 顶部操作栏：移除标注/撤销相关按钮，按template控制显示 -->
    <div class="labeling-header">
      <div class="header-left">
        <el-button-group>
          <el-button icon="el-icon-arrow-left" @click="prevImage" title="上一张" :disabled="imageList.length <= 1"></el-button>
          <el-button icon="el-icon-arrow-right" @click="nextImage" title="下一张" :disabled="imageList.length <= 1"></el-button>
          <!-- 仅非1/2模板显示原标注/撤销按钮（实际留空，方便后续扩展） -->
          <template v-if="!['1','2'].includes(labelingTemplate)">
            <el-button icon="el-icon-delete" @click="deleteSelected" title="删除选中" disabled></el-button>
            <el-button icon="el-icon-refresh-left" title="撤销上一步" disabled></el-button>
            <el-button icon="el-icon-refresh-right" title="恢复上一步" disabled></el-button>
          </template>
          <!-- 保留缩放/全屏/重置 -->
          <el-button icon="el-icon-zoom-in" @click="zoomIn" title="放大"></el-button>
          <el-button icon="el-icon-zoom-out" @click="zoomOut" title="缩小"></el-button>
<!--          <el-button icon="el-icon-full-screen" @click="toggleFullScreen" title="页面内全屏" :class="{ active: isFullScreen }"></el-button>-->
<!--          <el-button icon="el-icon-refresh" @click="resetZoom" title="重置视图"></el-button>-->
        </el-button-group>
      </div>

      <div class="header-right">
        <!-- 无效数据标记：保留 -->
        <el-checkbox v-model="isInvalidData" label="标为无效数据"></el-checkbox>
        <!-- 保存按钮组：保留 -->
        <el-button type="primary" @click="saveLabel" class="save-btn">保存</el-button>
        <el-button type="success" @click="saveAndContinue" class="save-btn">保存并继续</el-button>
      </div>
    </div>

    <!-- 主体内容区：适配全屏状态，新增标注结果展示区 -->
    <div class="labeling-main-wrapper" :class="{ fullscreen: isFullScreen }">
      <div class="labeling-main" :class="{ fullscreen: isFullScreen }">
        <!-- 左侧图片分类区：保留原缩放/位置，新增拖拽 -->
        <div class="labeling-image-area">
          <!-- 图片加载中占位 -->
          <div v-if="imageLoading" class="image-loading">
            <el-skeleton :rows="10" animated />
          </div>
          <div v-else ref="labelContainer" class="image-container" @wheel.prevent="handleWheelZoom"
               @mousedown="handleImageMouseDown" @mousemove="handleImageMouseMove" @mouseup="handleImageMouseUp" @mouseleave="handleImageMouseUp">
            <div class="image-wrapper" >
              <img
                ref="labelImage"
                :src="currentImage.filePath"
                alt="分类图片"
                class="label-image"
                @load="onImageLoad"
                @error="onImageError"
                @mousedown.prevent
                style="display: none;"
              />
            </div>
          </div>
          <!-- 图片分页信息：简化，移除标注提示 -->
          <div class="image-pagination" v-if="!imageLoading">
            第 {{ currentImageIndex + 1 }} 张/共 {{ imageList.length }} 张 | 缩放比例：{{ Math.round(zoomScale * 100) }}%
          </div>
        </div>

        <!-- 新增：标注结果展示区（仅1/2模板显示，白底容器） -->
        <div class="label-result-area" v-if="['1','2'].includes(labelingTemplate) && !isFullScreen">
          <div class="result-title">标注结果</div>
          <div class="result-content">
            <div v-if="selectedLabelIds.length === 0" class="no-result">暂无选择标签</div>
            <div class="result-tag" v-for="label in getSelectedLabelNames()" :key="label.id">
              {{ label.name }}
              <i class="el-icon-close" @click="removeSelectedLabel(label.id)"></i>
            </div>
          </div>
        </div>

        <!-- 右侧标签栏：按template控制单选/多选，全屏时隐藏 -->
        <div class="labeling-sidebar" v-show="!isFullScreen">
          <div class="sidebar-title">标签栏</div>
          <!-- 加载状态提示 -->
          <div v-if="labelLoading" class="label-loading">
            <el-skeleton :rows="5" animated />
          </div>
          <!-- 标签列表容器 -->
          <div v-else class="sidebar-content">
            <div class="label-group" v-for="(group, index) in labelGroups" :key="group.id || index">
              <div class="label-group-header" @click="group.expanded = !group.expanded">
                <i class="el-icon" :class="group.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                <span>{{ group.name }} ({{ group.labels.length }})</span>
                <span class="label-count">{{ group.labels.length }}/{{ group.total || group.labels.length }}</span>
              </div>
              <!-- 标签列表：单选/多选区分 -->
              <div class="label-list" v-show="group.expanded">
                <div
                  class="label-item"
                  v-for="(label, labelIndex) in group.labels"
                  :key="label.id || labelIndex"
                  :class="{ active: selectedLabelIds.includes(label.id) }"
                  @click="handleLabelClick(label)"
                >
                  <span class="label-name">#{{ labelIndex + 1 }} {{ label.name }}</span>
                </div>
              </div>
            </div>
            <!-- 无数据提示 -->
            <div v-if="labelGroups.length === 0" class="no-label-data">
              <el-empty description="暂无标签数据"></el-empty>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 移除标注库引入
// import * as AILabelLib from 'ailabel'
// 引入接口请求方法
import {
  getLabelingTaskLabelTreeAPI,
  getLabelPicturesAPI,
  saveLabelingDataAPI
} from '@/api/data/labeling'
import {decryptWithSM4} from "@/utils/sm";

export default {
  name: 'LabelingClassify',
  data() {
    return {
      // 图片相关：保留原逻辑
      imageList: [],
      currentImageIndex: 0,
      currentImage: {},
      imageLoading: false,
      imageLoaded: false,
      // 核心修改：分类用选中标签ID数组（适配单选/多选）
      selectedLabelIds: [],
      // 无效数据标记：保留
      isInvalidData: false,
      // 标签组数据：保留
      labelGroups: [],
      labelLoading: false,
      // 缩放相关：保留原计算逻辑，新增拖拽偏移
      zoomScale: 1.0,
      imgOffsetX: 0, // 图片绘制X偏移（真正的图片移动）
      imgOffsetY: 0, // 图片绘制Y偏移（真正的图片移动）
      // 拖拽状态
      dragState: {
        isDragging: false,
        startX: 0,
        startY: 0,
        startOffsetX: 0,
        startOffsetY: 0
      },
      // 全屏状态：保留
      isFullScreen: false,
      // 任务参数：保留
      labelingTaskId: this.convertToNumber(decryptWithSM4(this.$route.query.labelingTaskId || '')),
      labelingTemplate: decryptWithSM4(this.$route.query.labelingTemplate || '')
    }
  },
  mounted() {
    // 先加载图片，再加载标签树
    this.loadTreeData().then(() => {
      if (this.imageList.length > 0) {
        this.currentImage = this.imageList[this.currentImageIndex]
      }
    })
    this.loadLabelTreeData()
  },
  methods: {
    // 数字转换：保留
    convertToNumber(value) {
      if (!value || value === '' || value === 'undefined' || value === 'null') {
        return '';
      }
      const num = Number(value);
      return isNaN(num) ? '' : num;
    },

    // 加载图片列表：保留原逻辑，移除标注相关存储
    async loadTreeData() {
      try {
        this.imageLoading = true
        let res
        if (this.labelingTaskId) {
          res = await getLabelPicturesAPI({ labelingTaskId: this.labelingTaskId })
          if (res.code === 200 && res.data && Array.isArray(res.data)) {
            this.imageList = res.data.map(item => ({
              id: item.labelingSampleId,
              datasetSampleId: item.datasetSampleId,
              filePath: item.filePath,
              isInvalid: false,
              selectedLabelIds: [] // 分类专用：存储该图片选中的标签ID
            }))
            if (this.imageList.length > 0) {
              this.currentImage = this.imageList[0]
            } else {
              this.$message.info('暂无待分类图片')
            }
          } else {
            this.$message.warning('图片数据加载失败：' + (res.msg || '接口返回异常'))
            this.imageList = []
          }
        }
      } catch (error) {
        console.error('加载图片失败：', error)
        this.$message.error('图片数据加载失败，请刷新重试')
        this.imageList = []
      } finally {
        this.imageLoading = false
      }
    },

    // 加载标签树数据：保留原逻辑
    async loadLabelTreeData() {
      try {
        this.labelLoading = true
        let res
        if (this.labelingTaskId) {
          res = await getLabelingTaskLabelTreeAPI({ labelingTaskId: this.labelingTaskId })
        }
        if (res.code === 200 && res.data) {
          this.labelGroups = res.data.map(group => ({
            ...group,
            expanded: true,
            labels: group.labels || [],
            total: group.total || (group.labels ? group.labels.length : 0)
          }))
        } else {
          this.$message.warning('标签数据加载失败：' + (res.msg || '接口返回异常'))
          this.labelGroups = []
        }
      } catch (error) {
        console.error('加载标签树失败：', error)
        this.$message.error('标签数据加载失败，请刷新重试')
        this.labelGroups = []
      } finally {
        this.labelLoading = false
      }
    },

    // 切换全屏：保留原逻辑，重置拖拽偏移
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen
      if (this.isFullScreen) {
        this.zoomScale = 1.0
        this.imgOffsetX = 0
        this.imgOffsetY = 0
      }
      this.$nextTick(() => {
        this.calcFitScale() // 重新计算适配缩放
      })
    },

    // 图片加载完成：保留原缩放计算，移除标注初始化
    onImageLoad() {
      this.imageLoaded = true
      this.calcFitScale() // 保留原默认缩放计算
      this.imgOffsetX = 0 // 初始化拖拽偏移
      this.imgOffsetY = 0
      // 新增：初始化画布并绘制图片（替代原标注工具的画布）
      this.initImageCanvas()
    },


    initImageCanvas() {
      const container = this.$refs.labelContainer
      const image = this.$refs.labelImage
      if (!container || !image) return

      // 移除旧画布
      const oldCanvas = container.querySelector('.image-canvas')
      if (oldCanvas) oldCanvas.remove()

      // 创建画布（样式不变，仅承载图片，自身不位移）
      const canvas = document.createElement('canvas')
      canvas.className = 'image-canvas'
      canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:10;width:100%;height:100%;'
      canvas.width = container.offsetWidth
      canvas.height = container.offsetHeight
      container.appendChild(canvas)
      this.updateImageCanvas() // 直接调用重绘方法，避免代码冗余
    },

    //  监听缩放/拖拽变化，重绘画布（保证图片跟随缩放/拖拽）
    updateImageCanvas() {
      const container = this.$refs.labelContainer
      const image = this.$refs.labelImage
      const canvas = container.querySelector('.image-canvas')
      if (!container || !image || !canvas) return

      const ctx = canvas.getContext('2d')
      // 重置画布尺寸（适配容器大小）
      canvas.width = container.offsetWidth
      canvas.height = container.offsetHeight
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.save()

      // 核心绘制逻辑（容器不位移，仅图片偏移+缩放，完全保留原居中计算）
      ctx.translate(
        container.offsetWidth / 2 + this.imgOffsetX,  // 容器中心 + 图片X偏移（真正的图片移动）
        container.offsetHeight / 2 + this.imgOffsetY  // 容器中心 + 图片Y偏移（真正的图片移动）
      )
      ctx.scale(this.zoomScale, this.zoomScale) // 原缩放逻辑，不改动
      ctx.translate(-image.naturalWidth / 2, -image.naturalHeight / 2) // 原图片居中逻辑，不改动

      // 绘制图片（仅绘制图片，无任何标注，坐标由上面的偏移控制）
      ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight)
      ctx.restore()
    },

    // 计算图片适配缩放：完全保留原代码，不做任何修改
    calcFitScale() {
      const container = this.$refs.labelContainer
      const image = this.$refs.labelImage
      if (!container || !image) return

      // 容器可视尺寸
      const containerW = container.clientWidth
      const containerH = container.clientHeight

      // 图片原始尺寸
      const imgW = image.naturalWidth
      const imgH = image.naturalHeight

      // 计算适配缩放比例（让图片完整显示，不超出容器）
      const scaleW = containerW / imgW
      const scaleH = containerH / imgH
      this.zoomScale = Math.min(scaleW, scaleH)
      // 限制最小/最大缩放
      this.zoomScale = Math.max(0.1, Math.min(2.0, this.zoomScale))
    },

    // 图片加载失败：保留
    onImageError() {
      this.$message.error(`图片加载失败：${this.currentImage.filePath}`)
      this.imageLoaded = false
    },

    // 滚轮缩放：保留原逻辑，兼容拖拽
    handleWheelZoom(e) {
      e.preventDefault()
      const delta = e.deltaY > 0 ? -0.1 : 0.1
      this.zoomScale = Math.max(0.1, Math.min(2.0, this.zoomScale + delta))
      this.updateImageCanvas() // 新增
    },

    // 新增：图片拖拽-鼠标按下
    handleImageMouseDown(e) {
      e.preventDefault()
      if (e.target === this.$refs.labelContainer || e.target.className.includes('image-wrapper')) {
        this.dragState = {
          isDragging: true,
          startX: e.clientX, // 鼠标初始屏幕X
          startY: e.clientY, // 鼠标初始屏幕Y
          startImgX: this.imgOffsetX, // 图片初始绘制X偏移
          startImgY: this.imgOffsetY  // 图片初始绘制Y偏移
        }
        this.$refs.labelContainer.style.cursor = 'move'
      }
    },

    // 新增：图片拖拽-鼠标移动
    handleImageMouseMove(e) {
      e.preventDefault()
      if (!this.dragState.isDragging) return
      // 鼠标移动的距离 = 新鼠标位置 - 初始鼠标位置
      const moveX = e.clientX - this.dragState.startX
      const moveY = e.clientY - this.dragState.startY
      // 图片新偏移 = 初始图片偏移 + 鼠标移动距离（直接赋值，实时更新）
      this.imgOffsetX = this.dragState.startImgX + moveX
      this.imgOffsetY = this.dragState.startImgY + moveY
      // 实时重绘画布，视觉上就是图片跟随鼠标移动
      this.updateImageCanvas()
    },

    // 新增：图片拖拽-鼠标松开/离开
    handleImageMouseUp() {
      if (this.dragState.isDragging) {
        this.dragState.isDragging = false
        this.$refs.labelContainer.style.cursor = 'default'
      }
    },

    // 放大图片：保留
    zoomIn() {
      this.zoomScale = Math.min(2.0, this.zoomScale + 0.1)
      this.updateImageCanvas() // 新增
    },


    // 缩小图片：保留
    zoomOut() {
      this.zoomScale = Math.max(0.1, this.zoomScale - 0.1)
      this.updateImageCanvas() // 新增
    },

    // 重置视图：缩放重置为适配比例，偏移归0
    resetZoom() {
      this.calcFitScale()
      this.imgOffsetX = 0
      this.imgOffsetY = 0
      this.updateImageCanvas() // 新增
    },


    // 核心：处理标签点击（单选/多选区分）
    handleLabelClick(label) {
      if (!label || !label.id) return
      // template=1：单选（清空原有，仅保留当前）
      if (this.labelingTemplate === '1') {
        this.selectedLabelIds = [label.id]
      }
      // template=2：多选（切换选中状态）
      else if (this.labelingTemplate === '2') {
        if (this.selectedLabelIds.includes(label.id)) {
          this.selectedLabelIds = this.selectedLabelIds.filter(id => id !== label.id)
        } else {
          this.selectedLabelIds.push(label.id)
        }
      }
      // 其他模板：暂不处理
    },

    // 核心：获取选中的标签名称（用于标注结果展示）
    getSelectedLabelNames() {
      const selectedLabels = []
      this.labelGroups.forEach(group => {
        group.labels.forEach(label => {
          if (this.selectedLabelIds.includes(label.id)) {
            selectedLabels.push(label)
          }
        })
      })
      return selectedLabels
    },

    // 核心：移除选中的标签
    removeSelectedLabel(labelId) {
      this.selectedLabelIds = this.selectedLabelIds.filter(id => id !== labelId)
    },

    // 上一张图片：保留，新增清空数据逻辑
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.switchImage(this.currentImageIndex - 1)
      } else {
        this.$message.info('已是第一张！')
      }
    },

    // 下一张图片：保留，新增清空数据逻辑
    nextImage() {
      if (this.currentImageIndex < this.imageList.length - 1) {
        this.switchImage(this.currentImageIndex + 1)
      } else {
        this.$message.info('已是最后一张！')
      }
    },

    // 切换图片：核心改造，清空所有残留数据，移除标注相关
    async switchImage(index) {
      // 检查是否有未保存的分类
      // if (this.selectedLabelIds.length > 0 || this.isInvalidData) {
      //   try {
      //     await this.saveLabel() // 静默保存当前分类
      //   } catch (err) {
      //     const confirm = await this.$confirm('当前图片分类未保存，是否放弃修改并切换？', '提示', {
      //       type: 'warning'
      //     })
      //     if (!confirm) return
      //   }
      // }

      // 切换图片并**清空所有残留数据**
      this.currentImageIndex = index
      this.currentImage = this.imageList[index]
      this.imageLoaded = false
      // 核心清空：选中标签、无效数据、拖拽偏移、缩放
      this.selectedLabelIds = this.currentImage.selectedLabelIds || []
      this.isInvalidData = this.currentImage.isInvalid || false
      this.imgOffsetX = 0
      this.imgOffsetY = 0
      this.zoomScale = 1.0

      // 重新计算适配缩放
      this.$nextTick(() => {
        if (this.$refs.labelImage) {
          this.calcFitScale()
        }
      })
    },

    // 保存当前图片分类数据到本地：新增，替换原标注保存
    saveCurrentLabelData() {
      if (!this.currentImage) return
      this.imageList[this.currentImageIndex] = {
        ...this.currentImage,
        selectedLabelIds: [...this.selectedLabelIds], // 保存选中的标签ID
        isInvalid: this.isInvalidData // 保存无效数据标记
      }
    },

    // 保存分类数据：核心改造，移除标注，适配分类接口
    async saveLabel() {
      // 前置校验
      if (!this.labelingTaskId) {
        this.$message.error('分类任务ID不能为空！');
        return Promise.reject(new Error('任务ID缺失'));
      }
      if (!this.currentImage.id) {
        this.$message.error('图片样本ID不能为空！');
        return Promise.reject(new Error('图片ID缺失'));
      }
      // 非无效数据必须选标签
      if (!this.isInvalidData && this.selectedLabelIds.length === 0) {
        this.$message.error('请选择分类标签后再保存！');
        return Promise.reject(new Error('未选择标签'));
      }

      // 构造分类保存参数（适配原接口，标注数据置空，传递分类标签）
      const saveParams = {
        labelingTaskId: this.labelingTaskId,
        labelingSampleId: this.currentImage.id,
        datasetSampleId: this.currentImage.datasetSampleId || '',
        isInvalidData: this.isInvalidData ? "0" : "1", // 保持原接口字段规则
        labelingDataList: this.selectedLabelIds.map(labelId => ({
          labelId: labelId
        }))
      };

      // 调用保存接口
      const loadingInstance = this.$loading({ text: '保存中...' });
      try {
        console.log('saveParams',saveParams)
        const res = await saveLabelingDataAPI(saveParams);
        if (res.code === 200) {
          this.$message.success('分类保存成功！');
          this.saveCurrentLabelData(); // 更新本地数据
          // ===== 新增核心代码开始 =====
          await this.loadTreeData(); // 刷新图片列表（等待加载完成）
          // 刷新后恢复当前索引，防止越界（比如图片被移走后列表变短）
          this.currentImageIndex = Math.min(this.currentImageIndex, this.imageList.length - 1);
          // 重新赋值当前图片
          this.currentImage = this.imageList[this.currentImageIndex] || {};
          // 恢复当前图片的选中标签和无效标记，保证页面显示一致
          this.selectedLabelIds = this.currentImage.selectedLabelIds || [];
          this.isInvalidData = this.currentImage.isInvalid || false;
          // ===== 新增核心代码结束 =====
          return Promise.resolve(res);
        } else {
          const errorMsg = '保存失败：' + (res.msg || '接口返回异常');
          this.$message.error(errorMsg);
          return Promise.reject(new Error(errorMsg));
        }
      } catch (err) {
        console.error('保存分类接口调用失败：', err);
        this.$message.error('保存失败，请重试！');
        return Promise.reject(err);
      } finally {
        loadingInstance.close();
      }
    },

    // 保存并继续：保留，清空残留数据
    async saveAndContinue() {
      try {
        await this.saveLabel();
        if (this.currentImageIndex < this.imageList.length - 1) {
          this.switchImage(this.currentImageIndex + 1) // 切换时自动清空数据
        } else {
          this.$message.info('已是最后一张图片！');
          // 最后一张保存后，清空当前页面数据
          this.selectedLabelIds = []
          this.isInvalidData = false
          this.imgOffsetX = 0
          this.imgOffsetY = 0
          this.calcFitScale()
        }
      } catch (err) {
        this.$message.error('保存失败，无法继续');
        console.error(err);
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 全局容器：保留
.labeling-page-container {
  width: 100%;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

// 顶部操作栏：保留，移除标注按钮样式
.labeling-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-shrink: 0;
  z-index: 100;

  .header-left {
    display: flex;
    align-items: center;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 15px;

    .save-btn {
      margin-left: 10px;
    }
  }

  .el-button-group .el-button.active {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
  }
}

// 主体内容外层容器：保留
.labeling-main-wrapper {
  height: 100%;
  overflow: hidden;
  padding: 15px;
  transition: all 0.3s ease;

  &.fullscreen {
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #000;
  }
}

// 主体内容区：新增标注结果区布局，调整flex
.labeling-main {
  display: flex;
  gap: 15px;
  height: 100%;
  min-height: 0;
  transition: all 0.3s ease;

  &.fullscreen {
    gap: 0;
  }

  // 左侧图片分类区：保留原样式，调整鼠标样式
  .labeling-image-area {
    flex: 2;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;

    .image-loading {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .labeling-main.fullscreen & {
      flex: 1;
      padding: 0;
      background-color: #000;
      border-radius: 0;
      height: 100vh;
    }

    .image-container {
      flex: 1;
      position: relative;
      overflow: hidden;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      min-height: 400px;
      cursor: default; // 初始默认光标
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f0f0f0;
      padding: 0;
      box-sizing: border-box;

      .labeling-main.fullscreen & {
        border: none;
        border-radius: 0;
        min-height: 100%;
        background-color: #000;
      }

      .image-wrapper {
        position: relative;
        transition: transform 0.2s ease;
        max-width: 100%;
        max-height: 100%;

        .label-image {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          display: block;
          margin: 0 auto;
        }
      }
    }

    .image-pagination {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;

      .labeling-main.fullscreen & {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        padding: 8px 15px;
        border-radius: 4px;
        margin-top: 0;

        .warning {
          color: #ff4d4f;
        }
      }

      .warning {
        color: #ff4d4f;
        font-weight: 500;
      }
    }
  }

  // 新增：标注结果展示区样式
  .label-result-area {
    width: 220px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid #e6e6e6;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    .result-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e6e6e6;
    }

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

      .no-result {
        text-align: center;
        color: #999;
        padding: 20px 0;
        font-size: 14px;
      }

      .result-tag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        background-color: #e6f7ff;
        border-radius: 4px;
        margin-bottom: 8px;
        font-size: 14px;

        .el-icon-close {
          color: #ff4d4f;
          cursor: pointer;
          font-size: 12px;
          margin-left: 8px;
        }
      }
    }
  }

  // 右侧标签栏：调整宽度，优化单选/多选选中样式
  .labeling-sidebar {
    width: 260px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border: 1px solid #e6e6e6;

    .sidebar-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e6e6e6;
    }

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

      .label-group {
        margin-bottom: 15px;

        .label-group-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;
          padding: 8px 10px;
          background-color: #f5f7fa;
          border-radius: 4px;
          margin-bottom: 8px;

          .el-icon {
            margin-right: 8px;
            font-size: 12px;
          }

          .label-count {
            font-size: 12px;
            color: #999;
          }
        }

        .label-list {
          padding-left: 10px;

          .label-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;

            &:hover {
              background-color: #f5f7fa;
            }

            &.active {
              background-color: #1890ff;
              color: #fff;
              border: none;
            }

            .label-name {
              flex: 1;
            }
          }
        }
      }
    }
  }
}

// 无数据提示：保留
.no-label-data {
  padding: 20px 0;
  text-align: center;
}

// 弹窗样式：保留（虽移除新增标签弹窗，保留基础样式）
::v-deep .el-dialog__body {
  padding: 20px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
}

// 滚动条样式：保留
::v-deep .el-scrollbar__bar {
  width: 6px;
  height: 6px;
}

::v-deep .el-scrollbar__thumb {
  background-color: #ccc;
  border-radius: 3px;
}
</style>
