@using IwbZero.ToolCommon.StringModel
@using WeApp.Configuration
@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Stu.cshtml";
    CampGroupDto group = ViewBag.Group;
    string id = group.Id,
        campNo = group.CampNo, 
        groupName = group.Name, 
        text = ViewBag.Text;
    int state = ViewBag.State;
    ViewBag.Title = "公共屏(" + group.Name + ")";
}


@section styles{
    <style>
        body {
            cursor: none
        }
        .body {
            padding: 15px;
            /*background: #3c3f3c;*/
            background-image: linear-gradient(200deg,#005f61,#007f61);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .title {
            margin-top: -10vh;
            font-size: 110px;
            color: #fff;
            text-align: center;
        }


        .title > span {
            color: #fff;
            display: table;
            width: 100%;
        }
        @{
            if (state == CampGroupStateDefinition.New)
            {
                <text>
        .title {
            font-size: 80px;
        }
        .title > span:nth-of-type(2) {
            padding: 20px 0 30px

        }
        </text>
            }
        }
            .title > span > strong {
                font-size: 130px;
                letter-spacing: 50px;
                padding-left: 50px;
            }

            .title > .wait {
                width: auto;
                margin: 10px auto 0;
                text-align: center;
                line-height: 50px;
                font-weight: 600;
            }
        .object{
            width: 30px;
            height: 30px;
            background-color: #ffffff;
            float: left;
            margin-top: 25px;
            margin-right: 25px;
            -moz-border-radius: 50% 50% 50% 50%;
            -webkit-border-radius: 50% 50% 50% 50%;
            border-radius: 50% 50% 50% 50%;
            -webkit-animation: object 2.2s infinite;
            animation: object 2.2s infinite;
        }
        .object:last-child {
            margin-right: 0;
        }

        .object:nth-child(20){
            -webkit-animation-delay: 2.0s;
            animation-delay: 2.0s;
        }
        .object:nth-child(19){
            -webkit-animation-delay: 1.9s;
            animation-delay: 1.9s;
        }
        .object:nth-child(18){
            -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s;
        }
        .object:nth-child(17){
            -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s;
        }

        .object:nth-child(16){
            -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
        }
        .object:nth-child(15){
            -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
        }
        .object:nth-child(14){
            -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
        }
        .object:nth-child(13){
            -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
        }
        .object:nth-child(12){
            -webkit-animation-delay: 3.3s;
            animation-delay: 1.2s;
        }

        .object:nth-child(11){
            -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;
        }
        .object:nth-child(10){
            -webkit-animation-delay: 1.0s;
            animation-delay: 1.0s;
        }
        .object:nth-child(9){
            -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
        }
        .object:nth-child(8){
            -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
        }
        .object:nth-child(7){
            -webkit-animation-delay: 1.8s;
            animation-delay: 0.7s;
        }
        .object:nth-child(6){
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }
        .object:nth-child(5){
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }
        .object:nth-child(4){
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
        .object:nth-child(3) {
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        .object:nth-child(2){
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        @@-webkit-keyframes object{
            50% {
                /*-ms-transform: translate(0,-50px);
                -webkit-transform: translate(0,-50px);
                transform: translate(0,-50px);*/
                background-color: #ffffff;
                background-color: rgba(255,255,255,.25);
            }
            100% {
                /*-ms-transform: translate(0,-50px);
                -webkit-transform: translate(0,-50px);
                transform: translate(0,-50px);*/
                background-color: #ffffff;
                background-color: rgba(255,255,255,.25);
            }
        }
        @@keyframes object {
            50% {
                /*-ms-transform: translate(0,-50px);
                -webkit-transform: translate(0,-50px);
                transform: translate(0,-50px);*/
                background-color: #ffffff;
                background-color: rgba(255,255,255,.25);
            }

            100% {
                /*-ms-transform: translate(0,-50px);
                -webkit-transform: translate(0,-50px);
                transform: translate(0,-50px);*/
                background-color: #ffffff;
                background-color: rgba(255,255,255,.25);
            }
        }
    </style>
}
<div class="body no-select" style="height: 100vh; width: 100vw;box-sizing: padding-box;">
    <div class="title">
        <span>
            <strong>@(groupName)</strong>
        </span>
        @if (text.IsNotEmpty())
        {
            <span>@(text)</span>
            <span class="wait ">
                @{
                    for (int i = 0; i < 20; i++)
                    {
                        <span class="object"></span>
                    
                    }
                }
            </span>
        }
        
    </div>
</div>
@section scripts
{
    <script id="hub">
        abp.signalr.connect(['@(id)','@(campNo)']);
        iwbHub.client.getReloadAll = function (msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)'|| data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };
        iwbHub.client.getReloadPublic = function (msg) {
            console.log('getReloadPublic: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)'|| data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadPublic: ', e);
                }
            }
        };
    </script>
}