{inc:header.htm}
<style type="text/css">
#nav_cont{position:relative;}
#nav_cont .row{margin:5px 0 0 0;background:#eee;}
#nav_cont .nav_l{padding:3px;}
#nav_cont .list,#kp_widget_holder{padding:2px}

.nav_rank_2{margin-left:50px}
.nav_transport{display:none}

/*对话框*/
.outnav_tit{background:#E3F1F4;height:36px;line-height:36px;font-weight:bold;border-bottom:1px solid #B4DBF2}
.case_type{padding:8px}
#ppdialog_content{_overflow-x:hidden}
.layui-layer-page .layui-layer-content{clear:both;}
.layui-layer-tabmain{padding-left: 0px;}
</style>
<div class="container-fluid">
	<div class="panel panel-default">
		<div class="panel-heading"><a id="add" class="btn btn-info btn-xs pull-right" href="javascript:;"><span class="glyphicon glyphicon-plus"></span> 增加</a><strong class="panel-title">{$_title} </strong> <small>(可上下、左右拖动)</small> <span class="clearfix"></span></div>
		<div id="nav_cont" class="container-fluid">
			{inc:navigate_content.htm}
		</div>
	</div>
</div>

<div id="category" style="display:none">
<table class="table table-condensed noborder">
	{if:empty($category_arr)}
	<tr><td class="text-danger text-center">暂无分类，请先到分类管理增加分类。<td></tr>
	{else}
	{loop:$category_arr $arr $mid}
	<tbody class="category">
		<tr class="cat_tit success">
			<th>{php} echo $mod_name[$mid];{/php}分类</th>
		</tr>
		{loop:$arr $v}
		<tr class="col" cid="{$v[cid]}" mid="{$v[mid]}">
			<td>
				<div title="编号(cid): {$v[cid]}&#10;分类名称: {$v[name]}" _name="{$v[name]}">{php} echo str_repeat("　　", $v['pre']-1);{/php}
					<input type="checkbox" value="{$v[cid]}"> {$v[name]}
				</div>
			</td>
		</tr>
		{/loop}
	</tbody>
	{/loop}
	{/if}
</table>
</div>
<div id="outnav" style="display:none">
	<div class="outnav_tit">　外部链接</div>
	<table class="table table-condensed noborder">
		<tr>
			<th class="text-right">名称</th>
			<td><input name="title" type="text" class="form-control" /></td>
		</tr>
		<tr>
			<th class="text-right">链接</th>
			<td><input name="url" type="text" value="http://" class="form-control" /></td>
		</tr>
		<tr>
			<th class="text-right">新窗口打开</th>
			<td><input name="target" type="checkbox" checked="checked"></td>
		</tr>
	</table>
</div>
<script type="text/javascript">
//拖拽
$.fn.kpdragsort = function(options) {
	var container = this;
	$(container).children(".list").off("mousedown").mousedown(function(e) {
		if(e.which != 1 || $(e.target).is("input, textarea, a") || window.kp_only) return; // 排除非左击和其他元素
		e.preventDefault(); // 阻止选中文本
		var x = e.pageX;
		var y = e.pageY;
		var _this = $(this); // 点击选中块
		var w = _this.width();
		var h = _this.height();
		var w2 = w/2;
		var h2 = h/2;
		var p = _this.position();
		var left = p.left;
		var top = p.top;
		var sTop = $(".p:first").scrollTop();
		window.kp_only = true;
		window.twoNav = null;
		// 运输二级导航
		if(!_this.is(".nav_rank_2")) {
			var i = _this.index(".list");
			var iObj = $("#nav_cont>.list");
			var iSon = _this.children(".nav_transport");
			for(++i; i<iObj.length; i++) {
				if(!iObj.eq(i).is(".nav_rank_2")) break;
				iObj.eq(i).appendTo(iSon);
			}
			if(iSon.children().length) iSon.show();
		}
		// 添加虚线框
		_this.after('<div id="kp_widget_holder"></div>');
		var wid = $("#kp_widget_holder");
		wid.css({"border":"2px dashed #ccc", "height":_this.height()-4, "margin-left":_this.css("margin-left")});

		// 保持原来的宽高
		_this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});

		// 绑定mousemove事件
		$(document).mousemove(function(e) {
			e.preventDefault();

			// 移动选中块
			var l = left + e.pageX - x;
			var t = top + ($(".p:first").scrollTop() - sTop) + e.pageY - y;
			_this.css({"left":l, "top":t});

			var widPrevFun = function() {
				var prev = wid.prev();
				if(prev.is(_this)) return prev.prev();
				return prev;
			}

			var widNextFun = function() {
				var next = wid.next();
				if(next.is(_this)) return next.next();
				return next;
			}

			var rankOneFun = function() {
				_this.attr("_rank", 1);
				wid.css({"margin-left":0});
				window.twoNav = 1;
			}

			var rankTwoFun = function() {
				_this.attr("_rank", 2);
				wid.css({"margin-left":50});
				window.twoNav = 2;
			}

			// 当拖拽到第一个时变成一级 或 有下级时只能为一级
			var widPrev = widPrevFun();
			if(!widPrev.is(".list") || _this.find(".nav_transport>.list").length > 0) {
				rankOneFun();
			}else{
				// 二级如果是最后一个时可以拖拽为一级
				var winNext = widNextFun();
				if(!winNext.is(".nav_rank_2")) {
					if(left < l-50) {
						rankTwoFun();
					}else if(left > l) {
						rankOneFun();
					}
				}else{
					// 如果上一个对象是二级，那它直接为二级
					if(widPrev.is(".nav_rank_2")) {
						rankTwoFun();
					}else{
						// 如果下一个对象为二级，说明他有下级，那不能被代替
						if(winNext.is(".nav_rank_2")) {
							rankTwoFun();
						}else{
							if(left < l-50) {
								rankTwoFun();
							}else if(left > l) {
								rankOneFun();
							}
						}
					}
				}
			}

			// 选中块的中心坐标
			var ml = l+w2;
			var mt = t+h2;

			// 遍历所有块的坐标
			$(container).children(".list").not(_this).each(function(i) {
				var obj = $(this);
				var p = obj.position();
				var a1 = p.left;
				var a2 = p.left + obj.width();
				var a3 = p.top;
				var a4 = p.top + obj.height();

				// 移动虚线框
				if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
					if(!obj.next("#kp_widget_holder").length) {
						wid.insertAfter(this);
					}else{
						wid.insertBefore(this);
					}
				}
			});
		});

		// 绑定mouseup事件
		var _mouseup = function() {
			$(document).off('mouseup').off('mousemove');

			// 拖拽回位，并删除虚线框
			var p = wid.position();

			if(window.twoNav) {
				if(window.twoNav === 2) {
					p.left = p.left + 50;
					_this.addClass("nav_rank_2");
				}else{
					_this.removeClass("nav_rank_2");
				}
			}

			_this.animate({"left":p.left, "top":p.top}, 100, function() {
				_this.removeAttr("style");
				wid.replaceWith(_this);

				// 运输结束
				_this.children(".nav_transport").removeAttr("style");
				_this.find(".nav_transport>.list").insertAfter(_this);

				window.kp_only = null;
				if(parent) parent.document.onmouseup = null;

				check_change();
			});
		};
		$(document).mouseup(_mouseup);
		if(parent) parent.document.onmouseup = _mouseup;
	});
}

