<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<!-- bootstrap 3.0.2 -->
<link href="<c:url value='/styles/lib/bootstrap.min.css'/>"
	rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="<c:url value='/styles/lib/font-awesome.min.css'/>"
	rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href='<c:url value='/styles/lib/ionicons.min.css' />'
	rel="stylesheet" type="text/css" />
<!-- DATA TABLES -->
<link
	href="<c:url value='/styles/lib/datatables/dataTables.bootstrap.css' />"
	rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="<c:url value='/styles/AdminLTE.css'/>" rel="stylesheet"
	type="text/css" />

<script src="${ctx }/scripts/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx }/scripts/swfupload-jquery-plugin-master/src/jquery.swfupload.js"></script>
<script type="text/javascript" src="${ctx }/scripts/swfupload-jquery-plugin-master/vendor/swfupload/swfupload.js"></script>
<script type="text/javascript" src="<c:url value='/scripts/kindeditor/kindeditor-min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/kindeditor/lang/zh_CN.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/loading/jquery.blockUI.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/loading/loading.js'/>"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	$(document).ready(function() {
		/* var _orderState = $("#_orderStates").val();
		$("#orderStates").val(_orderState); */
		
		$("input[name='replyContentType']").click(function(){
			if($(this).val() === '1'){
				$("#singlecontainer").show();
				$("#metacontainer").hide();
			} else {
				$("#singlecontainer").hide();
				$("#metacontainer").show();
			}
		});
		
		$("input:checked[name='replyContentType']").trigger('click');
		var delHandler = function(){ //删除图文
			$(this).parent().remove();
		};
		
		$("#metadataAddBtnId").click(function(){
			var IMAGE_SERVER=$("#IMAGE_SERVER").val();
			var id = parseInt(Math.random()*100000);
			$('<div id="c'+id+'"><input type="file" name="metaFiles" id="'+id+'"/>标题：<input type="text" name="metaFileTitles">&nbsp;&nbsp;备注<input type="text" name="metaFileRemarks">&nbsp;&nbsp;序号<input type="text" size="7" name="metaFileSeqs">&nbsp;&nbsp;目标地址：<input type="text" name="metaFileTargetUrls">&nbsp;&nbsp;<a id="del'+id+'" href="#">删除</a><br />')
				.appendTo('#pics');
			$(("#del"+id)).click(delHandler);
			var uploadSetting={
					upload_url: "<c:url value='/uploadTemplate/upload' />",
					file_size_limit : "10240",
					file_types : "*.jpg;*.png",
					file_post_name: "Filedata",  
					file_types_description : "图片文件",
					file_upload_limit : "0",
					button_text:'上传图片',
					flash_url : "${ctx}/scripts/swfupload-jquery-plugin-master/vendor/swfupload/swfupload.swf",
					button_image_url : '${ctx}/scripts/swfupload-jquery-plugin-master/vendor/swfupload/XPButtonUploadText2_61x22.png',
					button_width : 61,
					button_height : 22,
					button_placeholder_id : id,
					debug: false
				};
			$(("#c"+id)).swfupload(uploadSetting).bind('uploadSuccess', function(event, file, serverData){
				$("input[name='metaFileUrls']",$(this)).remove();
				//alert(IMAGE_SERVER+($.parseJSON(serverData).preview));
				$(this).append("<input type='hidden' name='metaFileUrls' value='"+ ($.parseJSON(serverData).url)+"'/>");
				$(this).append('<img src="'+($.parseJSON(serverData).preview)+'">');
			})
			.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
				$(this).swfupload('startUpload');
			})
			.bind('uploadError', function(event, file, errorCode, message){
				alert('上传失败，'+message);
			});;
		});
		
	});
	
	
	function removeScPicandtextdetails(detailid){
		var contextPath =$("#contextPath").val();
		if(confirm('<fmt:message key='button.delete'/>?')){
			showBlock();
			$.ajax({
				url: contextPath+"/estate/msgTemplate/removeScPicandtextdetailstemp",
				type:"post",
				data: {detailId:detailid},
				dataType:"json",
				success:function(data){
					if(data.errcode==200){
						alert("删除成功");
						$("#div"+detailid).remove();
					}else{
						alert('删除失败');
					}
					hideBlock();
				},
				error:function(data){
					alert('服务器异常，删除失败');
					hideBlock();
				}
			});
		}
	}
