var layer;// 定义全局变量

//标记播放页，默认true是单播放页，false为四播放页
var tagVideo = true;

//标记播放的div
var number = 0;

//存放播放div对应的设备信息
var cameraData = [{id:null,url:null,type:null}, {id:null,url:null,type:null},
    {id:null,url:null,type:null}, {id:null,url:null,type:null}, {id:null,url:null,type:null}];

//播放方式，IN表示内网访问，OUT表示外网访问，默认为IN
var videoType;

$(function () {
    layui.use(['layer', 'laypage', 'form', 'table', 'upload', 'element'], function () {
        layer = layui.layer;

        //初始化视频列表
        initCameraList(cameraList);

        //根据第一个设备判断播放模式
        firstCamera(cameraList[0]);

        //获取播放模式
        videoType = $('#select_type').val();

        //初始化时默认单播放页播放列表第一个设备
        getMediaAddr(cameraList[0].id);
    });
});

//添加播放方式选择
$("#select_type").change(function () {
    videoType = $('#select_type').val();

    //清空播放信息
    if (tagVideo) {
        cameraData[number].url = null;
        cameraData[number].id = null;
        cameraData[number].type = null;
        clearVideo(number);
    }else {
        for(var j = 1;j<cameraData.length;j++) {
            cameraData[j].url = null;
            cameraData[j].id = null;
            cameraData[j].type = null;
            clearVideo(j);
        }
    }
    number = 0;
});

//初始化同类型设备列表
function initCameraList(list) {
    var html = '';
    if (list) {
        list.forEach(function (data) {
            html += '<li><a href="javascript:void(0)" onclick="getMediaAddr(\'' + data.id + '\')">';
            if(data.type == "01"){
                html += '<img src="../../static/images/qiangji.png"/><p>';
            }
            if(data.type == "02"){
                html += '<img src="../../static/images/qiuji.png"/><p>';
            }
            html += data.name + '</p></a></li>';
        });
        //设置设备数量
        $("#videoNum").html("当前共有" + list.length + "个视频监控");
    } else {
        $("#videoNum").html("当前共有0个视频监控");
    }
    $("#videoList").html(html);
}

//判断第一个设备播放模式，并设置模式选择框值
function firstCamera(data) {
    //判断web播放是否设置，若设置则默认使用web播放
    if(data.webUrl){
        //给选择框赋值
        $("#select_type option[value='WEB']").attr("selected", true);
        return;
    }
    //判断web播放是否设置，若设置使用VLC播放
    if(data.mediaAddr && data.ipIn){
        //给选择框赋值
        $("#select_type option[value='IN']").attr("selected", true);
        return;
    }
    //判断web播放是否设置，若设置使用VLC播放
    if(data.mediaAddr && data.ipOut){
        //给选择框赋值
        $("#select_type option[value='OUT']").attr("selected", true);
    }
}

//根据id获取流媒体地址
function getMediaAddr(deviceId) {

    //判断设备播放模式是否支持所选方式
    for(var i = 0; i<cameraList.length; i++){
        if(cameraList[i].id == deviceId){
            if(videoType == "WEB"){
                if(cameraList[i].webUrl == null || cameraList[i].webUrl == "null" || cameraList[i].webUrl == ""){
                    layer.msg("不支持当前播放方式，请切换！",{
                        time:3000
                    });
                    return;
                }
            }else {
                if(cameraList[i].mediaAddr == null || cameraList[i].mediaAddr == "null" || cameraList[i].mediaAddr == ""){
                    layer.msg("不支持当前播放方式，请切换！",{
                        time:3000
                    });
                    return;
                }
            }
        }
    }

    //判断选择的设备是否已在播放中
    for(var i = 0; i<cameraData.length; i++){
        if(cameraData[i].id == deviceId){
            //若选择设备在播放中，则判断正播放模式是否跟新选择的模式相同
            if(cameraData[i].type == videoType){
                //若播放模式一样，则直接刷新播放，不再ajax请求
                startVideo(i, cameraData[i].url);
                return;
            }else {
                //若播放模式不同，则继续ajax请求，并且标记播放的div
                if(i>0){
                    number = i-1;
                }
                break;
            }
        }
    }

    //根据设备id发送ajax请求到后台，更新流媒体播放地址
    $.ajax({
        type: 'POST',
        url: '../../basic/device/video/getMediaAddr',
        dataType: 'JSON',
        contentType: 'application/json',
        data: JSON.stringify({
            "id": deviceId, "companyId": companyId, "videoType": videoType
        }),
        success: function (result) {
            if (result.code == '0000') {
                //判断使用哪个div播放
                judgeVideo(result.data.newMediaAddr, deviceId);
            }
        }
    });
}

