{#{% load i18n %}#}

<div id="role-members-content" class="row" v-cloak>

    <div class="col-sm-12">

            <div id="role-members--toolbar"><h3>{{ _('角色成员') }} <span class="badge">((selected_num))</span></h3>
            </div>

                <table id="role-members-table">
                    <thead>
                    <th data-checkbox="true"></th>
                    <th data-field="alias" data-click-to-select="true" data-align="left">{{ _('成员') }}</th>
                    </thead>
                </table>



    </div>

</div>
<script>
    disabledEditBtn()

    ;(function () {
        var role_user_set_app = new Vue({
            el: '#role-members-content',
            delimiters: ['((', '))'],
            data: {
                member_list: [],
                selected_list: [],
                selected_num: 0,
                role_id: '{{ role_id or 0 }}'
            },
            computed: {},
            mounted: function () {

                var _this = this
                $.when(
                    $.get('{{ url('myadmin.user.list') }}?fields=id,alias,status_alias&page_size=10000', '', function (rsp) {
                        if (rsp.code != 0) {
                            alertError(rsp.msg)
                            return
                        }

                        _this.member_list = $.map(rsp.data.results, function (item) {
                            return {id: item.id, alias: item.alias, type_alias: '{{ _('用户') }}', parent: null}
                        })


                    }, 'json'),
                    $.get('{{ url('myadmin.role.members') }}', {id: _this.role_id}, function (rsp) {
                        if (rsp.code != 0) {
                            alertError(rsp.msg)
                            return
                        }
                        _this.selected_list = rsp.data
                    }, 'json')
                ).done(function () {

                    $('#role-members-table').bootstrapTable({
                        uniqueId: 'id',
                        idField: 'id',
                        toolbar:'#role-members--toolbar',
                        selectItemName: 'members[]',
                        data: _this.member_list,
                        groupBy: false,//分组
                        groupByField: 'status_alias',
                        search: true,
                        clickToSelect: true,
                        showExport: false,
                        groupByFormatter: function (value, idx, data) {
                            return '<span class="label label-info">' + value + '</span>'
                        },
                        onCheck: function (row, $element) {
                            _this.selected_num += 1

                        },
                        onUncheck: function (row, $element) {
                            _this.selected_num -= 1
                        }
                        ,
                        onPostBody: function (data) {
                            setTimeout(function () {
                                enabledEditBtn()
                                $('#role-members-table').bootstrapTable('checkBy', {
                                    field: 'id',
                                    values: _this.selected_list
                                })
                            }, 50)

                        },
                    })

                    enabledEditBtn()

                });
            },
            methods: {}

        })
    })();
</script>