<template>
    
    <div
      class="jessibuca-root"
      id="jessibuca"
      :style="{
        height: MHeight + 'px',
        gap: props.space + 'px',
        padding: props.margin + 'px',
      }"
      :class="BigClass"
    >
      <template v-if="videoNum > 0">
        <div
          class="container-shell"
          v-for="item in videoNum"
          :key="item"
        >
          <jessiBucaPlay
            :videoHeight="videoHeight"
            :isBackPlay="props.isBackPlay"
            :videoId="item"
            :videoUrl="props.videoUrls[item - 1]"></jessiBucaPlay>
        </div>
      </template>
      <template v-else>
        <div>暂无视频数据</div>
      </template>
    </div>
  </template>
  
  <script setup>
  import jessiBucaPlay from "./jessiBucaPlay.vue";
  import { watchEffect } from "vue";
  import { ref } from "vue";
  import { nextTick } from 'vue';
  import { onBeforeUnmount } from 'vue';
  import { getCurrentInstance } from 'vue';

  const props = defineProps({
    videoUrls: {
      type: Array,
      default: () => [],
    },
    // 路线类型(一路,四路,九路,十六路)
    lineType: {
      type: String,
      default: "alone",
      validator: (value) =>
        ["alone", "fourWays", "nineWays", "sixteen"].includes(value)
          ? true
          : "无效参数",
    },
    // 间距
    space: {
      type: Number,
      default: 5,
    },
    // 边距
    margin: {
      type: Number,
      default: 2,
    },
    // 浏览器后台是否播放
    isBackPlay: {
      type: Boolean,
      default: true,
    },
  });
  const MHeight = ref(window.innerHeight - 84);
  const videoHeight = ref("100px");
  const videoNum = ref(0);
  const BigClass = ref('');
  const init = () => {
    switch (props.lineType) {
      case "alone":
        videoNum.value = 1;
        BigClass.value = "";
        break;
      case "fourWays":
        videoNum.value = 4;
        BigClass.value = "video-fourWays";
        break;
      case "nineWays":
        videoNum.value = 9;
        BigClass.value = "video-nineWays";
        break;
      case "sixteen":
        videoNum.value = 16;
        BigClass.value = "video-sixteen";
        break;
      default:
        videoNum.value = 1;
        BigClass.value = "";
        break;
    }
    nextTick(() => {
      this.updatePlayerDomSize();
    });
  };
  
  // 更新播放器大小
  const updatePlayerDomSize = () => {
    let ways = 1;
    switch (videoNum.value) {
      case 1:
        ways = 1;
        break;
      case 4:
        ways = 2;
        break;
      case 9:
        ways = 3;
        break;
      case 16:
        ways = 4;
        break;
    }
    videoHeight.value =
      (MHeight.value - props.space * (ways - 1) - props.margin * 2) / ways + "px";
  };
  
  watchEffect(() => {
    props.lineType;
    props.videoUrls;
    init();
  });
  onBeforeUnmount(() => {
    document.getElementById("jessibuca").remove();
  });
  </script>
  <style lang="scss" scoped>
  .jessibuca-root {
    display: grid;
    width: 100%;
    min-width: 1000px;
    height: 100%;
    min-height: 600px;
    overflow: auto;
  }
  // 四路
  .video-fourWays {
    grid-template-columns: repeat(2, 1fr);
  }
  // 九路
  .video-nineWays {
    grid-template-columns: repeat(3, 1fr);
  }
  // 十六路
  .video-sixteen {
    grid-template-columns: repeat(4, 1fr);
  }
  </style>
  