@using WeApp.Configuration
@using WeApp.Helpers
@model WeApp.Views.Exercise.ScreenModel
@{
    string groupNo = Model.GroupNo, campNo = Model.CampNo;
    bool show = Model.WithScript;
    int type = Model.Type;
}

@if (show)
{
    <link href="~/Content/Css/Exercise/public.min.css" rel="stylesheet" />
}
<a href="javascript:void(0)" onclick="ShowGroupRole('@(groupNo)')" class="btn-info btn" style="right: 30px;">角色方案</a>

<div class="box" style="width: 45%; height: 100%;" id="scene_@(groupNo)" data-isRefresh="true">
    <div class="box-title">
        <span>情景区</span>
    </div>
    <div class="box-body" style="height:  calc(100% - 370px)"><div class="body-content"></div></div>
    <div class="media-box" style="height:300px;">
        <div class="body-content">
            <span>播放区</span>
        </div>  
    </div>
</div>
<div class="box" style="width: 38%; height: 100%" id="log_@(groupNo)">
    <div class="box-title" style="position: relative">
        <span>决策指挥中心</span>
        <a id="warning-btn" href="javascript:void(0)" onclick="ShowWaring()" class="btn-danger btn" style="position: absolute; top: 6px; left: 30px; margin-bottom: 0; z-index: 2; padding: 8px 20px;display:none">查看告警</a>
    </div>
    <div class="box-body" style=""><div class="body-content"></div></div>

</div>
<div class="" style="width: 17%; height: 100%; float: left;">
    <div class="box" style="width: 100%; height: 70%" id="role_@(groupNo)">
        <div class="box-title">
            <span>指挥部</span>
        </div>
        <div class="box-body" style=""><div class="body-content"></div></div>
    </div>
    <div class="box" style="width: 100%; height: 30%; border-top: 0" id="score_@(groupNo)">
        <div class="box-title" style="border-top: 3px solid #eee;">
            <span>评估信息</span>
        </div>
        <div class="box-body" style="">
            <div class="body-content">

                @*<div class="score-box">
                    <span class="name">系统评分</span><span style="padding: 0 5px;">:</span><span class="score">800</span><span style="padding-left: 5px;">分</span>
                </div>*@
            </div>
        </div>
    </div>
</div>

@using (Html.BeginScripts())
{
<script>
        $(function() {
            abp.signalr.connect(['@(groupNo)']);
            OverlayScrollbar($('.box-body'), { className: "os-theme-thin-light"});

            GetScenes('@(groupNo)');
            GetLogs('@(groupNo)');
            GetRoles('@(groupNo)');
            GetScore('@(groupNo)');
        });
</script>
}

