var layer;// 定义全局变量
var testList = [
    {"id":"1","name":"摄像机1","type":"3004","type0":"1","username":"admin","pwd":"a1234567","ipIn":"192.168.0.200","portInC":"554","portInV":"80","ipOut":"192.168.0.200","portOutC":"0","portOutV":"0","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":""},
    {"id":"2","name":"摄像机2","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
    {"id":"3","name":"摄像机3","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
    {"id":"4","name":"摄像机4","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"}
    // {"id":"5","name":"测试视频#5","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
    // {"id":"6","name":"测试视频#6","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
    // {"id":"7","name":"测试视频#7","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"},
    // {"id":"8","name":"测试视频#8","type":"3004","type0":"0","username":"username","pwd":"123456","ipIn":"192.168.1.123","portInC":"554","portInV":"1","ipOut":"192.168.1.123","portOutC":"1","portOutV":"1","chanNum":"1","chanNumOut":"1","brand":"测试品牌","vld":"0","address":"地址","mediaAddr":"rtsp://{username}:{pwd}@{ip}:{port}/MPEG-4/ch1/sub/av_stream","webUrl":"webUrl"}
];

//标记播放页，默认true是单播放页，false为四播放页
var tagVideo = true;
//标记播放的div
var number = 0;
//存放播放div对应的设备信息
var cameraData = [{id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null},
    {id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null}, {id:null,name:null,url:null,type:null}];

//播放方式，IN表示内网访问，OUT表示外网访问，默认为IN
var videoType;
var deviceList = [];
var deviceMap = [];
var cdata = {};

(function () {

    layui.use(['layer'], function () {
        layer = layui.layer;
    });

    if (TEST_TAG) {
        deviceList = testList;
        cameraSetMap(deviceList);
        renderCameraList();
    }else{
        //根据设备类型type从接口中获取同类型设备实时监控
        initCameraList();
    }

    //根据第一个设备判断播放模式
    firstCamera(deviceList[0].id,deviceList[0].name);

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

}).call(this);


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

    //清空播放信息
    if (tagVideo) {
        cameraData[number].name = null;
        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].name = null;
            cameraData[j].url = null;
            cameraData[j].id = null;
            cameraData[j].type = null;
            clearVideo(j);
        }
    }
    number = 0;
});

//根据设备类型获取视频设备列表
function initCameraList(){
    $.ajaxSettings.async = false;
    $.get("./cgi-bin/device-vedio/query", function (data, status) {
        if ("success" == status) {
            deviceList = data;
            renderCameraList();
            cameraSetMap(deviceList);
        } else {
            window.parent.notify("系统获取监控设备信息失败！");
        }
    }, "json");
}
//初始化同类型设备列表
function renderCameraList() {
    var html = '';
    if (deviceList) {
        deviceList.forEach(function (data) {
            html += '<li><a href="javascript:void(0)" onclick="getMediaAddr(\'' + data.id + '\',\'' + data.name + '\')">';
            if(data.type0 == "0"){
                html += '<img src="images/qiangji.png"/><p>';
            }
            if(data.type0 == "1"){
                html += '<img src="images/qiuji.png"/><p>';
            }
            html += data.name + '</p></a></li>';
        });
        //设置设备数量
        $("#videoNum").html("当前共有" + deviceList.length + "个视频监控");
    } else {
        $("#videoNum").html("当前共有0个视频监控");
    }
    $("#videoList").html(html);
}

function cameraSetMap(deviceList) {
    deviceList.forEach(function (data) {
        deviceMap[data.id] = data;
    });
}

//判断第一个设备播放模式，并设置模式选择框值
function firstCamera(id,name) {
    getCameraById(id);
    var hostname = window.location.hostname;
    // var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
    var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
    var html = "<iframe id='myPlayer' width='100%' height='100%' style='border-radius: 5px;'" +
        "src='"+src+"'></iframe>";
    $("#video0").html(html);
}

//根据id获取流媒体地址
function getMediaAddr(id,name) {
    getCameraById(id);
    var hostname = window.location.hostname;
    if(tagVideo){
        // console.log(window.location);
        // console.log(window.location.hostname);
        // var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
        var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
        var html = "<iframe id='myPlayer' width='100%' height='100%' style='border-radius: 5px;'" +
            "src='"+src+"'></iframe>";
        $("#video0").html(html);

    }else{
        var myPlayerID = "myPlayer"+cdata.id;
        var myPlayer = document.getElementById(myPlayerID);

        if(myPlayer){
            var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
            // var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
            var html = "<iframe id='myPlayer"+cdata.id+"' width='100%' height='100%' style='border-radius: 5px;'" +
                "src='"+src+"'></iframe>";
            myPlayer.parentElement.innerHTML = html;

        }else {
            //一个新的视频
            number++;
            if(number == 5){
                number = 1;
            }

            var videoID = "video"+number;
            var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
            // var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
            var html = "<iframe id='myPlayer"+cdata.id+"' width='100%' height='100%' style='border-radius: 5px;'" +
                "src='"+src+"'></iframe>";
            $("#"+videoID).html(html);
        }
    }

}

//根据id获取流媒体地址
function getURL(id,name) {
    getCameraById(id);
    var hostname = window.location.hostname;
    // console.log(window.location);
    // console.log(window.location.hostname);
    // var src = "http://127.0.0.1:8083" + "/stream/player/" + name;
    var src = "http://" + hostname + ":8083" + "/stream/player/" + name;
    return src;
}


function getCameraById(id) {
    cdata = deviceMap[id];
    if(tagVideo){
        cameraData[0].id = cdata.id;
        cameraData[0].name = cdata.name;
        cameraData[0].url = cdata.url;
        cameraData[0].type = cdata.type;
    }else{
        cameraData[number].id = cdata.id;
        cameraData[number].name = cdata.name;
        cameraData[number].url = cdata.url;
        cameraData[number].type = cdata.type;
    }
}


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

    var src = getURL(data.id,data.name);

    html += "<iframe id='myPlayer"+ data.id +"' width='100%' height='100%' style='border-radius: 5px;'";
    html += "src='" + src + "' ></iframe>";

    $(tag).html(html);

}


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



//摄像头控制事件
function action(value) {
    // var param = {"ip":cdata.ipIn,"usr":cdata.username,"password":cdata.pwd,"cmd":value};
    // console.log("上传参数：");
    // console.log(JSON.stringify(param));
    // // $.ajaxSettings.async = false;
    // $.post("./cgi-bin/device-vedio/ptz", JSON.stringify(param), function (data, status) {
    //     if ("success" == status) {
    //
    //     } else {
    //
    //     }
    // }, "json");
}


//单播放和四播放相互切换
var $tabHd = $(".sp-tab-hd span");
$tabHd.click(function () {
    var html = '<img src="./images/sp-img.png" class="sp-hideImg"/>';
    //判断当前播放页并切换
    if (tagVideo) {  //单播放转四播放时，取单播放给四播放第一个
        //标记为四播放页
        tagVideo = false;
        number = 0;
        $("#video0").html(html);
    } else {  //四播放转单播放时，取四播放第一个给单播放
        //标记为单播放页
        tagVideo = true;
        $("#video1").html(html);
        $("#video2").html(html);
        $("#video3").html(html);
        $("#video4").html(html);
    }
    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");
});