<!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" />
<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>



			<!-- 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">
						<!-- 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="areaname" id="areaname" value="{{areaname}}" placeholder="请输入地区名称">
                                    </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/cfapp.js"></script>
	 <script src="plugins/bootbox/bootbox.min.js"></script> 
	<!-- END PAGE LEVEL PLUGINS -->
	<script>
		Cfapp.init();
		var searchTemplate = $('#template').html();
		var compiledSearchTemplate = Template7.compile(searchTemplate);
		var sSource = "#springUrl('/a/area/fetchDataC')";
		var sMenSource = "#springUrl('/a/area/update')";
		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" : "GET",
							"contentType" : "application/json",
							"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 {
							Metronic.alert({
								type : 'warning',
								icon : 'save',
								message : '移动失败，请重试',
								closeInSeconds : 1,
								container : "",
								place : 'prepend'
							});

							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",
						"contentType" : "application/json",
						"url" : "#springUrl('/a/area/save?parentId="
								+ treeNode.id + "')",
						"dataType" : "json",
						"data":{
							"_csrf_header":csrfheader.value,
							"_csrf":csrftoken.value
						},
						"success" : function(res) {
							zTree.addNodes(treeNode, {
								id : res.aaData.areaid,
								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) {
			return treeNode.level > 0; 
		}
		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" : "GET",
							"contentType" : "application/json",
							"url" : "#springUrl('/a/area/remove?id="
									+ treeNode.id + "')",
							"dataType" : "json",
							"data":{_csrf_header:csrfheader.value,_csrf:csrftoken.value},
							"success":function(res) {
								if (res.errorNo == '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/area/getAreaDetail?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);
			var zTree = $.fn.zTree.getZTreeObj("tree");
		} 

		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 areaname = $("#areaname").val();
			if (!areaname || areaname == '') {
				Cfapp.alert({
					btntext:"确定",
					message:"请输入地区名称",
					success:function(){
						$(".modal-backdrop").fadeOut();
					}
				})
				return false;
			}
			var isfunction = $("input[name='isfunction']:checked").val();
			var isshow = $("input[name='isshow']:checked").val();
			var updatedata = {
				"id" : $("#id").val(),
				"areaname" : areaname
			};

			$.ajax({
				"type" : "GET",
				"contentType" : "application/json",
				"url" : sMenSource,
				"data" : updatedata,
				"dataType" : "json",
				"success" : function(retdata) {
					if (retdata.errorNo == 0) {

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