//添加分类
$("#add").click(function(){
	window.setType = 0;
	window.addHeight = Math.max(350, document.documentElement.clientHeight-30) + 'px';
	layer.tab({
		area: ['600px', addHeight],
		btn: ['确认保存', '取消'],
		yes: function(index, layero){
			if(window.setType == 0) {
				//添加分类
				var cate = [];
				$(".category input[type='checkbox']").each(function(i) {
					if(this.checked) {
						cate[i] = [$(this).parent().attr('_name'), $(this).val()];
					}
				});
				ppajax.postd("index.php?u=navigate-add_cate-ajax-1", {"cate":cate}, function(data){
					ppajax.alert(data);
					nav_reload();
				});
			}else{
				//添加链接
				var name = layero.find("input[name='title']").val();
				var url = layero.find("input[name='url']").val();
				var target = layero.find("input[name='target']")[0].checked ? 1 : 0;
				ppajax.postd("index.php?u=navigate-add_link-ajax-1", {"name":name, "url":url, "target":target}, function(data){
					ppajax.alert(data);
					nav_reload();
				});
			}
		},cancel: function(index){
		},
		tab: [{
			title: '内置分类', 
			content: $('#category').html()
		}, {
			title: '外部链接', 
			content: $('#outnav').html()
		}],
		success: function(a){
			tabs(a);
		}
	});
});
function tabs(a){
	var b = a.find(".layui-layer-title").children(),
	c = a.find(".layui-layer-tabmain").children();
	b.on("mousedown", function (a) {
		a.stopPropagation ? a.stopPropagation() : a.cancelBubble = !0;
		var b = $(this),
		d = b.index();
		b.addClass("layui-layer-tabnow").siblings().removeClass("layui-layer-tabnow"),
		c.eq(d).show().siblings().hide();
		window.setType = d;
		console.log(window.setType);
	});
}
//删除
function nav_del(obj) {
	var o = $(obj).parent().parent().parent();
	var name = o.find(".name").val();
	var key = o.attr("_key");
	var s_end = (!o.is(".nav_rank_2") && o.next().is(".nav_rank_2")) ? "及下级导航" : "";
	ppajax.confirm("删除不可恢复，确定删除“<font color='red'>"+name+"</font>”" + s_end +"？", function(){
		ppajax.postd("index.php?u=navigate-del-ajax-1", {"key":key}, function(data){
			ppajax.alert(data);
			nav_reload();
		});
	});
}
//重新加载
function nav_reload() {
	if(window.ppdata.err==0) {
		setTimeout(function() {
			ppajax.get("index.php?u=navigate-get_navigate_content&r="+time(), function(html){
				$("#nav_cont").html(html);
				init_load();
			});
		}, 500);
	}
}
//初始加载
function init_load() {
	$("#nav_cont").kpdragsort();
	window.keys = get_navi();
	$("input[type='checkbox']").change(check_change);
	$("input[type='text']").focusin(nav_change).focusout(check_change);
	layer.closeAll();
}

