{{template "header"}}

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            {{.CsrfTokenField}}
            <input type="hidden" name="ID" value="{{.Item.User.ID}}" />
            <input type="hidden" id="initValue" value="{{.Item.RoleIDs}}" />
            <div class=" layui-form-item">
                <div class="layui-input-inline" id="roles" style="width: 100%;">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-inline">
                    {{ submitBtn .AuthorizeMenus "set_role" }}
                </div>
            </div>
        </form>
    </div>
</div>

{{define "css"}}
<style>
    .layui-body {
        padding: 15px;
        left: 0;
    }
</style>
{{end}}

{{define "js"}}
<script>
    layui.use(['form', 'jquery', 'iconPicker', 'xmSelect'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let iconPicker = layui.iconPicker;
        let xmSelect = layui.xmSelect;
        let selectRoles = [];

        getRoles();

        function getRoles() {
            $.ajax({
                url: "/system/role/xm_select",
                type: "POST",
                headers: { 'X-CSRF-Token': $('#csrf_token').val() },
                dataType: "json",
                success: function (res) {
                    xmSelect.render({
                        el: "#roles",
                        toolbar: {
                            show: true
                        },
                        tips: "请选择角色",
                        initValue: $("#initValue").val().split(','),
                        filterable: true,
                        data: res,
                        on: function (ret) {
                            var arr = ret.arr;
                            selectRoles = arr.map(function (item) {
                                return item.value;
                            });
                        }
                    });
                },
                error: function (err) {
                    console.error(err);
                }
            });
        }

        // 表单提交
        form.on('submit(set_role)', function (data) {
            $.ajax({
                url: '/system/user/set_role',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (result) {
                    if (result.success) {
                        layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name)); // 关闭当前页
                            parent.layui.table.reload("tablelist", {
                                page: { curr: 1 },
                            });
                        });
                    } else {
                        parent.layer.msg(result.msg, { icon: 2 })
                    }
                }
            });

            return false;
        });
    });
</script>
{{end}}

{{template "footer" .}}