@using WeApp.Helpers
@model WeApp.Views.Exercise.ScreenModel
@{
    string id = "cmd-role";
    string id2 = $"{id}_{Model.GroupNo}";
    //var roleArr = Model.Play.PlayRoleNames.Split(',');

}
@Html.Partial("_Run/_AreaBox", $"指挥部#{id2}")

<style>
    .cmd-role-box {
        display: flex;
        flex-wrap: wrap;
    }

    .role-box {
        font-size: 14px;
        --h: 40px;
        display: block;
        height: var(--h);
        border-radius: var(--h) 1rem 1rem var(--h);
        background: #fff;
        margin: 5px 10px;
        cursor: pointer;
    }

    .cmd-role-box .role-box .role-image {
        display: block;
        float: left;
        width: var(--h);
        height: var(--h);
        border-radius: var(--h);
        border: 3px solid #fff;
    }

    .cmd-role-box .role-box .role-name {
        float: left;
        width: auto;
        min-width: 130px;
        line-height: var(--h);
        padding: 0 20px 0 15px;
        /*color: #8c91a8;*/
        color: var(--mc);
        font-weight: bold;
        text-align: center;
    }
</style>
@if (Model.WithScript)
{
    using (Html.BeginScripts())
    {
        <script id="role-script">
         
            function GetRoles(no) {
                $.iwbAjax5({
                    url: abp.appUrl + 'Query/GetGroupRoleInfos?no=' + no,
                    success: function (res) {
                        if (res) {
                            FormatterRole(res, no);
                        }
                    }

                });
            }

            function FormatterRole(data, no) {
                var str = "";
                if (data && data.length > 0) {
                    data.forEach(function (v) {
                        str +=
                            `<div class="role-box"><img class="role-image" src="/Content/Image/user.png" /><div class="role-name">${v}</div></div>`;
                    });
                }
                if (str) {
                    $(`#@(id)_${no} .box-body`).html(`<div class="cmd-role-box">${str}</div>`);
                }
            }

        </script>
    }
}
@using (Html.BeginScripts())
{
<script id="role-script">
        $(function () {
            OverlayScrollbar($(`#@(id2) .box-body`).closest('.scroll-box'), { className: "os-theme-round-dark" });
        });
        
</script>
}