@using WeApp.Helpers
@model WeApp.Views.Exercise.ScreenModel
@{
    string id = "scene-info";
    string id2 = $"{id}_{Model.GroupNo}";
}
<style>
    @*#@id2 .card-header{
        display: flex;
        justify-content: space-between
    }*@
        #scene-info .card-header:after {
            display: none;
        }

        .current-scene-box {
            background: var(--mc);
            color: #fff;
            padding: 0 15px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 0.25rem;
            font-size: 14px;
        }

    .current-scene-box span {
        font-weight: bold;
    }

    .card-scene {
        width: 100%;
        margin: 10px 0;
        border-radius: 0.5rem;
        --bg: var(--mc);
    }

    .card-scene.round {
        --bg: #ffdd20;
    }

    .card-scene.end {
        --bg: #ff7c63;
    }

    .card-scene.active {
        border: 1px solid var(--bg);
    }

    .card-scene > .card-header {
        color: var(--bg);
        padding: 0.4rem 0.8rem;
        border-radius: 0.5rem 0.5rem 0 0;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: 0.3s all ease-in;
    }

    .card-scene.active .card-header {
        color: #fff;
        background: var(--bg)
    }

    .card-scene.collapsed-card > .card-header {
        border-radius: 0.5rem;
    }

    .card-scene > .card-header .card-title {
        font-weight: bold;
        font-size: 15px
    }

    .card-scene > .card-header .btn-tool {
        background: #ddd;
        color: var(--bg);
        padding: 0;
        margin-right: 0.25rem;
        width: 28px;
    }

    .card-scene > .card-header .attach.btn-tool.playing {
        color: #fff;
        background: var(--bg);
    }

    .card-scene > .card-header .btn-tool:hover {
        color: #fff;
        background: var(--bg);
    }

    .card-scene.active > .card-header .attach.btn-tool.playing {
        color: var(--bg);
        background: #fff;
    }

    .card-scene.active > .card-header .btn-tool:hover {
        color: var(--bg);
        background: #eee;
    }

    .card-scene > .card-header:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 100%;
        background: var(--bg);
        border-radius: 8px 0 0 0;
        transition: 0.3s all ease-in;
    }

    .card-scene.collapsed-card > .card-header:before {
        border-radius: 8px 0 0 8px;
    }

    .card-scene > .card-body {
        color: #8c91a8;
        padding: 5px 10px 5px 15px;
        font-size: 12px;
        border-radius: 0 0 0.5rem 0.5rem;
        position: relative;
    }

    .card-scene > .card-body:before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 7px;
        height: calc(100% + 1px);
        background: var(--bg);
        border-radius: 0 0 0 8px;
    }

    .card-scene > .card-body .description {
        text-indent: 2em;
    }

    .guide-box {
        font-size: 12px;
        color: #666;
        padding: 0 8px 5px;
        margin: 5px 10px;
        border: 1px dashed darkgray;
        border-radius: 5px;
    }

    .guide-title {
        font-weight: bold;
        margin: 5px 0;
    }

    .guide-info {
        margin: 0 0 5px 0;
        text-indent: 2em;
    }

    .flash-scene .card-title {
        animation: flash 1s infinite;
    }

    @@keyframes flash {
        0% {
            opacity: 1.0;
            color: inherit;
            transform: scale(1);
        }

        50% {
            opacity: 0.5;
            color: red;
            transform: scale(0.95);
        }

        100% {
            opacity: 1.0;
            color: inherit;
            transform: scale(1);
        }
    }

        .load-box {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            font-weight: 600;
            color: #007bff;
            z-index: 1000;
            background: rgba(255,255,255,0.6);
        }
        .loading {
            margin-top:-10%;
        }
        .loading:after {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
            animation: ellipsis 2s infinite;
            content: "\2026";
        }
        @@keyframes ellipsis {
            from {
                width: 2px;
                margin-right:33px;
            }
            to {
                width: 35px;
                margin-right: 0;
            }
        }
</style>
<script>
    var roundPath = "P_R", round = 1, isPlaying = false, waitToPlayAttachList = [];
</script>
@Html.Partial("_Run/_AreaBox", $"情景区#{id2}")