//内容改变
function nav_change() {
	if(!$("#nav_change").length) $(".panel-title").append(' <button id="nav_change" onclick="nav_save()" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-ok"></span> 保存修改</button>');
}

//保存修改
function nav_save() {
	ppajax.postd("index.php?u=navigate-nav_save-ajax-1", {"navi":get_navi()}, function(data){
		ppajax.alert(data);
		if(window.ppdata.err==0) setTimeout(function(){ window.location.reload(); }, 1000);
	});
}

//获取所有数据
function get_navi() {
	var navi = [];
	$("#nav_cont>.list").each(function(i) {
		var cid = $(this).attr("_cid");
		var name = $(this).find(".name").val();
		var url = $(this).find(".url").val();
		var target = $(this).find("input[type='checkbox']")[0].checked ? 1 : 0;
		var rank = $(this).attr("_rank");
		navi[i] = [cid, name, url, target, rank];
	});
	return navi;
}

//检查参数是否改变
function check_change() {
	var len = $("#nav_cont>.list").length;
	for(var i = 0; i < len; i++) {
		var obj = $("#nav_cont>.list").eq(i);
		var cid = obj.attr("_cid");
		var name = obj.find(".name").val();
		var url = obj.find(".url").val();
		var target = obj.find("input[type='checkbox']")[0].checked ? 1 : 0;
		var rank = obj.attr("_rank");

		try{
			var keys = window.keys;
			if(keys[i][0] !== cid || keys[i][1] !== name || keys[i][2] !== url || keys[i][3] !== target || keys[i][4] !== rank) {
				nav_change();
				return;
			}
		}catch(e){}
	}
	if($("#nav_change").length) $("#nav_change").remove();
}

// 选择类型
function set_type(type) {
	var h;
	if(type == 0) {
		$("#outnav").hide();
		$("#category").show();
		h = window.addHeight;
		window.setType = 0;
	}else{
		$("#category").hide();
		$("#outnav").show();
		h = 275;
		window.setType = 1;
	}
	$("#ppdialogbox").css("height", h);
	$("#ppdialog_content").css("height", h-64);
	$(".case_type>a").removeClass("btn-info").addClass('btn-default');
	$(".case_type>a").eq(type).removeClass("btn-default").addClass("btn-info");
}

init_load();
</script>
</body>
</html>