<template>
  <ContentWrap>
    <div  class="container">
      <el-button-group>
    <el-button :size="2" @click="toggleFullScreen" type="primary"  >
          <Icon :size="20"  icon="fa-solid:expand" /></el-button>
    <el-button type="primary" @click="updateTopNum(2)">
          <Icon :size="20"  icon="fa-solid:border-none" /></el-button>
    <el-button type="primary" @click="updateTopNum(3)">
          <Icon :size="20"  icon="fa-solid:th" /></el-button>
  </el-button-group>
    </div>
  
  
  <el-tabs :tab-position="tabPosition" style="height: 72vh" tabPosition="left" class="demo-tabs">
    <el-tab-pane v-for="tabIndex in tabCount" :key="tabIndex" :label="`视频墙 ${tabIndex}`">
      <el-row v-for="rowIndex in topNum" :key="rowIndex">
          <el-col v-for="colIndex in topNum" :key="colIndex" :span="24 / topNum" :style="{ height: videoHeight }">
            <Camera  :cameraId="getCameraId(tabIndex, rowIndex, colIndex)" :ptzShow="false" />
          </el-col>
        </el-row>
  
      </el-tab-pane>
  </el-tabs>
  </ContentWrap>
</template>

<script setup lang="ts">
import Camera from '@/components/camera/camera.vue'
import { CameraApi, CameraVO } from '@/api/logistics/camera'
/** 相机 列表 */
defineOptions({ name: 'Camera' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const list = ref<CameraVO[]>([]) // 列表的数据
  const topNum = ref(2); // 默认值
/** 查询列表 */
const getList = async () => {
  try {
    const data = await CameraApi.getCameraList()
    list.value = data
  } finally {
   
  }
}
// 根据 topNum 动态调整 tab 个数
const tabCount = computed(() => {
  return Math.ceil(list.value.length / (topNum.value*topNum.value));
});

const updateTopNum = (num: number) => {
  topNum.value = num;
};
// 根据 tab 索引获取对应的数据项
const getItemsForTab = (tabIndex: number) => {
  const startIndex = (tabIndex - 1) * topNum.value;
  const endIndex = startIndex + topNum.value;
  return list.value.slice(startIndex, endIndex);
};

const toggleFullScreen = () => {
  const contentWrap = document.querySelector('.content-wrap');
  if (!contentWrap) return;

  if (!document.fullscreenElement) {
    contentWrap.requestFullscreen().catch(err => {
      console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen().catch(err => {
      console.error(`Error attempting to exit full-screen mode: ${err.message} (${err.name})`);
    });
  }
};

// 计算 videoHeight
const videoHeight = computed(() => {
  const tabHeight = 72 * window.innerHeight / 100; // 63vh
  const rowHeight = tabHeight / topNum.value;
  return `${rowHeight}px`;
});

// 获取每个单元格的 cameraId
const getCameraId = (tabIndex: number, rowIndex: number, colIndex: number) => {
  const startIndex = (tabIndex - 1) * (topNum.value * topNum.value);
  const index = startIndex + (rowIndex - 1) * topNum.value + colIndex - 1;
  return list.value[index]?.id || 15; // 默认值 15
};
/** 初始化 **/
onMounted(() => {
  getList();
});
</script>

<style scoped>
.container {
  display: flex;
  justify-content: flex-end; /* 将按钮组放到右侧 */
  padding-bottom: 10px; /* 可选，增加间距 */
}
</style>