@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 ? "指挥长组建指挥部" : "学员屏指挥部") + "(" + groupName + ")";
    var name = hasBuilded ? groupName + "指挥部——" + (isLeader ? "指挥长" : "组员") : isLeader ? "指挥长组建指挥部" : "指挥部组建中...";
    var title = hasBuilded ? "指挥部" : "创建指挥部";
    var stu = isLeader ? "" : "stu";
}
@section css{
    <link href="~/Content/Css/ExerciseV2/stu-zhb.min.css?v=1.1" rel="stylesheet" />
}
@Html.Partial("Layout/V2/_Bg",false)
<div class="box no-select">
    <div id="bg_title">
        <span class="title">@(title)</span>
    </div>
    <div class="box-body">
        <div class="box-header">
            <span class="title">@name</span>
        </div>
        <div class="body" style="margin-top: 5px">
            @if (!hasBuilded)
            {
                <div class="body-card select">
                    <div class="select-box">
                    </div>
                    @if (isLeader)
                    {
                        <div class="add-role" data-id="self" onclick="GroupToggle(this)">
                            <div class="icon">
                                <img src="/Content/Image/ExerciseV2/zhb/zh_icon-add-role.svg" alt="" />
                            </div>
                            <div class="text">自定义角色</div>
                        </div>
                    }
                </div>
            }
            <div class="body-card role">
                <div class="content-box">
                    @if (!hasBuilded && isLeader)
                    {
                        <div class="role-content self" id="c_self">
                            <div class="role-box">
                                <div class="role-item add" id="add-role" onclick="$('#add-role').hide();$('#add-box').fadeIn(800).css('display', 'flex');$('#self-role-text').focus();">
                                    <div class="icon">
                                        <img src="~/Content/Image/ExerciseV2/zhb/zh_icon-add-role-2.svg" />
                                    </div>
                                    <div class="text">点击添加角色</div>
                                </div>
                            </div>
                            <div class="add-box" id="add-box">
                                <input type="text" id="self-role-text" value="" pattern="请输入新增角色名称" />
                                <div class="btn-box">
                                    <button type="button" class="btn btn-small cancel" onclick="$('#add-box').fadeOut(500);$('#add-role').fadeIn(800).css('display', 'flex');">取消</button>
                                    <button type="button" class="btn btn-small submit" onclick="CreateSelfRole()">添加</button>
                                </div>
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="role-content" style="display: none"></div>
                    }
                </div>
            </div>
            @if (!hasBuilded && isLeader)
            {
                <div class="body-card">
                    <div class="btn" onclick="CreateGroupRole()">创建指挥部</div>
                </div>

                <div style="display: none">
                    <img src="/Content/Image/ExerciseV2/zhb/zh_icon-checkbox.svg" style="opacity: 0" />
                    <img src="/Content/Image/ExerciseV2/zhb/zh_icon-checkbox-selected.svg" style="opacity: 0" />
                </div>
            }
        </div>
    </div>
    
    <div style="position: absolute; left: 0; bottom: 0; color: #ddd; opacity: 0.5;">@(groupName)</div>
</div>

