{extend name="admin/base" /} {block name="resources"/}
<script type="text/javascript" charset="utf-8"
	src="ADMIN_JS/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="ADMIN_JS/ueditor/ueditor.all.js"></script>
<style>
.media {
	max-width: 800px;
	margin: 0 auto;
}

.media:after {
	content: "";
	display: table;
	clear: both;
}

.img-text {
	display: block;
	width: 100%;
	line-height: 120px;
	background: #ececec;
	text-align: center;
	font-size: 22px;
	color: #c0c0c0;
	font-weight: 400;
}

.media-left {
	width: 30%;
	margin-right: 2%;
}

.media-right {
	width: 60%;
	background: #f8f8f8;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	padding: 15px;
}

.media-left, .media-right {
	float: left;
}

.media-border {
	padding: 10px;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
}

.media-border-title {
	padding: 10px;
	border: 1px solid #d3d3d3;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: relative;
}

.media-body {
	padding: 10px;
	border-bottom: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	position: relative;
}

.media-body:after {
	content: "";
	display: table;
	clear: both;
}

.media-body p {
	width: 65%;
	float: left;
}

.media-body .media-body-div {
	width: 30%;
	float: right;
}

.media-body .media-body-div span {
	font-size: 16px;
	line-height: 62px;
}

.media-body .media-plus {
	font-size: 22px;
	line-height: 62px;
	text-align: center;
	display: block;
}

.actions{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #e5e5e5;
	opacity: 0.4;
	color: #fff;
	text-align: right;
	z-index: 49;
	display: none;
}

.actions span{
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 0 5px;
	color: #fff;
	z-index: 50;
	margin-left: 5px;
}

.edit, .del {
	cursor: pointer;
}
.check-box{
	width: 10%;
	float: left;
}
.editting{display:none;}
.action .editting{display:block;color:red;text-align:right;}
</style>
{/block} {block name="right_tab"} {/block} {block name="main"}
<div class="set-style">
	<dl>
		<dt>消息类型:</dt>
		<dd>
			<label class="check-box"><input type="radio" name="type" id="type1" value="1">&nbsp;文本</label>
			<label class="check-box"><input type="radio" name="type" id="type2" value="2">&nbsp;单图文</label>
			<label class="check-box"><input type="radio" name="type" id="type3" value="3"  checked>&nbsp;多图文</label>
		</dd>
	</dl>
</div>
<div class="set-style type1" style="display: none;">
	<dl>
		<dt>描述:</dt>
		<dd>
			<p>
				<textarea id="type1_desc"></textarea>
			</p>
			<p class="error">请输入模块描述</p>
		</dd>
	</dl>
</div>
<div class="type2 media"  style="display: none;">
	<div class="media-left">
		<div class="media-border">
			<h5 class="type-title">标题</h5>
			<div style="text-align:center;">
				<img class="type2-img" src="" style="max-width:218px;max-height:120px;display:none;">
				<span class="img-text">封面图片</span>
			</div>
		</div>
	</div>
	<div class="media-right">
		<p> <span style="color:red;"> * </span> 标题 </p>
		<input style="width: 98%;" type="text" id="title" value="">
		<p>作者（选填）</p>
		<input style="width: 98%;" type="text" id="author" value="">
		<p>
			<span style="color:red;"> *</span> 封面 
		</p>
		<div>
			<div class="class-logo" style="background: #f8f8f8;">
				<p style="width: 270px; height: 150px;">
					<img id="imgLogo" src="" style="max-width:270px;max-height:150px;">
				</p>
			</div>
			<p class="hint">
				<span style="color: orange;">建议使用宽900像素-高500像素的图片。</span>
			</p>
			<input type="hidden" id="type2-img-hidden" value=""/>
			<div class="ncsc-upload-btn">
				<a href="javascript:void(0);"><span> <input
						hidefocus="true" size="1" class="input-file" name="file_upload"
						id="uploadImg" nc_type="change_store_label" type="file"
						onchange="imgUpload(this, 'type2-img', 'type2-img-hidden');"> <input type="hidden"
						id="Logo" value=""/></span>
				<p>
						<i class="fa fa-upload"></i>上传图片
					</p> </a>
			</div>
		</div>
		<p></p>
		<p>
			<input type="checkbox" id="show_cover_pic"
				style="margin-top: -2px; margin-right: 5px;"><label
				for="show_cover_pic"
				style="font-weight: normal; display: inline-block;">封面图片显示在正文中</label>
		</p>
		<p><span style="color:red;"> *</span> 摘要</p>
		<p>
			<textarea id="desc" style="width: 98%;"></textarea>
		</p>
		<p class="error">请输入模块描述</p>
		<p><span style="color:red;"> *</span> 正文</p>
		<div class="controls" id="discripContainer">
			<textarea id="tareaProductDiscrip1" name="discripArea"
				style="height: 100px; width: 100%; display: none;"></textarea>
			<script id="editor" type="text/plain"
				style="width: 100%; height: 100px;"></script>
			<span class="help-inline" style="display: none; color: red;">请输入商品描述</span>
		</div>
		<p></p>
		<p>原文链接</p>
		<input style="width: 98%;" type="text" id="content_source_url"
			value="">
	</div>
