<template>
    <div class="base_dialog_video">

        <el-dialog :visible.sync="dialogTableVisible" width="70%" top="5vh">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="单屏" name="1"></el-tab-pane>
                <el-tab-pane label="四分屏" name="2"> </el-tab-pane>
                <el-tab-pane label="九分屏" name="3"></el-tab-pane>
                <el-tab-pane label="十六分屏" name="4"></el-tab-pane>
            </el-tabs>
            <div v-loading="loading">
                <div :class="!isVideo?'defaultHeight' : ''">
					<div class="player_div" v-if="isIndex == 1">
						<div class="player-event player" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
							<LivePlayer :videoUrl="item.WS_FLV" ref="player1" live />
						</div>
					</div>
					<div class="player_div" v-if="isIndex == 2">
						<div class="player-event player2" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
							<LivePlayer :videoUrl="item.WS_FLV" ref="player2" live />
						</div>
					</div>
					<div class="player_div" v-if="isIndex == 3">
						<div class="player-event player3" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
							<LivePlayer :videoUrl="item.WS_FLV" ref="player3" live />
						</div>
					</div>
					<div class="player_div" v-if="isIndex == 4">
						<div class="player-event player4" v-for="(item, index) in videoList" @click="checkWindows(item, index, $event)" :key="index" :class="{'active':index === activeIdx}">
							<LivePlayer :videoUrl="item.WS_FLV" ref="player4" live />
						</div>
					</div>
                </div>

                <!-- <div v-if="!isVideo" style="height: 80vh">
                    <div class="player_div" v-if="isIndex == 1">
                        <LivePlayer class="player" v-for="(item, index) in dataListOne" :key="index" ref="player2" live />
                    </div>

                    <div class="player_div" v-if="isIndex == 2">
                        <LivePlayer class="player2" v-for="(item, index) in dataListTwo" :key="index" ref="player2" live />
                    </div>

                    <div class="player_div" v-if="isIndex == 3">
                        <LivePlayer class="player3" v-for="(item, index) in dataListThree" :key="index" ref="player2" live />
                    </div>

                    <div class="player_div" v-if="isIndex == 4">
                        <LivePlayer class="player4" v-for="(item, index) in dataListFour" :key="index" ref="player2" live />
                    </div>
                </div> -->
            </div>
       
		
			<div class="float-ptz col-md-3 col-lg-2" id="dev-tree-ptz">
				<div class="ptz-block" :class="videoItem && videoItem.WS_FLV ? '' : 'disabled'">
					<div class="group-1">
						<div class="ptz-cell ptz-up" command="up" title="上" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-chevron-up"></i>
						</div>
						<div class="ptz-cell ptz-left" command="left" title="左" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-chevron-left"></i>
						</div>
						<div class="ptz-cell ptz-center" title="云台控制">
							<!-- <i class="fa fa-microphone" title="按住喊话" @mousedown.prevent="talkStart"  @mouseup.prevent="talkStart"></i>
							<i class="fa fa-microphone-slash" title="由于浏览器安全策略, 非 HTTPS 或 localhost 访问, 对讲不可用" ></i> -->
						</div>
						<div class="ptz-cell ptz-right" command="right" title="右" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-chevron-right"></i>
						</div>
						<div class="ptz-cell ptz-down" command="down" title="下" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-chevron-down"></i>
						</div>
					</div>
					<div class="group-2">
						<div class="ptz-cell ptz-zoomin" command="zoomin" title="放大" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-plus"></i>
						</div>
						<div class="ptz-cell ptz-zoomout" command="zoomout" title="缩小" @mousedown.prevent="ptzControl" @mouseup.prevent="ptzControl">
							<i class="fa fa-minus"></i>
						</div>
					</div>
				</div>
			</div>
		 </el-dialog>
    </div>
</template>

<script>
import "font-awesome/css/font-awesome.css"

import eventBus from "@/utils/eventbus"
import LivePlayer from '@liveqing/liveplayer'
import { grouptree, start } from '@/api'

