{extend name="adminblue/base" /}
{block name="resources"/}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/defau.css">
<script type="text/javascript" charset="utf-8" src="ADMIN_JS/ueditor/ueditor.config.common.js"></script>
<script type="text/javascript" charset="utf-8" src="ADMIN_JS/ueditor/ueditor.all.common.js"></script>
<style>
.media {max-width: 800px;margin-left:140px}
.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;overflow: hidden;text-overflow: ellipsis;}
.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;}
.set-style dl dt { width: 11%;}
.type1,.type2,.type3{display:none;}
</style>
{/block}
{block name="main"}
<div class="set-style" style="display:none;">
	<dl>
		<dt>消息类型:</dt>
		<dd>
			<label class="radio inline normal"><i class="radio-common"><input type="radio" name="type" id="type1" value="1"></i>&nbsp;文本</label>
			<label class="radio inline normal"><i class="radio-common"><input type="radio" name="type" id="type2" value="2"></i>&nbsp;单图文</label>
			<label class="radio inline normal"><i class="radio-common selected"><input type="radio" name="type" id="type3" value="3" checked="checked"></i>&nbsp;多图文</label>
		</dd>
	</dl>
</div>
<div class="set-style type1" {if condition="$type eq 1"}style="display:block;"{/if}>
	<dl>
		<dt>描述:</dt>
		<dd>
			<p>
				<textarea id="type1_desc" class="textarea-common"></textarea>
			</p>
			<p class="error">请输入模块描述</p>
		</dd>
	</dl>
</div>
<div class="type2 media" {if condition="$type eq 2"}style="display:block;"{/if}>
	<div class="media-left">
		<div class="media-border">
			<h5 class="type-title" style="overflow: hidden;text-overflow: ellipsis;">标题</h5>
			<div style="text-align:center;">
				<img class="type2-img" 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" class="input-common">
		<p></p>
		<p>作者（选填）</p>
		<input style="width: 98%;" type="text" id="author" class="input-common">
		<p><span style="color:red;"> *</span> 封面</p>
		<div>
			<div class="class-logo" style="background: #f8f8f8;">
				<p style="width: 270px; height: 150px;">
					<img id="imgLogo" 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" />
			<div class="upload-btn">
				<span>
					<input class="input-file" name="file_upload" id="uploadImg" type="file" onchange="imgUpload(this, 'type2-img', 'type2-img-hidden');">
					<input type="hidden" id="Logo"/>
				</span>
				<p><i class="fa fa-upload"></i>上传图片</p>
			</div>
		</div>
		<p></p>
		<p>
			<i class="checkbox-common"><input type="checkbox" id="show_cover_pic" style="margin-top: -2px; margin-right: 5px;"></i>
			<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%;" class="textarea-common"></textarea>
		</p>
		<p class="error">请输入模块描述</p>
		<p><span style="color:red;"> *</span> 正文</p>
		<div class="controls" id="discripContainer">
			<textarea id="tareaProductDiscrip1" name="discripArea" class="textarea-common" style=" 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" class="input-common">
	</div>
</div>
<div class="type3 media" {if condition="$type eq 3"}style="display:block;"{/if}>
	<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" 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;overflow: hidden;text-overflow: ellipsis;">标题</h5>
			</div>
			<div class="actions"><span class="edit">编辑</span></div>
			<span class="editting">编辑中</span>
			<input type="hidden" name="hidden0" id="title0">
			<input type="hidden" name="hidden0" id="author0">
			<input type="hidden" name="hidden0" id="cover0">
			<input type="hidden" name="hidden0" id="show_cover_pic0" value="0">
			<input type="hidden" name="hidden0" id="summary0">
			<input type="hidden" name="hidden0" id="content0">
			<input type="hidden" name="hidden0" id="content_source_url0">
		</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" 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">
			<input type="hidden" name="hidden1" id="author1">
			<input type="hidden" name="hidden1" id="cover1">
			<input type="hidden" name="hidden1" id="show_cover_pic1" value="0">
			<input type="hidden" name="hidden1" id="summary1">
			<input type="hidden" name="hidden1" id="content1">
			<input type="hidden" name="hidden1" id="content_source_url1">
		</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" onchange="changeElement('title')" class="input-common">
		<p>
		<p>作者</p>
		<input style="width: 98%;" type="text" id="form_author" onchange="changeElement('author')" class="input-common">
		<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" style="max-width:270px;max-height:150px;">
				</p>
			</div>
			<p class="hint">
				<span style="color: orange;">建议使用宽900像素-高500像素的图片。</span>
			</p>
			<div class="upload-btn">
				<span>
					<input class="input-file" name="file_upload" id="uploadImg1" type="file" onchange="imgUpload(this, 'type3-img-', 'cover');">
					<input type="hidden" id="Logo1"/>
				</span>
				<p><i class="fa fa-upload"></i>上传图片</p>
			</div>
		</div>
		<p></p>
		<p>
			<i class="checkbox-common"><input type="checkbox" id="form_show_cover_pic" onchange="changeElement('show_cover_pic')" style="margin-top: -2px; margin-right: 5px;"></i>
			<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" class="textarea-common" 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" class="input-common" style=" 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%;" class="input-common" type="text" id="form_content_source_url" onchange="changeElement('content_source_url')">
	</div>
