<template>
  <div class="labeling-page-container">
    <!-- 顶部操作栏：仅保留必要的导航和缩放按钮 -->
    <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>
          <!-- 仅保留缩放相关按钮 -->
          <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-refresh" @click="resetZoom" title="重置视图"></el-button>
        </el-button-group>
      </div>

      <div class="header-right">
        <!-- 移除所有保存/无效标记按钮 -->
      </div>
    </div>

    <!-- 主体内容区：移除全屏相关逻辑 -->
    <div class="labeling-main-wrapper">
      <div class="labeling-main">
        <!-- 左侧图片标注区：仅保留图片展示和标注回显 -->
        <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">
            <div
              v-if="currentImage.isInvalidData === '0'"
              class="invalid-data-tip"
            >
              无效数据
            </div>
            <div class="image-wrapper" :style="{ transform: 'none', transformOrigin: 'center center' }">
              <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>

        <!-- 右侧标签栏：保留但仅展示标注信息，移除编辑功能 -->
        <div class="labeling-sidebar">
          <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">
                <i class="el-icon el-icon-arrow-down"></i>
                <span>{{ group.name }} ({{ group.labels.length }})</span>
                <span class="label-count">{{ group.labels.length }}</span>
              </div>
              <!-- 标签列表：仅展示，无点击事件 -->
              <div class="label-list">
                <div
                  class="label-item"
                  v-for="(label, labelIndex) in group.labels"
                  :key="label.id || labelIndex"
                >
                  <span class="label-name">#{{ labelIndex + 1 }} {{ label.name }} </span>
                  <span class="shape-count" v-if="label.shapeIds && label.shapeIds.length">
                    ({{ label.shapeIds.length }}个标注)
                  </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,
  getLabelPicturesDetailAPI // 替换后的详情接口
} from '@/api/data/labeling'
import {decryptWithSM4} from "@/utils/sm";

