@using WeApp.Helpers
@model List<WeApp.TrainingCampGroup.Dto.CampGroupDto>

@if (Model?.Count > 0)
{
    <div class="scene-group-box" id="scene-group">

        @for (int i = 0; i < Model.Count; i++)
        {
            var group = Model[i];
            <span class="group-name @(i == Model?.Count - 1 ? "show" : "")">当前组别：@(group.Name)</span>
        }

        <div class="p-0" style="width: 100%; height: 100%; overflow: hidden;">
            @for (int i = 0; i < Model.Count; i++)
            {
                var group = Model[i];
                <div class="area-v group-box @(i == Model?.Count - 1 ? "show" : "")" data-index="@(i)">
                    <div class="area-h p-0" style="height: calc(100% * 0.3)">
                        <div class="area p-0">
                            @Html.Partial("/Views/Play/__/_SceneInfo.cshtml", $"{group.Id}#{(i == 0 ? 1 : 0)}#2")
                        </div>
                    </div>
                    <div class="area-h p-0" style="height: calc(100% * 0.24)">
                        <div class="area p-0">
                            @Html.Partial("/Views/Play/__/_SceneScore.cshtml", $"{group.Id}#{(i == 0 ? 1 : 0)}#2")
                        </div>
                    </div>
                    <div class="area-h p-0" style="height: calc(100% * 0.48)">
                        <div class="area p-0">
                            @Html.Partial("/Views/Play/__/_SceneFlow.cshtml", $"{group.Id}#{(i == 0 ? 1 : 0)}#2")
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
}

@using (Html.BeginScripts())
{
<script>
    var $sceneGroupsBox = $('#scene-group');
    var groupCount = @(Model?.Count);

    //function ScrollGroup() {

    //    var $current = $sceneGroupsBox.find('.scene-group-box.show');
    //    var nextIndex = Number($current.data('index')) + 1;
    //    nextIndex = nextIndex >= groupCount ? 0 : nextIndex;
    //    var $next = $sceneGroupsBox.find('.scene-group-box').eq(nextIndex);
    //    $current.addClass("active");
    //    $next.addClass("next");
    //    setTimeout(() => {
    //            $current.removeClass("active").removeClass("show");
    //            $next.removeClass("next").addClass("show");
    //        },
    //        500);
    //    setTimeout(ScrollGroup, 1000 * 3);

    //}

    function ScrollGroup() {
        var $current = $sceneGroupsBox.find('.group-box.show'),$currentName = $sceneGroupsBox.find('.group-name.show');
        var nextIndex = Number($current.data('index')) + 1;
        nextIndex = nextIndex >= groupCount ? 0 : nextIndex;
        var $next = $sceneGroupsBox.find('.group-box').eq(nextIndex), $nextName = $sceneGroupsBox.find('.group-name').eq(nextIndex);
        $current.fadeOut(300, () => {
            $current.removeClass("show");
            $currentName.removeClass("show");
            $next.fadeIn(800, () => { $next.addClass("show");window.Scroll2Bottom($next.find('.scroll-box')); });
            $nextName.fadeIn(800, () => { $nextName.addClass("show") });
        });
        $currentName.fadeOut(300);
        setTimeout(ScrollGroup, 1000 * 30);

    }

    $(function() {
        ScrollGroup();
    });
</script>
}