var rtmpPlayer;
var flvPlayer;
var hlsPlayer;
var app;
var vm = new Vue({
    el: '#app',
    data: {
        isAdmin: isAdmin,
        model: model
    },
    mounted: function () {
        this.init();
        var theme = 'ios';
        var plugin = {
            params: {
                theme: theme,
                root: '#app',
            }
        };
        if (Framework7.use) {
            Framework7.use(plugin);
        }
        else if (Framework7.Class && Framework7.Class.use) {
            Framework7.Class.use(plugin);
        }
        app = new Framework7();
        if (isList == false && this.model.Name == '摄像头') {
            this.play2();
        }
        $('#callback').on('popup:closed', function (e, popover) {
            closePlayer();
        });
    },
    updated: function () {
        try {
            $('form').removeData('validator');
            $('form').removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse('form');
        } catch (e) {
            console.log(e);
        }
    },
    watch: {
        'model': {
            handler(val, oldVal) {
                var list = _.filter(val.Devices, function (o) {
                    if (o.Name === '烟雾感应器' || o.Name === '红外感应器') {
                        var data = _.first(_.filter(o.Data, function (d) { return d.Name === '状态' }));
                        if (data && data.Value && data.Value == '报警') {
                            console.log(o.Name + '/' + data.Value);
                            return true;
                        }
                    }
                    return false;
                });
                if (list.length > 0) {
                    setTimeout(function () {
                        try {
                            document.getElementById('alarm').play();

                        } catch (e) {
                            console.log(e);
                        }
                    }, 0);
                    setTimeout(function () {
                        try {
                            document.getElementById('alarm').pause();
                        } catch (e) {
                            console.log(e);
                        }
                    }, 3 * 1000);
                }
            },
            deep: true
        }
    },
    methods: {
        init: function () {
            load();
        },
        getDeviceDataValue: function (device, dataName) {
            if (device != null) {

                var data = _.first(_.filter(device.Data, function (o) { return o.Name === dataName }));
                if (data != null) {

                    if (data.Value) {
                        var value = data.Value;
                        if (data.Unit) {
                            value += " " + data.Unit;
                        }
                        if (data.Description) {
                            value += " " + data.Description;
                        }
                        return value;
                    }
                    else {
                        console.log('值为空：' + device.Name + '/' + dataName);
                    }
                }
                else {
                    console.log('无法找到：' + device.Name + '/' + dataName);
                }

            }
            else {
                console.log('无法找到：' + dataName);
            }
            return "";
        },
        getDevices: function (name) {
            var devices = this.model.Devices.filter(function (item) {
                return item.Name == name;
            });
            return _.orderBy(devices, ['DisplayOrder', 'DisplayName']);
        },
        getCount: function () {
            var args = arguments;
            return _.filter(this.model.Devices, function (o) { return _.includes(args, o.Name); }).length;
        },
        isSelect: function (device, key) {
            return _.filter(device.Data, function (o) { return o.Key == key + '[]' }).length > 0;
        },
        getSelect: function (device, key) {
            var data = _.first(_.filter(device.Data, function (o) { return o.Key == key + '[]' })).Value;
            var result = JSON.parse(data);
            return result;
        },
        getData: function (device, key) {
            var data = _.chain(device.Data).filter(function (o) { return o.Key == key; }).first().value();
            return (data === undefined || data == null) ? '' : data.Value;
        },
        send: function (id, cmd, query) {
            query = query || '';
            var url = '/Command/Exec/?node=' + this.model.Number + '&cmd=' + cmd + '&id=' + id;
            if (query != '') {
                url += "&" + query;
            }
            getJsonExt(url);
        },
        sendAll: function (name, cmd, query) {
            query = query || '';
            var url = '/Command/ExecAll/?node=' + this.model.Number + '&cmd=' + cmd;
            var list = this.getDevices(name);
            for (var i = 0; i < list.length; i++) {
                url += '&id[' + i + ']=' + list[i].Id;
            }
            if (query != '') {
                url += "&" + query;
            }
            getJsonExt(url);
        },
        sendGroup: function (name, cmd, query) {
            query = query || '';
            var url = '/Command/ExecAll/?node=' + this.model.Number + '&cmd=' + cmd;
            var list = this.model.Devices.filter(function (item) {
                return item.Name.indexOf(name) >= 0;
            }); for (var i = 0; i < list.length; i++) {
                url += '&id[' + i + ']=' + list[i].Id;
            }
            if (query != '') {
                url += "&" + query;
            }
            getJsonExt(url);
        },
        sendSence: function (id) {
            var url = '/Command/Sence/?node=' + this.model.Number + '&id=' + id;
            getJsonExt(url);
        },
        play: function (id) {
            var hasFlash = navigator.plugins['Shockwave Flash'];
            var device = _.chain(this.model.Devices).filter(function (o) { return o.Id == id; }).first().value();
            var key = (hasFlash ? "rtmp" : (flvjs.isSupported() ? 'flv' : 'hls')) + (isNode ? '1' : '2');
            var url = _.chain(device.Data).filter(function (o) { return o.Key === key; }).first().value().Value;
            console.log(url);
            if (hasFlash) {
                try {
                    if (rtmpPlayer != null) {
                        closePlayer();
                    }
                    $('#video-container').html('<div id="player" class="rtmp video"></div>');
                    app.popup.open('#callback');
                    rtmpPlayer = new Clappr.Player({
                        source: url,
                        parentId: "#player",
                        autoPlay: true,
                        plugins: { 'playback': [RTMP] },
                        rtmpConfig: {
                            swfPath: '/lib/clappr/clappr-rtmp-plugin/assets/RTMP.swf',
                            scaling: 'stretch',
                            playbackType: 'live',
                            bufferTime: 1,
                            startLevel: 0
                        },
                    });
                } catch (e) {
                    console.log(e);
                }
            }
            else if (flvjs.isSupported()) {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                app.popup.open('#callback');
                var videoElement = document.getElementById('player');
                try {
                    if (flvPlayer != null) {
                        closePlayer();
                    }
                    flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: url,
                        isLive: true,
                        cors: true,
                        enableStashBuffer: true
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
                } catch (e) {
                    console.log(e);
                }
            }
            else if (Hls.isSupported()) {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                app.popup.open('#callback');
                var video = document.getElementById('player');
                try {
                    if (hlsPlayer != null) {
                        closePlayer();
                    }
                    hlsPlayer = new Hls();
                    hlsPlayer.loadSource(url);
                    hlsPlayer.attachMedia(video);
                    hlsPlayer.on(Hls.Events.MANIFEST_PARSED, function () {
                        video.play();
                    });
                } catch (e) {
                    console.log(e);
                }
            }
            else {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                document.getElementById('player').src = url;
                app.popup.open('#callback');
            }
        },
        play2: function () {
            var device = this.model;
            var key = (flvjs.isSupported() ? 'flv' : 'hls') + (isNode ? '1' : '2');
            var url = _.chain(device.Data).filter(function (o) { return o.Key === key; }).first().value().Value;

            if (flvjs.isSupported()) {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                var videoElement = document.getElementById('player');
                var player = flvjs.createPlayer({
                    type: 'flv',
                    url: url,
                    isLive: true,
                    cors: true,
                    enableStashBuffer: true
                });
                player.attachMediaElement(videoElement);
                player.load();

            }
            else if (Hls.isSupported()) {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                var video = document.getElementById('player');
                if (Hls.isSupported()) {
                    var player = new Hls();
                    player.loadSource(url);
                    player.attachMedia(video);
                    player.on(Hls.Events.MANIFEST_PARSED, function () {
                        video.play();
                    });
                }
            }
            else {
                $('#video-container').html('<video id="player" class="video" muted controls autoplay></video>');
                document.getElementById('player').src = url;
            }
        }
    }
});
function closePlayer() {
    console.log('close player');
    if (rtmpPlayer != null) {
        rtmpPlayer.destroy()
    }
    if (flvPlayer != null) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
    }
    if (hlsPlayer != null) {
        flvPlayer.destroy();
        flvPlayer = null;
    }
    $('#callback .page-content .block').html('');
}
function getJsonExt(url) {
    console.log('send:' + url);
    app.dialog.progress();
    $.getJSON(url, function (result) {
        console.log(result);
        app.dialog.close();
        if (result.code === 0) {
            if (result.type === 0) {
                if (result.format === 1) {
                    console.log('format/1/base64 jpeg image');
                    $('#callback .page-content .block').html('<img class="shot" src="' + result.data + '">');
                }
                else {
                    console.log('format/0/json object');
                    $('#callback .page-content .block').html(result.data);
                }
                app.popup.open('#callback');
            }
        }
        else {
            app.dialog.alert(result.message, "消息", function () {
                setTimeout(function () { app.dialog.close(); }, 3000);
            });
        }
    }).fail(function () {
        console.log('error');
        app.dialog.close();
    });;

}
const connection = new signalR.HubConnectionBuilder()
    .withUrl(wsUrl)
    .build();
