var time;
var splitWin = 4;  //分屏数，默认1分屏
var deptCur = null; //当前库区
var deptIndex = 0;  //库区下标
var cameraList = null;  //监控列表
var cameraIndex = 0;  //监控下标
var cameraTimer;     // 库区定时
var windowsNum = 1; //
var gundongTimer;     //监控列表滚动定时器

$(function () {
    // 初始化页面
    initHtml();

    // 初始化WebSocket
    // initWS(companyId,bizType, bizTag, userId);
});

// 初始化页面
function initHtml() {
    // 时间
    initTime();

    initDicSlogan();

    //监控点信息适应滚动
    initScrollbar(60);

    //库区信息
    renderDeptArea();
}

// socket信息返回處理
function socketOnMessage(pocket) {
    //console.log(pocket);
    if (pocket.bizId == "slogan") {
        var data = pocket.data;
        dicSlogan = data;
        initDicSlogan();
    }
}

// 渲染库区信息
function renderDeptArea() {
    reloadView(splitWin);
    //判断下标，如果库区切换下标等于库区列表长度，则重新循环
    if (deptIndex == deptList.length) {
        deptIndex = 0;
    }
    deptCur = deptList[deptIndex];

    $("#deptName").css("font-size", "18px");
    $("#deptName").html(deptCur.kqmc);
    $("#deptAddress").html(deptCur.xzqhmc == null ? "---" : deptCur.xzqhmc);
    $("#yxcr").html(deptCur.contact == null ? "---" : deptCur.contact);
    $("#cfs").html(deptCur.contactTel == null ? "---" : deptCur.contactTel);
    ajaxCamera();
}

//查询库区下监控信息
function ajaxCamera() {
    //先把监控列表置空
    cameraList = null;
    $.ajax({
        type: "POST",
        url: "/group/camera-list",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify({
            "deptId": deptCur.id
        }),
        success: function (result) {
            if (result.code == "0000") {
                cameraList = result.data;
                renderCamera();
            }
        },
        error: function (error) {
        }
    });
}

// 渲染监控列表
function renderCamera() {
    var html = '';
    if (cameraList != null && cameraList.length > 0) {
        $.each(cameraList, function (index, item) {
            html += '<div class="panel-content-body-tr">';
            html += '<span class="body-item" style="flex: 1.4">';
            html += item.name;
            html += '</span>';
            html += '<span class="body-item" style="flex: 0.6">';
            if (item.type == "02") {
                html += '球机';
            } else {
                html += '枪机';
            }
            html += '</span></div>';
        })
    } else {
        html += '<div class="panel-content-body-tr">';
        html += '<span class="body-item" style="flex: 1.4">暂无数据</span>';
        html += '<span class="body-item" style="flex: 0.6"></span>';
        html += '</div>';
    }
    $("#inventoryInfo").html(html);

    cameraSwitch1();
}

/* ---------- 监控切换 ---------- */
function cameraSwitch1() {
    //若库区下监控列表为空，则进入下个库区
    if (cameraList == null || cameraList.length === 0) {
        deptIndex++;
        cameraIndex = 0;
        clearInterval(cameraTimer);
        renderDeptArea();
    }else {
        cameraSwitch2();
        //1分钟切换视频
        cameraTimer = setInterval(function () {
            cameraSwitch2()
        }, 1000 * 60);
    }
}

function cameraSwitch2() {
    if(cameraIndex < cameraList.length){
        for (var i = 1; i <= splitWin; i++) {
            if (cameraIndex < cameraList.length) {
                //播放视频
                startPlay(cameraIndex, i);
                cameraIndex++;
            }
        }
    }else {
        cameraIndex = 0;
        deptIndex++;
        clearInterval(cameraTimer);
        renderDeptArea();
    }
}

/**
 *
 * @param cameraNum   摄像头列表下标
 * @param windowsNum 播放窗口下标
 */