</div>
<div class="set-style">
	<dl>
		<dt></dt>
		<dd>
			<button class="btn-common btn-big" onclick="save();">保存</button>
			<a href="{:__URL('ADMIN_MAIN/wchat/materialmessage?type='.$type)}">
			<button class="btn-common-cancle btn-big" >返回</button>
			</a>
		</dd>
	</dl>
</div>
<!-- 存放类型id隐藏域 -->
<input type="hidden" id="type" value="{$type}"/>
<!-- 用 ，加载数据-->
<script src="ADMIN_JS/art_dialog.source.js"></script>
<script src="ADMIN_JS/iframe_tools.source.js"></script>
<!-- 我的图片 -->
<script src="ADMIN_JS/material_managedialog.js"></script>
<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{
			$("#form_"+name).val($("#form_"+name).val().substr(0,70));
			$(".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',__IMG(cover));
	}
	if(show_cover_pic == 1){
		$("#form_show_cover_pic").prop("checked",true).parent().addClass('selected');
	}else{
		$("#form_show_cover_pic").prop("checked",false).parent().removeClass('selected');
	}
	
	$("#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();
	var type = $('#type').val();
	if(type == 1){
		//文本提交
		var title = $("#type1_desc").val();
		var content = '';
		if(title == ''){
			showTip('内容不能为空','warning');
			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 == ''){
			showTip('请输入标题','warning');
			return false;
		}else if(cover == ''){
			showTip('请上传封面图片','warning');
			return false;
		}else if(summary == ''){
			showTip('请输入摘要','warning');
			return false;
		}else if(content == ''){
			showTip('请输入正文内容','warning');
			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() == ""){
					showTip('请输入'+'第'+(i+1)+'篇文章的标题','warning');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(2).val() == ""){
					showTip('请上传'+'第'+(i+1)+'篇文章的封面图片','warning');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(4).val() == ""){
					showTip('请输入'+'第'+(i+1)+'篇文章的摘要','warning');
					return false;
				}else if($("input[name='hidden"+i+"']").eq(5).val() == ""){
					showTip('请输入'+'第'+(i+1)+'篇文章的正文','warning');
					return false;
				}else{
					content_new = content_new +'`|`'+ $(this).val();
				}
			});
			content_new = content_new.substring(3);
			contents = contents +'`$`'+ content_new;
		}
		contents = contents.substring(3);
	}else{
		showTip('请选择消息类型','warning');
		return false;
	}
	//类型,标题,content
	//content = 标题,作者,封面图片,显示在正文,摘要,正文,链接地址;标题,作者,封面图片,显示在正文,摘要,正文,链接地址
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/wchat/addmedia')}",
		data : { "type" : type, "title" : title, "content" : contents },
		success : function(data) {
			if(data['code'] > 0){
				showTip(data['message'],'success');
				location.href = "{:__URL('ADMIN_MAIN/wchat/materialmessage?type='.$type)}";
			}else{
				showTip(data['message'],'error');
			}
		}
	});
}

$(".media-plus").click(function() {
	var num = $(this).parents(".media-left").find(".media-body").length;
	if (num > 7) {
		showTip('最多只可以加入8条图文消息。','warning');
		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+'">';
	html += '<input type="hidden" name="hidden'+num+'" id="author'+num+'">';
	html += '<input type="hidden" name="hidden'+num+'" id="cover'+num+'">';
	html += '<input type="hidden" name="hidden'+num+'" id="show_cover_pic'+num+'" value="0">';
	html += '<input type="hidden" name="hidden'+num+'" id="summary'+num+'">';
	html += '<input type="hidden" name="hidden'+num+'" id="content'+num+'">';
	html += '<input type="hidden" name="hidden'+num+'" id="content_source_url'+num+'">';
	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",__IMG(res.data));
			$("."+imgsrc).show();
			$("."+imgsrc).next(".img-text").hide();
			$("#"+imghidden).val(res.data);
			$(imgpath).attr("src",__IMG(res.data));
			$(imgval).val(res.data);
			showTip(res.message,"success");
		}else{
			showTip(res.message,"error");
		}
	});
}

$("#title").keyup(function(){
	
	if($(this).val() == ''){
		$(this).parents(".media").find("h5.type-title").html('标题');
	}else{
		$(this).val($(this).val().substr(0,70));
		$(this).parents(".media").find("h5.type-title").html($(this).val());
	}
});

$("#author").keyup(function(){
	$(this).val($(this).val().substr(0,45));
});

//回调显示图片
function PopUpCallBack(id, src) {
	var idArr, srcArr;
	if (id.indexOf(",")) {
		idArr = id.split(',');
		srcArr = src.split(',');
	} else {
		idArr = new Array(id);
		srcArr = new Array(src);
	}
	//商品详情
	for (var i = 0; i < srcArr.length; i++) {
		var description = "<img src='"+__IMG(srcArr[i])+"' />";
		if($("input[name = type]:checked").val() == 3){
			ue1.setContent(description, true);
		}else if($("input[name = type]:checked").val() == 2){
			ue.setContent(description, true);
		}
	}
}
//点击消息类型  切换表单
$("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',{scaleEnabled:false});
var ue1 = UE.getEditor('editor1',{scaleEnabled:false});
function show(event) {
	$(event).children('.actions').show();
}
function hide(event) {
	$(event).children('.actions').hide();
}
</script>
{/block}