@using WeApp.TrainingCamp.Dto
@using WeApp.TrainingCampGroup.Dto
@using WeApp.Views.Exercise
@{
    Layout = "~/Views/Shared/Layout/_Layout.Spec.cshtml";
    CampDto camp = ViewBag.Camp;
    ViewBag.Title = "专家屏(" + camp.Name + ")";
    List<CampGroupDto> groups = ViewBag.Groups;
    string id = camp.Id;
    string groupSelects = "<option value=\"\">请选择培训营分组...</option>";
    string groupNos = "['" + id + "'";
    if (groups != null && groups.Any())
    {
        foreach (var g in groups)
        {
            groupSelects += "<option value=\"" + g.Id + "\">" + g.Name + "</option>";
            groupNos += ",'" + g.Id + "'";
        }
    }

    groupNos += "]";
}
<style>
    body {
        height: 100vh;
    }

    .carousel {
        flex-direction: column;
    }

        .carousel > .title {
        }

        .slide > .title, .carousel > .title {
            width: 100%;
            height: 50px;
            border-bottom: 4px solid rgb(238, 238, 238);
            border-left: 4px solid rgb(238, 238, 238);
            background: #fff;
            margin: 10px 10px 0;
            position: relative;
        }

    .carousel-indicators {
        bottom: auto;
        top: 7px;
        margin: 0;
        z-index: 0;
    }

        .carousel-indicators li {
            line-height: 30px;
            height: 30px;
            width: auto;
            padding: 0 25px;
            text-indent: 0;
            background: #f3f3f3;
            border: 1px solid var(--mc);
            font-size: 1rem;
            border-radius: 3px;
            margin: 0 8px;
            color: var(--mc);
            border-radius: 20px;
        }

            .carousel-indicators li.active {
                font-weight: 600;
                background: var(--mc);
                color: #fff;
            }

    .carousel-inner {
        width: 100%;
        height: calc(100vh - 58px);
    }

    .carousel, .carousel-inner, .carousel-item {
        position: unset;
    }

    .select2-container {
        color: #3c3c3c;
    }

        .select2-container .select2-selection--single {
            height: 38px;
        }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 6px;
    }
</style>
<div class="main-box" style="height: 100vh; width: 100vw; box-sizing: padding-box; position: relative">

    @if (groups != null)
    {
        <div id="Carousel" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="30000" style="width: 100%; height: 100%;">
            <div class="title">
                <ol class="carousel-indicators">
                    @{
                        int i = 0;
                        string active;
                        foreach (var group in groups)
                        {
                            active = i == 0 ? "active" : "";
                            <li data-target="#Carousel" data-slide-to="@(i)" class=" @(active)" data-id="@(group.Id)">@(group.Name)</li>
                            i++;
                        }
                    }
                </ol>
                <a href="javascript:void(0)" onclick="Carousel(this)" class=" btn" style="left: 30px;">停止轮播</a>
                <a href="javascript:void(0)" onclick="ScenePath()" class=" btn" style="left: 140px;">情景路径</a>
                <a href="javascript:void(0)" onclick="Reviews()" class=" btn" style="left: 250px;">我要点评</a>
            </div>
            <div class="carousel-inner">
                @{
                    i = 0;
                    foreach (var g in groups)
                    {
                        active = i == 0 ? "active" : "";
                        <div class="carousel-item @(active)" style="height: 100%; width: 100%;" data-id="@(g.Id)">
                            @{
                                var model = new ScreenModel(2, g.Id, id, i == 0);
                                <div style="display: flex; width: 100%; height: 100%;">
                                    @Html.Partial("_Screen", model)
                                </div>
                            }
                        </div>
                        i++;
                    }
                }
            </div>
        </div>
    }
