<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>

<base href="#springUrl('/assets/adminlte/')" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>工作台</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="plugins/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="plugins/ionicons/css/ionicons.min.css">

<!-- DataTables -->
<link rel="stylesheet"
	href="plugins/datatables/dataTables.bootstrap.css">

<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet"
	href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
<link rel="stylesheet" href="plugins/datepicker/datepicker3.css">
<!-- Daterange picker -->
<link rel="stylesheet"
	href="plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
	href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

<link rel="stylesheet"
	href="plugins/ztree/css/metroStyle/metroStyle.css" type="text/css" />
<style type="text/css">
.ztree li span.button.switch.level0 {
	visibility: hidden;
	width: 1px;
}

.ztree li ul.level0 {
	padding: 0;
	background: none;
}
#fa-icons i{cursor:pointer}
.fa-hover a{color:#000000}
.fontawesome-icon-list div{cursor:pointer}
</style>
<title></title>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- END THEME STYLES -->
</head>
<body class="hold-transition skin-blue sidebar-mini">



	<div class="wrapper">
		<div class="content-wrapper" style="margin-left: 0;">

			<section class="content-header">
				<h1>
					菜单管理 <small>菜单信息</small>
				</h1>
<!-- 				<ol class="breadcrumb"> -->
<!-- 					<li><a href="#springUrl('/a/manageuser/useradd')"><i -->
<!-- 							class="fa fa-dashboard"></i>首页</a></li> -->
<!-- 					<li><a class="active">菜单管理</a></li> -->
<!-- 				</ol> -->
			</section>

<div id="myModal" class="modal fade">
		<div class="modal-dialog" style="width:80%;">
			<div class="modal-content" style="width:100%;">
			<!-- dialog body -->
			<div class="modal-body" style="width:100%;">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				#parse("/common/icon.html")
			</div>
			<!-- dialog buttons -->
			</div>
		</div>
</div>

			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-md-3">
						<div class="box">

							<div class="box-body">
								<div class="zTreeDemoBackground left">
									<ul id="tree" class="ztree"></ul>
								</div>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->


					<div class="col-md-9" id="content">
						<!-- BEGIN EXAMPLE TABLE PORTLET-->
						<div class="box box-info">
							<div class="box-header with-border">
								<h3 class="box-title">详情</h3>
							</div>
							<!-- /.box-header -->

							<div id="detail"></div>
							<script id="template" type="text/template7">
                            <form role="form" id="form">

 									<input type="text" class="form-control" name="id" id="id" style="display: none" value="{{id}}">

									<div class="box-body">

                                	 <div class="form-group">
                                        <label  for="permissionName" class="col-md-2 control-label">菜单名称</label>

                                        <input type="text" class="form-control required htmlescape" minlength="1" maxlength="30" required name="permissionName" id="permissionName" value="{{permissionName}}" placeholder="请输入菜单信息">


                                    </div>

                                    <div class="form-group">
                                        <label for="permissionSign">权限标识</label>
                                            <input type="text" class="form-control htmlescape" minlength="1"  id="permissionSign" name="permissionSign" value="{{permissionSign}}" maxlength="50" placeholder="请输入权限标识">
                                    </div>

									 <div class="form-group">
                                        <label for="permissionSign">字体标识</label>
                                            <input type="text" readonly class="form-control htmlescape" minlength="1"   id="fonts" name="fonts" value="{{fonts}}" maxlength="20" placeholder="请输入字体图标">
                                    </div>


                                    <div class="form-group form-md-line-input">
                                        <label  for="url">地址</label>
                                            <input type="text" class="form-control htmlescape" minlength="1"  maxlength="100" id="url" name="url"  value="{{url}}" placeholder="请输入链接地址">
                                    </div>

                                        <div class="form-group form-md-line-input">
											<label  for="url">排序</label>
											<input type="number" class="form-control htmlescape" minlength="1" min="1" id="sort" name="sort"  value="{{sort}}" placeholder="请输入菜单排序">
										</div>


									<div class="form-group form-md-line-input">
                                                <label >是否功能项</label>
                                                <div >
                                                    <label class="radio-inline"><input type="radio" class="fields"  name="isfunction" value="1" {{#js_compare "this.isfunction == 1  "}}checked{{/js_compare}}>是</label>
                                                    <label class="radio-inline"><input type="radio" name="isfunction" value="0" {{#js_compare "this.isfunction == 0  "}}checked{{/js_compare}}>否</label>

                                                </div>
                                    </div>


                                       <div class="form-group form-md-line-input">
                                                <label >是否显示</label>
                                                <div >
                                                    <label class="radio-inline"><input type="radio" class="fields" name="isshow" value="1" {{#js_compare "this.isshow == 1  "}}checked{{/js_compare}}>是</label>
                                                    <label class="radio-inline"><input type="radio" name="isshow" value="0" {{#js_compare "this.isshow == 0  "}}checked{{/js_compare}}>否</label>

                                                </div>
                                        </div>



                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-md-offset-2 col-md-10">
                                                 <input class="btn btn-primary" onclick="saveMenu()" id="save" type="submit" value="保存">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </form>
  </script>

						</div>
						<!-- END EXAMPLE TABLE PORTLET-->
					</div>



				</div>
				<!-- /.row -->


			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->



		<!-- Add the sidebar's background. This div must be placed
           immediately after the control sidebar -->
		<div class="control-sidebar-bg"></div>
	</div>
	<!-- ./wrapper -->


	<!-- END CONTAINER -->
	<!-- BEGIN FOOTER -->
	<!-- END FOOTER -->
	<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<!-- DataTables -->
	<script src="plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
	<!-- SlimScroll -->
	<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<!-- FastClick -->
	<script src="plugins/fastclick/fastclick.min.js"></script>
	<!-- AdminLTE App -->
	<script src="dist/js/app.min.js"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="dist/js/demo.js"></script>
	<script src="dist/js/template7.js"></script>
	<script src="plugins/ztree/js/jquery.ztree.all.min.js"
		type="text/javascript"></script>
	<script type="text/javascript"
		src="plugins/jquery-validation/js/jquery.validate.min.js"></script>
	<script src="plugins/jquery-validation/js/localization/messages_zh.js"></script>
	<script>
		var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
		var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
	</script>
	<script src="common/js/tabletok.js"></script>

	<script>
        var csrfheader = {name:'_csrf_header',value:'${_csrf.headerName}'};
        var csrftoken  = {name:'_csrf',value:'${_csrf.token}'};
	</script>
	<script src="common/js/cfapp.js"></script>
	 <script src="plugins/bootbox/bootbox.min.js"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<script>
		$(function(){
			$("#content").on("click","#fonts",function(){
				$("#myModal").modal('show');
			})

			$(".fontawesome-icon-list").on("click","div",function(){
				$("#fonts").val("fa-"+$(this).text().trim());
				$("#myModal").modal('hide');
			})
		})


		Cfapp.init();
		var searchTemplate = $('#template').html();
		var compiledSearchTemplate = Template7.compile(searchTemplate);
		var sSource = "#springUrl('/a/menu/menudata')";
		var sMenSource = "#springUrl('/a/menu/updateMenu')";
		var dropStat = false;
		var className = "dark";
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			if (isCopy != null) {
				//修改节点信息
				if (targetNode) {
					if (treeNodes[0].pId == targetNode.id) {
						return false;
					} else {
						dropStat = false;
						$.ajax({
							"type" : "POST",
							"data":{
                                _csrf_header:csrfheader.value,
                                _csrf:csrftoken.value
							},
							"url" : "#springUrl('/a/menu/dragMenu?id="
									+ treeNodes[0].id + "&parentId="
									+ targetNode.id + "')",
							"dataType" : "json",
							async : false,
							"success" : function(res) {
								dropStat = true;
							}
						});
						if (dropStat) {
							location.reload();
							return false;
						} else {
							Cfapp.alert({
								message: "删除失败",
								btntext: "确定",
								success: function () {
								}
							});

							return false;
						}

					}
				} else {
					return false;
				}
			}
			return true;
		}

		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag
					|| $("#addBtn_" + treeNode.tId).length > 0)
				return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
					+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_" + treeNode.tId);
			if (btn)
				btn.bind("click", function() {
					var zTree = $.fn.zTree.getZTreeObj("tree");
					//ajax 进行增加节点
					$.ajax({
						"type" : "POST",
						"url" : "#springUrl('/a/menu/addNewMenu?parentId="
								+ treeNode.id + "')",
                        "data":{
                            "_csrf_header":csrfheader.value,
                                "_csrf":csrftoken.value
                        },
						"dataType" : "json",
						"success" : function(res) {
							zTree.addNodes(treeNode, {
								id : res.aaData.id,
								pId : treeNode.id,
								name : "新增菜单"
							});
						}
					});

					return false;
				});
		};
		function removeHoverDom(treeId, treeNode) {
			//     	 var btn = $("#tree_"+treeNode.tId+"_remove");
			//     	 btn.bind("click", function(){
			//              var zTree = $.fn.zTree.getZTreeObj("tree");
			//              //ajax 进行增加节点
			//              $.ajax({
			//                  "type": "GET",
			//                  "contentType": "application/json",
			//                  "url": "#springUrl('/a/menu/removeMenu?id="+treeNode.id+"')",
			//                  "dataType": "json",
			//                  "success": function (res)
			//                  {
			//                 	 nodes = zTree.getSelectedNodes(),
			//                      treeNode = nodes[treeNode.tId];
			//                 	 zTree.removeNode(treeNode);
			//                  }
			//              });
			//              return false;
			//          });
		};

		function onRemove(e, treeId, treeNode) {
			console.log("on remove");
		}

		function showRemoveBtn(treeId, treeNode) {
			if(treeNode.children){
				return false;
			}else{
				return true;
			}
		}
		var cn = {
				OK : '确定',
				CANCEL : '取消',
				CONFIRM : '确认'
			};
		bootbox.addLocale("cn", cn);
		bootbox.setLocale("cn");
		function beforeRemove(treeId, treeNode) {
			console.log("before remove");
			className = (className === "dark" ? "" : "dark");
			var zTree = $.fn.zTree.getZTreeObj("tree");
			zTree.selectNode(treeNode);
			if(delMenu(treeNode)){
				return true;
			}
			return false;
		}

		function delMenu(treeNode){
			bootbox.confirm({
				size : 'large',
				message : "确定要删除菜单" + treeNode.name + "吗？",
				callback : function(result) {
					if (result) {
						$.ajax({
								"type" : "POST",
							"url" : "#springUrl('/a/menu/removeMenu?id="
									+ treeNode.id + "')",

                            "data":{
                                _csrf_header:csrfheader.value,
								_csrf:csrftoken.value
                            },
							"dataType" : "json",
							"success" : function(res) {
								if (res.errorCode == '0') {
									var zTree = $.fn.zTree.getZTreeObj("tree");
									zTree.removeNode(treeNode);
									$("#detail").html('');
									return true;
								} else {
									return false;
								}
							},
						});
					}
				}
			});
		}

		function zTreeOnClick(event, treeId, treeNode) {
			var selectId = treeNode.id;
			$.ajax({
				"type" : "GET",
				"contentType" : "application/json",
				"url" : "#springUrl('/a/menu/getMenuDetail?id=" + selectId
						+ "')",
				"dataType" : "json",
				"success" : fillDetail
			});
		};

		function dblClickExpand(treeId, treeNode) {
			return treeNode.level > 0;
		}

		function fillDetail(data) {
			$("#detail").html('');
			$("#detail").append(compiledSearchTemplate(data.aaData));
			$("#form").validate({
				submitHandler : function(form) {
					// some other code
					// maybe disabling submit button
					// then:
				}
			});
		}
		function fnCallback(data) {
			var zNodes = data.aaData;
			$.fn.zTree.init($("#tree"), setting, zNodes);
		}

		function doSaves() {

		}

		var setting = {
			view : {
				dblClickExpand : dblClickExpand,
				addHoverDom : addHoverDom,
				removeHoverDom : removeHoverDom,
				selectedMulti : false
			},
			edit : {
				enable : true,
				editNameSelectAll : false,
				showRemoveBtn : showRemoveBtn,
				showRenameBtn : false
			},

			check : {
				enable : false
			},
			data : {
				simpleData : {
					enable : true
				}
			},
			callback : {
				onClick : zTreeOnClick,
				beforeRemove : beforeRemove,
				beforeDrop : beforeDrop
			}

		};

		jQuery(document).ready(function() {
			$.ajax({
				"type" : "GET",
				"contentType" : "application/json",
				"url" : sSource,
				"dataType" : "json",
				"success" : fnCallback
			});

		});

		function saveMenu() {

			var permissionName = $("#permissionName").val();
			var permissionSign = $("#permissionSign").val();
			if (!permissionName || permissionName == '') {
				alert("请输入权限名称");
				return false;
			}

			var isfunction = $("input[name='isfunction']:checked").val();
			var isshow = $("input[name='isshow']:checked").val();

			var updatedata = {
				"id" : $("#id").val(),
				"permissionName" : permissionName,
				"isfunction" : isfunction,
				"url" : $("#url").val(),
				"isshow" : isshow,
				"fonts" : $("#fonts").val(),
				"sort" : $("#sort").val(),
				"permissionSign" : permissionSign,
				"_csrf_header":csrfheader.value,
                "_csrf":csrftoken.value
			};

			$.ajax({
				"type" : "POST",
				"url" : sMenSource,
				"data" : updatedata,
				"dataType" : "json",
				"success" : function(retdata) {
					if (retdata.errorCode == 0) {

						Cfapp.confirm({
							message : "修改成功",
							btnoktext : "确定",
							btncanceltext : "关闭",
							success : function() {
								window.location.reload();
							},
							cancel : function() {
								window.location.reload();
							}
						});
					}
				}
			});
		}
	</script>
</body>
<!-- END BODY -->
</html>