<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/admin/include/taglib.jsp"%>
<html>
<head>

<link type="text/css" rel="stylesheet" href="${ctxSite}/assets/jedate/skin/jedate.css">
<link type="text/css" rel="stylesheet" href="${ctxSite}/assets/js/jquery/easyui/themes/default/easyui.css"/>
<script type="text/javascript" src="${ctxSite}/assets/jedate/jquery.jedate.js"></script>
<script src="${ctxSite}/assets/js/jquery/easyui/jquery.easyui.min.js"></script>

	<title>文章管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".timetextymdhms").jeDate({
				format:"YYYY-MM-DD hh:mm:ss",
				isTime:true, 
				festival: false, //显示节日
			})
            if($("#link").val()){
                $('#linkBody').show();
                $('#url').attr("checked", true);
            }
			$("#title").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
                    if ($("#categoryId").val()==""){
                    	$("#categoryName").focus();
                        top.$.jBox.tip('请选择归属栏目','warning');
                    }else if (CKEDITOR.instances.content.getData()=="" && $("#link").val().trim()==""){
                        top.$.jBox.tip('请填写正文','warning');
                    }else{
                        loading('正在提交，请稍等...');
                        form.submit();
                    }
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			//判断归属栏目，如果是修改状态，不可点击和更改。如果是新增页面，则可以点击
		/* 	if ($("#categoryId").val()!=""){

	        	$("#categoryButton").addClass("disabled","disabled");
	        	$("#categoryId").attr("disabled","disabled");
	         } */
			// 设定4个checkbox初期状态
			if ($("#appIndexView").val()=="1"){
				$('#appIndexViewTop').attr('checked', true)
			}
			if ($("#appInfoView").val()=="1"){
				$('#appInfoViewTop').attr('checked', true)
			}
			if ($("#appIndexViewYcjt").val()=="1"){
				$('#appIndexViewTopYcjt').attr('checked', true)
			}
			if ($("#appInfoViewYcjt").val()=="1"){
				$('#appInfoViewTopYcjt').attr('checked', true)
			}
			
			//说明文字随着分辨率大小内容变化
			$("#selecttype").change(function(){
				var type = $("#selecttype").val();
				if(type == 1){
					$(".previewText1").show();
					$(".previewText2").hide();
					$(".previewText3").hide();
					$(".previewText4").hide();
					$(".previewText5").hide();
				}else if(type == 2){
					$(".previewText1").hide();
					$(".previewText2").show();
					$(".previewText3").hide();
					$(".previewText4").hide();
					$(".previewText5").hide();
				}else if(type == 3){
					$(".previewText1").hide();
					$(".previewText2").hide();
					$(".previewText3").show();
					$(".previewText4").hide();
					$(".previewText5").hide();
				}else if(type == 4){
					$(".previewText1").hide();
					$(".previewText2").hide();
					$(".previewText3").hide();
					$(".previewText4").show();
					$(".previewText5").hide();
				}else if(type == 5){
					$(".previewText1").hide();
					$(".previewText2").hide();
					$(".previewText3").hide();
					$(".previewText4").hide();
					$(".previewText5").show();
				}
	 		})

		});
		
		function test(){
			if ($("#categoryId").val()==""){
            	$("#categoryName").focus();
                top.$.jBox.tip('请选择归属栏目','warning');
             }
		}
		
		
		//预览页面的相关设置
		function previewOpen(){
			var type = $("#selecttype").val();
			if(type == 1){
				 OpenWindow=window.open("", "newwin","height=568,width=320,toolbar=no,scrollbars="+scroll+",menubar=no,left=500px,top=150px");
			}else if(type == 2){
				OpenWindow=window.open("", "newwin","height=640,width=360,toolbar=no,scrollbars="+scroll+",menubar=no,left=500px,top=150px");
			}else if(type == 3){
				OpenWindow=window.open("", "newwin","height=667,width=375,toolbar=no,scrollbars="+scroll+",menubar=no,left=500px,top=150px");
			}else if(type == 4){
				OpenWindow=window.open("", "newwin","height=667,width=400,toolbar=no,scrollbars="+scroll+",menubar=no,left=500px,top=150px");
			}else if(type == 5){
				OpenWindow=window.open("", "newwin","height=736,width=414,toolbar=no,scrollbars="+scroll+",menubar=no,left=500px,top=150px");
			}
			 OpenWindow.document.write("<body bgcolor='white' text='black' alink='blue'vlink='blue' link='blue'><TITLE>页面预览</TITLE> ")
			 OpenWindow.document.write("<div>"+CKEDITOR.instances.content.getData()+"</div>")
			 OpenWindow.document.write("</body")
			 OpenWindow.document.close()
		}
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li><a href="${ctx}/cms/article/list?category.id=${article.category.id}">文章列表</a></li>
		<li class="active"><a href="${ctx}/cms/article/form?id=${article.id}&category.id=${article.category.id}">文章${not empty article.id?'修改':'添加'}</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="article" action="${ctx}/cms/article/save" method="post" class="form-horizontal" onSubmit="return test()">
	    <input id="TempcategoryId" name="TempcategoryId" type="hidden" value="${TempcategoryId}"/>
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="control-group">
			<label class="control-label">归属栏目:</label>
			<div class="controls">
                <sys:treeselect id="category" name="category.id" value="${article.category.id}" labelName="category.name" labelValue="${article.category.name}"
					title="栏目" url="/cms/category/treeData" module="article" selectScopeModule="false" notAllowSelectRoot="false" notAllowSelectParent="true" cssClass="required"/>&nbsp;