@section scripts
{
    <script>
        $(function () {
            resizeHeight_head();
            window.addEventListener('resize', resizeHeight_head);
            @if (hasBuilded)
            {
                <text>
                    GetGroupRoles();
                </text>
            }
            else
            {
                <text>
                    GetCampRoleGroups();
                </text>
            }

            $('#self-role-text').keydown(function(e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    CreateSelfRole();
                }
            });
        });

        function resizeHeight_head() {
            resizeHeight((h, wh) => {
                 var height = 355;
                  @if (hasBuilded)
                  {
                      <text>
                 height = 175;
                     </text>

                  }
                  else if (!isLeader)
                  {
                      <text>
                 height = 305;
                     </text>
                  }
                 $(".content-box").height(wh - h - height)
            })
        }

        var selectStr = '<div class="check-box-icon"></div>已选择<span>(点击取消)</span>';
        var noSelectStr = '<div class="check-box-icon"></div>未选择<span>(点击选择)</span>';
        var roleInfo = '<div class="role-item {1}"  data-name="{0}"><div class="icon"><img src="/Content/Image/ExerciseV2/zhb/zh_icon-user.svg" alt="" /></div><div class="text">{0}</div>{2}</div> ';

        function GetGroupRoles() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetGroupRoleInfos?no=@(id)",
                success: function(res) {
                    FormatterBuildGroupRole(res);
                    OverlayScrollbar($('.content-box'));

                }
            });
        }

        function GetCampRoleGroups() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetCampRoleGroupInfos?no=@(campNo)",
                success: function(res) {
                    FormatterGroupRole(res);
                    OverlayScrollbar($('.content-box'));

                }
            });
        }

        function FormatterBuildGroupRole(data) {
            if (data && data.length > 0) {
                var str = '<div class="role-content active"><div class="role-box">';
                data.forEach(function(r) {
                    str += roleInfo.format(r, "", "");
                });
                str += '</div></div>';
                $('.content-box').html(str);
            }
        }

        function FormatterGroupRole(data) {
            var str1 = "", str2 = "";
            if (data && data.length > 0) {
                data.forEach(function(v) {
                    str1 += FormatterGroup(v);
                    str2 += FormatterRole(v);
                });
            }
            if (str1) {
                $('.role .content-box .role-content').before(str2);
                $('.select-box').html(str1);
                $('.select-box .select-item:first-child').trigger("click");
            }
        }

        function FormatterGroup(data) {
            var str = '';
            if (data) {
                str += '<div class="select-item" id="t_{0}" data-id="{0}" onclick="GroupToggle(this)">'.format(data.id);
                str += '<div class="check-box-icon @(stu)" data-id="{0}" onclick="GroupCheckToggle(this)"></div>'.format(data.id);
                str += '<div class="icon"><img data-id="{0}" src="/Content/Image/ExerciseV2/zhb/zh_icon-{0}.svg"/></div >'
                    .format(data.id);
                str += '<span class="text">{0}</span>'.format(data.roleGroupName);
                str += '</div>';
            }
            return str;
        }

        function FormatterRole(data) {
            var str = '';
            if (data) {
                str += '<div class="role-content" id="c_{0}">'.format(data.id);
                str += '<div class="role-select @(stu)"  data-id="{1}" onclick="GroupCheckToggle(this)">{0}</div>'.format(noSelectStr,
                    data.id);
                str += '<div class="role-box">';
                if (data.roleNames) {
                    var arr = data.roleNames.split(',');
                    arr.forEach(function(v) {
                        str += roleInfo.format(v, "", "");
                    });
                }
                str += '</div>';
                str += '</div>';
            }
            return str;
        }

        function GroupToggle(that) {
            var e = window.event;
            e.stopPropagation();
            e.preventDefault();
            var $that = $(that);
            var id = $that.data('id');
            $('.role-content').removeClass('active');
            $('#c_' + id).addClass('active');
            $('.select-box .select-item').removeClass('active');
            $that.addClass('active');
        }

        function GroupCheckToggle(that) {
            var e = window.event;
            e.stopPropagation();
            e.preventDefault();
            var $that = $(that);
            var id = $that.data('id');
            if ($('#t_' + id).hasClass('check')) {
                $('#t_' + id).removeClass('check');
                $('#c_' + id).find('.role-select').removeClass('check').html(noSelectStr);
                $('#c_' + id).find('.role-item').removeClass('check');
            } else {
                $('#t_' + id).addClass('check');
                $('#c_' + id).find('.role-select').addClass('check').html(selectStr);
                $('#c_' + id).find('.role-item').addClass('check');
            }

        }

        function CreateSelfRole() {
            var name = $('#self-role-text').val();
            if (name) {
                var str = roleInfo.format(name,
                    " check",
                    '<span class="close" onclick="$(this).parent().remove()">&times;</span>');
                $('#add-role').before(str);
                $('#self-role-text').val('');
            }
            $('#add-box').hide();
            $('#add-role').fadeIn(800).css('display', 'flex');
        }

        function CreateGroupRole() {
            var groupNo = "@(id)";
            abp.message.confirm("您确认提交吗？提交后不可再更改。",
                "创建指挥部",
                function (isConfirmed) {
                    if (isConfirmed) {
                        var roleGroupNos = [], selfRoleNames = [];
                        $(".select-item.check").each(function (i, v) {
                            var no = $(v).data("id");
                            if (no != 'self') {
                                roleGroupNos.push(no);
                            }
                        });
                        $("#c_self .check").each(function (i, v) {
                            selfRoleNames.push($(v).data("name"));
                        });
                        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>
}