<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<title>编辑html元素</title>
	<link type="text/css" rel="Stylesheet" href="/admin/drag/css/drag.base.css">  
	<link type="text/css" rel="Stylesheet" href="/admin/drag/css/kesion.form.css">
	<link type="text/css" rel="Stylesheet" href="/admin/drag/fonts/iconfont.css">
	<link type="text/css" rel="Stylesheet" href="/admin/drag/css/drag.setnav.css">

</head>
<body>
   	
    <div class="set-nav" id="set-nav">
        
        <div class="ks-btn ks-btn-line add-class" onClick="Operate.Add(this,'top')"><i class="drag-font drag-i-zengjia"></i>添加栏目</div>
        <div class="clear"></div>
                    
    </div>
    
    
    <div class="set-link-box">
    
    	<div class="title"><span class="close" onClick="closeLinkBox()"><i class="drag-font drag-i-guanbi"></i></span>设置链接</div>
    	<div class="ks-tab ks-tab-small">
        	<ul>
            	<li class="active"><span>常用</span></li>
            	<li><span>栏目</span></li>
            	<li><span>内容</span></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="tab-box">
        	
            <div class="box">
                <div class="box-rt" style="margin-left:0;">
                    <ul id="commonClass" class="selectClass">
                        
                    </ul>
                </div>
            </div>
            
            <div class="box d-none">
                <div class="box-lt">
                    <ul id="modelClass" class="mClass">
                    </ul>
                </div>
                <div class="box-rt">
                    <ul id="classCont" class="selectClass">
                        <div class="tips">请先选择模型</div>
                    </ul>
                </div>
            </div>
            
            <div class="box d-none">
                <div class="box-lt">
                    <ul id="viewClass" class="mClass">
                    </ul>
                </div>
                <div class="box-rt">
                	<div class="rt-sc">
                    	<div class="select" id="select">
                        	<div class="checked"><i class="drag-font drag-i-xiangxia"></i><span>全部</span></div>
                        	<ul>
                               <!--子分类赋值-->
                            </ul>
                        </div>
                        <input name="sckey" type="text" class="sc-text"><input name="" value="&#xe60a;" type="button" class="sc-button drag-font" onClick="contSearch()">
                    </div><!--rt-sc-->
                    
                    <div>
                        <ul id="viewCont" class="selectClass" style="height:120px;">
                            <div class="tips">请先选择模型</div>
                        </ul>
                    </div>
                </div>
            </div>
            
           
           <div class="clear"></div>
           
        </div>
        
        
    </div>
    
    <div class="ks-btn-center" style="padding:15px 0px;">
     	<button class="ks-btn ks-btn-normal" onClick="Operate.Determine()">确定</button>
     	<button class="ks-btn" onClick="parent.closeWindow(window.name)">取消</button>
    
    </div>
        
    
    <script src="/admin/drag/js/utils.js"></script>
    <script>utils.loadJs(['jquery'])</script>
   
	<script>
		
		/*
		 *loadFlag 记录常用链接是否已加载
		 *mFlag 记录模型分类是否已加载
		 *vFlag 记录最新文章是否已加载
		 */
		var loadFlag = false, 
			mFlag = false, 
			vFlag = false;
		var labelName = utils.getUrlParameter().labelName;
		var $linktext;
		var $setNav = $('#set-nav');

   		$(function(){			
			tabHeight();
			
		});
		$(window).resize(function(){
			tabHeight();
		});
		
		function tabHeight(){

			$setNav.height($(window).height()-$('.ks-btn-center').outerHeight());

		};
		
		var $navObject = parent.$moduleObject.find('[drag-mark="true"]');

		var $setLinkBox = $('.set-link-box');
		var size = $navObject.find('li').size();
		for(var i=0;i<size;i++){
			var itemName = $navObject.find('li').eq(i).find('.nav-item')[0].innerText;
			var href = $navObject.find('li').eq(i).find('.nav-item a').attr('href');
			var target = $navObject.find('li').eq(i).find('.nav-item a').attr('target');
			var type = "'sub'";
			var linkFlag = '<div class="flag-link flag-link-on" data-flag="1" onClick="linkFlagClick(this)"></div>';
			var disabled = '';
			if(href==undefined){
				linkFlag = '<div class="flag-link" data-flag="0" onClick="linkFlagClick(this)"></div>';
				disabled = ' disabled'
				href = '';
			};
			if(target=='_blank'){
				var itemSelect = '<select class="ks-select"><option value="0">当前窗口</option><option value="1" selected>新窗口</option></select>'
			}else{
				var itemSelect = '<select class="ks-select"><option value="0" selected>当前窗口</option><option value="1">新窗口</option></select>'
			};
			$setNav.append('<div class="nav-item">\n'+
             					 '	<div class="item-name">\n'+
             					 '		<div class="item-btn">\n'+
             					 '			<span onClick="Operate.Add(this,'+type+')"><em class="add-sub-class">增加二级栏目</em><i class="drag-font drag-i-zengjia"></i></span>\n'+
             					 '			<span onClick="Operate.Link(this)"><em class="set-link">设置链接</em><i class="drag-font drag-i-link"></i></span>\n'+
             					 '			<span onClick="Operate.Delele(this)"><em class="delete">删除</em><i class="drag-font drag-i-del"></i></span>\n'+
             					 '		</div>\n'+
             					 '		<div class="item-input"><span>名称</span><input name="classtext" type="text" value="'+itemName+'" class="ks-text" placeholder="请输入栏目名称"></div>\n'+
								 '		<div class="item-input"><span>链接</span><input name="linktext" value="'+href+'" type="text" class="ks-text"'+disabled+'>'+linkFlag+'</div>\n'+
             					 '		<div class="item-select">'+itemSelect+'</div>\n'+
								 '	</div>\n'+
								 '</div>');
								 
		};
		
		var hasSub = $navObject.find('.nav-sub-box').size();
		if(hasSub>0){
			$navObject.find('.nav-sub-box').each(function() {
				var parent = $(this).parent()[0].localName;
				var parentIndex = $(this).parent().index();
				if(parent=='li'){ //说明这个是li下面的一级下拉
					var s = $(this).find('a').size();
					var boxHtml = '';
					for(var a=0;a<s;a++){
						var name = $(this).find('a').eq(a)[0].innerText;
						var href = $(this).find('a').eq(a).attr('href');
						var target = $(this).find('a').attr('target');
						var linkFlag = '<div class="flag-link flag-link-on" data-flag="1" onClick="linkFlagClick(this)"></div>';
						var disabled = '';
						if(href==undefined){
							linkFlag = '<div class="flag-link" data-flag="0" onClick="linkFlagClick(this)"></div>';
							disabled = ' disabled'
							href = '';
						};

						if(target=='_blank'){
							var itemSelect = '<select class="ks-select"><option value="0">当前窗口</option><option value="1" selected>新窗口</option></select>'
						}else{
							var itemSelect = '<select class="ks-select"><option value="0" selected>当前窗口</option><option value="1">新窗口</option></select>'
						};
						boxHtml += '<div class="item-name">\n'+
								   '	<div class="item-btn">\n'+
								   '		<span onClick="Operate.Link(this)"><em class="set-link">设置链接</em><i class="drag-font drag-i-link"></i></span>\n'+
								   '		<span onClick="Operate.Delele(this)"><em class="delete">删除</em><i class="drag-font drag-i-del"></i></span>\n'+
								   '	</div>\n'+
								   '	<div class="item-input"><span>名称</span><input name="classtext" type="text" value="'+name+'" class="ks-text" placeholder="请输入栏目名称"></div>\n'+
								   '	<div class="item-input"><span>链接</span><input name="linktext" value="'+href+'" type="text" class="ks-text"'+disabled+'>'+linkFlag+'</div>\n'+
								   '	<div class="item-select">'+itemSelect+'</div>\n'+
								   '</div>';
						
					};
					boxHtml = '<div class="nav-sub">'+boxHtml+'</div>'
					
				};
				
				$setNav.find('.nav-item').eq(parentIndex).append(boxHtml);
				
				
			});
			
		};
		
		var addFlag = true; //避免快速点击
		
		//操作
		var Operate = {
			//添加栏目
			Add:function(obj,type){
				if(addFlag==true){
					if(type=='top'){
						//一级栏目
						addFlag = false;
						var type = "'sub'"
						$setNav.append('<div class="nav-item" style="display:none;">\n'+
									   '	<div class="item-name">\n'+
									   '		<div class="item-btn">\n'+
             					 	   '			<span onClick="Operate.Add(this,'+type+')"><em class="add-sub-class">增加二级栏目</em><i class="drag-font drag-i-zengjia"></i></span>\n'+
									   '			<span onClick="Operate.Link(this)"><em class="set-link">设置链接</em><i class="drag-font drag-i-link"></i></span>\n'+ 
									   '			<span onClick="Operate.Delele(this)"><em class="delete">删除</em><i class="drag-font drag-i-del"></i></span>\n'+
									   '		</div>\n'+
									   '		<div class="item-input"><span>名称</span><input name="classtext" type="text" value="栏目" class="ks-text" placeholder="请输入栏目名称"></div>\n'+ 
									   '		<div class="item-input"><span>链接</span><input name="linktext" value="#" type="text" class="ks-text"><div class="flag-link flag-link-on" data-flag="1" onClick="linkFlagClick(this)"></div></div>\n'+
									   '		<div class="item-select"><select class="ks-select"><option value="0">当前窗口</option><option value="1" selected>新窗口</option></select></div>\n'+
									   '	</div>\n'+	
									   '</div>');

						parent.popup.tips({
							title:'增加成功'
						});
						
						var scrollHeight = $setNav[0].scrollHeight;
						$setNav.animate({scrollTop:scrollHeight},300);
						$setNav.find('.nav-item').fadeIn(600);
						
						
						setTimeout(function(){
							addFlag = true;
						},1000)
						
						
					}else if(type=='sub'){
						//二级栏目
						addFlag = false;
						var $this = $(obj);
						var $parentItem = $this.parents('.item-name:first');
						var subSize = $parentItem.next('.nav-sub').size();
						if(subSize==0){
							$parentItem.after('<div class="nav-sub"></div>');				   
						};
						$parentItem.next('.nav-sub').append('<div class="item-name" style="display:none;">\n'+
															'	<div class="item-btn">\n'+
															'		<span onClick="Operate.Link(this)"><em class="set-link">设置链接</em><i class="drag-font drag-i-link"></i></span>\n'+
															'		<span onClick="Operate.Delele(this)"><em class="delete">删除</em><i class="drag-font drag-i-del"></i></span>\n'+
															'	</div>\n'+
															'	<div class="item-input"><span>名称</span><input name="classtext" type="text" value="栏目" class="ks-text" placeholder="请输入栏目名称"></div>\n'+
															'	<div class="item-input"><span>链接</span><input name="linktext" value="#" type="text" class="ks-text"><div class="flag-link flag-link-on" data-flag="1" onClick="linkFlagClick(this)"></div></div>\n'+
															'	<div class="item-select"><select class="ks-select"><option value="0">当前窗口</option><option value="1" selected>新窗口</option></select></div>\n'+
															'</div>');
						parent.popup.tips({
							title:'增加成功'
						});
						$parentItem.next('.nav-sub').find('.item-name:last').fadeIn(600);
						var scrollHeight = $parentItem.next('.nav-sub').find('.item-name:last')[0].offsetTop;
						if($parentItem.parent().index()==2){
							scrollHeight = scrollHeight-100;
						};
						$parentItem.next('.nav-sub').find('.item-name:last').find('input[name="classtext"]').focus();
						$setNav.animate({scrollTop:scrollHeight},300);
						
						setTimeout(function(){
							addFlag = true;
						},1000);
						
					};
					
					
				};
			},
			//设置链接
			Link:function(obj){
				
				var $this = $(obj);
				$('input[name=linktext]').removeClass('ks-text-on');
				$('.item-btn').find('span').removeClass('active');
				$this.addClass('active');
				$linktext = $this.parents('.item-name').find('input[name=linktext]');
				$linktext.addClass('ks-text-on');
				var ofTop = $this.offset().top+35;
				var ofBot = $(window).height()-ofTop+45;
				$setLinkBox.fadeIn(300);
				if(ofTop<$(window).height()/2){
					$setLinkBox.css({top:ofTop});
				}else{
					$setLinkBox.css({top:'auto',bottom:ofBot});
				};
				
				
				if(loadFlag==false){
					$.ajax({
						url:"/plus/ajaxlabel.aspx?action=navcommonlist",
						success:function(data){
							$('#commonClass').html(data);		
						}
					});
					
					
				};
					
				
			},
			Delele:function(obj){
				var $this = $(obj);
				
				parent.popup.confirm({
					  title:'您确定删除该栏目吗?',				  
					  yes:function(){
						var size = $this.parents('.item-name:first').siblings('.item-name').size();
					
						if(size==0){
							$this.parents('.item-name:first').parent().remove();
						}else{
							$this.parents('.item-name:first').remove();
						};
						
					  },
				});
				

			},
			//确定 返回结果
			Determine:function(){
				
				var result = '';
				var navSize = $setNav.find('.nav-item').size();
				for(var i=0;i<navSize;i++){
					var $item = $setNav.find('.nav-item').eq(i).find('.item-name:first');
					var href = $item.find('input[name="linktext"]').val();
					var text = $item.find('input[name="classtext"]').val();
					var selectVal = $setNav.find('.nav-item').eq(i).find('select option:selected').val();
					var target = '';
					var subHtml = ''; //存储子级菜单
					var subIcon = ''; //下拉的小图标
					if(selectVal==1){
						target = ' target="_blank"';
					};
					if($item.next('.nav-sub').size()>0){
						subIcon = '<i class="modulefont m-icon-down"></i>';
						var s = $item.next('.nav-sub').find('.item-name').size();
						for(var n=0;n<s;n++){
							var subHref = $item.next('.nav-sub').find('.item-name').eq(n).find('input[name="linktext"]').val();
							var subText = $item.next('.nav-sub').find('.item-name').eq(n).find('input[name="classtext"]').val();
							var subSelectVal = $item.next('.nav-sub').find('.item-name').eq(n).find('select option:selected').val();
							var subTarget = '';
							if(subSelectVal==1){
								subTarget = ' target="_blank"';
							};
							
							if($item.next('.nav-sub').find('.item-name').eq(n).find('.flag-link').attr('data-flag')==1){
								subText = '<a href="'+subHref+'"'+subTarget+'>'+subText+'</a>';
							};
							subHtml+='<span>'+subText+'</span>\n'
						};
						subHtml = '\n'+
								  '    <div class="nav-sub-box">'+subHtml+'</div>'
					};
					
					var navitem = '<div class="nav-item">'+subIcon+''+text+'</div>';
					if($item.find('.flag-link').attr('data-flag')==1){
						navitem = '<div class="nav-item"><a href="'+href+'"'+target+'>'+subIcon+''+text+'</a></div>';
					};
					
					result += '<li>\n'+
							  '    '+navitem+''+subHtml+'\n'+
							  '</li>\n'
				};
				
				result = '<ul>\n'+result+'</ul>\n'

				//为标记的地方执行内容替换
				$navObject.html(result)
						
				parent.staticLabel.Save(labelName,window.name)

			}
		};		
		
		//链接开关
		function linkFlagClick(obj){
			var $this = $(obj);
			if($this.attr('data-flag')==1){
				$this.removeClass('flag-link-on');
				$this.prev().attr('disabled',true);
				$this.attr('data-flag',0);
			}else{
				$this.addClass('flag-link-on');
				$this.prev().attr('disabled',false);
				$this.attr('data-flag',1);
			};
		};
	  
		function closeLinkBox(){
			$setLinkBox.fadeOut(300);
			$('.item-btn').find('span').removeClass('active');
			$('input[name=linktext]').removeClass('ks-text-on');
		};
		
		
		$('.ks-tab').on('click','li',function(){
			var id = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.tab-box').find('.box').eq(id).fadeIn(300).siblings().hide();
			
			if(id==1&&mFlag==false||id==2&&mFlag==false){
					
					//加载模型分类
					$.ajax({
						url:"/plus/ajaxlabel.aspx?action=navmodellist",
						success:function(result){
							mFlag = true; //已加载
							var data = result.split('$');
							var dataLength = data.length;
							for(var i=0;i<dataLength;i++){
								var name = data[i].split('|')[1];
								var id = data[i].split('|')[0];
								$('.mClass').append('<li data-id="'+id+'">'+name+'</li>')
							};
														
						}
					});
					
				
			};
			
			
		});
		
		
		//栏目-模型点击
		$('#modelClass').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('data-id');
			$('#classCont').html('<div class="tips">加载中...</div>');
			//加载分类
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navclasslist&modelid="+id+"",
				success:function(result){
					if(result!=''){
						$('#classCont').html(result)
					}else{
						$('#classCont').html('<div class="tips">暂无分类数据</div>')
					};
				}
			});
			
			
		});

		//内容-模型点击
		$('#viewClass').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('data-id');
			$('#select').find('.checked span').html('全部');
			$('#viewCont').html('<div class="tips">加载中...</div>');
			
			//加载内容
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"",
				success:function(result){
					vFlag = true; //已加载
					$('#viewCont').html(result);
												
				}
			});
			
			//加载模型对应分类
			$('#select').find('ul').html('<div class="tips">加载中...</div>');
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navclasslist&modelid="+id+"",
				success:function(result){
					$('#select').find('ul').html(result);												
				}
			});
			
			
		});
		
		
		var selectFlag = false;
		$('#select').on('click','.checked',function(e){
			if(selectFlag==false){
				$(this).find('.drag-i-xiangxia').css({transform:'rotate(-180deg)'})
				$(this).next('ul').fadeIn(300);
				selectFlag = true;
			}else{
				$(this).find('.drag-i-xiangxia').css({transform:''})
				$(this).next('ul').fadeOut(300);
				selectFlag = false;
			};
			
			e.stopPropagation();
		
		});
		
		
		$(document).click(function(){
			  $('#select').find('.drag-i-xiangxia').css({transform:''})
			  $('#select').find('ul').fadeOut(300);
			  selectFlag = false;
		});
		
		
		//选择下拉分类
		$('#select').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('classid');
			var text = $(this).text().replace('--','').replace('--','').replace('--','');
			//加载内容
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"",
				success:function(result){
					$('#viewCont').html(result);
					$('#select').find('.drag-i-xiangxia').css({transform:''})
					$('#select').find('ul').fadeOut(300);
					$('#select').find('.checked span').html(text);
					selectFlag = false;
				}
			});
			
		});
		
		$('.sc-text').keyup(function(){
			contSearch();
		});
		
		function contSearch(){
			var key = $('.sc-text').val();
			var id = $('#viewClass').find('.active').attr('data-id');
			var classid = '';
			var selectId = $('#select').find('.active').attr('classid');
			if(selectId){
				classid = '&classid='+selectId+''
			};
			
			//搜索
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"&key="+key+""+classid+"",
				success:function(result){
					if(result==''){
						$('#viewCont').html('<div class="tips">没有找到相关内容</div>');
					}else{
						$('#viewCont').html(result);
					};
				}
			});
			
		};
		
		//返回链接
		$('.selectClass').on('click','li',function(){
			var href = $(this).attr('url');
			$(this).addClass('active').siblings().removeClass('active');
			$linktext.val(href);
		});		
		
		

    </script>


</body>
</html>