import { playHikUrl } from "../../../public/js/url.js";
var deviceVideoWindow = [];//保存正在播放的视频窗口
function showRightPage() {
    setInitPage();
}
function setInitPage() {
    var div = setVideoDivHtml(4);
    $(".videoShowInfo").html(div);
    videoPlayEvent();
    var that = document.getElementsByClassName("fourScreen")[0]
    setVideoFourDivSize(that);
}
function setVideoDivHtml(number) {
    var div = "";
    if (deviceVideoWindow.length != 0) {
        if (deviceVideoWindow.length <= number) {
            for (var i = 0; i < deviceVideoWindow.length; i++) {
                let cameraIndexCode = deviceVideoWindow[i]["deviceid"];
                let cameraName = deviceVideoWindow[i]["cameraName"];
                var url=`${playHikUrl}?cameraIndexCode=${cameraIndexCode}`
                div += `<div id="videoMonitorDevice${cameraIndexCode}" deviceid="${cameraIndexCode}">
                        <p class="videoShowName">${cameraName}</p>
                        <div class="videoShowImg">
                            <iframe src=${url} width='100%' height='100%'></iframe>
                        </div>
                </div>`;
            }
            var count = number - deviceVideoWindow.length;
            div += noDataDiv(count);
        } else {
            div += noDataDiv(number);
            var count = deviceVideoWindow.length;
            for (var i = count - 1; i >= 0; i--) {
                let deviceid = deviceVideoWindow[i]["deviceid"];
                closeVideo(deviceid);
                delDeviceVideoWindow(deviceid);
            }
        }
    } else {
        div += noDataDiv(number);
    }
    return div;
}
function noDataDiv(number) {
    var div = "";
    for (var j = 0; j < number; j++) {
        div += `<div></div>`;
    }
    return div;
}
$(".videoScreen>img").on('click', function () {
    var number = $(this).attr("number");
    var div = setVideoDivHtml(parseInt(number));
    $(".videoShowInfo").html(div);
    videoPlayEvent();
    switch (number) {
        case "1":
            setVideoOneDivSize(this);
            break;
        case "2":
            setVideoTwoDivSize(this);
            break;
        case "4":
            setVideoFourDivSize(this);
            break;
        case "9":
            setVideoNiceDivSize(this);
            break;
        case "16":
            setVideoSixteenDivSize(this);
            break;
        default:
            break;
    }
    videoPlayEvent();
})

function videoPlayEvent() {
    $(".videoShowInfo>div").unbind();
    $(".videoShowInfo>div").click(function () {
        $(this).attr("class", "videoOption");
        $(this).siblings().removeClass("videoOption")
    })
}

function getAloneVideoData(cameraIndexCode, cameraName) {
    //这里需要先点击播放框在播放
    var videoShowDiv = $(".videoShowInfo>div");
    var flag = 0;
    for (var i = 0; i < videoShowDiv.length; i++) {
        var thisVideo = videoShowDiv[i];
        var cls = $(thisVideo).attr("class");
        if (cls == "videoOption") {
            var optiondeviceid = $(thisVideo).attr("deviceid");
            flag = 1;
            for (var j = 0; j < deviceVideoWindow.length; j++) {
                if (cameraIndexCode == deviceVideoWindow[j]["deviceid"]) {
                    flag = 2;
                    layer.msg("当前视频正在播放,请先关闭");
                    break;
                }
            }
            break;
        }
    }
    if (flag == 0) {
        layer.msg("请选择播放窗口");
        return;
    } else if (flag == 1) {
        if (optiondeviceid != undefined) {
            if (optiondeviceid != cameraIndexCode) {
                closeVideo(optiondeviceid);//关闭上一个，打开一个新的
            }
        }
        openMoveDeviceVideo(cameraIndexCode, cameraName)
    }
}

function openMoveDeviceVideo(cameraIndexCode, cameraName) {
    var url = `${playHikUrl}?cameraIndexCode=${cameraIndexCode}`
    playMdevVideo(cameraIndexCode, cameraName, url)
}

function playMdevVideo(cameraIndexCode, cameraName, url) {
    var deviceVideoObj = {
        "deviceid": cameraIndexCode,
        "cameraName": cameraName,
        "status": "open"
    }
    var iframe = `<p class="videoShowName">${cameraName}</p>
            <div class="videoShowImg">
                <iframe src=${url}  width='100%' height='100%' ></iframe>
            </div>`;
    $(".videoShowInfo>.videoOption").html(`${iframe}`);
    $(".videoShowInfo>.videoOption").attr("id", `videoMonitorDevice${cameraIndexCode}`).attr("deviceid", `${cameraIndexCode}`);
    deviceVideoWindow.push(deviceVideoObj);
}

