<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>CMS-栏目管理</title>
    <%@ include file="../../include/lib.jsp" %>
   <%@ include file="../../include/editor.jsp"%>
  </head>
 
 <body style="margin-top:14px;">											
 	<div id="articTypeEdit" class="easyui-dialog" title="编辑栏目内容" style="width:800px;height:428px;padding:10px"
			data-options="iconCls: 'icon-save',closed:true,
				buttons: [{
					text:'保存',
					iconCls:'icon-ok',
					handler:function(){
						submitPage();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						cance();
					}
				}]
			">
			
 		 <form id="articleTypeEditForm" method="post">
		 	<textarea id="articleTypeContent" name="articleTypeContent" style=" position:relative; top:27px; width:100%;height:320px;visibility:hidden;"></textarea>
			<input type="hidden" id="arctypeId" name="arctypeId" >
			<input type="hidden" id="articleTypeCoverTem" name="articleTypeCoverTem" >
		</form>
 	</div>
 
  	<!-- 提交栏目信息的表单 -->
	<div id="entryArticleType">
	    <form id="articleTypeForm" method="post">
	    	<div class="topspace"></div>
	    	<div class="leftspace"></div>
	    	<div class="left">
	    	
	    		<br /><ul>
		    		
		    		<li class="name">栏目名称：</li>
		    		<li><input  type="text" class="easyui-validatebox color columnname" id="name" name="name" data-options="field:'articleTypeName'" 
		    		  onfocus="if(value=='请输入栏目名称') {value=''}" onblur="if (value=='') {value='请输入栏目名称'}"/></li>
				</ul>
				<ul></ul>
				<ul>
					<li class="name">请选择父栏目：</li>
					<li><input id="articleTypeText" name = "articleTypeText" class="easyui-combotree color" style="width:188px;"/></li>
				</ul>
			</div>	
			
			<div class="left" style="width:300px;">
				<ul>
	    			<li class="column">栏目属性：</li>
	    			<li class="finally"><input type="radio" class="radio" id="quality1" name="quality" onclick="selectChannel(1)"/>最终栏目列表 </li>
					<li class="recover"><input type="radio" class="radio" id="quality2" name="quality" onclick="selectChannel(2)"/>封面</li>
				</ul>
				<br/>
	  			<ul id="a">
	 				<li class="height name">列表链接地址：</li>
	 				<li><input class="easyui-validatebox leftText color width" type="text" id="list_tem" name="list_tem" 
		    					 onfocus="if(value=='请输入列表模版链接地址') {value=''}" onblur="if (value=='') {value='请输入列表模版链接地址'}"></li>
	     	 	</ul>
	     	 	
	     		<ul id="d"></ul> 
	    		<ul id="b">
		    		<li class="height name">内容链接地址：</li>
		    		<li><input class="easyui-validatebox leftText color width" type="text" id="news_tem" name="news_tem" 
			 					onfocus="if(value=='请输入内容模版链接地址') {value=''}" onblur="if (value=='') {value='请输入内容模版链接地址'}"></li>
	    		</ul>	
	    		
	    		<ul id="c">
		    		<li class="height name">封面链接地址：</li>
		    		<li><input class="easyui-validatebox leftText color width" type="text" id="cover_tem" name="cover_tem"
		    					onfocus="if(value=='请输入封面模版链接地址') {value=''}" onblur="if (value=='') {value='请输入封面模版链接地址'}"></li>  
 				</ul>
	 		 </div>
	 		 
	    	<div class="descrip">
	    		<ul>
	    			<li class="keyword">栏目关键字：</li>
	    			<li style="width:445px; height:67px; float:left;"><textarea id ="keyword" name="keyword"></textarea></li>
	    		</ul>
	    	</div>
	    	<div class="descripspace"></div>
	    	<div class="descrip">
	    		<ul>
	    			<li class="keyword">栏目描述：</li>
	    			<li style="width:445px; height:67px; float:left;"><textarea id="descrip" name="descrip"></textarea></li>
	    		</ul>
	    	</div>
	    	
		    <div class="footSpace"></div>
   			<div class="foot">
			    <div class="button">
			    	<a href="javascript:void(0)" class="easyui-linkbutton leftText" onclick="submitForm()">确定</a>
			    	<a href="javascript:void(0)" id="articleTypeClear" class="easyui-linkbutton right">重置</a>
			    </div>
			</div>
	    </form>
	</div> 
	
	
	<!-- 显示栏目信息的DIV -->
	<div id="list_articlettype" ></div>
	
	<script type="text/javascript">
			/**
			 *使用js来控制输出栏目信息的列表数据
			 */
			function listArticleType(_url) {
				$('#list_articlettype').treegrid( {
					rownumbers: true,
					animate:true, //打开时的特效
					fitColumns:true,//名称的排列方式
					fit:true,
					url:_url,
					idField:'articleTypeId',
					treeField:'articleTypeName',
					singleSelect:true, //选择框，true为单选，false为多选
					
					toolbar: [{
						iconCls: 'icon-add',
						text:'增加',
						handler: function(){
										saveArticleType()
									}
					},'-',{
						iconCls: 'icon-edit',
						text:'修改',
						handler: function(){
								edit()
							}
					},'-',{
						//删除栏目按钮
						iconCls: 'icon-remove',
						text:'删除',
						handler:function(){
									deleteArticle()
								}	
					},'-',{
						//刷新栏目按钮
						iconCls: 'icon-reload',
						text:'刷新',
						handler:function(){
									reload()
								}	
					},'-',{
						//编辑封面栏目内容
						iconCls: 'icon-edit',
						text:'栏目内容',
						handler:function(){
							articTypeEdit();
								}	
					},'-',{
						iconCls: 'icon-search',
						text:'查看封面',
						handler: function(){
							contentShow();
						}
					}], 
					columns : [ [
					{
						checkbox:true,
					},{
						field : 'articleTypeId',
						title : '栏目ID',
						width : 15
					},{
						field : 'articleTypeName',
						title : '标题',
						width : 80
					},{
						field : 'articleTypeQuality',
						title : '属性',
						width : 30,
						formatter: function (value, row, index) {
							if(value == 1){
								return '<font color="red">' + '最终栏目列表' + '</font>';
							}else{
								return '<font color="blue">' + '封面' + '</font>';
							}
						}
					},{
						field : 'articleTypeUrl',
						title : '栏目链接标签',
						width : 90
					},{
						field : 'articleTypeListTem',
						title : '列表模版地址',
						width : 40
					},{
						field : 'articleTypeNewsTem',
						title : '内容模版地址',
						width : 40
					},{
						field : 'articleTypeCoverTem',
						title : '封面模版地址',
						width : 40
					}] ]
				});
			}
			
			/*
			给栏目属性的单选按钮赋默认值
			*/
			function selectChannel(a){
				switch(a){
					case 1: 
						$('#a').removeClass("unshow");
						$('#b').removeClass("unshow");
						$('#c').addClass("unshow");
						$('#d').removeClass("unshow");
						$('#quality1').val("1");
						$('#quality2').val(" ");
						break;
						
					case 2: 
						$('#a').addClass("unshow");
						$('#b').addClass("unshow");
						$('#c').removeClass("unshow");
						$('#d').addClass("unshow");
						$('#quality1').val(" ");
						$('#quality2').val("2");
						break;
				}
			}

			//加载编辑器
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('#articleTypeContent', {
					allowFileManager : true
				});
			});
			
			//编辑栏目内容
			function articTypeEdit(){
				var articleType = $('#list_articlettype').treegrid('getSelected');
				if(articleType!=null&&articleType.articleTypeQuality==2){
					$("#articTypeEdit").window("open");
					//编辑框赋值
					editor.html(articleType.articleTypeContent);
					//Id赋值
					$('#arctypeId').val(articleType.articleTypeId);
					$('#articleTypeCoverTem').val(articleType.articleTypeCoverTem);
				}else{
					showFormMsg(SYSTEM_TITLE, "栏目内容只能是封面属性可编辑！");
				}
			}
		
			//栏目内容编辑提交按钮
			function submitPage(){
					$("#articleTypeContent").val(editor.html());
					var artContent = $("#articleTypeContent").val().replace(/[ ]/g,"");
					 if(artContent==""){
							showFormMsg(SYSTEM_TITLE,"内容不为空!");
						}else{
							$.post("${base_url}/articleTypeContent", $("#articleTypeEditForm").serialize());
							showFormMsg(SYSTEM_TITLE,"栏目内容增加成功!");
							$('#articTypeEdit').window('close');
							location.href="${base_url}/admin/listArticleType";
						}
						
			}

			function cance(){ 
				$("#articTypeEdit").window("close");
			}
			/*
			 弹出的填写栏目信息的框所在的DIV
			*/
			function entryArticleType(){
				//设置弹出DIV的默认值
				$("#entryArticleType").window({
					minimizable:false,
					maximizable:false,
					closed : true,
					title : '请填写栏目信息：',
					iconCls :'icon-save'
				});
				
			}
			
			
			/*
				获取用户选中的栏目ID，利用AJAX将ID传入Servlet中执行删除,
				执行完后刷新当前列表并提示相关信息(+++)
			*/
			function deleteArticle(){
			//提示：是否删除栏目信息
						var articleType = $('#list_articlettype').treegrid('getSelected');
						if(articleType!=null && articleType.children == ""){
							$.messager.confirm('铭飞文章管理系统', '确认删除 ?', function(r){
								if(r){
									$.ajax({
											   type: "POST",
											   url:BASE_URL+"/admin/removeArticleType",
											   data: "articleTypeId="+articleType.articleTypeId,
											   dataType:"json",
											success: function(data){
													   		if(data.code==301){
													   			//提示:删除失败
													   			showFormMsg(SYSTEM_TITLE, "删除失败，请先删除该栏目下的文章");
													   		}else if(data.code==302){
													   			//提示:删除成功
													   			showFormMsg(SYSTEM_TITLE, "删除成功!");
													   			reload();
													   		}
													   }
											});	
									}
								});
						}else if(articleType == null){
							/*提示：请选择要删除的栏目*/
							showFormMsg(SYSTEM_TITLE, "请选择要删除的栏目");
						}else if(articleType.children != null){
							/*提示：请先删除该栏目下的子栏目*/
							showFormMsg(SYSTEM_TITLE, "请先删除该栏目下的子栏目");
						}else{
							/*提示：未知错误！*/
							showFormMsg(SYSTEM_TITLE, "未知错误！");
						}
			}
			
			/*
			修改栏目,将相关信息自动同步到输入框中,并且将form表单中的提交地址
			改为editArticleType
			*/
			function edit(){
				var articleType = $('#list_articlettype').treegrid('getSelected');
				if(articleType!=null){
					$('#entryArticleType').window('open');
					//设置表单的提交路径
					$('#articleTypeForm').attr("action",BASE_URL+"/admin/editArticleType?id="+articleType.articleTypeId);
					//设置修改表单中重置按钮的事件
					$('#articleTypeClear').attr("onclick","edit()");
					
					//栏目链接地址
					//$("#url").val(articleType.articleTypeUrl);
					//栏目关键字
					$("#keyword").val(articleType.articleTypeKeyword);
					//栏目描述
					$("#descrip").val(articleType.articleTypeDescrip);
					
					var articleTypeQuality = articleType.articleTypeQuality;
					
					//对栏目属性和相应的模版地址赋默认值
					selectChannel(articleTypeQuality);
					
					//栏目名称
					$("#name").val(articleType.articleTypeName);
					
					switch (articleTypeQuality) {
						//最终栏目列表
						case 1:
							document.getElementById("quality1").checked = true;
							$("#news_tem").val(articleType.articleTypeNewsTem);
							$("#list_tem").val(articleType.articleTypeListTem);
							$("#cover_tem").val("请输入封面模版链接地址");			
						break;
						//封面
						case 2:
							document.getElementById("quality2").checked = true;
							$("#news_tem").val("请输入内容模版链接地址");
							$("#list_tem").val("请输入列表模版链接地址");
							$("#cover_tem").val(articleType.articleTypeCoverTem);	
						break;
						//封面
					}
				//设置选择父栏目时当前修改栏目不能以自己的名字和下级栏目作为父栏目
				$('#articleTypeText').combotree({
							onClick: function(){
								parentdir();
							}
						});
					/*
						所属的父栏目,
						直接使用easy-ui框架的默认方法，
						将栏目的PID传入下拉框中，下拉框会自动识别并显示出父栏目名
					*/
					if(articleType.articleTypePid != 0){
						articleTypeTree(articleType.articleTypePid);
					}else{
						articleTypeTree(0);
					}
				}else if(articleType == null){
				/*
					提示:请选择要修改的栏目！
				*/
				showFormMsg(SYSTEM_TITLE, "请选择要修改的栏目");
				}
				
			}
				
			//存储子节点的id
			var objIdTree = new Array();
			
			/*
				在修改栏目信息时，当用户选着的父栏目为当前正在修改的栏目时，提示错误
			*/
			function parentdir(){
				var articleType = $('#list_articlettype').treegrid('getSelected');
				//获取当前栏目的 ID和PID
				var articleTypeId = articleType.articleTypeId;
				var articleTypePid = articleType.articleTypePid;
				
				//获取选着栏目的Id
				var articleTypeTree = $('#articleTypeText').combotree('tree').tree('getSelected');
				var articleTypeTreeId = articleTypeTree.id;
				
				objIdTree[0] = articleTypeId;
				getChildrenTree(articleTypeId,articleTypeTreeId);
				//循环判定是否选择子栏目
				for(var i=0;i<objIdTree.length;i++){
					if(articleTypeTreeId == objIdTree[i]){
						//初始化参数
						$('#articleTypeText').combotree('setValue',articleTypePid);
						//提示，用户选着的父栏目不正确时弹出
						showFormMsg(SYSTEM_TITLE, "不能选择当前栏目作为父栏目,请重新选择");
					}
				}
				//初始化参数
				objIdTree = new Array();
			}
			
			/**
				获取所有子节点id
				objid 父节点id
				treeId 选择栏目的Id
			*/
			function getChildrenTree(objId,treeId){
				if($('#list_articlettype').treegrid('getChildren',objId).length==0){
					return;
				}
				
				for(var i=0;i<$('#list_articlettype').treegrid('getChildren',objId).length;i++){
					objIdTree[objIdTree.length] = $('#list_articlettype').treegrid('getChildren',objId)[i].articleTypeId;
					getChildrenTree(objIdTree[objIdTree.length-1]);
				}
			}
			
			/*
				打开增加栏目的表单,其中将该表单应提交路径设置为：saveArticleType
			*/
			function saveArticleType(){
				var articleTypeQuality = 1;
				$('#entryArticleType').window('open');
				//清楚表内信 息
				$('#articleTypeForm').form('clear');
				//设置表单提交路径
				$('#articleTypeForm').attr("action",BASE_URL+"/admin/saveArticleType");
				//设置表单中重置按钮的方法
				$('#articleTypeClear').attr("onclick","saveArticleType()");
				
				//设置栏目属性的默认值为：最终栏目列表
				document.getElementById("quality1").checked = true;
				
				$('#quality1').val("1");
				
				//增加栏目选中某个栏目时那么，选择栏目的下拉框会默认该栏目为添加栏目的父栏目
				var articleType = $('#list_articlettype').treegrid('getSelected');
				
				if(articleType != null && articleType.articleTypeId != 0){
					articleTypeQuality = articleType.articleTypeQuality;
					switch (articleTypeQuality) {
						//最终栏目列表
						case 1:
							document.getElementById("quality1").checked = true;
							$('#cover_tem').val("请输入封面模版链接地址");
							$("#news_tem").val(articleType.articleTypeNewsTem);
							$("#list_tem").val(articleType.articleTypeListTem);					
						break;
						//封面
						case 2:
							document.getElementById("quality2").checked = true;
							$("#cover_tem").val(articleType.articleTypeCoverTem);
							$("#list_tem").val("请输入列表模版链接地址");
							$("#news_tem").val("请输入内容模版链接地址");
						break;
					}
						articleTypeTree(articleType.articleTypeId);
					} else {
						articleTypeTree(0);
						$('#cover_tem').val("请输入封面模版链接地址");
						$("#list_tem").val("请输入列表模版链接地址");
						$("#news_tem").val("请输入内容模版链接地址");
					}
					//设置栏目名称输入框的默认值
					$('#name').val("请输入栏目名称");
					//对栏目属性和相应的模版地址赋默认值
					selectChannel(articleTypeQuality);
			}
		
			
			//提交栏目信息表单的按钮设置
			function submitForm(){
				
				if($('#name').val() == "请输入栏目名称" || $('#name').val()==" " ){
					showFormMsg(SYSTEM_TITLE, "请输入栏目名称");
				}else if(($('#quality1').val()== 1) && ($('#list_tem').val() == "请输入列表模版链接地址")){
					showFormMsg(SYSTEM_TITLE, "请输入列表模版链接地址");
				} else if(($('#quality1').val()==1) && ($('#news_tem').val()=="请输入内容模版链接地址")){
					showFormMsg(SYSTEM_TITLE, "请输入内容模版链接地址");
				}else if(($('#quality2').val()==2) && ($('#cover_tem').val()=="请输入封面模版链接地址")){
					showFormMsg(SYSTEM_TITLE, "请输入封面模版链接地址");
				}else {
					//判断信息是否提交成功。
					$('#articleTypeForm').form('submit', {
						url: $('#articleTypeForm').attr("action"),
						success: function(data){
							if(data == "true"){
								reload();
								showFormMsg(SYSTEM_TITLE, "信息提交成功!");
							}else{
								showFormMsg(SYSTEM_TITLE, "信息提交失败!");
							}
						}
					});
					//提交后关闭输入框
					$('#entryArticleType').window('close');
				}
			}
			
			/*
				请求选着父栏目下拉框的JOSN数据
			*/
			function articleTypeTree(articleTypeId){
				$('#articleTypeText').combotree({  
				    url:'${base_url}/admin/treeArticleType?type=json',  
				});
				$('#articleTypeText').combotree('setValue',articleTypeId);
			}
			/*
				刷新显示栏目信息的列表
			*/
			function reload(){
				$('#list_articlettype').treegrid('reload');
			}
			
			listArticleType(BASE_URL+"/admin/listArticleType?type=json");
			entryArticleType();	
			
		//查看封面 
		function contentShow(){
			var articleType = $('#list_articlettype').treegrid('getSelected');
			var articleTypeQuality = articleType.articleTypeQuality;
			switch (articleTypeQuality) {
				//最终栏目列表
				case 1:
					showFormMsg(SYSTEM_TITLE, "选择的栏目错误！请选择封面栏目！");				
				break;
				//封面
				case 2:
					window.open('${base_url}/contentShow?cid='+articleType.articleTypeId);
				break;
			}
		}
			
	</script>
  </body>
</html>
 