<!--                 <span> -->
<!--                     <input id="url" type="checkbox" onclick="if(this.checked){$('#linkBody').show()}else{$('#linkBody').hide()}$('#link').val()"><label for="url">外部链接</label> -->
<!--                 </span> -->
<!-- 				<span style="float: left"> -->
<!-- 					<p style="margin-left: 20px;color: red;">*归属栏目不可更改，只可在新增时添加</p> -->
<!-- 				</span> -->
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">标题:</label>
			<div class="controls">
				<form:input path="title" htmlEscape="false" maxlength="200" class="input-xxlarge measure-input required"/>
			</div>
		</div>
        <div id="linkBody" class="control-group" style="display:none">
            <label class="control-label">外部链接:</label>
            <div class="controls">
                <form:input path="link" htmlEscape="false" maxlength="200" class="input-xlarge"/>
                <span class="help-inline">绝对或相对地址。</span>
            </div>
        </div>
		<div class="control-group" style="display:none">
			<label class="control-label">关键字:</label>
			<div class="controls">
				<form:input path="keywords" htmlEscape="false" maxlength="200" class="input-xlarge"/>
				<span class="help-inline">多个关键字，用空格分隔。</span>
			</div>
		</div>
		 
		<div class="control-group">
			<label class="control-label">权重:</label>
			<div class="controls">
				<form:input path="weight" htmlEscape="false" maxlength="200" class="input-mini required digits"/>&nbsp;
				<span>
					<input id="weightTop" type="checkbox" onclick="$('#weight').val(this.checked?'999':'0')"><label for="weightTop">置顶</label>
				</span>
				<%-- &nbsp;过期时间：
				<input id="weightDate" name="weightDate" type="text" readonly="readonly" maxlength="20" class="input-small Wdate"
					value="<fmt:formatDate value="${article.weightDate}" pattern="yyyy/MM/dd"/>"
					onclick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowClear:true});"/>
				<span class="help-inline">数值越大排序越靠前，过期时间可为空，过期后取消置顶。</span> --%>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">文章发布者:</label>
			<div class="controls">
				<form:input path="publisher" htmlEscape="false" maxlength="128" class="input-xlarge required"/>&nbsp;
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label">摘要:</label>
			<div class="controls">
				<form:textarea path="description" htmlEscape="false" rows="4" maxlength="200" class="input-xxlarge"/>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">图片:</label>
			<div class="controls">
                <input type="hidden" id="image" name="image" value="${article.imageSrc}" />
                <div>
                <div style="float:left">
				<sys:ckfinder input="image" type="images" uploadPath="/cms/article" selectMultiple="false"/>
				</div>
				<!--<p style="float:left;float: left;margin-top: 42px;margin-left: 20px;color: red;">*仅供图片专栏使用</p>-->
				</div>
			</div>
		</div>
		
		
		<!-- ---增加手机尺寸的预览功能  zhangyn   2017.09.21------ -->
		<div class="control-group" id="previewPixl">
			<label class="control-label">手机预览:</label>
			<div class="controls">
				<div style="float: left">
					<select id="selecttype">
						<option value ="1">568*320(4.0寸)</option>
					    <option value ="2">640*360(4.5寸)</option>
					    <option value="3">667*375(4.7寸)</option>
					    <option value="4">667*400(5.0寸)</option>
					    <option value="5">736*414(5.5寸)</option>
					</select>
					<a href="javascript:;" onclick="previewOpen();"  class="btn" style="margin-left: 20px">预览</a>
				</div>
				<p class="previewText1" style="float:left;float: left;margin-left: 20px;color: red;"><span>*建议正文中图片上传尺寸最大宽度不超过320</span></p>
				<p class="previewText2" style="float:left;float: left;margin-left: 20px;color: red; display: none;"><span>*建议正文中图片上传尺寸最大宽度不超过360</span></p>
				<p class="previewText3" style="float:left;float: left;margin-left: 20px;color: red;display: none;"><span>*建议正文中图片上传尺寸最大宽度不超过375</span></p>
				<p class="previewText4" style="float:left;float: left;margin-left: 20px;color: red;display: none;"><span>*建议正文中图片上传尺寸最大宽度不超过400</span></p>
				<p class="previewText5" style="float:left;float: left;margin-left: 20px;color: red;display: none;"><span>*建议正文中图片上传尺寸最大宽度不超过414</span></p>
				
				
				<!--具体子页面的id -'"+${article.id}+"'->
				<div style="max-height:76%;overflow-y:auto;min-height: 50%;">${article.id}</div>
				<!-- 获取的内容--- -->