function setVideoOneDivSize(that) {
    $(that).attr("src", "./image/oneSelect.png");
    $(".twoScreen").attr("src", "./image/twoNoSelect.png");
    $(".fourScreen").attr("src", "./image/fourNoSelect.png");
    $(".niceScreen").attr("src", "./image/niceNoSelect.png");
    $(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
    $(".videoShowInfo>div").css("width", "100%").css("height", "100%");
}

function setVideoTwoDivSize(that) {
    $(that).attr("src", "./image/twoSelect.png");
    $(".oneScreen").attr("src", "./image/oneNoSelect.png");
    $(".fourScreen").attr("src", "./image/fourNoSelect.png");
    $(".niceScreen").attr("src", "./image/niceNoSelect.png");
    $(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
    $(".videoShowInfo>div").css("width", "50%").css("height", "100%");
}

function setVideoFourDivSize(that) {
    $(that).attr("src", "./image/fourSelect.png");
    $(".oneScreen").attr("src", "./image/oneNoSelect.png");
    $(".twoScreen").attr("src", "./image/twoNoSelect.png");
    $(".niceScreen").attr("src", "./image/niceNoSelect.png");
    $(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
    $(".videoShowInfo>div").css("width", "50%").css("height", "50%");
}

function setVideoNiceDivSize(that) {
    $(that).attr("src", "./image/niceSelect.png");
    $(".oneScreen").attr("src", "./image/oneNoSelect.png");
    $(".twoScreen").attr("src", "./image/twoNoSelect.png");
    $(".fourScreen").attr("src", "./image/fourNoSelect.png");
    $(".sixteenScreen").attr("src", "./image/sixteenNoSelect.png");
    $(".videoShowInfo>div").css("width", "33.33%").css("height", "33.33%");
}

function setVideoSixteenDivSize(that) {
    $(that).attr("src", "./image/sixteenSelect.png");
    $(".oneScreen").attr("src", "./image/oneNoSelect.png");
    $(".twoScreen").attr("src", "./image/twoNoSelect.png");
    $(".fourScreen").attr("src", "./image/fourNoSelect.png");
    $(".niceScreen").attr("src", "./image/niceNoSelect.png");
    $(".videoShowInfo>div").css("width", "25%").css("height", "25%");
}

function delDeviceVideoWindow(deviceid) {
    for (var j = 0; j < deviceVideoWindow.length; j++) {
        if (deviceid == deviceVideoWindow[j]["deviceid"]) {
            deviceVideoWindow.splice(j, 1)
        }
    }
}

function closeVideo(deviceid) {
    delDeviceVideoWindow(deviceid);
}


//这里我需要监听一下视频的数据是否正常，正常以后，我在去resize
window.addEventListener('message', function (e) {
    var data = e.data;
    var cmd = data["cmd"];
    var deviceid = data["deviceid"];
    if (cmd == "videoloadedSuccess") {
        var width = parseFloat($(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width"));
        var height = parseFloat($(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("height"));
        //为了让视频自适应
        $(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width", width + 1 + "px").css("height", height + 1 + "px")
        $(`.videoShowInfo>#videoMonitorDevice${deviceid}>.videoShowImg`).css("width", width - 1 + "px").css("height", height - 1 + "px")
    }
    if (cmd == "closePage") {
        $(`.videoShowInfo>#videoMonitorDevice${deviceid}>iframe`).remove();
        $(`.videoShowInfo>#videoMonitorDevice${deviceid}`).html("");
        $(`.videoShowInfo>#videoMonitorDevice${deviceid}`).removeAttr("deviceid");
        delDeviceVideoWindow(deviceid);
    }
})






//页面销毁的时候，需要调用的关闭的
function videoClosePage() {
    var count = deviceVideoWindow.length;
    for (var i = count - 1; i >= 0; i--) {
        let deviceid = deviceVideoWindow[i]["deviceid"];
        closeVideo(deviceid);
    }
}

$(window).bind('beforeunload', function () {
    videoClosePage();
});


export {
    showRightPage,
    getAloneVideoData
}