</div>
<div class="type3 media">
	<div class="media-left">
		<div class="media-border-title js-action action" onmouseover="show(this)"
			onmouseout="hide(this)" onclick="edit(this, 0)">
			<div style="position: relative;text-align:center;">
				<img class="type3-img-0" src="" style="max-width:218px;max-height:120px;display:none;">
				<span class="img-text">封面图片</span>
				<h5 class="type3-title-0" 
					style="position: absolute; bottom: 0; width: 100%; background: #bbb; color: #fff; margin: 0; padding: 5px 0;text-align:left;">标题</h5>
			</div>
			<div class="actions"><span class="edit">编辑</span></div>
			<span class="editting">编辑中</span>
			<input type="hidden" name="hidden0" id="title0" value="">
			<input type="hidden" name="hidden0" id="author0" value="">
			<input type="hidden" name="hidden0" id="cover0" value="">
			<input type="hidden" name="hidden0" id="show_cover_pic0" value="0">
			<input type="hidden" name="hidden0" id="summary0" value="">
			<input type="hidden" name="hidden0" id="content0" value="">
			<input type="hidden" name="hidden0" id="content_source_url0" value="">
		</div>
		<div class="media-body js-action" onmouseover="show(this)"
			onmouseout="hide(this)" onclick="edit(this, 1)">
			<p class="type3-title-1">标题</p>
			<div class="media-body-div">
				<img class="type3-img-1" src="" style="max-width:62px;max-height:62px;display:none;">
				<span class="img-text">缩略图</span>
			</div>
			<div class="actions"><span class="edit">编辑</span></div>
			<span class="editting">编辑中</span>
			<input type="hidden" name="hidden1" id="title1" value="">
			<input type="hidden" name="hidden1" id="author1" value="">
			<input type="hidden" name="hidden1" id="cover1" value="">
			<input type="hidden" name="hidden1" id="show_cover_pic1" value="0">
			<input type="hidden" name="hidden1" id="summary1" value="">
			<input type="hidden" name="hidden1" id="content1" value="">
			<input type="hidden" name="hidden1" id="content_source_url1" value="">
		</div>
		<div class="media-body">
			<span class="media-plus"><a href="javascript:;"><i
					class="fa fa-plus"></i></a></span>
		</div>
	</div>
	<div class="media-right" id="dir" dir="0">
		<p><span style="color:red;"> * </span>标题</p>
		<input style="width: 98%;" type="text" id="form_title" value=""
			onchange="changeElement('title')">
		<p>
		<p>作者</p>
		<input style="width: 98%;" type="text" id="form_author" value=""
			onchange="changeElement('author')">
		<p><span style="color:red;"> * </span>
			封面<span></span>
		</p>
		<div>
			<div class="class-logo" style="background: #f8f8f8;">
				<p style="width: 270px; height: 150px;">
					<img id="imgLogo1" src=""  style="max-width:270px;max-height:150px;">
				</p>
			</div>
			<p class="hint">
				<span style="color: orange;">建议使用宽900像素-高500像素的图片。</span>
			</p>
			<div class="ncsc-upload-btn">
				<a href="javascript:void(0);"><span> <input
						hidefocus="true" size="1" class="input-file" name="file_upload"
						id="uploadImg1" nc_type="change_store_label" type="file"
						onchange="imgUpload(this, 'type3-img-', 'cover');"> <input type="hidden"
						id="Logo1" value=""/></span>
				<p>
						<i class="fa fa-upload"></i>上传图片
					</p> </a>
			</div>
		</div>
		<p></p>
		<p>
			<input type="checkbox" id="form_show_cover_pic" onchange="changeElement('show_cover_pic')"
				style="margin-top: -2px; margin-right: 5px;"><label
				for="show_cover_pic"
				style="font-weight: normal; display: inline-block;">封面图片显示在正文中</label>
		</p>
		<p><span style="color:red;"> * </span>摘要</p>
		<p>
			<textarea id="form_summary" style="width: 98%;" onchange="changeElement('summary')"></textarea>
		</p>
		<p class="error">请输入模块描述</p>
		<p><span style="color:red;"> * </span>正文</p>
		<div class="controls" id="discripContainer">
			<textarea id="tareaProductDiscrip" name="discripArea"
				style="height: 100px; width: 100%; display: none; "></textarea>
			<script id="editor1" type="text/plain"
				style="width: 100%; height: 100px;"></script>
			<span class="help-inline" style="display: none; color: red;">请输入商品描述</span>
		</div>
		<p></p>
		<p>原文链接</p>
		<input style="width: 98%;" type="text" id="form_content_source_url"
			value="" onchange="changeElement('content_source_url')">
	</div>
