<script lang="ts" setup name="VideoContainer">
const props = defineProps({
  // video标签id
  id: {
    type: String,
    required: true,
  },
  // 设备信息
  value: {
    type: Object,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
})
// 页面高度
const mainHeight = ref(document.body.clientHeight - 50)
// 高度随页面resize变化
window.addEventListener('resize', () => {
  const bodyHeight = document.body.clientHeight - 50
  mainHeight.value = bodyHeight
})
const webRtcServer = ref(null)
onMounted(() => {
  // webRtcServer.value = new WebRtcStreamer(props.id, 'http://127.0.0.1:8000')
  // webRtcServer.value.connect(
  //   `rtsp://${props.value.userName}:${props.value.password}@${props.value.ip}:${props.value.port}`,
  // )
})
</script>

<template>
  <div class="container" :style="{ height: `${mainHeight / 2}px` }" :class="{ right: props.index % 2 !== 0 ? true : false }">
    <video :id="props.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">{{ props.value.people?.peopleCount ? props.value.people?.peopleCount : 0 }}</span>
        </div>
        <div class="info">
          <img src="../img/alarm.png" width="36" height="36" />
          <span class="count">{{ props.value.alarm.length }}</span>
        </div>
      </div>
      <el-scrollbar :max-height="`${mainHeight / 2 - 36}`" style="width: 100%;">
        <div class="alarmimg" v-for="(item, index) in props.value.alarm" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.alarmImage" :preview-src-list="[item.alarmImage]" :initial-index="4" fit="cover" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 样式
.right{
  border-right: 2px solid #ccc;
}
.container {
  // border: 1px solid #000;
  width: 50%;
  display: flex;
  justify-content: space-between;
  position: relative;
  border-bottom: 3px solid #ccc;
  .video {
    width: 100%;
    object-fit: cover;
  }

  .list {
    // background-color: antiquewhite;
    width: 25%;
    position: absolute;
    right:0px;
    top:0px;
    // border-left: 2px solid #ccc;
    .alarm {
      display: flex;
      justify-content: space-around;
      background-color: #fff;
      .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>