var layer;
var splitWin = 1;  //分屏数，默认1分屏
var windowsNum = 1; //播放窗口下标，手动选择模式下使用
var timer;
var table;
var cameraData;
var playUrl= null;

$(function () {
    layui.use(['layer', 'table'], function () {
        layer = layui.layer;
        table = layui.table;
    });
    
    showPtz = function(){
        $("#ptz-block").css("opacity",1);
    };

    disPtz = function(){
        $("#ptz-block").css("opacity",0);
    };

    //初始化渲染播放列表
    renderList();
});

/**
 * 播放窗口选中
 * @param win1 分屏数
 * @param win2 选中窗口数
 */
function selectWin(win1,win2) {
    removeSelectCss();
    splitWin = win1;
    windowsNum = win2;
    addSelectCss();
}

/**
 * 去除选中CSS
 */
function removeSelectCss() {
    $("#f" + splitWin + "_d" + windowsNum).removeClass("selectWin");
}

/**
 * 增加选中CSS
 */
function addSelectCss() {
    $("#f" + splitWin + "_d" + windowsNum).addClass("selectWin");
}

/**
 * 分屏切换
 * @param tagNum  分屏数
 */
function fenping(tagNum) {

    //切换分屏图标及页面
    if (tagNum == 1) {
        $("#f_1").attr("src", "/img/web/group/fp_1_active.png");
        $("#f_4").attr("src", "/img/web/group/fp_4.png");
        $("#f_9").attr("src", "/img/web/group/fp_9.png");
        $("#video_1").css('display', 'block');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'none');
    }
    if (tagNum == 4) {
        $("#f_1").attr("src", "/img/web/group/fp_1.png");
        $("#f_4").attr("src", "/img/web/group/fp_4_active.png");
        $("#f_9").attr("src", "/img/web/group/fp_9.png");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'block');
        $("#video_9").css('display', 'none');
    }
    if (tagNum == 9) {
        $("#f_1").attr("src", "/img/web/group/fp_1.png");
        $("#f_4").attr("src", "/img/web/group/fp_4.png");
        $("#f_9").attr("src", "/img/web/group/fp_9_active.png");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'block');
    }
}

/**
 * 点击播放
 * @param cameraId
 */
play = function (data) {
    layer.msg("正在获取播放信息……");
    cameraData = null;
    playUrl = null;
    var data = {
        id: data.id,
        playType: data.playType
    };
    $.ajax({
        type: 'POST',
        url: "/security/get-media",
        dataType: 'JSON',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "SUCCESS") {
                layer.msg(result.msg);
            } else {
                cameraData = result;
                playUrl = result.playUrl;
                play2();
            }
        },
        error: function (result) {
            play2();
        }
    });
};

play2 = function () {

    if (!cameraData) {
        layer.alert("未获取到当前摄像头播放信息！！");
        return;
    }

    if(PlayType.VLC == cameraData.playType){ //说明使用本地VLC播放
        vlcToPlay();
    }

    if (PlayType.PLAY_TYPE_WEB_RTC_DH == cameraData.playType
    || PlayType.PLAY_TYPE_WEB_RTC_HIK == cameraData.playType) {//使用web-rtc播放
        webRtcToPlay();
    }
};


function renderList() {
    if (!listCamera || listCamera.length == 0) {
        return;
    }
    var eleTable = document.getElementById("cameraList");
    var _tr;
    var _td;
    listCamera.forEach(function (data) {
        _tr = document.createElement("tr");
        _tr.ondblclick = function () {
            play(data);
        };

        _td = document.createElement("td");
        _td.innerText = data.name;
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = data.type == "01" ? "枪机" : "球机";
        _tr.appendChild(_td);

        _td = document.createElement("td");
        _td.innerText = data.status == "OFF" ? "离线" : "在线";
        _tr.appendChild(_td);

        eleTable.appendChild(_tr);
    });
}


/**
 * 播放还是暂停
 */
function playStop() {
    var videL = $('#easyPlayer');
    if (videL.paused) {
        videL.play();
    } else {
        videL.pause();
    }
}
/*============= vlc视频播放 ----- 开始 ===============*/
function vlcToPlay() {
    $("#video").css('display','none');
    $("#vlcPlayer").css('display','block');
    var html = '';
    html += '<object type="application/x-vlc-plugin"' +
        '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="' + playUrl + '"/>'+
        '<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>';
    $("#vlcPlayer").html(html);
}

/*============= webRtc视频播放 ----- 开始 ===============*/

/*============= webRtc视频播放 ----- 开始 ===============*/
/**
 * 开始播放
 * @param winTag  播放窗口
 * @returns {Promise<void>}
 */
async function webRtcToPlay() {
    layer.msg("开始启动播放……");
    $("#vlcPlayer").css('display','none');
    $("#video").css('display','block');

    if(playUrl){
        mediaStream = new MediaStream();
        $("#video")[0].srcObject = mediaStream;
        webrtc = new RTCPeerConnection({
            iceServers: [{
                urls: ["stun:stun.l.google.com:19302"]
            }],
            sdpSemantics: "unified-plan"
        });
        webrtc.onsignalingstatechange = signalingstatechange;

        webrtc.ontrack = ontrack
        let offer = await webrtc.createOffer({

            offerToReceiveAudio: true,
            offerToReceiveVideo: true
        });
        await webrtc.setLocalDescription(offer);
    }
}

function ontrack(event) {
    mediaStream.addTrack(event.track);
}

async function signalingstatechange() {
    switch (webrtc.signalingState) {
        case 'have-local-offer':
            // let uuid = $('#uuid').val();
            let url = playUrl + "?uuid=" + cameraData.cameraId + "&channel=0";
            $.post(url, {
                data: btoa(webrtc.localDescription.sdp)
            }, function (data) {
                try {
                    console.log(data);
                    webrtc.setRemoteDescription(new RTCSessionDescription({
                        type: 'answer',
                        sdp: atob(data)
                    }))
                } catch (e) {
                    console.warn(e);
                }

            });
            break;
        case 'stable':
            break;
        case 'closed':
            break;
        default:
            console.log(`unhandled signalingState is ${webrtc.signalingState}`);
            break;
    }
}
/*============= 视频播放 ----- 结束 ===============*/