@if (Model.WithScript)
{
    using (Html.BeginScripts())
    {
        <script id="scene-script">

            var _loadCount = 0, _loadTimeout;
            function PreLoad(no) {
                _loadCount++;
                console.log("加载数据中... " + _loadCount);
                if (!$('.load-box').length) {
                    $('body').append(`<div class="load-box"> <span class="loading">正在加载演练数据</span></div>`);
                }
                if (_loadCount > 3) {
                    $('.load-box').fadeOut();
                    return;
                }
                $.iwbAjax5({
                    url: abp.appUrl + "Query/LoadCampPre?no="+no+"&type=0",
                    timeout: 1000 * 60 * 5,
                    success:() => {
                        clearTimeout(_loadTimeout);
                        $('.load-box').fadeOut().remove();
                        $.iwbAjax5({
                            url: abp.appUrl + "Query/LoadCampPre?no="+no+"&type=1",
                            timeout: 1000 * 60 * 5,
                            complete: () => {
                                console.log("加载中... " + _loadCount);
                            }
                        });
                    },
                    complete: () => {
                        console.log("加载中... " + _loadCount);
                    }
                });
                clearTimeout(_loadTimeout);
                _loadTimeout = setTimeout(PreLoad, 1000 * 60 * 2);
            }

            function GetScenes(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupScenes?no=' + no,
                    success: (res) => {
                        if (res && res.length) {
                            res.forEach((v) => {
                                FormatterScene(v,no);
                            });
                            window.Scroll2Bottom($(`#@(id)_${no} .box-body`).closest('.scroll-box'));
                        }
                    }
                });
            }

            function GetSceneInfo(groupNo,sceneNo) {
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetGroupSceneInfo?no=' + groupNo+'&scenePath=' + sceneNo,
                    success: function(res) {
                        if (res) {
                            FormatterScene(res,groupNo);
                            window.Scroll2Bottom($(`#@(id)_${groupNo} .box-body`).closest('.scroll-box'));
                            if (!window.startFlag) {
                                window.startFlag = true;
                                window.GetLogs();
                            }
                        } else {
                            setTimeout(function () { GetSceneInfo(groupNo,sceneNo); }, 5000);
                        }
                    }
                });
            }

            function FormatterScene(data,groupNo) {
                var str = "";
                if (data) {
                    if ($('.card-scene[data-path="' + data.path + '"]').length > 0) {
                        return ;
                    }
                    if (data.path.toUpperCase().indexOf(roundPath + "" + round) == 0) {
                        str += `<div class="card card-scene round shadow-sm collapsed-card">
                                <div class="card-header">
                                    <div class="card-title text-center w-100"><span>第&nbsp;${round}&nbsp;轮</span></div>
                                </div>
                            </div>`;
                        round++;
                    }
                    var attachStr = "";
                    if (data.attaches && data.attaches.length) {
                        data.attaches.forEach((v) =>  {
                            v.attachNo = data.id + "_" + v.attachNo;
                            waitToPlayAttachList.push(v);
                            var icon = v.fileType === "image" ? "fa-image" : v.fileType === "video" ? "fa-video" : "";
                            attachStr += `<button id="${v.attachNo}" class="attach btn btn-tool" id="${v.attachNo}" data-type="${v.fileType}" data-path="${v.filePath}" title="点击查看附件：${v.fileTitle}" type="button"  onclick="PlayAttach(this,'${groupNo}')"><i class="fas ${icon}"></i></button>`;
                        });
                    }

                    var str1 =  data.hasEnd ?  'title = "情景已处理"':'';
                    var guideIcon = '', guideStr = '';
                    if (data.guideInfos && data.guideInfos.length) {
                        guideIcon =
                            '<button class="btn btn-tool" title="点击查看提示引导信息" onclick="ToggleGuide(this)"><i class="fas fa-question"></i></button>';
                        guideStr += '<div class="guide-box" style="display:none"><p class="guide-title">提示：</p>';
                        var i = 0;
                        data.guideInfos.forEach((v) =>  {
                            i++;
                            guideStr += '<p class="guide-info">{0}、{1}</p>'.format(i, v.description);
                        });
                        guideStr += '</div>';
                    }

                    str += `<div class="card card-scene shadow-sm ${data.hasEnd ? "collapsed-card end " : "flash-scene "}" data-name="${data.name}" data-path="${data.path}" id="scene_${data.id}">
                            <div class="card-header" ${str1}>
                                <div class="card-title"><span>${data.name}</span></div>
                                <div class="card-tools">
                                   ${attachStr} ${guideIcon}
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas ${data.hasEnd ? "fa-plus" : "fa-minus"}"></i></button>
                                </div>
                            </div>
                            <div class="card-body">
                                ${guideStr}
                                <div class="description">${data.description}</div>
                            </div>
                        </div>`;
                }
                if (str) {
                    $(`#@(id)_${groupNo} .box-body`).append(str);
                    window.PlayNext(groupNo);
                    setTimeout(() =>  {
                        $(`#@(id)_${groupNo} .box-body`).find(".flash-scene").removeClass("flash-scene");
                    }, 1000 * 30);

                }

            }

            function ToggleGuide($this) {
                var $that = $($this);
                if ($that.hasClass('open')) {
                    $that.removeClass('open').attr("title", "点击查看提示引导信息").find("i").removeClass("fa-question-circle").addClass("fa-question");
                    $that.closest('.card-scene').find('.guide-box').slideUp(400);
                } else {
                    $that.addClass('open').attr("title", "点击收起提示引导信息").find("i").removeClass("fa-question").addClass("fa-question-circle");
                    $that.closest('.card-scene').find('.guide-box').slideDown(600);
                }
            }

            function PlayAttach($this,groupNo) {
                waitToPlayAttachList = [];
                var $that = $($this);
                var no = $that.data('id');
                var type = $that.data('type');
                var path = $that.data('path');
                window.Play(path, type, no,groupNo);
            }

            function DisabledScene1() {
                $('.card-scene:not(.round):not(.end)').each(function ()  {
                    $(this).addClass('old-scene');
                    $(this).find('.card-header').removeAttr("onclick");
                });
            }

            function DisabledScene2() {
                $('.card-scene.old-scene').each(function() {
                    $(this).removeClass('old-scene').addClass('end');
                    $(this).CardWidget("collapse");
                });
                $('.card-scene.active').removeClass('active');
                $('#current-scene-path').val('');
                $('.current-scene-box span').text('无');
            }

            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 (@(Model.Type) == 2 || data.no == '@(Model.GroupNo)') {
                                if ($(`#@(id)_${data.no} .box-body`).find('.card-scene[data-path="' + data.path + '"]').length <= 0) {
                                    DisabledScene2();
                                    GetSceneInfo(data.no,data.sceneNo);
                                    window.Scroll2Bottom($(`#@(id)_${data.no} .box-body`).closest('.scroll-box'));
                                }
                            }
                        }
                    } catch (e) {
                        console.log('getNewScene: ', e);
                    }
                }
            };
        </script>
    }
}