<!-- VideoMonitoring.vue（视频监控） -->
<template>
  <div class="video-monitoring">
   <div class="video-monitoring-content">
     <!-- 画面区 -->
     <div v-if="props.layoutType === '1'" class="one-view">
      <img v-if="pagedData[0]" :src="pagedData[0].img" class="video-img" />
    </div>
    <div v-else-if="props.layoutType === '2'" class="two-view">
      <img v-for="item in pagedData.slice(0, 2)" :key="item.id" :src="item.img" class="video-img" />
    </div>
    <div v-else class="six-view">
      <img v-for="item in pagedData.slice(0, 6)" :key="item.id" :src="item.img" class="video-img" />
    </div>
   </div>
    <!-- 使用Pagination组件替换el-pagination -->
    <pagination
      v-show="allData.length > 0"
      :total="allData.length"
      v-model:page="page"
      v-model:limit="pageSize"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import Pagination from '@/components/Pagination/index.vue';

const props = defineProps({
  layoutType: { type: String, default: '6' },
  vehicle: { type: Object, default: () => ({}) }
});

const allData = ref(Array.from({ length: 20 }).map((_, i) => ({
  id: i + 1,
  img: `https://picsum.photos/seed/${i + 1}/400/220`,
})));
const page = ref(1);
const pageSize = ref(6);
const pagedData = computed(() => {
  const start = (page.value - 1) * pageSize.value;
  return allData.value.slice(start, start + pageSize.value);
});

function handlePagination({ page: newPage, limit: newLimit }) {
  page.value = newPage;
  pageSize.value = newLimit;
}
</script>

<style scoped>
.video-monitoring {
  border-radius: 8px;


  color: #fff;
}
.video-monitoring-content{
  padding-bottom: 10px;
}
.one-view .video-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: #1e2233;
}
.two-view {
  display: flex;
  gap: 18px;
}
.two-view .video-img {
  flex: 1;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: #1e2233;
}
.six-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.six-view .video-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: #1e2233;
}
</style>
