@using IwbZero.ToolCommon.StringModel
@using WeApp.TrainingCamp.Dto
@using WeOnlineApp.Configuration
@using WeOnlineApp.Models.Play
@using WeOnlineApp.TrainingCamp.Dto
@using WeOnlineApp.TrainingCampPlay.Dto
@model WeOnlineApp.Models.Play.CampPlayModel
@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
    ViewBag.PageId = "start";
    ViewBag.Title = "等待演练";
    CampPlayModel campPlay = Model;
    CampPlayDto play = campPlay.Play;
    CampDto camp = campPlay.Camp;
    CampPlayUserDto playUser = campPlay.PlayUser;
    var imagePath = string.IsNullOrEmpty(AbpSession.AvatarImagePath) ? "/Content/Image/user.png" : AbpSession.AvatarImagePath;
}

<style>
    body {
        --mc: #3168f5;
        width: 100vw;
        height: 100vh;
        color: var(--mc);
        background-image: linear-gradient(45deg,#f2f6fe,#f2f6fe);
    }

    .menu {
        --h: 35px;
        position: absolute;
        top: 30px;
        right: 10px;
        width: 80%;
        padding-right: 20px;
        line-height: var(--h);
        display: inline-block;
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }

        .menu a {
            color: var(--mc);
            padding: 3px 5px;
            margin: 0 10px;
            line-height: var(--h);
        }

            .menu a:hover {
                border-bottom: 1px solid var(--mc);
            }

    .header {
        margin: 60px 20px 0;
        min-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .friend-box {
        margin: 50px 100px 10px;
        min-height: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        border: 2px solid var(--mc);
        font-size: 1rem;
        border-radius: .75rem;
    }

    .self-box {
        margin: 20px 0;
        width: 100%;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .self-box > div {
            margin-top: 15px;
        }

    .code {
        color: var(--mc);
        font-weight: 600;
        font-size: 24px;
    }

    .img-box {
        width: auto;
    }

    img {
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        border-radius: .5rem;
    }

    .name {
    }

    .role {
        font-size: 90%;
        font-weight: bold;
        color: #f08080;
        margin-top: 0 !important;
        text-align: center;
    }

    .self-box .img-box img {
        width: 200px;
        height: 200px;
        border: 2px solid #ddd;
        border-radius: 50%;
    }

    .self-box .name {
        font-weight: 600;
        font-size: 22px;
    }

    .friend {
        margin: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .friend > div {
            margin-top: 8px;
        }

        .friend .img-box {
            position: relative;
        }

    .role-box .select2-selection {
        height: 38px;
    }

    .select2-results__option {
        color: var(--mc) !important;
    }

        .select2-results__option.select2-results__option--highlighted {
            color: #fff !important;
            background: var(--mc) !important;
        }

        .select2-results__option[aria-selected=true] {
            color: #eee !important;
            background: var(--mc) !important;
        }

    .select2-selection__arrow b {
        margin-top: 4px !important;
    }

    .btn-box {
        width: 100px;
        margin: 15px auto 0;
    }

        .btn-box button {
            width: 100%;
        }
</style>
<div class="header">
    <h2>@(play.Name) (@(camp?.Name))  </h2>
</div>
<ul class="menu">
    <li>
        <a href="@Url.Action("Index","Play")"><i class="fa fa-home"></i>&nbsp;&nbsp;返回主页</a>
    </li>
    <li>
        <a href="javascript:void(0)" onclick="Exit()"><i class="fas fa-backspace"></i>&nbsp;&nbsp;退出演练</a>
    </li>
    <li>
        <a href="javascript:void(0)" onclick="LoginOut()"><i class="fas fa-sign-out-alt"></i>&nbsp;&nbsp;注销账号</a>
    </li>
</ul>
<div class="self-box">
    <div class="img-box">
        <img src="@(imagePath)" alt="@(AbpSession.RealName)" />
    </div>
    <div class="name">@(AbpSession.RealName)</div>

    @if (playUser == null)
    {
        <div class="btn-box"><button type="button" class="btn btn-success" onclick="Join()">加入演练</button></div>
    }
    else if (playUser.PlayerType == CampPlayerTypeDefinition.Creator)
    {
        <div class="btn-box"> <button type="button" class="btn btn-success" onclick="Start()">开始演练</button></div>
        <div class="code">
            <span>邀请码：@(play.InvitationCode)</span>
        </div>
    }
    else
    {
        string style1 = "display:none", style2 = "display:none";
        if (playUser.PlayerState == CampPlayUserStateDefinition.Ready)
        {
            style1 = "display:block";
        }
        else if (playUser.PlayerState == CampPlayUserStateDefinition.New || playUser.PlayerState == CampPlayUserStateDefinition.CancelReady)
        {
            style2 = "display:block";

        }
        var roleNames = "<option value=\"\">请选择一个角色开始准备</option>"; ;
        if (play.PlayRoleNames.IsNotEmpty())
        {
            var arr = play.PlayRoleNames.Split(',');
            foreach (var role in arr)
            {
                roleNames += "<option value=\"" + role + "\">" + role + "</option>";
            }
        }
        <div id="noReady" style="@(style2)">
            <div class="role-box">
                <select id="role" class="form-control" style="width: 250px" autocomplete="off">
                    @(Html.Raw(roleNames))
                </select>
            </div>
            <div class="btn-box"><button type="button" class="btn btn-success" onclick="Ready()">准备演练</button></div>
        </div>
        <div id="hasReady" style="@(style1)">

            <div class="role">@(playUser.Role)</div>
            <div class="btn-box"><button type="button" class="btn btn-danger" onclick="Cancel()">取消准备</button></div>
        </div>

    }
</div>
@if (play.PlayModel == CampPlayModelDefinition.Team)
{
    <div class="friend-box"></div>
}

@section scripts
{
    <script>
        $(function() {
            abp.signalr.connect('@(play.InvitationCode)');
            $('#role').select2();
            @if (play.PlayModel == CampPlayModelDefinition.Team)
            {
                <text>
                    GetPlayUsers();
                </text>
            }
        });

        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>
                    }
                });
        }
        function GetPlayUsers() {
            $.iwbAjax4({
                url: abp.appUrl + "CampPlay/GetPlayUsers?no=@(play.Id)",
                success: function(res) {
                    FormatterPlayUsers(res);
                }
            });
        }

        function FormatterPlayUsers(data) {
            var str = "";
            if (data && data.length) {
                data.forEach(function(v) {
                    str += '<div class="friend" id="user-{0}">'.format(v.id);
                    str += FormatterPlayUser(v);
                    str += '</div>';
                });
            }
            if (str) {
                $('.friend-box').html(str);
            }
        }

        function FormatterPlayUser(data) {
            var str = "";
            if (data) {
                var ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-danger">未准备</div></div>';
                if (data.playerType == @(CampPlayerTypeDefinition.Creator)) {
                    ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-warning">房主</div></div>';
                } else if (data.playerState == @(CampPlayUserStateDefinition.Ready)) {
                    ribbon = '<div class="ribbon-wrapper"><div class="ribbon bg-success">已准备</div></div>';
                }
                var img = data.imagePath ? data.imagePath : "/Content/Image/user.png";
                str += '<div class="img-box"><img src="{0}" alt="{1}" />{2}</div>'.format(img, data.playerName, ribbon);
                str += '<div class="name">{0}</div>'.format(data.playerName);
                str += '<div class="role">{0}</div>'.format(data.role ? data.role : "未准备");

            }
            return str;
        }
    </script>
    <script>
        function Join() {
            MsgConfirm("确认加入演练吗?",
                "加入演练",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "/CampPlay/Join",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            window.location.reload();
                        }
                    });
                });
        }

        function Cancel() {
            MsgConfirm("确认取消准备吗?",
                "取消准备",
                function() {
                    $.iwbAjax1({
                        url: abp.appUrl + "/CampPlay/CancelReady",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            $('#hasReady').hide();
                            $('#noReady').fadeIn(500);
                        }
                    });
                });
        }

        function Ready() {
            var role = $('#role').val();
            if (role) {
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/Ready",
                    data: { id: '@(play.Id)', role: role },
                    success: function() {
                        $('#noReady').hide();
                        $('#hasReady').fadeIn(500);
                    }
                });
            } else {
                abp.message.warn('请选择一个角色！');
            }

        }

        function Start() {
            var msg = "确认开始演练吗?";
            MsgConfirm(msg,
                "开始演练",
                function() {
                    $.iwbAjax4({
                        url: abp.appUrl + "/CampPlay/Start",
                        data: { id: '@(play.Id)' },
                        success: function() {
                            abp.message.success("演练启动完成。");
                        },
                        error: function() {

                        }
                    });
                });
        }
    </script>

    <script id="hub-s">
        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.getUserChange = function (msg) {
            console.log('getUserChange: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var str = FormatterPlayUser(data);
                        var $user = $('#user-' + data.id);
                        if ($user.length > 0) {
                            $user.html(str);
                        } else {
                            str = '<div class="friend" id="user-{0}">{1}</div>'.format(data.id, str);
                            $('.friend-box').append(str);
                        }
                    }
                } catch (e) {
                    console.log('getUserChange: ', e);
                }
            }
        };
        iwbHub.client.getUserExit = function (msg) {
            console.log('getUserExit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        var $user = $('#user-' + data.id);
                        if ($user.length > 0) {
                            $user.remove();
                        }
                    }
                } catch (e) {
                    console.log('getUserExit: ', e);
                }
            }
        };
        @if (play.PlayModel == CampPlayModelDefinition.Team&& playUser?.PlayerType != CampPlayerTypeDefinition.Creator)
        {
            <text>
        iwbHub.client.getCreatorExit = function (msg) {
            console.log('getCreatorExit: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        abp.message.warn('房主已退出演练，演练已结束！',"演练结束").done(function() {
                            window.location.href = "@Url.Action("Start", "Play")";
                        });
                    }
                } catch (e) {
                    console.log('getCreatorExit: ', e);
                }
            }
        };
            </text>
        }
    </script>
}