<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>菜单管理</title>
    <jsp:include page="../../../common.jsp"/>

    <style type="text/css">

    </style>
</head>
<div class="layui-row layui-fluid layui-bg-gray layui-col-space15">
    <div class="layui-col-md5 ">
        <div class="layui-card">
            <div class="layui-card-header">菜单树</div>
            <div class="layui-card-body">
                <div class="demo-tree demo-tree-box" id="test1">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md7">
        <div class="layui-card">
            <div class="layui-card-header">编辑菜单项</div>
            <div class="layui-card-body">
                <form action="" class="layui-form" lay-filter="formMenu">
                    <input class="layui-input layui-hide" id="parentId" lay-reqtext="请在左侧树中选择一项" lay-verify="required" name="parentId" type="text" />
                    <input class="layui-input layui-hide" id="id" name="id" type="text" />
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required" name="name" placeholder="请输入标题" type="text">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单链接</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required" name="link" placeholder="请输入" type="text">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input autocomplete="off" class="layui-input" lay-verify="required" name="menuOrder" type="number" value="10">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否可见</label>
                        <div class="layui-input-block">
                            <input checked lay-skin="switch" lay-text="ON|OFF" name="visible" type="checkbox">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-filter="demo1" lay-submit type="submit">保存</button>
                            <button class="layui-btn layui-btn-primary" type="reset">清空</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let layer;
    let treeData = []
    let tree
    let form
    layui.use(['tree', 'form', 'layer'], function(){
        tree = layui.tree;
        layer = layui.layer;
        form = layui.form;
        treeInit()

        form.on("submit(demo1)", function (data) {
            // let param = JSON.stringify(data.field)
            if (data.field.visible == 'on') {
                data.field.visible = 1;
            } else {
                data.field.visible = 0;
            }

            var index = layer.load(1, {shade: [0.1, '#000']});
            $.ajax({
                url: ctx + "/menuInfo/saveMenuInfo"
                , type: 'POST'
                , data: data.field
                , success: function (d) {
                    layer.msg(d.message)
                    if (d.code === 200) {
                        treeReload()
                    }
                }
            })

            return false;
        })
    });

    function treeInit() {
        $.ajax({
            url: ctx + "/menuInfo/getMenuTree"
            , type: 'GET'
            , success: function (d) {
                if (d.code === 200) {
                    treeData = d.data;
                    treeData[0].spread = true;
                    //渲染
                    tree.render({
                        elem: '#test1'  //绑定元素
                        , id: 'test1'
                        , edit: ['add', 'del']
                        , click: function(obj){
                            // 获取节点的父节点id
                            let parent = obj.elem.parent().parent();
                            obj.data.parentId = parent.attr("data-id");
                            obj.data.parentChildrenCount = obj.elem.parent().children().length;
                            setForm(obj.data);
                        }
                        , operate: function (obj) {
                            let type = obj.type; //得到操作类型：add、edit、del
                            let data = obj.data; //得到当前节点的数据
                            let elem = obj.elem; //得到当前节点元素

                            console.log(elem)
                            //Ajax 操作
                            let id = data.id; //得到节点索引
                            if(type === 'add'){ //增加节点
                                spreadOpen(elem);
                            } else if(type === 'del'){ //删除节点
                                delMenu(data)
                            }
                        }
                        , data: treeData
                    });
                }
            }
        })
    }

    function spreadOpen(elem) {
        elem.find(".layui-tree-pack").show();
        elem.addClass("layui-tree-spread");
        elem.find(".layui-tree-entry")
            .find(".layui-tree-main")
            .find(".layui-tree-icon")
            .find(".layui-icon")
            .removeClass("layui-icon-addition")
            .addClass("layui-icon-subtraction");
    }

    function setForm(data) {
        if (data.name == null) {
            data.name = "未命名";
            data.link = "";
            data.menuOrder = data.parentChildrenCount;
        }
        form.val("formMenu", data);
    }

    function treeReload() {
        $.ajax({
            url: ctx + "/menuInfo/getMenuTree"
            , type: 'GET'
            , success: function (d) {
                if (d.code === 200) {
                    debugger
                    treeData = d.data;
                    treeData[0].spread = true;
                    tree.reload('test1', {
                        data: treeData
                    });
                }
            }
        });
    }

    function delMenu(node) {
        debugger;
        if (node.children && node.children.length > 0) {
            layer.msg("请先删除子页面", {
                time: 2000
            })

            treeReload()
            return;
        }

        $.ajax({
            url: ctx + "/menuInfo/deleteMenuInfo"
            , type: 'POST'
            , data: {
                id: node.id
            }
            , success(d) {
                treeReload()
            }
        })
    }
</script>
</html>