</div>
@section scripts
{
    <script src="~/Content/Js/scene-path.js"></script>
    <script>

        $(function() {
            @if (groups != null && groups.Any())
            {
                <text>
                    $("#Carousel").on("slide.bs.carousel",
                        function(e) {
                            //console.log(e)
                            var no = $(e.relatedTarget).data('id');
                            //console.log(no);
                            window.Scroll2Bottom($('#scene_' + no + ' .box-body'));
                            $(".media-box .body-content").each(function() {
                                $(this).html('<span>播放区</span>');
                            });
                            $('#scene_' + no + ' .box-body .body-content').find('.flash-scene')
                                .removeClass('flash-scene');
                            $('#scene_' + no + ' .box-body .body-content').find('.current-scene')
                                .removeClass('current-scene');
                        });
                </text>
            }
        });

        function Carousel(that) {
            var $that = $(that);
            if ($that.hasClass("stop")) {
                console.log('cycle');
                $("#Carousel").carousel('cycle');
                $("#Carousel").carousel('next');
                $that.removeClass("stop").text('停止轮播');
            } else {
                console.log('pause');
                $("#Carousel").carousel('pause');
                $that.addClass("stop").text('开始轮播');
            }
        }

        function ScenePath() {
            $.iwbAjax4({
                url: abp.appUrl + 'Query/GetCampRunningInfos?no=@(id)',
                success: function(res) {
                    if (res) {
                        var str = FormatterScenePath(res);
                        if (str) {
                            str = '<div class="modal-body" style="height:800px;padding:0;">{0}</div>'.format(str);
                            $(document).iwbModal('create',
                                {
                                    modal: 'modal-scene-path',
                                    modaltitle: '情景路径详情',
                                    modalFooter: '<div class="modal-footer" style="text-align: center;"><button type="button" class="btn btn-sm btn-outline-iwb waves-effect" data-dismiss="modal" style="min-width:100px;">取消</button></div>',
                                    width: 1000,
                                    modalBody: str,
                                    topHeight:10,
                                    save: function() {
                                        $('#modal-scene-path').modal('hide');
                                    }
                                });
                        } else {
                            abp.message.warn("未查询到情景信息！");
                        }
                    } else {
                        abp.message.warn("未查询到情景信息！");
                    }

                }
            });
        }

        function Reviews() {
            var str = '<div class="modal-body" style="padding:20;"><div class="form-group"><select id="group" class="form-control" style="width: 100%">@Html.Raw(groupSelects)</select></div><div class="form-group"><textarea id="txt" class="form-control" style="width: 100%; height: 150px;border: 1px solid #aaa;" placeholder="请输入点评内容..."></textarea></div></div>';

            $(document).iwbModal('create',
                {
                    modal: 'modal-reviews',
                    modaltitle: '专家点评',
                    modalSize: 'modal-lg',
                    modalBody: str,
                    data: null,
                    shownAfter: function () {
                        var $modal = $("#modal-reviews");
                        $modal.css('display', 'block');
                        var topHeight = $(window).height() - $modal.find('.modal-dialog').height() - 150;
                        if (topHeight < 50) {
                            topHeight = 50;
                        }
                        $modal.find('.modal-dialog').animate({ 'marginTop': topHeight / 2 + "px" });
                    },
                    save: function () {
                        var no = $("#modal-reviews #group").val();
                        if (!no) {
                            abp.message.warn("请选择一个培训营分组！");
                            return;
                        }
                        var txt = $("#modal-reviews #txt").val();
                        if (!txt) {
                            abp.message.warn("请输入内容！");
                            return;
                        }
                        $.iwbAjax1({
                            url: abp.appUrl + "Eval/ZhuanJiaLog",
                            data: { no: no, msg: txt },
                            success: function () {
                                $("#txt").val("");
                            }
                        });
                        //$('#modal-reviews').modal('hide');
                    }
                });
        }
        iwbHub.client.getReloadAll = function (msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };

        iwbHub.client.getReloadSpec = function(msg) {
            console.log('getReloadSpec: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        //if (data.no == '@(id)'||@(groupNos).indexOf(data.no)>=0) {
                        if (data.no == '@(id)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadSpec: ', e);
                }
            }
        };

        iwbHub.client.getGroupRole = function(msg) {
            console.log('getGroupRole: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (@(Html.Raw(groupNos)).indexOf(data.no) >= 0) {
                            window.GetRoles(data.no);
                        }
                    }
                } catch (e) {
                    console.log('getGroupRole: ', e);
                }
            }
        };
    </script>
}