<!--
 * @Author: your name
 * @Date: 2024-01-09 16:56:12
 * @LastEditTime: 2024-01-09 17:11:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mosty-nc-zhpcs-web\src\views\normalization\componentNc\cards\spxl\component\spxlDialog.vue
-->
<template>
  <div class="boxPlay flex pt2 2 pl2 pr2" :class="props.fps > 2 ? 'flex-warp' : ''">
    <div class="playCnt">
      <div class="close_box pointer" @click="handelClose">
        <el-icon :size="20" color="#fff">
          <Close></Close>
        </el-icon>
      </div>
      <ul class="video_box flex just-between flex-warp" v-loading="loading">
        <li class="video_item" v-for="item in props.list" :key="item" :class="changeHeight(props.list)">
          <VideoPay :sbbh="item.sxtid" v-if="item.sxtid"> </VideoPay>
          <!-- <img style="width: 100%; height: 100%" :src="require('@/assets/images/default_video.png')" v-else/> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import VideoPay from "@/components/wsVideoSenior/wsIframe/index"; //ws播放高阶
import emitter from "@/utils/eventBus.js";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import {
  onMounted,
  defineProps,
  defineEmits,
  ref,
  onUnmounted,
  watch,
  onBeforeUnmount
} from "vue";
const props = defineProps({
  list: Array,
  fps: Number,
  modelValue: Boolean
});
const emits = defineEmits(["update:modelValue"]);
function handelClose() {
  emits("update:modelValue", false);
}
// 改变高度
const changeHeight = (val) => {
  let len = val.length;
  switch (len) {
    case 1:
      return 'oneItem';
    case 2:
      return 'twoItem';
    case 3:
    case 4:
      return 'moreItem';
  }
}
onMounted(() => { });
</script>

<style lang="scss" scoped>
.boxPlay {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(33% - 35px);
  width: 1200px;
  height: 780px;
  top: 100px;
  z-index: 11;
  background: #000;

  .playCnt {
    width: 100%;
    height: 100%;
    // background: url("~@/assets/images/langVideo.png") no-repeat;
    background-size: 100% 100%;
  }

  .close_box {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
  }

  .video_box {
    width: 100%;
    margin-top: 5px;
    height: calc(100% - 42px);

    .video_item {
      height: 100%;
      width: 100%;
      border: 1px solid #03438b;
    }

    .oneItem {
      height: 100%;
      width: 100%;
    }

    .oneItem {
      height: 100%;
      width: 100%;
    }

    .twoItem {
      height: 100%;
      width: 49.5%;
    }

    .moreItem {
      height: calc((100% / 2) - 6px);
      width: 49.5%;
    }
  }
}
</style>