<template>
  <div class="app-container">
    <!-- 搜索和操作区域 -->
    <div class="search-container">
      <el-card shadow="never" class="search-card">
        <div class="search-form">
          <el-form :inline="true" :model="searchForm" class="search-form-inline">
            <el-form-item label="摄像机名称">
              <el-input
                  v-model="searchForm.name"
                  placeholder="请输入摄像机名称"
                  clearable
                  @keyup.enter="handleSearch"
                  style="width: 200px"
              />
            </el-form-item>
<!--            <el-form-item label="监控点类型">
              <el-select
                  v-model="searchForm.cameraType"
                  placeholder="请选择类型"
                  clearable
                  style="width: 150px"
              >
                <el-option label="全部" value="" />
                <el-option label="枪机" :value="0" />
                <el-option label="半球" :value="1" />
                <el-option label="快球" :value="2" />
                <el-option label="带云台枪机" :value="3" />
              </el-select>
            </el-form-item>-->
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">
                搜索
              </el-button>
              <el-button icon="Refresh" @click="resetSearch">
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
<!--        <div class="search-actions">
          <el-button type="primary" icon="Refresh" @click="getCameraList" class="refresh-btn">
            <span>刷新列表</span>
          </el-button>
          <div class="camera-stats">
            <span class="stat-item">
              <i class="el-icon-video-camera"></i>
              总计 <span class="stat-number">{{ cameraTotal }}</span> 个摄像机
            </span>
          </div>
        </div>-->
      </el-card>
    </div>

    <!-- 摄像机列表 -->
    <el-card shadow="never" class="table-card">
      <el-table
          v-loading="cameraLoading"
          :data="cameraList"
          stripe
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          class="camera-table"
      >
        <el-table-column label="摄像机信息" min-width="300">
          <template #default="scope">
            <div class="camera-info">
              <div class="camera-name">{{ scope.row.name }}</div>
              <div class="camera-code">编号：{{ scope.row.indexCode }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="设备详情" min-width="200">
          <template #default="scope">
            <div class="device-details">
              <el-tag
                  :type="getCameraTypeTagType(scope.row.cameraType)"
                  size="small"
                  effect="plain"
              >
                {{ getCameraTypeName(scope.row.cameraType) }}
              </el-tag>
              <span class="detail-item">通道数 {{ scope.row.chanNum }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="技术参数" min-width="200">
          <template #default="scope">
            <div class="tech-params">
              <span class="param-item">
                <i class="el-icon-connection"></i>
                {{ getTransTypeName(scope.row.transType) }}
              </span>
              <span class="param-item">
                <i class="el-icon-folder"></i>
                {{ getRecordLocationName(scope.row.recordLocation) }}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="区域位置" min-width="250">
          <template #default="scope">
            <div class="location-info">
              <div class="region-name">{{ scope.row.regionName }}</div>
              <div class="region-path">{{ formatRegionPath(scope.row.regionPathName) }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="180">
          <template #default="scope">
            <span class="time-text">{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                  type="primary"
                  size="small"
                  icon="VideoPlay"
                  @click="handleVideoPreview(scope.row)"
                  class="action-btn preview-btn"
              >
                实时预览
              </el-button>
              <el-button
                  size="small"
                  icon="InfoFilled"
                  @click="handleCameraDetail(scope.row)"
                  class="action-btn detail-btn"
              >
                详情
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="cameraTotal > 0"
          :total="cameraTotal"
          v-model:page="cameraQuery.pageNo"
          v-model:limit="cameraQuery.pageSize"
          @pagination="getCameraList"
          class="pagination-wrapper"
      />
    </el-card>

    <!-- 实时视频预览抽屉 -->
    <el-drawer
        v-model="videoVisible"
        :title="currentCamera.name"
        direction="rtl"
        size="70%"
        class="video-drawer"
    >
      <div class="video-wrapper">
        <!-- 视频播放区域 -->
        <div class="video-player-container">
          <div class="video-header">
            <h3 class="video-title">
              <i class="el-icon-video-camera"></i>
              实时画面
            </h3>
            <el-button type="success" size="small" icon="Camera" @click="takeSnapshot">
              抓拍
            </el-button>
          </div>
          <div class="video-player">
            <iframe
                v-if="currentVideoUrl"
                :src="currentVideoUrl"
                class="video-iframe"
                allowfullscreen
            ></iframe>
            <div v-else class="video-placeholder">
              <i class="el-icon-video-camera"></i>
              <p>正在加载视频流...</p>
            </div>
          </div>
        </div>

        <!-- 摄像机信息展示 -->
        <div class="camera-details-panel">
          <h4 class="panel-title">摄像机信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">摄像机名称</span>
              <span class="info-value">{{ currentCamera.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">设备编号</span>
              <span class="info-value">{{ currentCamera.indexCode }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">监控点类型</span>
              <span class="info-value">
                <el-tag
                    :type="getCameraTypeTagType(currentCamera.cameraType)"
                    size="small"
                >
                  {{ getCameraTypeName(currentCamera.cameraType) }}
                </el-tag>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">通道数</span>
              <span class="info-value">{{ currentCamera.chanNum }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">传输协议</span>
              <span class="info-value">{{ getTransTypeName(currentCamera.transType) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">录像位置</span>
              <span class="info-value">{{ getRecordLocationName(currentCamera.recordLocation) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 摄像机详情抽屉 -->
    <el-drawer
        v-model="detailVisible"
        title="摄像机详细信息"
        direction="rtl"
        size="50%"
        class="detail-drawer"
    >
      <div class="detail-wrapper">
        <div class="detail-section">
          <h4 class="section-title">基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">摄像机名称</span>
              <span class="detail-value">{{ currentCamera.name }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">摄像机编号</span>
              <span class="detail-value">{{ currentCamera.indexCode }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">外部编号</span>
              <span class="detail-value">{{ currentCamera.externalIndexCode || '无' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">资源类型</span>
              <span class="detail-value">{{ currentCamera.resourceType }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">技术参数</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">监控点类型</span>
              <span class="detail-value">
                <el-tag
                    :type="getCameraTypeTagType(currentCamera.cameraType)"
                    size="small"
                >
                  {{ getCameraTypeName(currentCamera.cameraType) }}
                </el-tag>
              </span>
            </div>
            <div class="detail-item">
              <span class="detail-label">通道类型</span>
              <span class="detail-value">{{ currentCamera.channelType }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">传输类型</span>
              <span class="detail-value">{{ getTransTypeName(currentCamera.transType) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">协议类型</span>
              <span class="detail-value">{{ currentCamera.treatyType }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">解码标签</span>
              <span class="detail-value">{{ currentCamera.decodeTag }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">录像位置</span>
              <span class="detail-value">{{ getRecordLocationName(currentCamera.recordLocation) }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">位置信息</h4>
          <div class="detail-grid">
<!--            <div class="detail-item full-width">
              <span class="detail-label">安装位置</span>
              <span class="detail-value">{{ currentCamera.installLocation || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">经度</span>
              <span class="detail-value">{{ currentCamera.longitude || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">纬度</span>
              <span class="detail-value">{{ currentCamera.latitude || '未设置' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">海拔</span>
              <span class="detail-value">{{ currentCamera.elevation || '未设置' }}</span>
            </div>-->
            <div class="detail-item">
              <span class="detail-label">所属区域</span>
              <span class="detail-value">{{ currentCamera.regionName }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">区域路径</span>
              <span class="detail-value">{{ formatRegionPath(currentCamera.regionPathName) }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">功能能力</h4>
          <div class="detail-grid">
            <div class="detail-item full-width">
              <span class="detail-label">支持功能</span>
              <span class="detail-value">{{ formatCapabilities(currentCamera.capability) }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4 class="section-title">其他信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="detail-label">父级编号</span>
              <span class="detail-value">{{ currentCamera.parentIndexCode }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">级联编码</span>
              <span class="detail-value">{{ currentCamera.cascadeCode || '无' }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">区域编号</span>
              <span class="detail-value">{{ currentCamera.regionIndexCode }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">排序号</span>
              <span class="detail-value">{{ currentCamera.disOrder }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">创建时间</span>
              <span class="detail-value">{{ parseTime(currentCamera.createTime) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">更新时间</span>
              <span class="detail-value">{{ parseTime(currentCamera.updateTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup name="Spafjkxt">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

const { proxy } = getCurrentInstance()

// 搜索表单
const searchForm = reactive({
  name: '',
  cameraType: ''
})

// 摄像机查询相关
const cameraQuery = reactive({
  pageNo: 1,
  pageSize: 10
})
const cameraList = ref([])
const cameraTotal = ref(0)
const cameraLoading = ref(false)

// 视频预览相关
const videoVisible = ref(false)
const currentCamera = ref({})
const currentVideoUrl = ref('')

// 详情相关
const detailVisible = ref(false)

// 查询摄像机列表
function getCameraList() {
  cameraLoading.value = true

  const params = {
    pageNo: cameraQuery.pageNo,
    pageSize: cameraQuery.pageSize
  }

  // 添加搜索条件
  if (searchForm.name) {
    params.name = searchForm.name
  }
  if (searchForm.cameraType !== '') {
    params.cameraType = searchForm.cameraType
  }

  axios.get(`${__LOCAL_API__}/Hikvision/getCameraSearch`, {
    params: params
  }).then(response => {
    if (response.data.code === 200) {
      cameraList.value = response.data.data.list
      cameraTotal.value = response.data.data.total
    }
    cameraLoading.value = false
  }).catch(error => {
    console.error('获取摄像机列表失败:', error)
    cameraLoading.value = false
    proxy.$modal.msgError('获取摄像机列表失败')
  })
}

// 搜索
function handleSearch() {
  cameraQuery.pageNo = 1
  getCameraList()
}

// 重置搜索
function resetSearch() {
  searchForm.name = ''
  searchForm.cameraType = ''
  handleSearch()
}

// 实时视频预览
function handleVideoPreview(row) {
  currentCamera.value = row
  videoVisible.value = true
  // 使用indexCode作为摄像机标识
  currentVideoUrl.value = `${__LOCAL_API__}/Hikvision/getMonitoring?cameraIndexCode=${row.indexCode}`
}

// 查看摄像机详情
function handleCameraDetail(row) {
  currentCamera.value = row
  detailVisible.value = true
}

// 抓拍
function takeSnapshot() {
  proxy.$modal.msgSuccess('抓拍成功，图片已保存')
}

// 时间格式化
function parseTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 获取摄像机类型名称
function getCameraTypeName(type) {
  const typeMap = {
    0: '枪机',
    1: '半球',
    2: '快球',
    3: '带云台枪机'
  }
  return typeMap[type] || '未知类型'
}

// 获取摄像机类型标签颜色
function getCameraTypeTagType(type) {
  const typeMap = {
    0: 'primary',
    1: 'success',
    2: 'warning',
    3: 'danger'
  }
  return typeMap[type] || 'info'
}

// 获取传输类型名称
function getTransTypeName(type) {
  const typeMap = {
    0: 'UDP',
    1: 'TCP'
  }
  return typeMap[type] || 'TCP'
}

// 获取录像位置名称
function getRecordLocationName(location) {
  const locationMap = {
    '0': '中心存储',
    '1': '设备存储'
  }
  return locationMap[location] || '未知'
}

// 格式化区域路径
function formatRegionPath(path) {
  if (!path) return ''
  // 将路径按/分割，过滤空值，返回最后两级
  const parts = path.split('/').filter(p => p)
  if (parts.length > 2) {
    return `${parts[parts.length - 2]} / ${parts[parts.length - 1]}`
  }
  return parts.join(' / ')
}

// 格式化能力集
function formatCapabilities(capability) {
  if (!capability) return '无'

  const capMap = {
    '@vca_resource@': '智能分析',
    '@event_audio@': '音频事件',
    '@io@': 'IO控制',
    '@event_face@': '人脸事件',
    '@event_gis@': 'GIS事件',
    '@event_rule@': '规则事件',
    '@VoiceTalk@': '语音对讲',
    '@gis@': 'GIS定位',
    '@face@': '人脸识别',
    '@record@': '录像',
    '@heop_patch_upgrade@': '热补丁升级',
    '@vss@': '视频存储',
    '@event_io@': 'IO事件',
    '@net@': '网络',
    '@maintenance@': '维护',
    '@event_device@': '设备事件',
    '@status@': '状态监控'
  }

  const caps = []
  for (const [key, value] of Object.entries(capMap)) {
    if (capability.includes(key)) {
      caps.push(value)
    }
  }

  return caps.length > 0 ? caps.join('、') : '基础功能'
}

// 初始化
onMounted(() => {
  getCameraList()
})
</script>

<style scoped>
/* 全局样式 */
.app-container {
  padding: 0;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

/* 搜索区域 */
.search-container {
  padding: 0 20px;
  margin-bottom: 1px;
}

.search-card {
  border-radius: 12px;
  border: none;
}

.search-card :deep(.el-card__body) {
  padding: 20px;
}

/* 搜索表单 */
.search-form {
  margin-bottom: 0px;
}

.search-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.search-form-inline .el-form-item {
  margin-bottom: 0;
}

.search-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.refresh-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  font-weight: 500;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.camera-stats {
  display: flex;
  align-items: center;
  gap: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.stat-number {
  font-size: 20px;
  font-weight: 600;
  color: #667eea;
}

/* 表格卡片 */
.table-card {
  margin: 0 20px 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.table-card :deep(.el-card__body) {
  padding: 0;
}

/* 表格样式 */
.camera-table {
  font-size: 14px;
}

.camera-table :deep(.el-table__header-wrapper) {
  border-radius: 12px 12px 0 0;
}

.camera-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.camera-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

/* 摄像机信息列 */
.camera-info {
  padding: 8px 0;
}

.camera-name {
  font-size: 15px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.camera-code {
  font-size: 12px;
  color: #909399;
}

/* 设备详情列 */
.device-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-item {
  font-size: 13px;
  color: #606266;
}

/* 技术参数列 */
.tech-params {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.param-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #606266;
}

.param-item i {
  color: #909399;
}

/* 位置信息列 */
.location-info {
  padding: 8px 0;
}

.region-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.region-path {
  font-size: 12px;
  color: #909399;
}

/* 时间文本 */
.time-text {
  color: #909399;
  font-size: 13px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  border-radius: 6px;
  font-weight: 400;
}

.preview-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.preview-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.detail-btn {
  background: #f0f2f5;
  border: 1px solid #e4e7ed;
  color: #606266;
}

.detail-btn:hover {
  background: #e6e8eb;
  border-color: #dcdfe6;
  color: #303133;
}

/* 分页样式 */
.pagination-wrapper {
  padding: 20px;
  background: #fafafa;
  border-radius: 0 0 12px 12px;
}

/* 视频预览抽屉 */
.video-drawer :deep(.el-drawer__header) {
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 30px;
  margin-bottom: 0;
}

.video-drawer :deep(.el-drawer__body) {
  padding: 0;
  background: #f5f7fa;
}

.video-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 视频播放区域 */
.video-player-container {
  flex: none;
  background: white;
  margin: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}

.video-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-player {
  position: relative;
  background: #000;
  height: 500px;
}

.video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
}

.video-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 摄像机信息面板 */
.camera-details-panel {
  background: white;
  margin: 0 20px 20px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.panel-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  font-size: 13px;
  color: #909399;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

/* 详情抽屉 */
.detail-drawer :deep(.el-drawer__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 30px;
}

.detail-drawer :deep(.el-drawer__title) {
  color: white;
  font-size: 20px;
}

.detail-drawer :deep(.el-drawer__close) {
  color: white;
}

.detail-wrapper {
  padding: 30px;
  background: #f5f7fa;
  min-height: 100%;
}

.detail-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item.full-width {
  grid-column: span 2;
}

.detail-label {
  font-size: 13px;
  color: #909399;
  font-weight: 400;
}

.detail-value {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
  word-break: break-all;
}

/* 标签样式优化 */
.el-tag {
  border-radius: 6px;
  padding: 0 12px;
  height: 26px;
  line-height: 24px;
  font-size: 12px;
}

/* 加载动画 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .info-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-item.full-width {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .search-actions {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .camera-stats {
    justify-content: center;
  }

  .video-drawer :deep(.el-drawer) {
    width: 100% !important;
  }

  .detail-drawer :deep(.el-drawer) {
    width: 100% !important;
  }

  .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .action-btn {
    width: 100%;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.camera-table :deep(.el-table__row) {
  animation: fadeIn 0.3s ease-out;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 过渡效果 */
.el-button,
.el-tag {
  transition: all 0.3s ease;
}

/* 空状态样式 */
.el-table__empty-block {
  padding: 60px 0;
}

.el-table__empty-text {
  color: #909399;
  font-size: 14px;
}

/* 隐藏表格滚动条 */
.camera-table :deep(.el-table__body-wrapper) {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.camera-table :deep(.el-table__header-wrapper) {
  overflow-x: hidden !important;
}

/* 如果需要隐藏整个表格容器的滚动条 */
.camera-table :deep(.el-table) {
  overflow: hidden !important;
}
</style>