export default {
  name: 'LabelingDetail',
  data() {
    return {
      shapeColorMap: {
        rect: '#00ff00',     // 矩形 - 绿色
        polygon: '#0099ff',  // 多边形 - 蓝色
        circle: '#ff9900'    // 圆形 - 橙色
      },
      // 图片列表（从详情接口获取）
      imageList: [],
      currentImageIndex: 0,
      currentImage: {},
      imageLoading: false,
      // 仅保留展示用的标签组数据
      labelGroups: [],
      labelLoading: false,
      ailabelInstance: null,
      zoomScale: 1.0,
      // 移除所有编辑相关状态
      drawType: '',
      selectedLabelId: '',
      shapeLabelMap: {},
      labelShapeMap: {},
      polygonPoints: [],
      undoStack: [],
      redoStack: [],
      tempDrawData: {},
      tempShapeId: '',
      isFullScreen: false,
      labelingTaskId: this.convertToNumber(decryptWithSM4(this.$route.query.labelingTaskId || '')),
    }
  },
  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 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
      }
    },

    // 加载详情图片列表
    async loadTreeData() {
      try {
        this.imageLoading = true
        let res
        if (this.labelingTaskId) {
          // 调用详情接口
          res = await getLabelPicturesDetailAPI({ labelingTaskId: this.labelingTaskId })
          console.log('标注详情接口返回：', res)

          if (res.code === 200 && res.data && Array.isArray(res.data)) {
            // 处理后端返回的扁平数据，按图片分组
            const imageMap = {}

            // 遍历所有标注数据，按labeling_sample_id分组
            res.data.forEach(item => {
              const key = item.labelingSampleId
              // 初始化图片信息
              if (!imageMap[key]) {
                imageMap[key] = {
                  id: item.labelingSampleId,
                  datasetSampleId: item.labelingSampleId,
                  filePath: item.filePath,
                  isInvalidData: item.isInvalidData,
                  shapes: [], // 该图片的所有标注
                  shapeLabelMap: {}, // 标注ID-标签ID映射
                  labelShapeMap: {} // 标签ID-标注ID列表映射
                }
              }

              // 解析标注坐标
              let shapeData = {}
              try {
                shapeData = JSON.parse(item.labelingCoordinate || '{}')
              } catch (e) {
                console.warn('解析标注坐标失败：', e)
                shapeData = {}
              }

              // 生成标注ID
              const shapeId = `shape_${item.labelingSampleId}_${item.labelId}_${Date.now()}`

              // 构造标注形状数据
              const shape = {
                id: shapeId,
                type: this.getShapeTypeByBoxType(item.boxType), // 转换box_type为标注类型
                x: shapeData.x || 0,
                y: shapeData.y || 0,
                width: shapeData.width || 0,
                height: shapeData.height || 0,
                radius: shapeData.radius || 0,
                points: shapeData.points || [],
                labelId: item.labelId,
                textContent: item.textContent || '',
                color: item.labelingColor || this.shapeColorMap[this.getShapeTypeByBoxType(item.boxType)]
              }

              // 添加到图片的标注列表
              imageMap[key].shapes.push(shape)

              // 维护映射关系
              imageMap[key].shapeLabelMap[shapeId] = item.labelId
              if (!imageMap[key].labelShapeMap[item.labelId]) {
                imageMap[key].labelShapeMap[item.labelId] = []
              }
              imageMap[key].labelShapeMap[item.labelId].push(shapeId)
            })

            // 转换为数组
            this.imageList = Object.values(imageMap)

            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
      }
    },

    // 转换box_type为前端标注类型
    getShapeTypeByBoxType(boxType) {
      switch (boxType) {
        case "1": return 'rect'     // 矩形
        case "2": return 'polygon'  // 多边形
        case "3": return 'circle'   // 圆形
        default: return 'rect'
      }
    },

    // 图片加载完成：初始化标注展示
    onImageLoad() {
      this.calcFitScale()
      if (this.ailabelInstance?.setScale) {
        this.ailabelInstance.setScale(this.zoomScale)
      }
      this.initAILabel()
      this.$nextTick(() => {
        if (this.ailabelInstance?.redrawMainCanvas) {
          this.ailabelInstance.redrawMainCanvas()
        }
      })
    },

    // 计算适配缩放比例
    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}`)
    },

    // 初始化标注工具（仅展示，移除编辑功能）
    initAILabel() {
      const container = this.$refs.labelContainer
      const image = this.$refs.labelImage
      if (!container || !image || !this.currentImage.filePath) return

      // 销毁旧实例
      this.destroyAILabel()

      try {
        let instance = null
        // 适配标注库实例化方式
        if (AILabelLib.create) {
          instance = AILabelLib.create({
            el: container,
            image: image,
            config: {
              enableRect: false,    // 禁用编辑
              enablePolygon: false, // 禁用编辑
              enableCircle: false,  // 禁用编辑
              enableDrag: false,    // 禁用拖动
              enableScale: false,   // 禁用缩放
              style: {
                rect: { strokeStyle: '#00ff00', lineWidth: 2, fillStyle: 'rgba(0,255,0,0.1)' },
                polygon: { strokeStyle: '#0099ff', lineWidth: 2, fillStyle: 'rgba(0,153,255,0.1)' },
                circle: { strokeStyle: '#ff9900', lineWidth: 2, fillStyle: 'rgba(255,153,0,0.1)' }
              },
              fit: 'cover'
            }
          })
        } else if (AILabelLib.init) {
          instance = AILabelLib.init(container, image, { enableRect: false, enablePolygon: false, enableCircle: false })
        } else if (window.AILabel) {
          instance = window.AILabel({ el: container, image: image })
        } else {
          instance = this.createSimpleLabelTool(container, image)
        }

        if (instance) {
          this.ailabelInstance = instance
          // 设置缩放
          if (instance.setScale) instance.setScale(this.zoomScale)
          // 加载标注数据（仅展示）
          this.loadLabelData()
        }
      } catch (e) {
        console.error('标注工具初始化失败：', e)
        this.$message.error(`初始化失败：${e.message}`)
      }
    },

    // 销毁标注实例
    destroyAILabel() {
      if (this.ailabelInstance) {
        try {
          this.ailabelInstance.destroy?.() || this.ailabelInstance.clear?.()
        } catch (e) {}
        this.ailabelInstance = null
      }
    },

    // 自研简易标注工具（仅展示，移除所有编辑功能）
    createSimpleLabelTool(container, image) {
      const tool = {
        el: container,
        image,
        shapes: [],
        selectedShape: null,
        mainCanvas: null,
        tempCanvas: null,
        mainCtx: null,
        tempCtx: null,
        zoomScale: 1.0,

        init() {
          // 主画布（仅展示标注）
          const mainCanvas = document.createElement('canvas')
          mainCanvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:10;width:100%;height:100%;'
          mainCanvas.width = container.offsetWidth
          mainCanvas.height = container.offsetHeight
          container.appendChild(mainCanvas)
          this.mainCanvas = mainCanvas
          this.mainCtx = mainCanvas.getContext('2d')

          // 监听容器大小变化
          window.addEventListener('resize', () => this.resizeCanvas())

          // 绘制图片和标注
          this.redrawMainCanvas()

          return this
        },

        // 调整画布大小
        resizeCanvas() {
          this.mainCanvas.width = this.el.offsetWidth
          this.mainCanvas.height = this.el.offsetHeight
          this.redrawMainCanvas()
        },

        // 绘制临时形状（空实现，移除编辑功能）
        drawTempShape() {},

        // 取消绘制（空实现）
        cancelDrawing() {},

        // 设置绘制类型（空实现）
        setDrawType() {},

        // 设置缩放
        setScale(scale) {
          this.zoomScale = scale
          this.resizeCanvas()
        },

        // 绘制形状（仅展示）
        drawRect(x, y, w, h) {
          const shape = { id: `shape_${Date.now()}`, type: 'rect', x, y, width: w, height: h }
          this.shapes.push(shape)
          this.redrawMainCanvas()
          return shape.id
        },

        drawCircle(x, y, radius) {
          const shape = { id: `shape_${Date.now()}`, type: 'circle', x, y, radius }
          this.shapes.push(shape)
          this.redrawMainCanvas()
          return shape.id
        },

        drawPolygon(points) {
          const shape = { id: `shape_${Date.now()}`, type: 'polygon', points }
          this.shapes.push(shape)
          this.redrawMainCanvas()
          return shape.id
        },

        // 清空形状
        clearShapes() {
          this.shapes = []
          this.mainCtx.clearRect(0, 0, this.mainCanvas.width, this.mainCanvas.height)
        },

        // 获取所有形状
        getShapes() {
          return [...this.shapes]
        },

        // 重绘画布（仅展示）
        redrawMainCanvas() {
          this.mainCtx.clearRect(0, 0, this.mainCanvas.width, this.mainCanvas.height)
          this.mainCtx.save()

          // 居中逻辑
          this.mainCtx.translate(
            this.el.offsetWidth / 2,
            this.el.offsetHeight / 2
          )
          this.mainCtx.scale(this.zoomScale, this.zoomScale)
          if (this.image && this.image.naturalWidth && this.image.naturalHeight) {
            this.mainCtx.translate(
              -this.image.naturalWidth / 2,
              -this.image.naturalHeight / 2
            )
            // 绘制图片
            this.mainCtx.drawImage(
              this.image,
              0, 0,
              this.image.naturalWidth,
              this.image.naturalHeight
            )
          }

          // 绘制所有标注（仅展示）
          this.shapes.forEach(s => {
            if (s.type === 'rect') {
              this.mainCtx.strokeStyle = s.color || '#00ff00'
              this.mainCtx.fillStyle = 'rgba(0,255,0,0.1)'
              this.mainCtx.strokeRect(s.x, s.y, s.width, s.height)
              this.mainCtx.fillRect(s.x, s.y, s.width, s.height)
            } else if (s.type === 'circle') {
              this.mainCtx.strokeStyle = s.color || '#ff9900'
              this.mainCtx.fillStyle = 'rgba(255,153,0,0.1)'
              this.mainCtx.beginPath()
              this.mainCtx.arc(s.x, s.y, s.radius, 0, Math.PI * 2)
              this.mainCtx.closePath()
              this.mainCtx.fill()
              this.mainCtx.stroke()
            } else if (s.type === 'polygon') {
              this.mainCtx.strokeStyle = s.color || '#0099ff'
              this.mainCtx.fillStyle = 'rgba(0,153,255,0.1)'
              this.mainCtx.beginPath()
              s.points.forEach((point, idx) => {
                idx === 0 ? this.mainCtx.moveTo(point.x, point.y) : this.mainCtx.lineTo(point.x, point.y)
              })
              this.mainCtx.closePath()
              this.mainCtx.fill()
              this.mainCtx.stroke()
            }
          })

          this.mainCtx.restore()
        },

        // 事件绑定（空实现）
        on() {},

        // 形状数据操作（仅读取）
        setShapeData(id, data) {
          const shape = this.shapes.find(s => s.id === id)
          if (shape) Object.assign(shape, data)
        },

        getShapeData(id) {
          return this.shapes.find(s => s.id === id) || {}
        },

        // 销毁
        destroy() {
          this.mainCanvas?.remove()
          window.removeEventListener('resize', this.resizeCanvas)
        }
      }
      return tool.init()
    },

    // 滚轮缩放
    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))

      if (this.ailabelInstance?.setScale) {
        this.ailabelInstance.setScale(this.zoomScale)
      }
    },

    // 加载标注数据（仅展示）
    loadLabelData() {
      if (!this.ailabelInstance || !this.currentImage) return

      // 清空现有状态
      this.ailabelInstance.clearShapes?.() || this.ailabelInstance.reset?.()

      // 恢复映射关系
      if (this.currentImage.shapeLabelMap) {
        this.shapeLabelMap = JSON.parse(JSON.stringify(this.currentImage.shapeLabelMap))
      }
      if (this.currentImage.labelShapeMap) {
        this.labelShapeMap = JSON.parse(JSON.stringify(this.currentImage.labelShapeMap))
      }

      // 重新绘制标注
      const shapes = this.currentImage.shapes || []
      shapes.forEach(shapeData => {
        try {
          let shapeId = ''
          if (shapeData.type === 'rect' && shapeData.x !== undefined) {
            shapeId = this.ailabelInstance.drawRect?.(shapeData.x, shapeData.y, shapeData.width, shapeData.height) || shapeData.id
          } else if (shapeData.type === 'polygon' && shapeData.points && shapeData.points.length >= 3) {
            shapeId = this.ailabelInstance.drawPolygon?.(shapeData.points) || shapeData.id
          } else if (shapeData.type === 'circle' && shapeData.radius !== undefined) {
            shapeId = this.ailabelInstance.drawCircle?.(shapeData.x, shapeData.y, shapeData.radius) || shapeData.id
          }

          // 绑定标注样式和数据
          if (shapeId) {
            this.ailabelInstance.setShapeData?.(shapeId, {
              color: shapeData.color || this.shapeColorMap[shapeData.type]
            })
          }
        } catch (e) {
          console.warn('绘制标注失败：', e)
        }
      })
    },

    // 放大图片
    zoomIn() {
      this.zoomScale = Math.min(2.0, this.zoomScale + 0.1)
      if (this.ailabelInstance?.setScale) {
        this.ailabelInstance.setScale(this.zoomScale)
      }
    },

    // 缩小图片
    zoomOut() {
      this.zoomScale = Math.max(0.5, this.zoomScale - 0.1)
      if (this.ailabelInstance?.setScale) {
        this.ailabelInstance.setScale(this.zoomScale)
      }
    },

    // 重置缩放
    resetZoom() {
      this.zoomScale = 1.0
      if (this.ailabelInstance?.setScale) {
        this.ailabelInstance.setScale(this.zoomScale)
      }
    },

    // 上一张图片
    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('已是最后一张！')
      }
    },

    // 切换图片
    switchImage(index) {
      // 切换到新图片
      this.currentImageIndex = index
      this.currentImage = this.imageList[index]
      this.selectedLabelId = ''
      this.drawType = ''
      this.polygonPoints = []

      // 重新初始化标注工具
      this.$nextTick(() => {
        this.initAILabel()
      })
    },

    // 移除所有编辑相关方法（保留空实现避免报错）
    bindShapeToLabel() {},
    confirmShapeLabel() {},
    handleShapeSelected() {},
    handleShapeDeleted() {},
    selectLabel() {},
    findShapeIdsByLabelId() { return [] },
    findLabelById() { return null },
    removeLabelById() {},
    confirmAddLabel() {},
    deleteSelected() {},
    saveCurrentLabelData() {},
    saveLabel() {},
    saveAndContinue() {},
    isShapeOutOfImage() { return false },
    recordState() {},
    undo() {},
    redo() {},
    toggleFullScreen() {},
    handleContainerMouseDown() {}
  }
}
</script>

<style scoped lang="scss">
// 全局容器
.labeling-page-container {
  width: 100%;
  height: 92vh;
  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;
  }

  .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;
}

// 主体内容区
.labeling-main {
  display: flex;
  gap: 20px;
  height: 100%;
  min-height: 0;
  transition: all 0.3s ease;

  // 左侧图片标注区
  .labeling-image-area {
    flex: 1;
    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;
    }

    .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;

      .invalid-data-tip {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 999; // 确保层级最高不被遮挡
        // 白色底 + 80%不透明度（可调整0-1之间的数值）
        background-color: rgba(255, 255, 255, 0.8);
        color: #ff0000; // 纯红色文字，对比鲜明
        // 放大提示框：增加内边距、字体大小
        padding: 8px 16px; // 上下8px，左右16px（原4px 10px）
        font-size: 16px; // 字体放大到16px（原14px）
        font-weight: 600; // 字体加粗（比bold更柔和）
        border-radius: 6px; // 圆角放大，更圆润
        pointer-events: none; // 不影响鼠标操作
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 轻微阴影，提升立体感
        min-width: 120px; // 最小宽度，避免文字挤在一起
        text-align: center; // 文字居中，更美观
      }

      .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;
    }
  }

  // 右侧标签栏
  .labeling-sidebar {
    width: 300px;
    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;
          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;
            justify-content: space-between;
            padding: 8px 10px;
            margin-bottom: 5px;
            border-radius: 4px;
            background-color: #f5f7fa;

            .label-name {
              font-size: 14px;
              color: #333;
              flex: 1;
            }

            .shape-count {
              font-size: 12px;
              color: #999;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

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

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