<template>
  <div class="spplgl-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <span class="toolbar-label">视图模式：</span>
        <el-button-group>
          <el-button :type="gridMode === 1 ? 'primary' : 'default'" @click="gridMode = 1">1宫格</el-button>
          <el-button :type="gridMode === 4 ? 'primary' : 'default'" @click="gridMode = 4">4宫格</el-button>
          <el-button :type="gridMode === 9 ? 'primary' : 'default'" @click="gridMode = 9">9宫格</el-button>
        </el-button-group>
        <span class="toolbar-label" style="margin-left: 20px;">监控视频：</span>
        <el-select
          v-model="selectedVideoIds"
          multiple
          collapse-tags
          collapse-tags-tooltip
          placeholder="选择监控视频"
          style="width: 340px"
        >
          <el-option v-for="v in allVideos" :key="v.id" :label="v.name" :value="v.id" />
        </el-select>
      </div>
      <div class="toolbar-right">
        <el-button @click="handleFullscreen" :icon="FullScreen">全屏</el-button>
        <el-button :disabled="currentPage <= 1" @click="currentPage--">上一页</el-button>
        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
        <el-button :disabled="currentPage >= totalPages" @click="currentPage++">下一页</el-button>
      </div>
    </div>

    <!-- 视频宫格区域 -->
    <div class="grid-area" ref="gridAreaRef">
      <div
        class="video-grid"
        :style="gridStyle"
      >
        <div
          v-for="(slot, idx) in currentSlots"
          :key="slot ? slot.id : 'empty-' + idx"
          class="grid-cell"
          @dblclick="handleDblClick(slot)"
        >
          <template v-if="slot">
            <div class="cell-player">
              <el-icon :size="gridMode <= 4 ? 48 : 32" color="#fff"><VideoPlay /></el-icon>
              <span class="cell-player-name">{{ slot.name }}</span>
            </div>
            <div class="cell-bar">
              <span class="cell-bar-name">{{ slot.name }}</span>
              <span :class="['cell-bar-status', slot.status === '在线' ? 'online' : 'offline']">{{ slot.status }}</span>
              <span class="cell-bar-time">{{ currentTime }}</span>
            </div>
            <span class="cell-index">{{ idx + 1 }}</span>
          </template>
          <template v-else>
            <div class="cell-player cell-empty">
              <el-icon :size="32" color="#555"><VideoPlay /></el-icon>
              <span class="cell-empty-text">未选择视频</span>
            </div>
            <span class="cell-index">{{ idx + 1 }}</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Spplgl">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { FullScreen, VideoPlay } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// ==================== 模拟视频数据 ====================
const allVideos = ref([
  { id: 1, name: '沅陵大道积水点摄像头', status: '在线', type: '积水点' },
  { id: 2, name: '城北路段积水监测视频', status: '在线', type: '积水点' },
  { id: 3, name: '河西片区积水点监控', status: '离线', type: '积水点' },
  { id: 4, name: '南环路积水监测摄像头', status: '在线', type: '积水点' },
  { id: 5, name: '人民路积水点视频', status: '在线', type: '积水点' },
  { id: 6, name: '开发区排水泵站视频', status: '在线', type: '泵站' },
  { id: 7, name: '城北泵站监控摄像头', status: '在线', type: '泵站' },
  { id: 8, name: '河西泵站视频监控', status: '离线', type: '泵站' },
  { id: 9, name: '沅陵大道下穿立交监控', status: '在线', type: '下穿立交' },
  { id: 10, name: '城北下穿立交视频', status: '在线', type: '下穿立交' },
  { id: 11, name: '人民路管网监测视频', status: '在线', type: '管网' },
  { id: 12, name: '城北路段管网监控', status: '离线', type: '管网' }
])

// 默认选中前4个
const selectedVideoIds = ref([1, 2, 3, 4])

// ==================== 宫格模式 ====================
const gridMode = ref(4)
const currentPage = ref(1)
const gridAreaRef = ref(null)