</script>
<style type="text/css">
.tb_tit {
	text-align: right;
	font-weight: bold;
	width: 20%;
}

.tb_con {
	text-align: left;
	width: 80%;
}

.tb_cen {
	text-align: center;
}
</style>
</head>
<body>
<input type="hidden" value="${ctx}" id="contextPath"> 
<input type="hidden" value="${IMAGE_SERVER}" id="IMAGE_SERVER"> 
	<section class="">
		<div class="row">
			<div class="col-xs-12">
				<div class="boxlist">
					<form:form modelAttribute="replykeywords" action="${ctx}/estate/msgTemplate/save">
						<input type="hidden" name="replyKeywordsId" value="${keyword.replyKeywordsId }">
						<input type="hidden" name="state" value="1">
						<table class="table table-bordered table-hover">
							<tr>
								<td class="tb_tit">微信公众帐号</td>
								<td>
								<select id="developId" name="developId">
									<c:forEach items="${publicnos}" var="no">
										<option value="${no.developId}" <c:if test="${keyword.developId==no.developId }">selected="selected"</c:if>>${no.name}</option>	
									</c:forEach>
								</select> 
								</td>
								<td class="tb_tit">关键字</td>
								<td><input class="wx_ipt" name="name" value="${keyword.name}" /></td>
							</tr>
							<tr>
								<td class="tb_tit">类型</td>
								<td >
									<input type="radio" name="replyContentType" value="1" <c:if test="${keyword.replyContentType==1 }">checked="checked"</c:if> >文字
									<input type="radio" name="replyContentType" value="2" <c:if test="${keyword.replyContentType==2 }">checked="checked"</c:if> >图文
								</td>
								<td class="tb_tit">备注</td>
								<td colspan="3"><input class="wx_ipt" name="remark" value="${keyword.remark}" /></td>
							</tr>
							<tr id="singlecontainer" style="display: 'none';">
								<td class="tb_tit">内容</td>
								<td colspan="3">
									<textarea name="text" rows="5" cols="80">${scTextpicvoicetemp.text }</textarea>
								</td>
							</tr>
							<tr id="metacontainer" style="display: none;">
								<td class="tb_tit">操作</td>
								<td colspan="3"><input type="button" class="btn btn-success"
									id="metadataAddBtnId" value="增加图片">
								</td>
							</tr>
							<tr>
								<td colspan="4">
									<div id="pics">
										<c:forEach items="${scPicandtextdetailstemps }" var="dobj">
											<div id="div${dobj.picAndTextDetailsTempId}">
												标题：<input class="wx_ipt" type="text" name="metaFileTitles"
													value="${dobj.title }" readonly="readonly">
												&nbsp;&nbsp;备注<input class="wx_ipt" type="text"
													name="metaFileRemarks" value="${dobj.description }"
													readonly="readonly"> &nbsp;&nbsp;序号<input
													class="wx_ipt" type="text" name="metaFileSeqs"
													value="${dobj.sequence }" readonly="readonly">
												&nbsp;&nbsp;目标地址：<input class="wx_ipt" type="text"
													name="metaFileTargetUrls" value="${dobj.url }"
													readonly="readonly"> <input type='hidden'
													name='metaFileUrls' value="${dobj.picUrl }"> <img
													height="128" width="128"
													src="${IMAGE_SERVER}${dobj.picUrl }">
												&nbsp;&nbsp;
												<button class="btn btn-danger" type="button" onclick="removeScPicandtextdetails('${dobj.picAndTextDetailsTempId}')">删除</button>
												<br />
											</div>
										</c:forEach>
									</div></td>
							</tr>
							<tr>
								<td colspan="4" class="tb_cen"><button
										class="btn btn-primary" type="submit">保存</button>
									<button type="button" class="btn btn-back"
										onclick="javascript:history.go(-1)">返回</button></td>
							</tr>
						</table>
					</form:form>
				</div>
			</div>
		</div>
	</section>
</body>
</html>