</div>

<button class="edit_button" onclick="save();">提交</button>
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>


<script>
UE.getEditor('editor1').addListener("selectionchange",function(){
	changeElement('content');
});
function changeElement(name){
	var dir = $("#dir").attr('dir');
	if(name == 'show_cover_pic'){
		if($("#form_"+name).prop("checked")){
			var form_show_cover_pic = 1;
		}else{
			var form_show_cover_pic = 0;
		}
		$("#"+name+dir).val(form_show_cover_pic);
	}else if(name == 'content'){
		var content = UE.getEditor('editor1').getContent();
		$("#"+name+dir).val(content);
	}else{
		$("#"+name+dir).val($("#form_"+name).val());
	}
	if(name == 'title'){
		if($("#form_"+name).val() == ''){
			$(".type3-title-"+dir).html('标题');
		}else{
			$(".type3-title-"+dir).html($("#form_"+name).val());
		}
	}
}
function edit(event, num){
	$(".js-action").removeClass('action');
	$(event).addClass('action');
	$("#dir").attr('dir',num);
	//获取 隐藏域中的值
	var title = $("#title"+num).val();
	var author = $("#author"+num).val();
	var cover = $("#cover"+num).val();
	var show_cover_pic = $("#show_cover_pic"+num).val();
	var summary = $("#summary"+num).val();
	var content = $("#content"+num).val();
	var content_source_url = $("#content_source_url"+num).val();
	//把 form 的值填进去
	$("#form_title").val(title);
	$("#form_author").val(author);
	$("#imgLogo1").attr('src','');	
	if(cover != ""){
		$("#imgLogo1").attr('src','__UPLOAD__/'+cover);		
	}
	if(show_cover_pic == 1){
		$("#form_show_cover_pic").prop("checked","checked");
	}else{
		$("#form_show_cover_pic").prop("checked","");
	}
	
	$("#form_summary").val(summary);
	UE.getEditor('editor1').setContent(content);
	$("#form_content_source_url").val(content_source_url);
}
function save(){
	var type = $("input[type='radio'][name='type']:checked").val();
	if(type == 1){
		//文本提交
		var title = $("#type1_desc").val();
		var content = '';
		if(title == ''){
			showMessage('error', '内容不能为空');
			return false;
		}
	}else if(type == 2){
		// 单图文 提交
		var title = $("#title").val();
		var author = $("#author").val();
		var cover = $("#type2-img-hidden").val();
		if($("#show_cover_pic").prop("checked")){
			var show_cover_pic = 1;
		}else{
			var show_cover_pic = 0;
		}
		var summary = $("#desc").val();
		var content = UE.getEditor('editor').getContent();
		var content_source_url = $("#content_source_url").val();
		var contents = title+'`|`'+author+'`|`'+cover+'`|`'+show_cover_pic+'`|`'+summary+'`|`'+content+'`|`'+content_source_url;
		if(title == ''){
			showMessage('error', '标题不能为空');
			return false;
		}else if(cover == ''){
			showMessage('error', '请上传封面图片');
			return false;
		}else if(summary == ''){
			showMessage('error', '摘要不能为空');
			return false;
		}else if(content == ''){
			showMessage('error', '正文不能为空');
			return false;
		}
// 		return false;
	}else if(type == 3){
		// 多图文提交
		var title = $("#title0").val();
		var contents = '';
		var num = $(".js-action").length;
		for(var i=0; i<num; i++){
			var content_new = '';
			$("input[name='hidden"+i+"']").each(function(){
				if($("input[name='hidden"+i+"']").eq(0).val() == ""){
					showMessage('error', '第'+(i+1)+'篇文章的标题不能为空');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(2).val() == ""){
					showMessage('error', '第'+(i+1)+'篇文章的封面图片不能为空');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(4).val() == ""){
					showMessage('error', '第'+(i+1)+'篇文章的摘要不能为空');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(5).val() == ""){
					showMessage('error', '第'+(i+1)+'篇文章的正文不能为空');
					return false;
				}else{
					content_new = content_new +'`|`'+ $(this).val();
				}
			});
			content_new = content_new.substring(3);
			contents = contents +'`$`'+ content_new;
		}
		contents = contents.substring(3);
	}else{
		showMessage('error', '请选择消息类型');
		return false;
	}
	//类型,标题,content
	//content = 标题,作者,封面图片,显示在正文,摘要,正文,链接地址;标题,作者,封面图片,显示在正文,摘要,正文,链接地址
	$.ajax({
			type : "post",
			url : "ADMIN_MAIN/Wchat/addMedia",
			async : true,
			data : {
				"type" : type, "title" : title, "content" : contents
			},
			success : function(data) {
				if(data['code'] > 0){
					showMessage('success', data['message'], "ADMIN_MAIN/Wchat/materialMessage");
				}else{
					showMessage('error', data['message']);
				}
			}
	});
}

	$(".media-plus").click(
					function() {
						var num = $(this).parents(".media-left").find(
								".media-body").length;
						if (num > 7) {
							showMessage('error', '最多只可以加入8条图文消息。');
							return false;
						}
						var html = '';
							html += '<div class="media-body js-action" onmouseover="show(this)" onmouseout="hide(this)" onclick="edit(this, '+num+')">';
							html += '<p class="type3-title-'+num+'">标题</p><div class="media-body-div"><img class="type3-img-'+num+'" src="" style="max-width:62px;max-height:62px;display:none;"><span class="img-text">缩略图</span></div>';
							html += '<div class="actions"><span class="edit">编辑</span><span class="del" onclick="removeMedia(this)">删除</span></div>';
							html += '<span class="editting">编辑中</span>';
							html += '<input type="hidden" name="hidden'+num+'" id="title'+num+'" value="">';
							html += '<input type="hidden" name="hidden'+num+'" id="author'+num+'" value="">';
							html += '<input type="hidden" name="hidden'+num+'" id="cover'+num+'" value="">';
							html += '<input type="hidden" name="hidden'+num+'" id="show_cover_pic'+num+'" value="0">';
							html += '<input type="hidden" name="hidden'+num+'" id="summary'+num+'" value="">';
							html += '<input type="hidden" name="hidden'+num+'" id="content'+num+'" value="">';
							html += '<input type="hidden" name="hidden'+num+'" id="content_source_url'+num+'" value="">';
							html += '</div>';
						$(this).parents(".media-left").find(".media-body").eq(num - 2).after(html);
					});


