@using Abp.Configuration
@using Abp.Timing
@using IwbZero.ToolCommon.StringModel
@using WeEngine.Enum
@using WeOnlineApp.Configuration
@using WeOnlineApp.Models.Play
@using WeOnlineApp.TrainingCamp.Dto
@using WeOnlineApp.TrainingCampPlay.Dto

@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    ViewBag.Title = "演练中";
    CampPlayModel campPlay = ViewBag.CampPlay;
    CampPlayDto play = campPlay.Play;
    var dataCenterUrl = SettingManager.GetSettingValue(IwbSettingNames.WeDataCenterIp).Ew("/");
    string[] roleArr = new string[0];
}
<link href="~/Content/Css/runplay.min.css" rel="stylesheet" />
<link href="~/Content/Css/path.min.css" rel="stylesheet" />
<style>
    @*@if (playUser.PlayerType==CampPlayerTypeDefinition.Creator||play.PlayModel != CampPlayModelDefinition.Team) {
    <text>
    .box .log-cmd-box {
        --sh: 180px;
    }
    </text>
}*@
    body {
        /*background-image: linear-gradient(45deg,#004f61,#005f61);*/
        background: #004f61;
    }
    .box .box-header {
        background: #004f61;
    }
    .role-change-box {
        background: #004f61;
    }
    .score-info-box .score-box {
        color: #eee;
        background: #049e9a;
    }
    .cmd-box .msg-box textarea {
        background: #003561;
    }
        .cmd-box .msg-box textarea:focus, .cmd-box .msg-box textarea:active {
            background: #004261;
        }
    .show-title {
        margin: 250px auto 0;
        font-size: 80px;
        width: auto;
        font-weight: 600;
        text-align: center;
        letter-spacing: 50px;
        padding-left: 50px;
    }
    .report {
        margin: 30px auto 0;
        font-size: 40px;
        width: auto;
        font-weight: 600;
        text-align: center;
        letter-spacing: 20px;
        padding-left: 20px;
    }
        .report a {
            padding: 20px 20px 10px 40px;
            color: inherit;
            border-bottom: 5px solid;
        }
        .report a:hover {
            color: #fff;
        }

    .scale-out {
        cursor: pointer;
        -webkit-animation: scaleout 1.3s infinite ease-in-out;
        animation: scaleout 1.3s infinite ease-in-out;
    }
    .media-box .body-content {
        display: flex;
        justify-content: center;
    }
    #video {
        width: 100%;
    }