function startPlay(cameraNum, windowsNum) {

    var camera = cameraList[cameraNum];
    console.log("监控列表下标=" + cameraNum + ",监控名称=" + camera.name + ",窗口下标=" + windowsNum);
    if (!camera) {
        $("#f" + splitWin + "_d" + windowsNum).html("未获取到摄像头播放信息！！");
        return;
    }

    var data = {
        id: camera.id,
        playType: camera.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") {
                toPlay(camera.name, windowsNum, null, result.msg);
            } else {
                toPlay(camera.name, windowsNum, result.playUrl, null);
            }
        },
        error: function (result) {
            toPlay(camera.name, windowsNum, null,  "未获取到播放信息！！");
        }
    });
}

function toPlay(name,windowsNum, url, msg) {
    var html = '';
    if (url) {
        html += '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>';
    } else {
        html += '<div style="margin-top: 25%;">'+name+'<br>' +msg+'</div>';
    }
    $("#f" + splitWin + "_d" + windowsNum).html(html);
}

/**
 * 分屏切换
 * @param tagNum  分屏数
 */
function fenping(tagNum) {
    if (tagNum === 9) {
        layer.msg("当前流媒体暂不支持9分屏播放！");
        return;
    }
    if (tagNum === 16) {
        layer.msg("当前流媒体暂不支持9分屏播放！");
        return;
    }
    //重置切换前的分屏窗口
    reloadView(splitWin);

    //赋值当前分屏数
    splitWin = tagNum;

    //重置切换后的分屏窗口
    reloadView(splitWin);

    //切换分屏图标及页面
    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");
        $("#f_16").attr("src", "/img/web/group/fp_16.png");
        $("#video_1").css('display', 'block');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'none');
        $("#video_16").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");
        $("#f_16").attr("src", "/img/web/group/fp_16.png");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'block');
        $("#video_9").css('display', 'none');
        $("#video_16").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");
        $("#f_16").attr("src", "/img/web/group/fp_16.png");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'block');
        $("#video_16").css('display', 'none');
    }
    if (tagNum === 16) {
        $("#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.png");
        $("#f_16").attr("src", "/img/web/group/fp_16_active.png");
        $("#video_1").css('display', 'none');
        $("#video_4").css('display', 'none');
        $("#video_9").css('display', 'none');
        $("#video_16").css('display', 'block');
    }
    //当前库区重新播放，监控列表播放下标重置为0
    cameraIndex = 0;
    clearInterval(cameraTimer);
    windowsNum = 1;

    cameraSwitch1();
}

//重置4分屏和9分屏的各个播放窗口
function reloadView(num) {
    var html;
    for (var i = 1; i <= num; i++) {
        html = '';
        html += '<video className="video" id="video' + num + '_' + i + ' autoPlay="" muted="" playsInline=""></video>';
        $("#f" + num + "_d" + i).html(html);
    }
}

// 刷新时间
function initTime() {
    setInterval(function () {
        $("#navBarDate").html(formatDate('mm月dd日', new Date()));
        $("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
        $("#navBarWeek").html(getWeekDate());
    }, 1000);
}

/**
 * 格式化日期
 *
 * @param fmt
 * @param date
 * @return {*}
 */
function formatDate(fmt, date) {
    var ret;
    var opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (var k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
    }
    return fmt;
}

/**
 * 获取当前星期几
 */
function getWeekDate() {
    var now = new Date();
    var day = now.getDay();
    var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    var week = weeks[day];
    return week;
}

//监控点信息滚动
function initScrollbar(num) {
    gundongTimer = setInterval(function () {
        if (!hasScrollbar()) {
            document.getElementById('inventoryInfoBox').scrollTop = 0;
        } else {
            if (document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight - document.getElementById('inventoryInfoBox').clientHeight)) {
                document.getElementById('inventoryInfoBox').scrollTop = 0;
            } else {
                document.getElementById('inventoryInfoBox').scrollTop++;
            }
        }
    }, num);
}

//判断底部是否出现滚动条
function hasScrollbar() {
    return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
}

// 右下角提醒信息
function showTip(msg) {
    layer.msg(msg);
}