@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Stu.cshtml";
    CampGroupDto group = ViewBag.Group;
    bool isLeader = ViewBag.IsLeader, hasBuilded= ViewBag.HasBuilded;
    string id = group.Id, 
        groupName = group.Name,
        campNo= group.CampNo;
    ViewBag.Title = (isLeader ? "指挥长组建指挥部" : "学员屏指挥部") + "(" + group.Name + ")";
}
@section css{
    <link href="~/Content/Css/Exercise/student.min.css" rel="stylesheet" />
}
<div class="stu-box">
    <div class="box-h"> 
        @if (hasBuilded)
        {
            <div class="title">
                <h3 class="">@(groupName)指挥部</h3>
            </div>
     
        }
        else
        {
            if (isLeader)
            {
                <div class="title">
                    <h3>创建指挥部</h3>
                    <button type="button" class="btn btn-dl" onclick="CreateGroupRole()" title="选择一组(或多组)角色方案后点击提交">提交</button>
                </div>
             
            }
            else
            {
                <div>
                    <h3 class="">指挥部创建中...</h3>
                    @*<button type="button" class="btn btn-outline-iwb">待选角色方案</button>*@
                </div>
            }
        }
    </div>

    <div id="role-group-box" class="box-b"></div>

</div>

@section scripts
{
    <script>
        $(function() {
            @if (hasBuilded)
            {
                <text>
                    GetGroupRoles();
                </text>
            }
            else
            {
                <text>
                    GetCampRoleGroups();
                </text>
            }
        });

        function GetGroupRoles() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetGroupRoleInfos?no=@(id)",
                success: function(res) {
                    FormatterGroupRole(res);
                }
            });
        }

        function FormatterGroupRole(data) {
            if (data && data.length > 0) {
                var roleInfo =
                    '<div class="role-info"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="name">{0}</div></div>';
                var roleStr = '';
                data.forEach(function(r) {
                    roleStr += roleInfo.format(r);
                });
                var $body = $('<div>', { 'class': 'card-body', 'css': { 'background': 'transparent' } })
                    .append('<div class="content-box">{0}</div>'.format(roleStr));
                var $box = $('<div>',
                    {
                        'class': 'card card-dl',
                        'css': { 'borderTop': '0', 'marginBottom': '0', 'background': 'transparent' }
                    }).append($body);
                $('#role-group-box').append($box);
            }
        }

        function GetCampRoleGroups() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetCampRoleGroupInfos?no=@(campNo)",
                success: function(res) {
                    FormatterCampRoleGroup(res);
                }
            });
        }

        function FormatterCampRoleGroup(data) {
            if (data && data.length > 0) {
                var $tab = $("<ul>", { 'class': 'nav nav-tabs' }),
                    $content = $('<div>', { 'class': 'tab-content' });
                var tabStr = '',
                    selectRole = '',
                    tabContent =
                        '<div class="tab-pane fade" id="tab-content-{0}"><div class="content-box" >{1}</div></div>';
                tabStr +=
                    ' <li class="nav-item" style="position: relative;"><a class="nav-link" data-toggle="pill" href="#tab-content-{0}" role="tab" style="padding-left: 35px;">{1}</a>';
                @if (isLeader)
                {
                    <text>
                        selectRole =
                            '<div style="width:100%;cursor: pointer;"><div class="check-group" id="role-group-check_{0}" onclick="CheckRoleGroup(this,1)" data-value="{0}">选择此方案</div></div>';
                        tabStr +=
                            ' <label class="iwb-checkbox iwb-dl" style="position: absolute; left: 10px; top: 9px;" ><input class="role-group-check" type="checkbox" value="{0}"  data-value="{0}" autocomplete="off" onchange="CheckRoleGroup(this,2)"> <span></span></label>';
                    </text>
                }
                tabStr += '</li>';

                var roleInfo =
                    '<div class="role-info"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="name">{0}</div></div>';
                data.forEach(function(v) {
                    $tab.append($(tabStr.format(v.id, v.roleGroupName)));
                    var roleStr = "";
                    if (selectRole) {
                        roleStr += selectRole.format(v.id);
                    }
                    if (v.roleNames) {
                        var arr = v.roleNames.split(',');
                        arr.forEach(function(r) {
                            roleStr += roleInfo.format(r);
                        });
                    }

                    $content.append($(tabContent.format(v.id, roleStr)));
                });
                @if (isLeader)
                {
                    <text>
                        $tab.append(
                            '<li class="nav-item"><a class="nav-link" data-toggle="pill" href="#tab-content-self" role="tab" style="padding-left: 35px;">自定义角色</a></li>');
                        var selfRole =
                            '<div class="role-info self"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="input"><input type="text" placeholder="自定义角色..."></div><div class="image add" onclick="AddSelfRole(this)"><img src="../../Content/Image/Stu/add.png" /></div></div>';
                        $content.append($(tabContent.format('self', selfRole)));
                    </text>
                }

                var $head = $('<div>', { 'class': 'card-header p-0 border-bottom-0' }).append($tab);
                var $body = $('<div>', { 'class': 'card-body', 'css': { 'background': 'transparent' } })
                    .append($content);
                var $box = $('<div>',
                    {
                        'class': 'card card-dl card-outline card-outline-tabs',
                        'css': { 'borderTop': '0', 'marginBottom': '0', 'background': 'transparent' }
                    }).append($head).append($body);
                $('#role-group-box').append($box);
                $tab.find("li").eq(0).find('a').tab('show');
            }
        }

        function CheckRoleGroup(that, type) {
            var val = $(that).data("value"), $input, $that;
            if (type == 1) {
                $input = $("input[type='checkbox'][value='" + val + "']");
                $that = $(that);
                if ($input.length === 1) {
                    if ($input.is(':checked')) {
                        $input.prop("checked", false);
                        $that.text("选择此方案");
                        $that.removeClass("hasCheck");
                    } else {
                        $input.prop("checked", true);
                        $that.text("已选择(点击取消)");
                        $that.addClass("hasCheck");
                    }
                }
            } else {
                $input = $(that);
                $that = $('#role-group-check_' + val);
                if ($input.length === 1) {
                    if ($input.is(':checked')) {
                        $that.text("已选择(点击取消)");
                        $that.addClass("hasCheck");
                    } else {
                        $that.text("选择此方案");
                        $that.removeClass("hasCheck");
                    }
                }
            }
            
           
        }

        function AddSelfRole(that) {
            var $that = $(that).closest(".role-info"), name = $that.find("input").val();
            console.log("AddSelfRole", name);
            if (name) {

                var str =
                    '<div class="role-info self-role"><div class="image"><img src="../../Content/Image/user.png" /></div><div class="name">{0}</div><span class="iconfont icon-times-circle-fill" style="margin-right: 5px;margin-top: 3px;font-size: 16px;color: #aaa;cursor: pointer;" onclick="RemoveSelfRole(this)"></span></div>'
                        .format(name);
                $that.before(str);
                $that.find("input").val("");
            }
        }

        function RemoveSelfRole(that) {
            $(that).closest(".role-info").remove();
        }

        function CreateGroupRole() {
            var groupNo = "@(id)";
            abp.message.confirm("您确认提交吗？提交后不可再更改。",
                "创建指挥部",
                function() {
                    var roleGroupNos = [], selfRoleNames = [];
                    $(".role-group-check:checked").each(function(i, v) {
                        roleGroupNos.push($(v).val());
                    });
                    $(".self-role .name").each(function(i, v) {
                        selfRoleNames.push($(v).text());
                    });
                    console.log(roleGroupNos, selfRoleNames);
                    if (roleGroupNos.length <= 0 && selfRoleNames.length <= 0) {
                        abp.message.warn("您还未选择角色。");
                        return;
                    }
                    $.iwbAjax1({
                        url: abp.appUrl + "/Eval/CreateGroupRole",
                        isAlert: false,
                        isValidate: false,
                        data: { GroupNo: groupNo, RoleGroupNos: roleGroupNos, SelfRoleNames: selfRoleNames },
                        success: function() {
                            //window.iwbHub.server.sendPageState(JSON.stringify({ groupNo: groupNo, cmd: "reload" }));
                            //window.iwbHub.server.sendPageState(JSON.stringify({ groupNo: groupNo, cmd: "reload-public" }));
                            //window.iwbHub.server.sendRefreshRole(groupNo);
                            window.location.reload();
                            abp.message.success("角色预案创建成功");
                        }
                    });


                });
        }

    </script>

    <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);
                }
            }
        };
        @if (isLeader)
        {
            <text>
                iwbHub.client.getReloadLeader = function(msg) {
                    console.log('getReloadLeader: ', 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('getReloadLeader: ', e);
                        }
                    }
                };
            </text>
        }
        else
        {
            <text>
        iwbHub.client.getReloadStu = function(msg) {
            console.log('getReloadStu: ', 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('getReloadStu: ', e);
                }
            }
        };
            </text>
        }
    </script>
}