</style>
@if (play.PlayState == CampPlayStateDefinition.New)
{
    <div class="show-title">演练未开始</div>
}
else if (play.PlayState != CampPlayStateDefinition.Run)
{
    <div class="show-title">演练已结束</div>
    <div class="report">
        <a href="@Url.Action("Report","Play")/@(play.Id)">演练报告</a>
    </div>
}
else
{
    CampPlayUserDto playUser = campPlay.PlayUser;
    CampDto camp = campPlay.Camp;
    string roles = "";
    roleArr = play.PlayRoleNames.Split(',');
    foreach (var role in roleArr)
    {
        roles += "<span class=\" role label label-info\" onclick=\"ChangeRole('" + role + "')\">" + role + "</span>";
    }
    <div class="main-box">
        <div class="main-box-header">
            <div class="user-name"><i class="iconfont icon-user-circle"></i>&nbsp;&nbsp;@(playUser.PlayerName)</div>
            <ul class="menu">
                <li>
                    <a href="@Url.Action("Index","Play")"><i class="iconfont icon-home"></i>&nbsp;&nbsp;返回主页</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="Exit()"><i class="iconfont icon-backspace"></i>&nbsp;&nbsp;退出演练</a>
                </li>
                <li>
                    <a href="javascript:void(0)" onclick="LoginOut()"><i class="iconfont icon-poweroff"></i>&nbsp;&nbsp;注销账号</a>
                </li>
            </ul>
        </div>
        <div class="main-box-content">
            <div class="box" style="width: 35%">
                <div class="box-header">情景播放区</div>
                <div class="box-content scene-info-box">
                    <div class="box small" style="height: calc(100% - var(--sh))">
                        <div class="box-header" style="margin-left: -40px;">情景区</div>
                        <div class="box-content scroll">
                            <div id="scene-info-box">
                            </div>
                        </div>
                    </div>
                    <div class="box small" style="height:var(--sh);margin-top: calc(var(--mh)*2)">
                        <div class="box-header" style="margin-left: -40px;">播放区</div>
                        <div class="box-content">
                            <div class="media-box scroll">
                                <div class="body-content">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box" style="width: 35%">
                <div class="box-header">指挥决策区</div>
                <div class="box-content log-cmd-box">
                    <div class="box small" style="height: calc(100% - var(--sh))">
                        <div class="box-header" style="margin-left: -70px;">决策指挥中心</div>
                        <div id="current-scene-box" style="">
                            <span class="name">当前情景：</span>
                            <input type="hidden" id="scene-path" value="" />
                            <span class="scene-name">无</span>
                        </div>
                        <div class="box-content scroll">

                            <div id="log-info-box">
                            </div>
                        </div>
                    </div>
                    <div class="box small" style="height:var(--sh);margin-top: calc(var(--mh)*2)">
                        <div class="box-header" style="margin-left: -40px;">指令输入</div>
                        <div class="box-content cmd-box">
                            <div class="tool-box">
                                <div class="role-change-box">
                                    @Html.Raw(roles)
                                </div>
                                <span id="self-role" class="btn btn-iwb btn-sm role" style="margin-left: 15px;" title="点击切换角色" onclick="ChangeRole('@(playUser.Role)', 1)">@(playUser.Role)</span>
                                @if (play.PlayModel == CampPlayModelDefinition.Team)
                                {
                                    <span id="chat-modal-btn" class="btn btn-success btn-sm" style="float: right; width: 100px; margin-right: 15px;" onclick="ChatModal()"><i class="fas fa-comments"></i>&nbsp;&nbsp;讨论区</span>
                                    <div class="card  direct-chat direct-chat-primary" style="position: absolute; width: calc(100% - 25px); top: -400px; z-index: 1000; color: #111; background: #f5f5ec; display: none">
                                        <div class="card-header">
                                            <h3 class="card-title" style="font-weight: 600"><i class="fas fa-comments"></i>&nbsp;&nbsp;讨论区</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-card-widget="remove" onclick="chatFlag = true">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body scroll" style="height: 250px;">
                                            <div class="direct-chat-messages" id="chat-box" style="height: 100%; overflow: unset;">
                                            </div>
                                        </div>
                                        <div class="card-footer">
                                            <div class="input-group">
                                                <input type="text" id="message" name="message" placeholder="请输入..." class="form-control">
                                                <span class="input-group-append">
                                                    <button type="button" onclick="SendChat()" class="btn btn-primary">发送</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                }

                                @if (playUser.PlayerType == CampPlayerTypeDefinition.Creator || play.PlayModel != CampPlayModelDefinition.Team)
                                {
                                    <span class="btn btn-danger btn-sm" style="float: right; margin-right: 25px; transform: scale(0.9);" onclick="NextNode()"><i class="iconfont icon-paper-plane"></i>&nbsp;&nbsp;下一阶段情景</span>
                                }
                            </div>
                            <div class="msg-box">
                                <textarea id="cmd-text" class="form-control" rows="3" placeholder="请输入指令"></textarea>
                                <span class="btn btn-iwb btn-sm" onclick="Submit(@(playUser.PlayerType))"><i class="iconfont icon-display-arrow-right"></i>&nbsp;&nbsp;提交指令</span>
                            </div>
                            @*@if (playUser.PlayerType == CampPlayerTypeDefinition.Creator || play.PlayModel != CampPlayModelDefinition.Team)
                                {
                                    <div class="tool-footer">
                                        <span class="btn btn-danger btn-sm" onclick="NextNode()">下一阶段情景</span>
                                        $1$<span class="btn btn-danger btn-sm" onclick="NextRound()">下一轮次情景</span>#1#
                                    </div>
                                }*@
                        </div>
                    </div>
                </div>
            </div>

            <div class="box" style="width: 30%">
                <div class="box-header">演练基本信息区</div>
                <div class="box-content base-box">
                    <div class="box small base-info-box" style="height:var(--sh)">
                        <div class="box-header" style="margin-left: -40px;">基本信息</div>
                        <div class="box-content scroll">
                            <dl>
                                <dt>演练名称:</dt>
                                <dd>@(play.Name)</dd>
                            </dl>
                            <dl>
                                <dt>演练时长:</dt>
                                <dd>@(camp.MaxTrainingMinute) 分钟</dd>
                            </dl>
                            <dl>
                                <dt>演练角色:</dt>
                                <dd>
                                    @(Html.Raw(roles))
                                    <p class="role-help">点击角色可以切换发布指令的角色</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>演练目标:</dt>
                                <dd>@(camp.Purposes) </dd>
                            </dl>
                        </div>
                        <div id="count-down"></div>
                    </div>
                    <div class="box small score-info-box" style="height: 150px;margin-top: calc(var(--mh)*2)">
                        <div class="box-header" style="margin-left: -40px;">评估信息</div>
                        <div class="box-content scroll">
                            <div id="score-info-box" style="height: 100%;"></div>
                        </div>
                    </div>
                    <div class="box small scene-path-box" style="height: calc(100% - var(--sh) - 150px - var(--mh)*2);margin-top: calc(var(--mh)*2)">
                        <div class="box-header" style="margin-left: -40px;">推演路径</div>
                        <div class="box-content scroll">
                            <div id="scene-path-box" style="height: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="media-box-hide" style="display: none"></div>

    @section scripts
    {
        <script src="~/Content/Js/scene-path.js"></script>
        <script src="~/Content/Libs/countdown/countdown.js">
        </script>
        <script>
            var chatFlag = true, startFlag = true;
            $(function() {
                OverlayScrollbar($('#scene-info-box').closest('.scroll'), { className: "os-theme-thin-light" });
                abp.signalr.connect(function() {
                    window.iwbHub.server.registerGroup('@(play.InvitationCode)').done(function() {
                        abp.log.debug('@(play.InvitationCode) Group Registered to the SignalR server!');
                    });
                    setTimeout(function() {
                            $.iwbAjax5({
                                url: abp.appUrl + "/CampPlay/StartFeedback?no=@(play.Id)",
                                success: function(res) {
                                    startFlag = res;
                                    if (startFlag) {
                                        GetScenes();
                                    }
                                }
                            });
                        },
                        100);
                    //GetScenes();
                    //GetLogs()//情景加载成功后再加载日志;
                    ScenePath();
                    GetChat();
                    GetScore();
                    //setTimeout(function () {

                    //}, 1000 * 3);
                });

                $('#message').on('keypress',
                    function(event) {
                        if (event.keyCode == "13") {
                            SendChat();
                            return false;
                        }
                        return true;
                    });
                $('#cmd-text').on('keypress',
                    function(event) {
                        if (event.keyCode == "13") {
                            Submit(@(playUser.PlayerType));
                            return false;
                        }
                        return true;
                    });
                OverlayScrollbar($('#log-info-box').closest('.scroll'), { className: "os-theme-thin-light" });
                OverlayScrollbar($('.base-info-box .scroll'), { className: "os-theme-thin-light" });
                OverlayScrollbar($('#score-info-box').closest('.scroll'), { className: "os-theme-thin-light" });

                @{
                    var date = (play.StartDate ?? Clock.Now).AddMinutes((double) camp.MaxTrainingMinute).ToString("yyyy-MM-dd HH:mm:ss");
                }
                var countdown = new Countdown({
                    selector: '#count-down',
                    dateEnd: new Date('@(date)'),
                    msgPattern: '{hours}:{minutes}:{seconds}',
                    msgBefore: "演练未开始",
                    msgAfter: "演练结束"
                });
                console.log(countdown);
            });

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

                    }
                }
            }

            function ChatModal() {
                chatFlag = false;
                $('#chat-box').closest('.card').show();
                $('#chat-modal-btn').removeClass('flash');
                OverlayScrollbar($('#chat-box').closest('.scroll'), { className: "os-theme-thin-dark" });
                Scroll2Bottom($('#chat-box').closest('.scroll'));
                $('#message').focus();

            }

            function Exit() {
                MsgConfirm("退出后无法再加入演练，您确定退出演练吗？",
                    "退出演练",
                    function() {
                        @if (playUser.PlayerType == CampPlayerTypeDefinition.Creator)
                        {
                            <text>
                                MsgConfirm("您是房主，退出后演练就会结束，确定退出吗？",
                                    "再次确认",
                                    function() {
                                        $.iwbAjax({
                                            url: abp.appUrl + '/CampPlay/ExitPlay?no=@(play.Id)',
                                            success: function() {
                                                window.location.href = "@Url.Action("Start", "Play")";
                                            }
                                        });
                                    });
                            </text>
                        }
                        else
                        {
                            <text>
                                $.iwbAjax({
                                    url: abp.appUrl + '/CampPlay/ExitPlay?no=@(play.Id)',
                                    success: function() {
                                        window.location.href = "@Url.Action("Start", "Play")";
                                    }
                                });
                            </text>
                        }

                    });
            }

            function LoginOut() {
                MsgConfirm("您确定注销账号吗？",
                    "注销账号",
                    function() {
                        @if (playUser.PlayerType == CampPlayerTypeDefinition.Creator)
                        {
                            <text>
                                MsgConfirm("您是房主，注销后演练进程无法继续，注销退出吗？",
                                    "再次确认",
                                    function() {
                                        window.location.href = "/Account/LogOut";
                                    });
                            </text>
                        }
                        else
                        {
                            <text>
                                window.location.href = "/Account/LogOut";
                            </text>
                        }
                    });
            }
        </script>

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

            var roundPath = "P_R", round = 1, round2 = 1;

            function FormatterScenes(data) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function(v) {
                        str += FormatterSceneInfo(v, !v.hasEnd);
                    });
                }
                if (str) {
                    $('#scene-info-box').find(".new-scene").removeClass('new-scene');
                    $('#scene-info-box').html(str);
                    var t = $('#scene-info-box').data('t');
                    clearTimeout(t);
                    t = setTimeout(function() {
                            $('#scene-info-box').find(".flash-scene").removeClass("flash-scene");
                        },
                        1000 * 3);
                    $('#scene-info-box').data('t', t);

                    Scroll2Bottom($('#scene-info-box').closest('.scroll'));
                    if (!$('#current-scene-box #scene-path').val()) {
                        SelectScene();
                    }
                }
            }

            function GetSceneInfo(sceneNo) {
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetPlaySceneInfo?no=@(play.Id)&scenePath=' + sceneNo,
                    success: function(res) {
                        if (res) {
                            DisabledScene2();
                            var str = FormatterSceneInfo(res, true);
                            if (str) {
                                $('#scene-info-box').append(str);
                                var t = $('#scene-info-box').data('t');
                                clearTimeout(t);
                                t = setTimeout(function() {
                                        $('#scene-info-box').find(".flash-scene").removeClass("flash-scene");
                                    },
                                    1000 * 3);
                                $('#scene-info-box').data('t', t);
                                AutoPlay($('#scene-info-box'));
                                Scroll2Bottom($('#scene-info-box').closest('.scroll'));
                                if (!$('#current-scene-box #scene-path').val()) {
                                    SelectScene();
                                }
                            }
                            if (!startFlag) {
                                startFlag = true;
                                GetLogs();
                            }
                        } else {
                            setTimeout(function() { GetSceneInfo(sceneNo); }, 5000);
                        }
                    }
                });
            }

            function FormatterSceneInfo(data, isNew) {
                var str = "";
                if (data) {
                    if ($('.scene-box[data-path="' + data.path + '"]').length > 0) {
                        return str;
                    }
                    if (data.path.toUpperCase().indexOf(roundPath + "" + round) == 0 && round2 == round) {
                        str += '<div class="round-box">第&nbsp;{0}&nbsp;轮</div>'.format(round);
                        round++;
                        round2++;
                    }
                    var c = isNew ? "flash-scene new-scene new-scene2" : "", 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');
                                }
                            }
                        }
                    }
                    var str1 = '';
                    @if (playUser.PlayerType == CampPlayerTypeDefinition.Creator || play.PlayModel != CampPlayModelDefinition.Team)
                    {
                        <text>
                            str1 = data.hasEnd ? '' : 'title="点击处理此情景" onclick="SelectScene(this)"';
                        </text>
                    }
                    var str2 = '', str3 = '', descShow = '';

                    if (data.hasEnd) {
                        str2 = '<span class="label label-info">已处理</span>';
                        str3 =
                            '<div class="tool close" onclick="ToggleDesc(this)"><i class="iconfont icon-plus"></i></div>';
                        descShow = 'none';
                    } else {
                        str2 = '<span class="label label-danger no-scene">未处理</span>';
                        str3 =
                            '<div class="tool open" onclick="ToggleDesc(this)"><i class="iconfont icon-minus"></i></div>';
                        descShow = 'block';
                    }
                    var guideIcon = '', guideStr = '';
                    if (data.guideInfos && data.guideInfos.length) {
                        guideIcon =
                            '<i class="iconfont icon-question-circle" style="padding-left:10px;color:red;" title="查看引导信息" onclick="ToggleGuide(this)"></i>';
                        guideStr += '<div class="guide-box" style="display:none"><div class="guide-title">提示：</div>';
                        var i = 0;
                        data.guideInfos.forEach(function(v) {
                            i++;
                            guideStr += '<div class="guide-info">{0}、{1}</div>'.format(i, v.description);
                        });
                        guideStr += '</div>';
                    }
                    str += '<div class="scene-box {2}" data-id="{0}"  data-name="{1}"  data-path="{3}" {4}>'.format(
                        data.id,
                        data.name,
                        c,
                        data.path,
                        str1);
                    str += '<div class="title">';
                    str += str2;
                    str += '<span class="name">{0} {1}</span>'.format(data.name, guideIcon);
                    str += '<div class="attach-box">{0}</div>'.format(attachStr);
                    str += str3;
                    str += '</div>';
                    str += '<div class="desc" style="display:{0};">{1} {2}</div>'.format(descShow,
                        data.description,
                        guideStr);;
                    str += '</div>';

                }
                return str;
            }

            function ToggleGuide(that) {
                var $that = $(that);
                if ($that.hasClass('open')) {
                    $that.removeClass('open');
                    $that.closest('.scene-box').find('.guide-box').fadeOut(400);
                } else {
                    $that.addClass('open');
                    $that.closest('.scene-box').find('.guide-box').fadeIn(600);
                    var $tool = $that.closest('.scene-box').find('.tool');
                    if (!$tool.hasClass('open')) {
                        $tool.addClass('open').html('<i class="iconfont icon-minus"></i>');
                        $tool.closest('.scene-box').find('.desc').fadeIn(600);
                    }
                }
                Scroll2Bottom($('#scene-info-box').closest('.scroll'));
            }

            function ToggleDesc(that) {
                var $that = $(that);
                if ($that.hasClass('open')) {
                    $that.removeClass('open').html('<i class="iconfont icon-plus"></i>');
                    $that.closest('.scene-box').find('.desc').fadeOut(400);
                } else {
                    $that.addClass('open').html('<i class="iconfont icon-minus"></i>');
                    $that.closest('.scene-box').find('.desc').fadeIn(600);
                }
                Scroll2Bottom($('#scene-info-box').closest('.scroll'));
            }

            function DisabledScene1() {
                var $that = $('.no-scene').closest('.scene-box');
                if ($that.hasClass('new-scene2')) {
                    $that.attr('onclick', '');
                    $that.removeClass('new-scene2').addClass("old-scene");
                }
            }

            function DisabledScene2() {
                var $that = $('.no-scene').closest('.scene-box');
                if ($that.hasClass('old-scene')) {
                    $that.attr('onclick', '');
                    $that.removeClass('old-scene');
                    $that.find('.tool.open').trigger('click');
                    $that.find('.no-scene').text('已处理').removeClass('label-danger').removeClass('no-scene')
                        .addClass('label-info');
                }
                $('#scene-info-box .active').removeClass('active');
                $('#current-scene-box #scene-path').val('');
                $('#current-scene-box .scene-name').text('无');
            }

            var imageTemplate = '<img src="{0}" style="width: 100%;height: 100%;" />',
                videoTemplate =
                    '<video id="video" style=""  controls  autoplay><source src="{0}"  type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>',
                audioTemplate =
                    '<audio id="video" 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(".main-box-content").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($box, $that, isForce) {
                if (!isForce && $box.data("auto-play")) {
                    return;
                }
                $box.data("auto-play", true);
                $that = $that === undefined ? $box.find('.new-scene').eq(0).removeClass('new-scene') : $that;
                var $attach = $that.find('.attach');
                if ($attach.length <= 0) {
                    var $next = $box.find('.new-scene').eq(0).removeClass('new-scene');
                    if ($next.length > 0) {
                        AutoPlay($box, $next, true);
                    } else {
                        $box.data("auto-play", false);
                        InitMedia($box.find('.current-scene'));
                    }
                } else {
                    if (!$that) {
                        return;
                    }
                    $attach = $that.find('.attach').first();
                    EventAttach($attach, function() { AutoPlay($box, $that, true); });
                    $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('');
            }

            function SelectScene(that) {
                var $that = that ? $(that) : $('#scene-info-box .new-scene2').eq(0);
                $('#scene-info-box .active').removeClass('active');
                $that.addClass('active');
                var name = $that.data('name'), path = $that.data('path');
                $('#current-scene-box #scene-path').val(path);
                $('#current-scene-box .scene-name').text(name);
                window.iwbHub.server.sendCurrentScenePath('@play.InvitationCode', path, name);
                console.log(name, path);
            }
        </script>

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

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

                }
            }

            function FormatLog(data) {
                var str = '';
                if (data) {
                    var c;
                    var sceneName = GetSceneNameByPath(data.scenePath);
                    if (data.logState == '@(LogStateDefinition.New)') {
                        @{
                            var disabled = playUser.PlayerType == CampPlayerTypeDefinition.Creator ? "" : "disabled";
                        }
                        c =
                            '<button type="button"  id="log_{0}" class="btn btn-sm btn-iwb log-state log-wait" onclick="SubmitCmd({0})" @(disabled)>等待下达</button>'
                            .format(data.id);
                    } else if (data.logState == '@(LogStateDefinition.Submit)' ||
                        data.logState == '@(LogStateDefinition.Send)' ||
                        data.logState == '@(LogStateDefinition.HasMatch)') {
                        c =
                            '<button type="button"  id="log_{0}" class="btn btn-sm btn-success log-state" disabled>已下达</button>'
                            .format(data.id);
                    } else {
                        c =
                            '<button type="button"  id="log_{0}" class="btn btn-sm btn-danger log-state" disabled>未下达</button>'
                            .format(data.id);
                    }
                    var imagePath = data.imagePath ? data.imagePath : '/Content/Image/user.png';
                    str += '<div class="log-comment" id="log__{0}">'.format(data.id);;
                    str += '<img  src="{0}" alt="{1}">'.format(imagePath, data.role + "(" + data.name + ")");
                    str += '<div class="comment-text">';
                    str +=
                        '<span class="name">{0}{1}<small style="font-style:italic;padding-left: 10px;">{2}</small></span>'
                        .format(data.role + "(" + data.name + ")",
                            c,
                            sceneName);
                    str += '<span class="log-text">{0}</span>'.format(data.word);
                    str += '</div>';
                    str += '</div>';
                }
                return str;
            }

            function GetSceneNameByPath(path) {
                var sceneName = '', $sceneBox = $('.scene-box[data-path="' + path + '"]');
                if ($sceneBox.length > 0) {
                    sceneName = $sceneBox.data("name");
                }

                return sceneName;
            }

            function DisabledLog() {
                $('.log-wait').prop('disabled', true).text('未下达').removeClass('log-wait');
            }
        </script>

        <script id="cmd-script">
            function Submit(type) {
                var text = $('#cmd-text').val().trim(),
                    role = $('#self-role').text(),
                    path = $('#current-scene-box #scene-path').val();
                if (!text) {
                    abp.message.warn("指令不能为空！");
                    return;
                }
                var url = abp.appUrl + "/CampPlay/WriteCmdLog";
                if (type == @(CampPlayerTypeDefinition.Creator)) {
                    if (!path) {
                        abp.message.warn("请选择一个情景！");
                        return;
                    }
                    if (@(roleArr.Length) > 0 && role == "@(playUser.Role)") {
                        abp.message.warn("请选择一个角色！");
                        return;
                    }
                    url = abp.appUrl + "/CampPlay/WriteSubmitCmdLog";
                }
                $.iwbAjax4({
                    url: url,
                    data: { GroupNo: '@(play.Id)', BehaviorWord: text, BehaviorRole: role, scenePath: path },
                    success: function() {
                        $('#cmd-text').val('').focus();
                    }
                });
            }

            function SubmitCmd(id) {
                var path = $('#current-scene-box #scene-path').val();
                if (path) {
                    $.iwbAjax4({
                        url: abp.appUrl + "/CampPlay/SubmitCmd?id=" + id + "&scenePath=" + path,
                        success: function() {

                        }
                    });
                } else {
                    abp.message.warn("请选择一个情景！");
                }
            }

            function NextNode() {
                MsgConfirm("确认本阶段情景已处理完，进入下一阶段的情景吗？",
                    "下一阶段情景",
                    function() {
                        $.iwbAjax4({
                            url: abp.appUrl + "/CampPlay/NextFlowNode",
                            data: { Id: '@(play.Id)' },
                            success: function() {
                                abp.ui.setBusy($('body'));
                                setTimeout(function() {
                                        abp.ui.clearBusy($('body'));
                                    },
                                    10000);
                            }
                        });
                    });
            }

            function NextRound() {
                MsgConfirm("确认本阶段情景已处理完，进入下一阶段的情景吗？",
                    "下一阶段情景",
                    function() {
                        $.iwbAjax1({
                            url: abp.appUrl + "/CampPlay/NextRound",
                            data: { Id: '@(play.Id)' },
                            success: function() {

                            }
                        });
                    });
            }

            function ChangeRole(role, type) {
                if (type) {
                    $('.role-change-box').fadeIn(600);
                    //$('#self-role').html(role).removeClass('btn-danger').addClass('btn-iwb');
                } else {
                    $('#self-role').html(role).removeClass('btn-iwb').addClass('btn-danger');
                    $('.role-change-box').fadeOut(300);
                }
            }
        </script>

        <script id="path-script">

            function ScenePath() {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetPlayRunningInfo?no=@(play.Id)',
                    success: function(res) {
                        var str = FormatterSingleScenePath(res);
                        $('#scene-path-box').html(str);
                        OverlayScrollbar($('#scene-path-box').closest('.scroll'), { className: "os-theme-thin-light" });
                        Scroll2Bottom($('#scene-path-box').closest('.scroll'));
                    }
                });
            }
        </script>

        <script id="chat-script">
            function SendChat() {
                var text = $('#message').val();
                if (!text) {
                    return;
                }
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/Chat",
                    data: { Id: '@(play.Id)', Msg: text },
                    success: function() {
                        $('#message').val('').focus();
                    }
                });
            }

            function GetChat() {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetPlayChats?no=@(play.Id)',
                    success: function(res) {
                        if (res) {
                            FormatterChat(res);
                        }
                    }
                });
            }

            function FormatterChat(data) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function(v) {
                        str += FormatChat(v);
                    });
                }
                if (str) {
                    $('#chat-box').html(str);

                    Scroll2Bottom($('#chat-box').closest('.scroll'));
                }
            }

            function FormatChat(data) {
                var str = '';
                if (data) {
                    var imagePath = data.imagePath ? data.imagePath : '/Content/Image/user.png';
                    var isSelf = '', left = 'left', right = 'right';
                    if (data.userName === '@(AbpSession.UserName)') {
                        isSelf = "right";
                        left = 'right';
                        right = 'left';
                    }
                    str += '<div class="direct-chat-msg {0}">'.format(isSelf);
                    str += '<div class="direct-chat-infos clearfix">';
                    str += '<span class="direct-chat-name float-{0}">{1}</span>'
                        .format(left, data.name); //+"("+data.userName+")");
                    str += '<span class="direct-chat-timestamp float-{0}">{1}</span>'.format(right,
                        new Date(data.logDate).format('hh:mm:ss'));
                    str += '</div>';
                    str += '<img class="direct-chat-img" src="{0}" alt="{1}">'.format(imagePath, data.name);;
                    str += '<div class="direct-chat-text">{0}</div>'.format(data.word);
                    str += '</div>';

                }
                return str;
            }
        </script>

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

                });
            }

            function FormatterScore(data) {
                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("第 {0} 轮 系统评分".format(data.roundIndex), 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;
                        str += template.format(v.tagNo, score, "tag-score");
                    });
                }
                if (str) {
                    $('#score-info-box').html(str);
                }
            }
        </script>

        <script id="hub-s">

            iwbHub.client.getChat = function(msg) {
                console.log('getChat: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(play.Id)') {
                            var str = FormatChat(data);
                            if (str) {
                                $('#chat-box').append(str);
                                Scroll2Bottom($('#chat-box').closest('.scroll'));
                                if (chatFlag) {
                                    $('#chat-modal-btn').addClass('flash');
                                }
                            }
                        }
                    } catch (e) {
                        console.log('getChat: ', e);
                    }
                }
            };
            iwbHub.client.getCmdLog = function(msg) {
                console.log('getCmdLog: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(play.Id)') {
                            var str = FormatLog(data);
                            if (str) {
                                $('#log-info-box').prepend(str);
                            }
                        }
                    } catch (e) {
                        console.log('getCmdLog: ', e);
                    }
                }
            };
            iwbHub.client.getCmdLogSubmit = function(msg) {
                console.log('getCmdLogSubmit: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(play.Id)') {
                            $('#log-info-box').find('#log_' + data.logId).html('已下达').removeClass('btn-iwb')
                                .removeClass('log-wait').addClass('btn-success').prop('disabled', true)
                                .closest('.name')
                                .find('small').html(GetSceneNameByPath(data.scenePath));

                        }
                    } catch (e) {
                        console.log('getCmdLogSubmit: ', e);
                    }
                }
            };
            iwbHub.client.getNewScene = function(msg) {
                console.log('getNewScene: ', msg);
                abp.ui.clearBusy($('body'));
                if (msg) {
                    try {
                        var data = typeof msg == 'string' ? JSON.parse(msg) : msg;
                        if (data) {
                            if (data.no == '@(play.Id)') {
                                //$('#scene-info-box').find(".new-scene").each(function() {
                                //    $(this).removeClass('new-scene');
                                //});
                                if ($('#scene-info-box').find('.scene-box[data-path="' + data.path + '"]').length <=
                                    0) {
                                    GetSceneInfo(data.sceneNo);
                                    Scroll2Bottom($('#scene-info-box').closest('.scroll'));
                                }
                            }
                        }
                    } catch (e) {
                        console.log('getNewScene: ', e);
                    }
                }
            };
            iwbHub.client.getRoundScore = function(msg) {
                console.log('getRoundScore: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(play.Id)') {
                            FormatterScore(data);
                        };
                    } catch (e) {
                        console.log('getRoundScore: ', e);
                    }
                }
            };
            iwbHub.client.getRunningChange = function(msg) {
                console.log('getRunningChange: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data) {
                            ScenePath();
                        }
                    } catch (e) {
                        console.log('getRunningChange: ', e);
                    }
                }
            };
            iwbHub.client.getDisabledLog = function(msg) {
                console.log('getDisabledLog: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@play.Id') {
                            $('#log-info-box').prepend('<div class="log-comment split-line"></div>');
                            DisabledLog();
                            DisabledScene1();
                        }
                    } catch (e) {
                        console.log('getDisabledLog: ', e);
                    }
                }
            }
            iwbHub.client.getUserExit = function(msg) {
                console.log('getUserExit: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data) {

                        }
                    } catch (e) {
                        console.log('getUserExit: ', e);
                    }
                }
            };
            @if (playUser.PlayerType != CampPlayerTypeDefinition.Creator)
            {
                <text>
                    iwbHub.client.getCurrentScenePath = function(msg) {
                        console.log('getCurrentScenePath: ', msg);
                        if (msg) {
                            try {
                                var data = JSON.parse(msg);
                                if (data) {
                                    $('#current-scene-box #scene-path').val(data.path);
                                    $('#current-scene-box .scene-name').text(data.name);
                                }
                            } catch (e) {
                                console.log('getCurrentScenePath: ', e);
                            }
                        }
                    }
                </text>
            }
            iwbHub.client.getReloadPage = function(msg) {
                console.log('getReloadPage: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (data.no == '@(play.Id)') {
                            window.location.reload();
                        }
                    } catch (e) {
                        console.log('getReloadPage: ', e);
                    }
                }
            };

            iwbHub.client.getGuide = function(msg) {
                console.log('getGuide: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (!data) {
                            return;
                        }

                    } catch (e) {
                        console.log('getGuide: ', e);
                    }
                }
            };
            iwbHub.client.getEnvironment = function(msg) {
                console.log('getEnvironment: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (!data) {
                            return;
                        }
                        Environment(data);
                    } catch (e) {

                        console.log('getEnvironment: ', e);
                    }
                }
            };
            iwbHub.client.getMatchSuccess = function(msg) {
                console.log('getMatchSuccess: ', msg);
                if (msg) {
                    try {
                        var data = JSON.parse(msg);
                        if (!data) {
                            return;
                        }
                        var url = "", style = "";
                        if (data.scoreType == @((int) BehaviorScoreType.Normal)) {
                            style = "text-success";
                            url = "/Content/Media/S4.mp3";
                        } else if (data.scoreType == @((int) BehaviorScoreType.Negative)) {
                            style = "text-danger";
                            url = "/Content/Media/E2.mp3";
                        } else if (data.scoreType == @((int) BehaviorScoreType.ImportantNegative)) {
                            style = "text-danger text-bold";
                            url = "/Content/Media/E6.mp3";
                        }
                        ChangeLog(data.word, style);
                        PlayAudio(url, data.scoreType);
                    } catch (e) {
                        console.log('getMatchSuccess: ', e);
                    }
                }
            };
        </script>

        <script>

            //function Guide(data) {

            //}

            var et, evList = [];

            function Environment(data) {
                evList.push(data);
                ShowEnvironment();
            }

            function ShowEnvironment() {
                var data = evList[0] ? $.extend({}, evList[0]) : undefined;
                console.log(data);
                if (!data) {
                    return;
                }
                if ($('.environment').length > 0 && $('#ev-' + data.nodePath).length <= 0) {
                    return;
                }
                evList.splice(0, 1);
                var str = '', str1 = '';
                var path = data.resourcePath.indexOf('http') > -1
                    ? data.resourcePath
                    : '@(dataCenterUrl)' + data.resourcePath;
                switch (data.resourceType) {
                case @((int) ResourceType.Image):
                    str1 = '<img src="{0}" style="" />'.format(path);
                    break;
                case @((int) ResourceType.Audio):
                    str1 =
                        '<audio id="audio" style="display:none"  controls  autoplay><source src="{0}" type="audio/mp3">您的浏览器不支持 HTML5 audio 标签。</audio>'
                        .format(path);
                    break;
                case @((int) ResourceType.Video):
                    str1 =
                        '<video id="video" style=""  controls  autoplay><source src="{0}" type="video/mp4">您的浏览器不支持 HTML5 video 标签。</video>'
                        .format(path);
                    break;
                default:
                    str1 = '';
                }
                clearTimeout(et);
                if ($('#ev-' + data.nodePath).length > 0) {
                    $('#ev-' + data.nodePath).find('.play-box').append('<div style="width:100% ;height:15px"></div>');
                    $('#ev-' + data.nodePath).find('.play-box').append(str1);
                    Scroll2Bottom($('#environment-score'));
                } else {
                    str =
                        '<div class="environment" id="ev-{0}" style="display:none;"><div class="close" onclick="CloseEnvironment(false)">关闭</div><div id="environment-score"><div class="play-box">{1}</div></div></div>'
                        .format(data.nodePath, str1);
                    $('body').append(str);
                    OverlayScrollbar($('#environment-score'), { className: "os-theme-thin-light" });
                    $(".environment").fadeIn(600);
                }
                et = setTimeout(CloseEnvironment, 1000 * 15);

            }

            function CloseEnvironment(isAuto) {
                isAuto = isAuto == undefined ? true : isAuto;
                clearTimeout(et);
                $(".environment").fadeOut(300).remove();
                if (isAuto) {
                    ShowEnvironment();
                }
            }

            function PlayAudio(url, type) {
                if (!$('#audio-hidden-' + type).length) {
                    var audio =
                        '<audio id="audio-hidden-{1}" style=""  controls  autoplay><source src="{0}" type="audio/mpeg">您的浏览器不支持 HTML5 audio 标签。</audio>'
                            .format(url, type);
                    $('#media-box-hide').append(audio);
                    setTimeout(function() {$('#audio-hidden-' + type).remove();},15000);
                }
            }

            function ChangeLog(word, style) {
                var arr = word.split('|');
                var $log = $('#log__' + arr[0] + ' .log-text');
                if ($log.length) {
                    var text = $log.html(), text2 = text;
                    if (arr[2]) {
                        var arr2 = arr[2].split(',');
                        arr2.forEach(function(v) {
                            var reg = new RegExp(v, "g");
                            var str = '<span class="{1} ml-1 mr-1">{0}</span>'.format(v, style);
                            if (text2.indexOf(str) < 0) {
                                text2 = text2.replace(reg, str);
                            }
                        });
                        $log.html(text2);
                        if (text != text2) {
                            $.iwbAjax5({
                                url: abp.appUrl + 'CampPlay/UpdateLog',
                                data: { id: arr[0], Text: text2 }
                            });
                        }
                    }
                }
            }
        </script>
    }

    @section modal
    {

    }

}