//判断使用哪个div播放
function judgeVideo(mediaAddr, deviceId) {

    //判断当前是单播放页还是四播放页
    if (!tagVideo) {
        //四播放页时，需要判断在哪个div中播放
        if(number == 4){
            //若number=4，则新的播放在1中播放，重新设置number为1
            number = 1;
        }else {
            //若number为1、2、3，则新的播放在 number+1 中播放
            number += 1;
        }
    }
    cameraData[number].url = mediaAddr;
    cameraData[number].id = deviceId;
    cameraData[number].type = videoType;
    startVideo(number, cameraData[number].url);
}

//单播放和四播放相互切换
var $tabHd = $(".sp-tab-hd span");
$tabHd.click(function () {
    //判断当前播放页并切换
    if (tagVideo) {  //单播放转四播放时，取单播放给四播放第一个
        //标记为四播放页
        tagVideo = false;
        if(cameraData[number].id != null){
            //标记播放的div
            number = 1;

            //设置播放div的流媒体地址和设备id
            cameraData[number].url = cameraData[number-1].url;
            cameraData[number].id = cameraData[number-1].id;
            cameraData[number].type = cameraData[number-1].type;

            //清空单播放页div的流媒体地址和设备id
            cameraData[number-1].url = null;
            cameraData[number-1].id = null;
            cameraData[number-1].type = null;

            //清空单播放页div
            clearVideo(number-1);

            //div播放
            startVideo(number, cameraData[number].url);
        }
    } else {  //四播放转单播放时，取四播放第一个给单播放
        //标记为单播放页
        tagVideo = true;

        if(cameraData[1].id != null){
            //标记播放的div
            number = 0;

            //设置播放div的流媒体地址和设备id
            cameraData[number].url = cameraData[number+1].url;
            cameraData[number].id = cameraData[number+1].id;
            cameraData[number].type = cameraData[number+1].type;

            //遍历清空四播放页div的流媒体地址和设备id
            for(var j = 1;j<cameraData.length;j++) {
                cameraData[j].url = null;
                cameraData[j].id = null;
                cameraData[j].type = null;
                clearVideo(j);
            }

            //div播放
            startVideo(number, cameraData[number].url);
        }
    }
    var $index = $tabHd.index(this);
    var $tabBd = $(".sp-tab-bd .sp-showBox");
    $(this).addClass("active").siblings().removeClass("active");
    $tabBd.eq($index).addClass("show").siblings().removeClass("show");
});

//播放视频
function startVideo(num, mediaAddr) {
    var tag = "#video" + num;
    $(tag).html("");
    var html = '';

    //判断播放类型，是外网访问还是内网访问
    if(videoType == "WEB"){
        //live模式
        // html += '<video id="myPlayer'+num+'" width="100%" height="100%" src="'+ mediaAddr +'" [autoplay] controls playsInline webkit-playsinline></video>';
        //   //  测试
        // html += '<video id="myPlayer'+num+'" width="100%" height="100%" src="ezopen://open.ys7.com/C62644134/1.hd.live" [autoplay] controls playsInline webkit-playsinline></video>';

        //hls模式
        html += '<video id="myPlayer'+num+'" width="100%" height="100%" poster="" controls playsInline webkit-playsinline>';
        html += '<source src="' + mediaAddr + '" type="application/x-mpegURL"/></video>';
            //测试
        // html += '<video id="myPlayer'+num+'" width="100%" height="100%" poster="" controls playsInline webkit-playsinline>' +
        //     '<source src="https://hls01open.ys7.com/openlive/f915255a20f546a58d8baef026509f39.m3u8" type="application/x-mpegURL"/>' +
        //     '</video>';

        $(tag).append(html);
        //初始化播放地址
        var player = new EZUIKit.EZUIPlayer('myPlayer'+num);
        //播放
        player.play();
    }else {
        html += '<object type="application/x-vlc-plugin" id="video-1"' +
            'events="true" width="100%" height="100%"' +
            'pluginspage="http://www.videolan.org"' +
            'th:codebase="@{../../static/plugins/vlc/npapi-vlc-2.2.2.tar.xz}">' +
            '<param name="mrl" value="' + mediaAddr + '"/>'+
            '<param name="volume" value="50"/>' +
            '<param name="autoplay" value="true"/>' +
            '<param name="loop" value="false"/>' +
            '<param name="fullscreen" value="true"/>' +
            '<param name="toolbar" value="false"/>' +
            '</object>';
        $(tag).append(html);
    }
}

//清空div中的object播放标签
function clearVideo(num) {
    var tag = "#video" + num;
    $(tag).html('<img src="../../static/images/sp-img.png" class="sp-hideImg"/>');
}