<template>
    <v-scale-screen width="2200" height="1080">
	    <div  class="task_screen_cotainer">
            <div class="task_header">训练态势监控大屏</div>
            <div class="exit_box_hanlde">
                <el-image
                    @click="showFull"
                    style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
                    :src="require('../assets/img/small.svg')"
                    fit="contain"
                    class="moreBtn_style"
                >
                </el-image>
            </div>
            <div class="monitor_video_box">
                <div class="full_video_box">
                    <div class="video_title_new">监控名称</div>
                    <!-- <video  id="videoPlayerTask" class="video-js" muted></video> -->
                    <MonitorHK :companyVideoData="videoData" v-if="isShow"/>
                </div>
                <div class="full_video_list">
                    <!-- <div>
                        <div class="video_title_new_child">
                            <div>监控名称</div>
                            <div class="play_to_full">大屏播放</div>
                        </div>
                        <video id="videoPlayer_first" class="video-js" muted></video>
                    </div> -->
                    <!-- <div>
                        <div class="video_title_new_child">
                            <div>监控名称</div>
                            <div class="play_to_full">大屏播放</div>
                        </div>
                        <video id="videoPlayer_second" class="video-js" muted></video>
                    </div> -->
                    <!-- <div>
                        <div class="video_title_new_child">
                            <div>监控名称</div>
                            <div class="play_to_full">大屏播放</div>
                        </div>
                        <video id="videoPlayer_third" class="video-js" muted></video>
                    </div> -->
                    <!-- <div>
                        <div class="video_title_new_child">
                            <div>监控名称</div>
                            <div class="play_to_full">大屏播放</div>
                        </div>
                        <video id="videoPlayer_fourth" class="video-js" muted></video>
                    </div> -->
                </div>
            </div>
        </div>
    </v-scale-screen>
</template>
<script>
import * as echarts from 'echarts';
import myFlylineChartEnhanced from '../components/my-flyline-chart-enhanced/index'
import myscrollBoard from '../components/myscroll-board/src/main'
import sacleBox from '../components/sacle-box/index'
import { request } from '../utils/request';
var uploadedDataURL = require('../../public/json/taiyuan.json')
import './taskScreen.css'
import Videojs from "video.js"; // 引入Videojs 

import MonitorHK from '../components/hk/monitorHK.vue';
export default {
    name: 'monitorScreen',
    components:{
        myFlylineChartEnhanced,
        sacleBox,
        myscrollBoard,
      
        MonitorHK
    },
    props: {
    videoData: {
      type: Array
    },
  },
    data() {
        return {
			
            dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
			playerList:[],
            isShow: false
               
            
        }
    },
    methods:{
		
        showFull(){
            this.$router.push('/taskScreen')
        },

        // 初始化视频
        initVideo(nowPlayVideoUrl,id,isAuto) {
			let that =this
            // 这些options属性也可直接设置在video标签上，见 muted
            let options = {
                autoplay: isAuto, // 设置自动播放
                controls: true, // 显示播放的控件
                sources: [
                    // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
                    {
                        src: nowPlayVideoUrl,
                        type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
                    }
                ]
            };
            // videojs的第一个参数表示的是，文档中video的id
			const myPlyer= Videojs(id, options, function onPlayerReady() {
                console.log("onPlayerReady 中的this指的是：", this); // 这里的this是指Player,是由Videojs创建出来的实例
                console.log(myPlyer === this); // 这里返回的是true
            });
			this.playerList.push(myPlyer)
        }

            
    },
    created(){ 
//   this.videoData = this.$route.query.videoData;
//   console.log(this.$route.query.videoData);
this.videoData = JSON.parse(this.$route.query.videoData);
    },
    mounted(){
     setTimeout(() => {
         this.isShow = true;
          }, 1000);
        
  
        // this.initVideo(this.dataSrc,'videoPlayerTask',true)
        // this.initVideo(this.dataSrc,'videoPlayer_first',false)
        // this.initVideo(this.dataSrc,'videoPlayer_second',false)
        // this.initVideo(this.dataSrc,'videoPlayer_third',false)
        // this.initVideo(this.dataSrc,'videoPlayer_fourth',false)
    },
	beforeDestroy() {
		if(this.playerList.length){
			this.playerList.forEach((item)=>{
				item.dispose()
			})
		}
    },
}
</script>
<style scoped>
.monitor_video_box {
    display: flex;
    align-items: flex-start;
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.full_video_box {
    width: 80%;
    height: 100%;
    /* border:1px solid red; */
    padding: 10px;
    box-sizing: border-box;
    background-image:url('../assets/img/opitty.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    margin-right: 15px;
}
.full_video_list {
    width: 20%;
    height: 100%;
    /* border:1px solid yellow; */
    padding:17px 10px 10px 10px;
    box-sizing: border-box;
    background-image:url('../assets/img/opitty.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.video_title_new {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
}
.exit_box_hanlde {
   display: flex;
   justify-content: end;
   padding-right: 4px;
}

#videoPlayerTask {
    width: 100%;
    height: 95%;
}

#videoPlayer_first {
   width: 419px;
   height: 182px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#videoPlayer_second {
   width: 419px;
   height: 182px;
    margin-bottom: 10px;
}

#videoPlayer_third {
    width: 419px;
   height: 182px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#videoPlayer_fourth {
    width: 419px;
   height: 182px;
}

</style>




