@using Abp.Json
@using MineTec.ProManager.Authorization.Users.Dto
@model GetUserForEditOutput

@section styles{
    <link href="~/css/pear-tree/dtree.css" rel="stylesheet" />
    <link href="~/css/pear-tree/font/dtreefont.css" rel="stylesheet" />
}

<div class="layui-tab layui-tab-brief" lay-filter="user-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">用户信息</li>
        <li>角色</li>
        <li>部门</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form class="layui-form" lay-filter="user-form" style="padding: 10px 0 0 0;">
                <input type="hidden" name="id" />
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phoneNumber" lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="emailAddress" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">启用</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="isActive" lay-filter="isActive" lay-skin="switch">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-hide" lay-submit lay-filter="user-submit" id="user-submit">提交</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-tab-item">
            <div class="layui-form" style="padding: 10px 0 0 0;">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left:0px;">
                        @foreach (var role in Model.Roles)
                        {
                            <input type="checkbox" name="role" title="@role.RoleName" value="@role.RoleName" id="@string.Format("role{0}",role.RoleId)" @(role.IsAssigned ? "checked" : "") />
                        }
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <div style="overflow: auto;">
                <ul id="organization-tree" class="dtree"></ul>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.use(['abp', 'element', 'form', 'dtree'], function () {
            var $ = layui.jquery;
            var abp = layui.abp;
            var element = layui.element;
            var form = layui.form;
            var dtree = layui.dtree;

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.iframeAuto(index);

            form.val("user-form",@Html.Raw(JsonExtensions.ToJsonString(Model.User,true,false)));
            form.render();

            dtree.render({
				elem: "#organization-tree",
                initLevel: "10",
                data: @Html.Raw(JsonExtensions.ToJsonString(Model.OrganizationUnits, true, false)),
                line: true,
                width: "100%",
                height: "350",
                checkbar: true,
				ficon: ["1", "-1"],
				icon: ["0", "2"],
                response: {
                    message: "msg",
                    statusCode: 200,
                    title: "displayName"
                },
                dataStyle: "layuiStyle",
                dataFormat: "list"
            });

            window.submitForm = function(){
                $("#user-submit").click();
            }

            form.on('submit(user-submit)', function (data) {
                data.field.isActive = data.field.isActive == "on";//switch默认值是on
                data.field.AssignedRoleNames = getRoleNames();
                data.field.AssignedOrganizationUnitIds = getOrganizationUnitIds();

                var waitIndex = parent.layer.load(2);
                abp.ajax({
                    url: "@Url.Action(!Model.User.Id.HasValue?"CreateUser":"UpdateUser", "Users")",
                    data: JSON.stringify(data.field),
                    abpHandleError: false
                }).done(function (data) {
                    if (data.code == 200) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (jqXHR) {
                    parent.layer.msg(jqXHR.message, { icon: 5 });
                }).always(function () {
                    parent.layer.close(waitIndex);
                });

                return false;
            });

            element.on('tab(user-tab)', function(data){
                parent.layer.iframeAuto(index);
            });

            function getOrganizationUnitIds() {
                var selectedNode = dtree.getCheckbarNodesParam("organization-tree");
                var ids = selectedNode.map(function (d) { return d.nodeId });
                return ids;
            }

            function getRoleNames() {
                var roleNames = [];
                var _$roleCheckboxes = $("input[name='role']:checked");
                if (_$roleCheckboxes) {
                    for (var roleIndex = 0; roleIndex < _$roleCheckboxes.length; roleIndex++) {
                        var _$roleCheckbox = $(_$roleCheckboxes[roleIndex]);
                        roleNames.push(_$roleCheckbox.val());
                    }
                }
                return roleNames;
            }
        });
    </script>
}


