<html>
<head>
    <title>新建/编辑 权限</title>
    <% include("base/meta.html"){} %>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>新建/编辑 权限</legend>
                    </fieldset>
                </div>
                <div class="layui-card-body ">
                    <form class="layui-form layui-form-pane" action="" id="editAuthForm">
                        <input type="hidden" name="id" id="id" value="${editData.id!}">

                        <div class="layui-form-item">
                            <input type="number" name="order" id="order" lay-verify="order" autocomplete="off"
                                   lay-filter="order"
                                   placeholder="父菜单选择后排列顺序自动生成"
                                   class="layui-input" value="${editData.order!}" readonly>
                        </div>

                        <div class="layui-form-item">
                            <input type="text" name="ename" id="ename" lay-verify="ename" autocomplete="off"
                                   placeholder="请输入英文标识"
                                   class="layui-input" value="${editData.ename!}">
                        </div>


                        <div class="layui-form-item">
                            <input type="text" name="cname" id="cname" lay-verify="cname" autocomplete="off"
                                   placeholder="请输入中文描述"
                                   class="layui-input" value="${editData.cname!}">
                        </div>

                        <div class="layui-form-item">
                            <input type="text" name="path" id="path" lay-verify="path" autocomplete="off"
                                   placeholder="请输入权限路径"
                                   class="layui-input" value="${editData.path!}">
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left: 0;">
                                <label class="layui-form-label" style="width: 130px;">是否作为菜单显示</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="showMenu" id="showMenu" lay-skin="switch"
                                           lay-filter="showMenu" lay-text="ON|OFF"
                                    <%if(editData!=null && editData.showMenu==true){%> checked <% }%> >
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label for="menuType" class="layui-form-label">权限类型</label>
                            <div class="layui-input-inline">
                                <%if(editData==null){%>
                                <select name="menuType">
                                    <option value="menu">menu</option>
                                    <option value="action">action</option>
                                </select>
                                <%}else{%>
                                <select name="menuType">
                                    <option value="menu"
                                    <%if(editData.menuType=="menu"){%>selected <%}%> >menu</option>
                                    <option value="action"
                                    <%if(editData.menuType=="action"){%>selected <%}%> >action</option>
                                </select>
                                <%}%>

                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label for="fatherId" class="layui-form-label">父菜单</label>
                            <div class="layui-input-inline">
                                <select name="fatherId" id="fatherId" lay-verify="fatherId" lay-filter="fatherType">
                                    <option value="">-请选择-</option>

                                    <%if(isNotEmpty(fathers)){%>

                                    <%if(editData==null){%>
                                    <!-- 创建数据时渲染 -->
                                    <option value="0">根目录</option>
                                    <% for(data in fathers){ %>
                                    <option value=${data.id}>${data.cname}</option>
                                    <%}%>

                                    <%}else{%>

                                    <%if(editData.fatherId=="0"){%>
                                    <option value="0" selected>根目录</option>
                                    <% for(father in fathers){ %>
                                    <option value=${father.id}>${father.cname}</option>
                                    <%}%>
                                    <%}else{%>
                                    <option value="0">根目录</option>

                                    <% for(father in fathers){ %>
                                    <%if(father.id==editData.fatherId){%>
                                    <option value=${father.id} selected>${father.cname}</option>
                                    <%}else{%>
                                    <option value=${father.id}>${father.cname}</option>
                                    <%}%>
                                    <%}%>

                                    <%}%>
                                    <%}%>

                                    <%}else{%>
                                    <option value="0">根目录</option>
                                    <%}%>

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">保存
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    layui.use(['form', 'layer', 'layedit'], function () {
        $ = layui.jquery;
        var form = layui.form;


        //自定义验证规则
        form.verify({
            order: function (value) {
                if (value === undefined || value === '' || value.length === 0) {
                    return '排列顺序不能为空';
                }
            },
            ename: function (value) {
                if (value === undefined || value === '' || value.length === 0) {
                    return '英文标识不能为空';
                }
            },
            cname: function (value) {
                if (value === undefined || value === '' || value.length === 0) {
                    return '中文描述不能为空';
                }
            },
            path: function (value) {
                if (value === undefined || value === '' || value.length === 0) {
                    return '权限路径不能为空';
                }
            },
            fatherId: function (value) {
                if (value === undefined || value === '' || value.length === 0) {
                    return '父菜单不能为空';
                }
            }

        });


        //监听提交
        form.on('submit(save)', function (data) {

            if (data.field.showMenu === 'on') {
                data.field.showMenu = true;
            } else {
                data.field.showMenu = false;
            }

            $.ajax({
                cache: false,
                type: "POST",
                contentType: 'application/json',
                url: "/auth/addup",
                data: JSON.stringify(data.field),
                async: false,
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.message, {
                            time: 2000
                        });

                        self.setTimeout(function () {
                            $("#editAuthForm")[0].reset();
                            layui.form.render();
                            $("#cname").val('');
                            $("#ename").val('');
                            $("#path").val('');
                            try {
                                parent.layui.table.reload('authList');
                            } catch (err) {
                            }
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }, 2000);


                    } else {
                        layer.msg(data.message);

                    }
                },
                error: function (data) {
                    layer.msg(data.message);
                }
            });

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


<script>
    layui.use(['form', 'layer', 'layedit'], function () {
        $ = layui.jquery;
        var form = layui.form;

        form.on('select(fatherType)', function (data) {
            var val = data.value;
            if (val) {
                $.ajax({
                    cache: false,
                    type: "POST",
                    contentType: 'application/json',
                    url: "/auth/order",
                    data: JSON.stringify({
                        id: val,
                        currentId: '${editData.id!}'
                    }),
                    async: false,
                    success: function (data) {
                        if (data.code === 0) {
                            $("#order").attr("value", data.result)
                        } else {
                            layer.msg(data.message);

                        }
                    },
                    error: function (data) {
                        layer.msg(data.message);
                    }
                });
            } else {
                $("#order").attr("value", '')
            }
        });
    });
</script>

</body>
</html>