<%-- 				<div style="max-height:76%;overflow-y:auto;min-height: 50%;">${article.articleData.content}</div> --%>
			</div>
			<div class="controls">
			<span>
                <input type="hidden" id="appIndexView" name="appIndexView" value="${article.appIndexView}" />
                <input id="appIndexViewTop" type="checkbox" onclick="$('#appIndexView').val(this.checked?'1':'0')"><label for="appIndexViewTop">畅行盐城App首页模块显示</label>			
                <input type="hidden" id="appInfoView" name="appInfoView" value="${article.appInfoView}" />
                <input id="appInfoViewTop" type="checkbox" onclick="$('#appInfoView').val(this.checked?'1':'0')"><label for="appIndexViewTop">畅行盐城App资讯模块显示</label>
				
				<input type="hidden" id="appIndexViewYcjt" name="appIndexViewYcjt" value="${article.appIndexViewYcjt}" />
                <input id="appIndexViewTopYcjt" type="checkbox" onclick="$('#appIndexViewYcjt').val(this.checked?'1':'0')"><label for="appIndexViewTopYcjt">盐城交通App首页模块显示</label>			
                <input type="hidden" id="appInfoViewYcjt" name="appInfoViewYcjt" value="${article.appInfoViewYcjt}" />
                <input id="appInfoViewTopYcjt" type="checkbox" onclick="$('#appInfoViewYcjt').val(this.checked?'1':'0')"><label for="appIndexViewTopYcjt">盐城交通App资讯模块显示</label>
					
			</span>	</div>
		</div>
		<!-- ---增加手机尺寸的预览功能  zhangyn   2017.09.21------ -->
		
		<div class="control-group">
			<label class="control-label">正文:</label>
			<div class="controls">
				<form:textarea id="content" htmlEscape="true" path="articleData.content" rows="4" maxlength="200" class="input-xxlarge"/>
				<sys:ckeditor replace="content" uploadPath="/cms/article" />
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">来源:</label>
			<div class="controls">
				<form:input path="articleData.copyfrom" htmlEscape="false" maxlength="200" class="input-xlarge"/>
			</div>
		</div>
		<!-- 
		<div class="control-group">
			<label class="control-label">相关文章:</label>
			<div class="controls">
				<form:hidden id="articleDataRelation" path="articleData.relation" htmlEscape="false" maxlength="200" class="input-xlarge"/>
				<ol id="articleSelectList"></ol>
				<a id="relationButton" href="javascript:" class="btn">添加相关</a>
				<script type="text/javascript">
					var articleSelect = [];
					function articleSelectAddOrDel(id,title){
						var isExtents = false, index = 0;
						for (var i=0; i<articleSelect.length; i++){
							if (articleSelect[i][0]==id){
								isExtents = true;
								index = i;
							}
						}
						if(isExtents){
							articleSelect.splice(index,1);
						}else{
							articleSelect.push([id,title]);
						}
						articleSelectRefresh();
					}
					function articleSelectRefresh(){
						$("#articleDataRelation").val("");
						$("#articleSelectList").children().remove();
						for (var i=0; i<articleSelect.length; i++){
							$("#articleSelectList").append("<li>"+articleSelect[i][1]+"&nbsp;&nbsp;<a href=\"javascript:\" onclick=\"articleSelectAddOrDel('"+articleSelect[i][0]+"','"+articleSelect[i][1]+"');\">×</a></li>");
							$("#articleDataRelation").val($("#articleDataRelation").val()+articleSelect[i][0]+",");
						}
					}
					$.getJSON("${ctx}/cms/article/findByIds",{ids:$("#articleDataRelation").val()},function(data){
						for (var i=0; i<data.length; i++){
							articleSelect.push([data[i][1],data[i][2]]);
						}
						articleSelectRefresh();
					});
					$("#relationButton").click(function(){
						top.$.jBox.open("iframe:${ctx}/cms/article/selectList?pageSize=8", "添加相关",$(top.document).width()-220,$(top.document).height()-180,{
							buttons:{"确定":true}, loaded:function(h){
								$(".jbox-content", top.document).css("overflow-y","hidden");
							}
						});
					});
				</script>
			</div>
		</div>
        <div class="control-group">
            <label class="control-label">自定义内容视图:</label>
            <div class="controls">
                  <form:select path="customContentView" class="input-medium">
                      <form:option value="" label="默认视图"/>
                      <form:options items="${contentViewList}" htmlEscape="false"/>
                  </form:select>
                  <span class="help-inline">自定义内容视图名称必须以"${article_DEFAULT_TEMPLATE}"开始</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">自定义视图参数:</label>
            <div class="controls">
                  <form:input path="viewConfig" htmlEscape="true"/>
                  <span class="help-inline">视图参数例如: {count:2, title_show:"yes"}</span>
            </div>
        </div>
         -->
        <div class="control-group">
			<label class="control-label">视频文件:</label>
			<div class="controls">
                <input type="hidden" id="files" name="files" value="${article.files}" />
                <div>
                <div style="float:left">
				<sys:ckfinder input="files" type="files" uploadPath="/cms/article" selectMultiple="false"/>
				</div>
				</div>
			</div>
			<div class="controls">
                	<p class="previewText1" style="float:left;float: left;color: red;"><span>※附件名称请用字母和数字组成！</span></p>
			</div>
		</div>
		 <div class="control-group">
			<label class="control-label">发布时间:</label>
			<div class="controls">
                <input id="publisheDate" name="publisheDate"  type="text" class="timetextymdhms"  value="${article.publisheDate}"/><br>
                	<p class="previewText1" style="float:left;float: left;color: red;"><span>需要手动调整文章发布时间时输入！</span></p>
			</div>
		</div>
		<div class="form-actions">
			<input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>