@if (show)
{
using (Html.BeginScripts())
{
    <script>
        var overlayScrollbar;
        $(function() {
            abp.signalr.connect(['@(campNo)']);
        });

        function Scroll2Bottom(that) {
            var instance = window.OverlayScrollbars($(that)[0]);
            instance.scroll({ y: "100%" });
        }

        function ShowGroupRole(no) {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetGroupRolePlans?no=' + no,
                success: function(res) {
                    if (res && res.plans && res.plans.length > 0) {
                        var str = '';
                        res.plans.forEach(function(v) {
                            str += FormatterRolePlan(v);
                        });
                        if (str) {
                            $(document).iwbModal('create',
                                {
                                    modal: 'modal-role-plan',
                                    modaltitle: '角色预案详情',
                                    modalBody: str,
                                    save: function() {
                                        $('#modal-role-plan').modal('hide');
                                    }
                                });
                        }
                    } else {
                        abp.message.warn("还未创建指挥部！");
                    }
                }
            });
        }

        function FormatterRolePlan(data) {
            var str = '';
            if (data) {
                str += '<div class="plan-box box">';
                str += '<div class="plan-name">{0}</div>'.format(data.name);
                str += '<div class="plan-role">';
                if (data.roleName) {
                    data.roleName.forEach(function(v) {
                        str += '<div class="role-box"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="name">{0}</div></div>'
                            .format(v);
                    });
                }
                str += '</div>';
                str += '</div>';
            }
            return str;
        }
    </script>

    <script id="scene-s">
        function GetScenes(no) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupScenes?no=' + no,
                success: function (res) {
                    if (res) {
                        FormatterScenes(res, no);
                    }
                }
            });
        }

        function FormatterScenes(data, no) {
            var str = "";
            if (data && data.length > 0) {
                data.forEach(function (v) {
                    str += FormatterSceneInfo(v, false);
                });
            }
            if (str) {
                $('#scene_' + no + ' .box-body .body-content').html(str);
                Scroll2Bottom($('#scene_' + no + ' .box-body'));
            }
        }

        function GetSceneInfo(groupNo, sceneNo) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupSceneInfo?no=' + groupNo + '&sceneNo=' + sceneNo,
                success: function (res) {
                    if (res) {
                        var str = FormatterSceneInfo(res, true);
                        if (str) {
                           
                            $('#scene_' + groupNo + ' .box-body .body-content').append(str);
                            AutoPlay();
                            var t = $('#scene_' + groupNo).data('t');
                            //clearTimeout(t);
                            //t = 
                            //setTimeout(function () {
                            //    $("#scene_" + groupNo + ' .box-body .body-content').find(".flash-scene").removeClass("flash-scene");
                            //}, 1000 * 20);
                            $('#scene_' + groupNo).data('t', t);
                            Scroll2Bottom($('#scene_' + groupNo + ' .box-body'));
                        }
                    } else {
                        setTimeout(function () { GetSceneInfo(groupNo, sceneNo); }, 5000);
                    }
                }
            });
        }

        function FormatterSceneInfo(data, isNew) {
            var str = "";
            if (data) {
                var c = isNew ? "flash-scene new-scene" : "", attachStr = '';
                if (data.attaches && data.attaches.length > 0) {
                    var template = '<span class="badge badge-{3} attach attach-{0}" data-attach-type="{0}" data-path="{1}"  style="margin-left:10px;cursor: pointer;padding:6px 10px" onclick="EventAttach(this)">{2}</span>';
                    for (var i = 0; i < data.attaches.length; i++) {
                        var item = data.attaches[i];
                        if (item.fileType) {
                            if (item.fileType === "image") {
                                attachStr += template.format(item.fileType, item.filePath, '图片', 'success');
                            } else if (item.fileType === "video") {
                                attachStr += template.format(item.fileType, item.filePath, '视频', 'danger');

                            }

                        }
                    }
                }

                str +=
                    '<div class="scene-box {3}" data-id="{0}"  data-path="{5}"><div class="title">{1}<div class="attach-box">{4}</div></div><div class="desc">{2}</div></div>'
                        .format(data.id, data.name, data.description, c, attachStr,data.path);
            }
            return str;
        }

        var imageTemplate = '<img src="{0}" style=""/>',
            videoTemplate = '<video id="video" style=""  controls  autoplay><source src="{0}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>',
            audioTemplate = '<audio id="audio" style=""  controls  autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>';
        var at;
        function EventAttach(that, event) {
            var type = $(that).data('attach-type');
            var path = $(that).data('path');
            if (type) {
                var str = type === "image" ? imageTemplate.format(path) : type === "video" ? videoTemplate.format(path) : type === "audio" ? audioTemplate.format(path) : '';
                $(that).closest(".box").find(".media-box .body-content").html(str);
                $(that).closest(".box").find(".current-scene").removeClass("current-scene");
                $(that).closest(".scene-box").addClass("current-scene");
                event = event || function () { InitMedia($(that)) };
                var video = document.getElementById("video");
                if (video) {
                    video.loop = false;
                    video.addEventListener('ended', function () { setTimeout(function () { event.call(that); }, 1000 * 3) }, false);
                } else {
                    clearTimeout(at);
                    at = setTimeout(function () { event.call(that); }, 1000 * 10);
                }
            }
        }

        function AutoPlay($that) {
            if ($that !== undefined && $that != null && $that.length <= 0) {
                return;
            }
            $that = $that === undefined ? $('.new-scene') : $that;
            var $attach = $that.find('.attach');
            if ($attach.length <= 0) {
                var $next = $that.next();
                if ($next.length > 0) {
                    AutoPlay();
                } else {
                    InitMedia($that);
                }
            } else {
                if (!$that) { return; }
                $attach = $that.find('.attach').first();
                EventAttach($attach, function () { AutoPlay($that); });
                $attach.removeClass('attach');
            }

        }

        function InitMedia(that) {
            var $that = (that).closest(".box");
            $that.find(".current-scene").removeClass("current-scene");
            $that.find(".media-box .body-content").html('<span>播放区</span>');
        }
    </script>

    <script id="log-s">
        function GetLogs(no) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupLogs?no=' + no,
                success: function(res) {
                    if (res) {
                        FormatterLog(res, no);
                    }
                }
            });
        }

        function FormatterLog(data, no) {
            var str = "";
            if (data && data.length > 0) {
                data.forEach(function(v) {
                    str += FormatLog(v);
                });
            }
            if (str) {
                $('#log_' + no + ' .box-body .body-content').html(str);
            }
        }

        function FormatLog(data) {
            var c = '';
            if (data.logState == '@(LogStateDefinition.Submit)' || data.logState == '@(LogStateDefinition.Send)'|| data.logState == '@(LogStateDefinition.HasMatch)') {
                c = "send";
            }
            var str =
                '<div class="log-box {3} log_{0}" data-id="{0}" ><span class="role">{1}</span><span style="padding:0 5px;">:</span><span class="word">{2}</span></div>'
                    .format(data.id, data.role, data.word, c);
            return str;
        }
    </script>

    <script id="role-s">
        function GetRoles(no) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupRoleInfos?no=' + no,
                success: function (res) {
                    if (res) {
                        FormatterRole(res, no);
                    }
                }

            });
        }

        function FormatterRole(data, no) {
            var str = "";
            if (data && data.length > 0) {
                data.forEach(function (v) {
                    str +=
                        '<div class="role-box"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="name">{0}</div></div>'
                        .format(v);
                });
            }
            if (str) {
                $('#role_' + no + ' .box-body .body-content').html(str);
            }
        }
    </script>

    <script id="score-s">
        function GetScore(no) {
            $.iwbAjax5({
                url: abp.appUrl + 'Query/GetGroupScoreInfo?no=' + no,
                success: function (res) {
                    if (res) {
                        res.systemScore = undefined;
                        FormatterScore(res, no);
                    }
                }

            });
        }
        function FormatterScore(data, no) {
            var str = "",
                template =
                    '<div class="score-box {2}"><span class="name">{0}</span><span style="padding:0 5px;">:</span><span class="score">{1}</span><span style="padding-left: 5px;">分</span></div>';
            if (data.systemScore) {
                str += template.format("系统评分", data.systemScore,"system-score");
            }
            var tags = data.behaviorTagScoreInfo ? JSON.parse(data.behaviorTagScoreInfo) : data.tagScores;
            if (tags && tags.length > 0) {
                tags.forEach(function (v) {
                    var score = v.correctionScore ? v.correctionScore : v.systemScore;
                    if (score > 0) {
                        str += template.format(v.tagNo, score, "tag-score");
                    }
                });
            }
            if (str) {
                $('#score_' + no + ' .box-body .body-content').prepend(str);
            }
        }
    </script>

    <script id="hub-s">
        iwbHub.client.getReloadAll = function(msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(groupNo)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };
        iwbHub.client.getOperationLog = function(msg) {
            console.log('getOperationLog: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (@(type) == 2 || data.no=='@(groupNo)') {
                        var str = FormatLog(data);
                        $('#log_' + data.no + ' .box-body .body-content').prepend(str);
                    }
                } catch (e) {
                    console.log('getOperationLog: ', e);
                }
            }
        };
        iwbHub.client.getOperationLogSubmit = function(msg) {
            console.log('getOperationLogSubmit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (@(type) == 2 || data.no=='@(groupNo)') {
                        $('#log_' + data.no + ' .box-body .body-content').find('.log_' + data.logId).addClass('send');
                    }
                } catch (e) {
                    console.log('getOperationLogSubmit: ', e);
                }
            }
        };
        iwbHub.client.getNewScene = function(msg) {
            console.log('getNewScene: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (@(type) == 2 || data.no == '@(groupNo)') {
                            if ($('#scene_' + data.no).find('.scene-box[data-path="' + data.path + '"]').length <= 0) {
                                GetSceneInfo(data.no, data.sceneNo);
                            }
                        }
                    }
                } catch (e) {
                    console.log('getNewScene: ', e);
                }
            }
        };
        iwbHub.client.getRoundScore = function(msg) {
            console.log('getRoundScore: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (@(type) == 2 || data.no=='@(groupNo)') {
                        data.systemScore = undefined;
                        FormatterScore(data, data.no);
                    };
                } catch (e) {

                    console.log('getRoundScore: ', e);
                }
            }
        };
        iwbHub.client.getSendScore = function(msg) {
            console.log('getSendScore: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (@(type) == 2 || data.no=='@(groupNo)') {
                        FormatterScore(data, data.no);
                    };
                } catch (e) {

                    console.log('getSendScore: ', e);
                }
            }
        };
    </script>
}
}