<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="全部监控"
    append-to-body
    width="1200px"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="video-area">
      <div
        v-for="(videoImg, index) in idList.length == 2 ? 2 : activeSplice"
        :key="index"
        :class="['camera', idList.length == 2 ? `camera-in-2` : `camera-in-4`]"
      >
        <div v-if="!cameraList[index] || cameraList[index].player === null">
          <div class="video-info">
            <div class="video-no">
              {{ cameraList[index] && cameraList[index].name }}
            </div>
            <div class="video-description">暂无画面~</div>
          </div>
        </div>
        <div v-else class="video-pic" :ref="`video-js-container-${index}`">
          <div
            style="width: 100%; height: 100%"
            :id="[`video-out-container-${index + 1}`]"
            class="video-out-container-area"
          >
            <div
              :id="[`video-container-${index + 1}`]"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getTowerLiveUrl } from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
  name: "VideoDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    idList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeSplice: 4,
      cameraList: [],
      loading: false,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.closeAll();
      } else {
        this.viewAll();
      }
    },
  },
  methods: {
    viewAll() {
      console.log(this.idList);
      if (this.idList.length > 4) {
        this.activeSplice = this.idList.length;
      }
      this.loading = true;
      this.cameraList.map((item) => {
        item.player && item.player.dispose();
        item.player = null;
        item.id = "";
        item.live_address_url = "";
      });
      this.cameraList = [];

      this.idList.map((item, index) => {
        this.cameraList.push({
          player: null,
          id: item.id,
          name: item.link_device_position_name,
        });
        getTowerLiveUrl(item.id).then((res) => {
          this.cameraList[index].player = undefined;
          if (res.data.live_address_url) {
            console.log(index);
            let ts = new Date().getTime();
            setTimeout(() => {
              this.$nextTick(() => {
                const myVideoDiv = document.getElementById(
                  `video-container-${index + 1}`
                );
                myVideoDiv.innerHTML = `<video
          id="singleVideo${ts}"
          autoplay="autoplay"
          class="video-js vjs-default-skin"
          muted="muted"
              data-setup='{"userActions": {"doubleClick": false }}'
        ></video>`;
                const singlePlayer = videojs(`singleVideo${ts}`, {
                  autoplay: true, // 自动播放
                  controls: true, // 控件显示
                  preload: "auto", //定义视频加载模式
                  loop: true, //是否循环播放
                });
                singlePlayer.src({
                  src: res.data.live_address_url,
                  type: "application/x-mpegURL",
                });
                this.$nextTick(() => {
                  singlePlayer.play();
                });

                this.cameraList[index].player = singlePlayer;
                this.$forceUpdate();
              });
            }, 500);
          } else {
            this.cameraList[index].player = null;
          }
          if (index == this.idList.length - 1) {
            this.loading = false;
          }
        });
      });
    },
    closeAll() {
      this.cameraList.map((item) => {
        item.id = "";
        item.live_address_url = "";
        item.player && item.player.dispose();
        item.player = null;
      });
      this.cameraList = [];
    },
  },
};
</script>
<style lang="less" scoped>
.video-area {
  height: 600px;
  width: 100%;
  overflow-y: auto;
  .camera {
    font-size: 0;
    &:hover {
      box-shadow: inset 0 0 10px rgba(0, 162, 255, 1);
    }
    &.active {
      box-shadow: inset 0 0 10px rgba(0, 162, 255, 1);
    }
    cursor: pointer;
    border: 1px solid #0f95d4;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    float: left;
    background: linear-gradient(
      0deg,
      rgba(28, 135, 207, 0.2) 0%,
      rgba(15, 60, 89, 0.37) 28%,
      rgba(11, 41, 80, 0.8) 100%
    );
    &.camera-in-1 {
      width: 100%;
      height: 100%;
    }
    &.camera-in-2 {
      width: 100%;
      height: 50%;
    }
    &.camera-in-4 {
      width: 50%;
      height: 50%;
    }
    &.camera-in-6 {
      width: calc(100% / 3);
      height: calc(100% / 3 + 0.2px);

      &:first-child {
        width: calc(calc(100% / 3) * 2);
        height: calc(calc(100% / 3) * 2);
      }
    }
    &.camera-in-9 {
      width: calc(100% / 3);
      height: calc(100% / 3);
    }

    .video-info {
      width: 80%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      text-align: center;
      .video-no {
        font-size: 26px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: bold;
        color: #c6eaf9;
        margin-bottom: 12px;
      }
      .video-description {
        font-size: 16px;
        color: #c6def9;
      }
    }
    .video-pic {
      padding: 8px;
      height: calc(100% - 16px);
      &:hover {
        .el-icon-circle-close {
          display: block;
          cursor: pointer;
        }
      }
      img {
        width: 100%;
        vertical-align: top;
        height: 100%;
      }
      .play {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        cursor: pointer;
      }
    }
  }
}
</style>