<%@ 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"/>
    <jsp:include page="../../../public.jsp"/>
    <link href="${res}/js/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script type="text/javascript" src="${res}/js/zTree/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="${res}/js/menu/menu.js?rnd=112.7"></script>

    <style type="text/css">
        #menu_tree {
            min-height: 320px;
            max-height: 480px;
        }

        #menu_tree_block .block-body {
            margin: 5px;
        }

        .ztree li a:hover {
            text-decoration: none;
        }

        .ztree li span.button.folder_ico_close {
            margin-right: 2px;
            vertical-align: top;
            background-position: -384px -120px;
            background-image: url("${res}/jquery-ui-bs/assets/img/glyphicons-halflings.png");
        }

        .ztree li span.button.folder_ico_open {
            margin-right: 2px;
            vertical-align: top;
            background-position: -408px -120px;
            background-image: url("${res}/jquery-ui-bs/assets/img/glyphicons-halflings.png");
        }

        .ztree li span.button.page_ico_open {
            margin-right: 2px;
            vertical-align: top;
            background-position: -24px -24px;
            background-image: url("${res}/jquery-ui-bs/assets/img/glyphicons-halflings.png");
        }

        .ztree li span.button.page_ico_close {
            margin-right: 2px;
            vertical-align: top;
            background-position: -24px -24px;
            background-image: url("${res}/jquery-ui-bs/assets/img/glyphicons-halflings.png");
        }

        .ztree li span.button.action_ico_docu {
            margin-right: 2px;
            vertical-align: top;
            background-position: -384px -144px;
            background-image: url("${res}/jquery-ui-bs/assets/img/glyphicons-halflings.png");
        }

        #rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: rgb(244, 244, 244);
            text-align: left;
            padding: 2px;
            border: 1px solid #a6a6a6;
        }

        #rMenu ul {
            margin: 0;
        }

        #rMenu ul li {
            margin: 1px 0;
            padding: 2px 8px;
            cursor: pointer;
            list-style: none outside none;
            font-size: 12px;
            font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif;
            color: #0088cc;
        }

        #rMenu ul li:hover {
            color: #005580;
        }

        #icon_upload_wrap {
            width: 80px;
            height: 80px;
            position: relative;
            border: 1px solid #ccc;
            background-image: url(${res}/img/upload.png);
            background-repeat: no-repeat;
            background-position: center center;
        }

        #icon_upload_wrap img {
            width: 100%;
            height: 100%;
            display: block;
            background-color: #FFF;
        }

        #icon_upload_wrap .clear {
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
            z-index: 10;
            display: none;
        }

        #icon_upload_wrap .clear button {
            margin: 10px auto;
            width: 50px;
            display: block;
        }

        .uploadify-queue {
            position: fixed;
            margin: auto;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 300px;
            height: 120px;
        }

        .control-label {
            padding-top: 0 !important;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>菜单管理</legend>
</fieldset>
<div class="container-fluid" style="padding: 0 10px;">
    <div class="row-fluid">
        <div class="layui-col-md4">

            <div style="padding: 5px; background-color: #F2F2F2;">
                <div class="layui-card">
                    <div class="layui-card-header" style="padding: 10px 15px">
                        <h3>菜单树</h3>
                    </div>
                    <div class="layui-card-body" style="overflow: auto">
                        <div class="ztree" id="menu_tree"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md8" id="menu_info_block">
            <div style="padding: 5px; background-color: #F2F2F2; margin-left: 10px;">
                <div class="layui-card">

                    <div class="layui-card-header" style="padding: 10px 15px">
                        <div class="layui-inline" style="position: relative">
                            <h4>编辑菜单项</h4>
                        </div>
                    </div>

                    <div class="layui-card-body">
                        <div id="menu_info" class="block-body">
                            <form id="menu_form" action="javascript:submit();" class="layui-form">
                                <input type="hidden" id="id" name="id">
                                <input type="hidden" id="parentId" name="parentId">
                                <input type="hidden" id="menuType" name="menuType">

                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单名称<span class="help-inline">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" id="name" name="name" style="width:50%;" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单链接<span class="help-inline">&nbsp;</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" id="link" name="link" style="width:95%;" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单链接<span class="help-inline">&nbsp;</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" id="menuOrder" name="menuOrder" style="width:95%;" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单描述<span class="help-inline">&nbsp;</span></label>
                                    <div class="layui-input-block">
                                        <textarea id="description" class="layui-textarea" name="description" style="width:95%;"></textarea>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">菜单图标<span class="help-inline">&nbsp;</span></label>
                                    <div class="layui-input-block">
                                        <div id="icon_upload_wrap">
                                            <div id="icon_upload"></div>
                                            <div class="clear">
                                                <button class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="isVisible" lay-skin="primary" title="是否可见" checked="">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" id="btn_save" class="layui-btn">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class=" span8">

        </div>
    </div>
</div>


<div id="rMenu">
    <ul>
        <li id="m_refresh" onclick="menu_refreshTreeNode();"><i class="icon-refresh"></i>刷新</li>
        <li id="m_add_folder" onclick="menu_addTreeNode(1);"><i class="icon-folder-open"></i> 新增目录</li>
        <li id="m_add_page" onclick="menu_addTreeNode(2);"><i class="icon-file"></i> 新增页面</li>
        <li id="m_add_action" onclick="menu_addTreeNode(3);"><i class="icon-tasks"></i> 新增操作</li>
        <li id="m_del" onclick="menu_removeTreeNode();"><i class="icon-minus-sign"></i> 删除</li>
    </ul>
</div>
</body>
<script>
    layui.use(["form"], function() {
        var form = layui.form;
        form.render();
    })
</script>
</html>