<template>
  <div class="home_manage cm-layout">
    <div class="m-view">
      <!-- 视频监控 -->
      <div class="page-wrapper">
        <div class="video-wrapper">
          <!-- <div class="item" @click="openDialog"> -->
            <!-- <video-player
                        ref="videoPlayer"
                        class="video-player"
                        :options="playerOptions"
                        @play="onPlayerPlay"
                        @pause="onPlayerPause"
                        @ended="onPlayerEnded"
                        ></video-player> -->
            <!-- <video
                            style="width: 100%"
                            controls
                            :src="require('@/assets/video/zimu.mp4')"
                        ></video> -->
            <!-- <video width="480" height="480" controls>
                            <source src="https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8" type="application/x-mpegURL">
                            Your browser does not support the video tag.
                        </video> -->
            <!-- <video
              id="videoPlayer"
              class="video-js vjs-default-skin"
              playsinline
              autoplay="autoplay"
              style="width: 100%; height: 100%;"
            >
              <source :src="attachmentLink" type="application/x-mpegURL" />
              <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
            </video> -->
          <!-- </div> -->
          <div class="item" v-for="(index, item) in playerOptions.sources" @click="openDialog" :key="index">
            <video
              id="videoPlayer"
              class="video-js vjs-default-skin"
              playsinline
              autoplay="autoplay"
              style="width: 100%; height: 100%;"
            >
              <source :src="attachmentLink" type="application/x-mpegURL" />
              <!-- <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> -->
            </video>
            </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
        <!-- <div style="width: 100%; height: 100%; background-color: pink;"> -->
            <video
              id="videoPlayer"
              class="video-js vjs-default-skin"
              playsinline
              autoplay="autoplay"
              style="width: 100%; height: 100%;"
            >
              <source :src="attachmentLink" type="application/x-mpegURL" />
              <!-- <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4"> -->
            </video>
        <!-- </div> -->
        <!-- <video
              id="videoPlayer"
              class="video-js vjs-default-skin"
              playsinline
              autoplay="autoplay"
              style="width: 90%; height: 90%;"
            >
              <source :src="attachmentLink" type="application/x-mpegURL" />
              <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
            </video> -->
    </el-dialog>
  </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";
export default {
  name: "videoMonitor",
  data() {
    return {
      dp: null,
      dialogVisible: false,
      attachmentLink:
        "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
      options: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        aspectRatio: "16:9",
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        autoplay: false, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },
      playerOptions: {
        // 其他设置项
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //提示信息
        autoplay: true, //是否自动播放
        controls: true, // 是否显示控制栏
        // poster: 'http://path/to/poster.jpg',//视频封面
        // sources: [
        //     {
        //         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/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'),
        //     },
        //   //     {
        //   //     type: "video/mp4",
        //   //     // src: "https://www.example.com/path/to/your/video.mp4"
        //   //     src: require('@/assets/video/zimu.mp4'),
        //   // }
        //   //     {
        //   //     type: "m3u8",
        //   //     // src: "https://www.example.com/path/to/your/video.mp4"
        //   //     src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',
        //   // }
        // //   {
        // //     // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
        // //     // src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',//视频文件地址
        // //     src: "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
        // //     type: "m3u8", 
        // //     // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
        // //   },
        // ],
      },
    };
  },
  mounted() {
    var that = this;
    this.$nextTick(() => {
      this.pageApi = Config.getModuleInfo(this);
    });
    // this.$refs.videoPlayer.play()
  },
  methods: {
    loadVideo() {
      this.dp = videojs("videoPlayer", this.options);
      // 也可以使用以下方式给vedio设置 src
      // this.db.src([
      //   {
      //     src: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 地址
      //     type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
      //   },
      // ]);
    },
    // 销毁
    beforeDestroy() {
      if (this.dp) {
        this.dp.dispose(); // dispose()会直接删除Dom元素
      }
    },
    openDialog(url) {
      this.currentVideoUrl = url;
      this.dialogVisible = true;
    },
    loadData() {},
    onPlayerPlay(player) {
      // your logic
    },
    onPlayerPause(player) {
      // your logic
    },
    onPlayerEnded(player) {
      // your logic
    },
  },
};
</script>
<style>
.el-dialog__body{
    padding: 0 !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scope>
 ::v-deep .videoShowModal .el-dialog__body{
    padding: 0;
 }

.page-wrapper {
  width: 100%;
  height: 100%;
  background: no-repeat center center url("~@/assets/images/layout/main_bg.png");
  background-size: 100% 100%;
  .video-wrapper {
    // background-color: #fff;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0.1rem;
    margin-top: 0.5rem;
  }
  .item {
    width: 32.3333%;
    height: 300px;
    margin-right: 0.1rem;
    margin-top: 0.1rem;
    // margin-left: 0.1rem;
    background-color: pink;
    &: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>
