<template>
  <div class="home_manage cm-layout">
    <div class="m-view">
      <!-- 视频监控 -->
      <div class="page-wrapper">
        <div class="video-wrapper">
			<EZUIKitJs ref="EZUIKit" selectSeat="right" autoPlayer="true"/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { Tools } from "@/assets/js/common.js";
import { reqApi, Config } from "@/assets/js/httpApi.js";
//import videojs from "video.js";
//import "video.js/dist/video-js.css";
import EZUIKitJs from '@/components/EZUIKitJs';
export default {
  name: "videoMonitor",
  components: {
	EZUIKitJs
  },
  data() {
    return {
      player1: null,
      player2: null,
      player3: null,
      player4: null,
      player5: null,
      player6: null,
      // sources: [
      //   {
      //     src: 'https://gctxyc.liveplay.myqcloud.com/gc/gccntv241-slf01_1/index.m3u8',
      //   },
      //   {
      //     type: "video/mp4",
      //     src: require("@/assets/video/oceans.mp4"),
      //   },
      //   {
      //     type: "video/mp4",
      //     src: require("@/assets/video/oceans.mp4"),
      //   },
      //   {
      //     type: "video/mp4",
      //     src: require("@/assets/video/zimu.mp4"),
      //   },
      //   {
      //     type: "video/mp4",
      //     src: require("@/assets/video/zimu.mp4"),
      //   },
      //   {
      //     type: "video/mp4",
      //     src: require("@/assets/video/zimu.mp4"),
      //   },
      // ],
    };
  },
  mounted() {


    var that = this;
    this.$nextTick(() => {
      this.pageApi = Config.getModuleInfo(this);



	  console.log('this.pageApi ________________ ', this.pageApi);
    });



	


	return ;
    const videoConfig = {
     _controls: true,
     autoplay: true,
      muted: true,
      preload: 'auto',
      controlBar: {
        playToggle: false, // 播放/暂停按钮
        volumePanel: { inline: false }, // 音量控制
        fullscreenToggle: true,
        progressControl: false,
        pipButton: false,
        pictureInPictureToggle: false
      },
    }

    this.player6 = videojs(this.$refs.videoPlayer6, videoConfig);
    
     
    videoConfig.autoplay = false
    videoConfig.muted = false

    this.player1 = videojs(this.$refs.videoPlayer1,videoConfig);
    this.player2 = videojs(this.$refs.videoPlayer2, videoConfig);
    this.player3 = videojs(this.$refs.videoPlayer3,videoConfig);
    this.player4 = videojs(this.$refs.videoPlayer4, videoConfig);
    this.player5 = videojs(this.$refs.videoPlayer5,videoConfig);
    // this.$refs.videoPlayer.play()
  },
  methods: {},
  beforeDestroy() {
    if (this.player1) {
      this.player1.dispose();
    }
    if (this.player2) {
      this.player2.dispose();
    }
    if (this.player3) {
      this.player3.dispose();
    }
    if (this.player4) {
      this.player4.dispose();
    }
    if (this.player5) {
      this.player5.dispose();
    }
    if (this.player6) {
      this.player6.dispose();
    }
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.page-wrapper {
  width: 100%;display:flex;
  height: 100%;
  background: no-repeat center center url("~@/assets/images/layout/main_bg.png");
  background-size: 100% 100%;
  .video-wrapper {
    // background-color: #fff;

	border:1px solid #3385FF;

    width: 1000px;
    margin:.3rem auto .3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0.1rem;
  }
  .item {
    width: 32.3333%;
    height: 300px;
    margin-right: 0.1rem;
    margin-top: 0.1rem;
    // margin-left: 0.1rem;
    background-color: transparent;
    &:nth-child(3n) {
      margin-right: 0.01rem;
    }
    cursor: pointer;
  }
}

.home_manage {
  position: relative;
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  //background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;

  .m-view {
    position: relative;
    width: 100%;
  }

  .b_0 {
    border: 1px solid #143d96;
    position: absolute;
    top: 0.2rem;
    left: 0.1rem;
    width: max-content;
    padding: 0.1rem;
    user-select: none;
    // background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
    li {
      span:first-child {
        color: #ccc;
      }
      span {
        color: #fff;
      }
    }
  }
}
</style>
