```javascript

<template>
  <div>
    <el-row :gutter="15" style="height: 80%">
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <div class="left-div-box bj-box">
          <div
            class="display-div"
         
          >
          // 1屏
            <div
              class="area"
              @click="setVideoCount(1)"
              :class="{ selected: selectedSplit === 1 }"
            >
              <i class="iconfont icon-a-mti-1fenpingshi"></i>
            </div>
            
          // 4屏
            <div
              class="area"
              @click="setVideoCount(4)"
              :class="{ selected: selectedSplit === 4 }"
            >
              <i class="iconfont icon-a-mti-4fenpingshi"></i>
            </div>
              
              // 9屏
            <div
              class="area"
              @click="setVideoCount(9)"
              :class="{ selected: selectedSplit === 9 }"
            >
              <i class="iconfont icon-a-mti-9fenpingshi"></i>
            </div>
          </div>

       
          <div style="padding: 0px">
            <el-card
              :style="{
                'max-width': '480px',
                margin: isLastItem(index) ? '20px' : '18px',
                'background-color': '#f7fafc',
              }"
              v-for="(item, index) in listData"
              :key="item.id"
              style="
                box-shadow: 0 1px 2px -2px rgba(114, 114, 114, 0.2),
                  0 2px 0px 0 rgba(137, 135, 135, 0.1),
                  0 5px 8px -3px rgba(136, 136, 136, 0.03) !important;
              "
            >
              <template #header>
                <div
                  class="card-header"
                  style="
                    line-height: 39px;
                    padding-left: 15px;
                    font-size: 16px;
                    border-bottom: 2px solid #fff;
                  "
                >
                  <span
                    :style="{
                      color: item.taskTypeCode === '2' ? 'red' : 'black',
                      fontWeight: item.taskTypeCode === '2' ? 'bold' : 'normal',
                    }"
                    >{{ item.taskType }}</span
                  >
                </div>
              </template>
              <div class="divtext">
                <div>
                  <el-descriptions
                    class="margin-top"
                    :column="1"
                    :size="size"
                    border
                  >
                    <el-descriptions-item width="200px" align="center">
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <!-- <i class="iconfont icon-renwumingcheng icon-size icon-bj"></i> -->
                          </el-icon>
                          任务名称
                        </div>
                      </template>
                      {{ item.taskName }}
                    </el-descriptions-item>
                    <el-descriptions-item width="200px" align="center">
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <!-- <i class="iconfont icon-renwumingcheng1 icon-size icon-bj"></i> -->
                          </el-icon>
                          任务状态
                        </div>
                      </template>

                      <el-tag
                        :style="{
                          backgroundColor:
                            item.taskStateCode === '3'
                              ? '#f0f9eb'
                              : item.taskStateCode === '2'
                              ? '#fdf6ec'
                              : '#fef0f0',
                          color:
                            item.taskStateCode === '3'
                              ? '#67c23a'
                              : item.taskStateCode === '2'
                              ? '#e6a23c'
                              : '#f56c6c',
                          border:
                            item.taskStateCode === '3'
                              ? '1px solid #67c23a'
                              : item.taskStateCode === '2'
                              ? '1px solid #e6a23c'
                              : '1px solid #fab6b6',
                        }"
                      >
                        {{
                          item.taskStateCode === "3"
                            ? "已完成"
                            : item.taskStateCode === "2"
                            ? "进行中"
                            : "未开始"
                        }}
                      </el-tag>
                      <!-- {{ item.taskState }} -->
                    </el-descriptions-item>
                    <el-descriptions-item width="200px" align="center">
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <!-- <i class="iconfont icon-kaishishijian icon-size icon-bj"></i> -->
                          </el-icon>
                          开始时间
                        </div>
                      </template>
                      <el-tag size>{{ item.taskBeginTime }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item width="200px" align="center">
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <!-- <i class="iconfont icon-jieshushijian icon-size icon-bj"></i> -->
                          </el-icon>
                          结束时间
                        </div>
                      </template>
                      <el-tag>{{ item.taskEndTime }}</el-tag>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-card>
            <div
              style="
                display: flex;
                justify-content: flex-end;
                margin-right: 17px;
              "
            >
              <el-pagination
                style="margin-bottom: 25px"
                size="small"
                background
                layout="prev, pager, next"
                :total="total"
                v-model:page-size="pageSize"
                class="mt-4"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="18">
        <div class="videobox">
          <div
            ref="JessibucaDemoRef"
            :style="liveStyle"
            v-for="(item, index) in state.spilt"
            :key="index"
            :class="
              state.videoIndex === index ? 'PlayVideo active' : 'PlayVideo'
            "
          >
            <video
              v-if="videoList[index]"
              @ended="playNextVideo(index)"
              :src="videoList[index] ? videoList[index].url : ''"
              :title="videoList[index] ? videoList[index].name : ''"
              :ref="'videoPlayer_' + index"
              style="width: 100%; height: 100%"
              muted
              playsinline
              controls
            ></video>
            <!-- <videoPlay
              v-if="videoList[index]"
              :ref="'videoPlayer_' + index"
              height="100%"
              width="1200px"
              :src="videoList[index] ? videoList[index].url : ''"
              :title="videoList[index] ? videoList[index].name : ''"
              @ended="playNextVideo(index)"
            /> -->
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="Index">
import videoPlay from "vue3-video-play";
import "vue3-video-play/dist/style.css";
import { listDetailInspectionTaskInfo } from "@/api/data/inspectionTaskInfo";

import { reactive, ref, onMounted } from "vue";

const { proxy } = getCurrentInstance();

const state = reactive({
  spilt: 1,
  videoIndex: 0,
});

const listData = ref([]);
const total = ref(0);
const selectedSplit = ref(1);

function isLastItem(index) {
  return index === listData.value.length - 1;
}

// 分频样式
const liveStyle = computed(() => {
  let style = { width: "100%", height: "100%" };
  switch (state.spilt) {
    case 4:
      style = { width: "50%", height: "50%" };
      break;
    case 9:
      style = { width: "33.33%", height: "33.333%" };
      break;
  }
  return style;
});
const displayedList = ref([]);
// 分屏
const setVideoCount = (value) => {
  state.videoIndex = 0;
  selectedSplit.value = value;
  state.spilt = value;
  handleSizeChange(value);
};

onMounted(() => {
  getList();
});

const videoList = ref([]);

// let heightValue = "100vh";
// let widthValue = "100%";

const currentPage = ref(1);
const pageSize = ref(1);
const size = ref("small");
// const background = ref(false);
// const disabled = ref(false);

const handleSizeChange = (val) => {
  pageSize.value = val;
  getList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getList();
};

function getList() {
  videoList.value = [];
  var param = {};
  param.pageNum = currentPage.value;
  param.pageSize = pageSize.value;
  listDetailInspectionTaskInfo(param).then((response) => {
    listData.value = response.rows;

    console.log("@listData", listData.value);

    total.value = response.total;
    videoList.value = [];
    listData.value.forEach((item, index) => {
      var addressList = item.inspectionTaskVideoInfoList.map((item) => {
        return item.taskVideoAddress;
      });
      videoList.value.push({
        key: item.id,
        url: addressList.length > 0 ? addressList[0] : "",
        name: item.taskName,
        live: false,

        videoList: addressList,
        currentIndex: 0,
      });
    });
  });
}

function playNextVideo(index) {
  if (index > listData.value.length) {
    return;
  }
  if (
    proxy.$refs["videoPlayer_" + index] &&
    proxy.$refs["videoPlayer_" + index].length > 0
  ) {
    let currentIndex = videoList.value[index].currentIndex;
    currentIndex++;
    if (currentIndex >= videoList.value[index].videoList.length) {
      proxy.$refs["videoPlayer_" + index][0].src =
        videoList.value[index].videoList[0];
      videoList.value[index].currentIndex = 0;
      return;
    }
    videoList.value[index].currentIndex = currentIndex;
    proxy.$refs["videoPlayer_" + index][0].src =
      videoList.value[index].videoList[currentIndex];
    proxy.$refs["videoPlayer_" + index][0].play();
  }
}
</script>