export default {
    components: {
        LivePlayer,
    },

    data() {
        return {
            dialogTableVisible: false,
            activeName: '1',
            isVideo: false,
            dataList: [],
            /* dataListOne: [],
            dataListTwo: [],
            dataListThree: [],
            dataListFour: [], */
			videoList:[],
            isIndex: 1,
            loading: true,
			activeIdx:0,
			commandTimer:0,
			videoItem:{},
        }
    },

    mounted() {
        eventBus.$on("dialog_show_video", data => {
            this.dialogTableVisible = true
            this.dataList = []
            this.isIndex = 1
            this.loading = true
            this.activeName = '1'
            this.isVideo = false

            if (data.list.length == 0) {
                for (let i = 0; i < 16; i++) {
                    this.dataList.push(i)
                }
                this.loading = false
                this.videoList = this.dataList.slice(0, 1)
                return
            }

            let indexVideo = 0;
            for (let item of data.list) {
                start(
                    {
                        serial: data.parentSerial,
                        code: item.code,
                    }
                ).then(res => {
					if(typeof res === 'object'){
						if (res && res.WS_FLV) {
							this.dataList.push(res)
						}
						
						let dataLen = data.list.length;
						if (0 === indexVideo) {
							setTimeout(() => {
								let len = this.dataList.length
								if (len < 16) {
									for (let i = 0; i < 16 - len; i++) {
										this.dataList.push('')
									}
								};
								this.loading = false
								this.isVideo = true
								this.videoList = this.dataList.slice(0, 1);
								
								var item = this.videoList[0];
								if(item && res.WS_FLV){
									this.videoItem = item;
								};
							}, 100)
						};
						indexVideo++
					};
                })
            }
        });
    },

    methods: {
        handleClick(e) {
            this.isIndex = e.name;
			var num = [1, 1, 4, 9, 16][this.isIndex] || 1;
			this.videoList = this.dataList.slice(0, num);

            /* if (e.name == 1) {
                this.dataListOne = this.dataList.slice(0, 1)
            }

            if (e.name == 2) {
                this.dataListTwo = this.dataList.slice(0, 4)
            }

            if (e.name == 3) {
                this.dataListThree = this.dataList.slice(0, 9)
            }

            if (e.name == 4) {
                this.dataListFour = this.dataList.slice(0, 16)
            } */
        },
		checkWindows(item, index, e){
			if(this.activeIdx !== index){
				this.activeIdx = index;
				this.videoItem = item
			};
		},
		ptzControl(e) {
			var tag = e.target || e.srcElement;
			var that = this, player = this.videoItem || {};
			tag = tag.nodeName === 'I' ? tag.parentNode : tag;
			var command = e.type === 'mousedown' ? tag.getAttribute("command") : 'stop';
			// 测试设备
			//player.DeviceID = '34020000001110000023';
			//player.ChannelID = '34020000001320000096';
			if(player && player.FLV && command !== that.command){
				clearTimeout(that.commandTimer);
				that.command = command;

				var FLV = player.FLV;
				var http = FLV.match(/(.+?)\:/)[0];
				var host = FLV.match(/\/\/(.+?)\//g)[0];
				var url = http + host + 'api/v1/control/ptz';
				this.axios.get(url, {params:{
					serial: player.DeviceID,
					code: player.ChannelID,
					command: that.command
				}});

				if(that.command !== 'stop'){
					that.commandTimer = setTimeout(function(){	// 3秒后自动停止 (防止浏览器事件异常)
						console.log('clear Control ________________ ');
						that.command = 'stop';
						that.axios.get(url, {params:{
							serial: player.DeviceID,
							code: player.ChannelID,
							command: that.command
						}});
					}, 3000);
				};
			};
		},
    }
}
</script>

<style lang="scss">
.base_dialog_video {
    .player_div {
        height: 76vh;
		
		.player-event{
			display: inline-block;
			margin-right: 1%;
            margin-bottom: 1%;
		}
        .player-wrapper {
			width:100%; 
        }

        .player {
            width: 100%;
        }

        .player2 {
            width: 49%;
        }

        .player3 {
            width: 32%;
        }

        .player4 {
            width: 24%;
        }
    }

    .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
    }

	.defaultHeight{height:80vh;}

	.player_div {
        .active .video-inner {
			border: 2px solid red;
		}
    }

	.float-ptz{position:absolute;width:90px;height:120px;top:80px;right:-89px;background:#fff;border-radius:0 10px 10px 0;
		.ptz-cell{display:flex;align-items:center;justify-content:center;}
		.ptz-cell:active{color:#ccc}
		div.disabled{
			.ptz-cell{color:#ddd}
		}
		.group-1{position:absolute;width:100%;height:90px;top:0;left:0;
			.ptz-cell{position:absolute;height:30px;width:30px;}
			.ptz-up{top:0;left:33.33%;}
			.ptz-right{top:33.33%;right:0;}
			.ptz-down{bottom:0;right:33.33%;}
			.ptz-left{top:33.33%;left:0;}
		}
		.group-2{position:absolute;width:100%;height:30px;top:90px;left:0px;display:flex;
			.ptz-cell{flex:1}
			.ptz-zoomin{}
			.ptz-zoomout{}
		}
		.fa{font-size:20px}
	}
}
</style>