const selectedVideos = computed(() => {
  return selectedVideoIds.value
    .map(id => allVideos.value.find(v => v.id === id))
    .filter(Boolean)
})

const totalPages = computed(() => {
  if (selectedVideos.value.length === 0) return 1
  return Math.ceil(selectedVideos.value.length / gridMode.value)
})

const currentSlots = computed(() => {
  const start = (currentPage.value - 1) * gridMode.value
  const end = start + gridMode.value
  const pageVideos = selectedVideos.value.slice(start, end)
  // 补齐空位
  const slots = []
  for (let i = 0; i < gridMode.value; i++) {
    slots.push(pageVideos[i] || null)
  }
  return slots
})

const gridStyle = computed(() => {
  const cols = gridMode.value === 1 ? 1 : gridMode.value === 4 ? 2 : 3
  return {
    'grid-template-columns': `repeat(${cols}, 1fr)`,
    'grid-template-rows': gridMode.value === 1 ? '1fr' : (gridMode.value === 4 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)')
  }
})

// ==================== 实时时间 ====================
const currentTime = ref('')
let timer = null

function updateTime() {
  const now = new Date()
  const pad = n => String(n).padStart(2, '0')
  currentTime.value = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

// ==================== 交互 ====================
function handleDblClick(slot) {
  if (!slot) return
  if (gridMode.value !== 1) {
    gridMode.value = 1
    // 找到该视频在选中列表中的索引，跳转到对应页
    const idx = selectedVideos.value.findIndex(v => v.id === slot.id)
    if (idx >= 0) {
      currentPage.value = Math.floor(idx / 1) + 1
    }
    ElMessage.info(`已放大查看：${slot.name}`)
  } else {
    gridMode.value = 4
    currentPage.value = 1
  }
}

function handleFullscreen() {
  if (!gridAreaRef.value) return
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    gridAreaRef.value.requestFullscreen()
  }
}
</script>

<style scoped>
.spplgl-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);
  background: #1a1a2e;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #16213e;
  border-bottom: 1px solid #2a2a4a;
  flex-shrink: 0;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-label {
  color: #c0c4cc;
  font-size: 14px;
  white-space: nowrap;
}

.page-info {
  color: #c0c4cc;
  font-size: 14px;
  padding: 0 8px;
  min-width: 60px;
  text-align: center;
}

/* 深色主题下 select 样式调整 */
.toolbar :deep(.el-select) {
  --el-fill-color-blank: #1a1a2e;
}

.toolbar :deep(.el-input__wrapper) {
  background: #1a1a2e;
  box-shadow: 0 0 0 1px #3a3a5a inset;
}

.toolbar :deep(.el-input__inner) {
  color: #c0c4cc;
}

/* 宫格区域 */
.grid-area {
  flex: 1;
  padding: 8px;
  overflow: hidden;
}

.grid-area:fullscreen {
  padding: 8px;
  background: #1a1a2e;
}

.video-grid {
  display: grid;
  gap: 6px;
  height: 100%;
}

.grid-cell {
  background: #0f0f23;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 1px solid #2a2a4a;
  cursor: pointer;
  transition: border-color 0.2s;
}

.grid-cell:hover {
  border-color: #409eff;
}

.cell-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}

.cell-player-name {
  color: #666;
  font-size: 13px;
  margin-top: 10px;
}

.cell-empty {
  background: #0a0a1a;
}

.cell-empty-text {
  color: #444;
  font-size: 13px;
  margin-top: 8px;
}

.cell-bar {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #16213e;
  gap: 10px;
  flex-shrink: 0;
}

.cell-bar-name {
  color: #c0c4cc;
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-bar-status {
  font-size: 12px;
  font-weight: 500;
  padding: 0 6px;
  border-radius: 2px;
}

.cell-bar-status.online {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.15);
}

.cell-bar-status.offline {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.15);
}

.cell-bar-time {
  color: #606266;
  font-size: 12px;
  white-space: nowrap;
}

.cell-index {
  position: absolute;
  top: 6px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