function removeMedia(event){
	$(event).parents(".media-body").remove();
}
	/**
	 *图片上传
	 */
	function imgUpload(event, imgsrc, imghidden) {
		if(imghidden == 'cover'){
			var dir = $("#dir").attr('dir');
			imgsrc = imgsrc+dir;
			imghidden = imghidden+dir;
		}
		var fileid = $(event).attr("id");
		var str = $(event).next().attr("id");
		var url = 'UPLOAD_URL';
		var path = '__UPLOAD__';
		var result='';
		var imgpath = "#img"+str;
		var imgval = "#"+str;

		var data = { 'file_path' : UPLOADCOMMON };
		uploadFile(fileid,data,function(res){
			if(res.code){
				$("."+imgsrc).attr("src","__UPLOAD__/"+res.data);
				$("."+imgsrc).show();
				$("."+imgsrc).next(".img-text").hide();
				$("#"+imghidden).val(res.data);
				$(imgpath).attr("src","__UPLOAD__/"+res.data);
				$(imgval).val(res.data);
				showTip(res.message,"success");
			}else{
				showTip(res.message,"error");
			}
		});
	}
	$("#title").change(function(){
		if($(this).val() == ''){
			$(this).parents(".media").find("h5.type-title").html('标题');
		}else{
			$(this).parents(".media").find("h5.type-title").html($(this).val());
		}
	});
</script>
<script>
/**
 * 点击消息类型  切换表单
*/
$("input[type=radio][name='type']").click(function(){
	var type = $(this).val();
	$(".type1").hide();
	$(".type2").hide();
	$(".type3").hide();
	$(".type"+type).show();
});
var ue = UE.getEditor('editor');
var ue1 = UE.getEditor('editor1');
function show(event) {
	$(event).children('.actions').show();
}
function hide(event) {
	$(event).children('.actions').hide();
}

</script>
{/block}