connection.on("UpdateDevice", function (message) {
    var device = JSON.parse(message);
    if (isList) {
        var update = false;
        for (var i = 0; i < vm.model.Devices.length; i++) {
            if (vm.model.Devices[i].Number == device.Number) {
                update = true;
                break;
            }
        }
        if (update) {
            vm.model.Devices.splice(i, 1, device);
        }
        else {
            vm.model.Devices.push(device);
        }
    }
    else {
        vm.model = device;
        updateChart();
    }
    console.log('update:' + device.DisplayName);
});
connection.on("DeleteDevice", function (message) {
    var number = message;
    for (var i = 0; i < vm.model.Devices.length; i++) {
        if (vm.model.Devices[i].Number == number) {
            vm.model.Devices.splice(i, 1);
            break;
        }
    }
    console.log('delete:' + device.DisplayName);
});
connection.on("UpdateSence", function (message) {
    var sence = JSON.parse(message);
    var update = false;
    for (var i = 0; i < vm.model.Sences.length; i++) {
        if (vm.model.Sences[i].Id == sence.Id) {
            update = true;
            break;
        }
    }
    if (update) {
        vm.model.Sences.splice(i, 1, sence);
    }
    else {
        vm.model.Sences.push(sence);
    }
    console.log('update:' + sence.DisplayName);
});
connection.on("DeleteSence", function (message) {
    var id = message;
    for (var i = 0; i < vm.model.Sences.length; i++) {
        if (vm.model.Sences[i].Id == id) {
            vm.model.Sences.splice(i, 1);
            break;
        }
    }
    console.log('delete:' + sence.DisplayName);
});
connection.on("UpdateNode", function (message) {
    var node = JSON.parse(message);
    vm.model.Name = node.Name;
    console.log('update node');
});
connection.onclose(function (err) {
    console.error(err.toString());
    setTimeout(connect, 15 * 1000);
});
function connect() {
    console.log('start connect to server:' + Date());
    connection.start().then(function () {

    }).catch(function (err) {
        console.error(err.toString());
        setTimeout(connect, 15 * 1000);
    });
}
setTimeout(connect, 0);
$('#volumeup').click(function () {
    document.getElementById('alarm').muted = false;
});
$('#volumeoff').click(function () {
    document.getElementById('alarm').muted = true;
});
$('body').on('click', 'form button', function () {
    try {
        var form = $(this).parents('form');
        if (!form.valid()) {
            return;
        }
        var url = form.attr('action') + '?' + form.serialize();
        console.log('send:' + url);
        getJsonExt(url);
    } catch (e) {
        console.log(e);
    }
    return false;
});