<script lang="ts" setup name="VideoContainer">
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})
// 页面高度
const mainHeight = ref(document.body.clientHeight - 50)
// 高度随页面resize变化
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 50
  mainHeight.value = bodyHeight
  console.log(mainHeight.value, 'bodyHeight')
})
</script>

<template>
  <div class="container" :style="{ height: `${mainHeight / 2}px` }">
    <video :id="id" src="./video.mp4" autoplay class="video" :height="`${mainHeight / 2}`"></video>
    <div class="list" :style="{ height: `${mainHeight / 2}px` }">
      <div class="alarm">
        <div class="info">
          <img src="../img/person.png" width="36" height="36" />
          <span class="count">0</span>
        </div>
        <div class="info">
          <img src="../img/alarm.png" width="36" height="36" />
          <span class="count"> 2</span>
        </div>
      </div>
      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
        <div class="alarmimg">
          <el-image style="width: 100%; height: 100%" src="1" :preview-src-list="['1']"
            :initial-index="4" fit="cover" />
        </div>
        <div class="alarmimg">
          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2691184556,3408947513&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" :preview-src-list="['1']"
            :initial-index="4" fit="cover" />
        </div>
        <div class="alarmimg">
          <el-image style="width: 100%; height: 100%" src="https://img2.baidu.com/it/u=2433680170,1835310732&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440" :preview-src-list="['1']"
            :initial-index="4" fit="cover" />
        </div>
        <div class="alarmimg">
          <el-image style="width: 100%; height: 100%" src="https://img0.baidu.com/it/u=3557509433,3888044753&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" :preview-src-list="['1']"
            :initial-index="4" fit="cover" />
        </div>
        <div class="alarmimg">
          <el-image style="width: 100%; height: 100%" src="https://img1.baidu.com/it/u=21314006,2917950596&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800" :preview-src-list="['1']"
            :initial-index="4" fit="cover" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 样式
.container {
  border: 1px solid #000;
  width: 50%;
  display: flex;
  justify-content: space-between;

  .video {
    width: 75%;
    object-fit: cover;
  }

  .list {
    // background-color: antiquewhite;
    width: 25%;

    .alarm {
      display: flex;
      justify-content: space-around;

      .info {
        width: 40%;
        display: flex;
        align-items: center;

        .count {
          font-size: 18px;
          font-weight: 700;
          margin-left: 10px;
        }
      }
    }
  }

  .alarmimg {
    width: 100%;
    height: 80px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>