{template 'common/header'}
<script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
<link href="{MODULE_URL}site/css/jquery.contextMenu.css" rel="stylesheet">
<link href="{MODULE_URL}site/css/poster.css?sa=3323" rel="stylesheet">
<ul class="we7-page-tab">
	<li {if $op == 'display'}class="active"{/if}><a href="{php echo $this->createWebUrl($_GPC['do'], array('op'=>'display','version_id'=>0));}">证书模板列表</a></li>
	<li {if $tp == '1'}class="active"{/if}><a href="{php echo $this->createWebUrl($_GPC['do'], array('op'=>'edit','tp'=>1,'version_id'=>0));}">添加会员证书模板</a></li>
	{if $tp == '2'}
	<li class="active"><a href="#">鉴定证书模板</a></li>
	{/if}
</ul>
<style>

#zmui_poster{width:{$size[0]}px;height:{$size[1]}px;}
.bg{width:{$size[0]}px;height:{$size[1]}px;}
.form-horizontal .form-group {margin-right: 0px;margin-left: 0px;margin-bottom: 15px;}
.row.row-fix .col-sm-8{width:100%;padding-right:15px!important;}

{if $tp=='1'}
#zmui_poster .drag[type=thumb] {width: 50px;height: 70px;}
{/if}


</style>
<div class="main">
	<form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
		<input type="hidden" name="id" value="{$certificate['id']}" />
		<div class='panel panel-default'>
			<div class='panel-heading'>
				图文证书模板设置
			</div>
			<div class='panel-body'>
				<div class="form-group">
					<label class="col-xs-12 col-sm-1 col-md-1 col-lg-1 control-label">模板名称</label>
					<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
						<input type="text" id="title" name="certificate[title]" class="form-control" value="{$certificate['title']}"  />
					</div>
					<label class="col-xs-12 col-sm-1 col-md-1 col-lg-1 control-label">状态</label>
					<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
						<select class="form-control input-medium" name="certificate[status]">
							<option value="0" {if '0'==(int)$certificate['status']}selected{/if}>下架</option>
							<option value="1" {if '1'==$certificate['status']}selected{/if}>上架</option>
						</select>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:0px;padding-right:0px;"> 
					<div class="col-xs-12 col-sm-7 col-md-7 col-lg-7" id="bgtd" style="padding-left:0px;padding-bottom:0px;padding-right:0px;width:{php echo $size[0]+8}px">
					<div class='panel panel-primary' style="margin-bottom: 0px;">
					<div class='panel-heading'>模板设计</div>
					 <div class='panel-body' style="min-height:114px;padding: 3px;">
							<div id='zmui_poster'>
								{if !empty($certificate['bg'])}
									<img src='{php echo tomedia($certificate["bg"])}' class='bg'/>
								{/if}
								{if !empty($certificate['sets']['template'])}
								{loop $certificate['sets']['template'] $key $d}
									<div class="drag" type="{$d['type']}" index="{php echo $key+1}" style="zindex:{php echo $key+1};left:{$d['left']};top:{$d['top']};
										width:{$d['width']};height:{$d['height']}" 
										src="{$d['src']}" size="{$d['size']}" color="{$d['color']}" font="{$d['font']}" data-val="{$d['val']}" data-qrt='{$d["qrt"]}' data-title="{$d['title']}"> 
									{if $d['type']=='img'}
										<img src="{php echo empty($d['src'])? MODULE_URL.'site/image/n.gif':tomedia($d['src'])}" />
									{elseif $d['type']=='thumb'}
										<img src="{php echo empty($d['src'])? MODULE_URL.'site/image/head.jpg':tomedia($d['src'])}" />
									{elseif $d['type']=='avatar'}
										<img src="{php echo empty($d['src'])? MODULE_URL.'site/image/head.jpg':tomedia($d['src'])}" />
									{elseif $d['type']=='qr'}
										<img src="{MODULE_URL}site/image/qr.png" />
									{elseif $d['type']=='text'}
										<div class='text' style="font-size:{$d['size']};color:{$d['color']};font-family:{php echo str_replace('.ttf','', str_replace('.otf','', $d['font']))};" >{$d['val']}</div> 
									{elseif $d['type']=='nickname'}
										<div class='text' style="font-size:{$d['size']};color:{$d['color']};font-family:{php echo str_replace('.ttf','', str_replace('.otf','', $d['font']))};" >{$buttons['nickname']}</div> 
									{elseif $d['type']=='field'}
										<div class='text' style="font-size:{$d['size']};color:{$d['color']};font-family:{php echo str_replace('.ttf','', str_replace('.otf','', $d['font']))};" >{$d['title']}</div>
									{/if}
										<div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div>
									</div>
								{/loop} 
								{/if}
							</div>
					</div>
					</div>
					</div>
					<div class="col-xs-12 col-sm-5 col-md-5 col-lg-5" style="padding-right:0px;padding-bottom:0px;width:366px;">
										<div class='panel panel-primary' style="margin-bottom: 0px;">
											<div class='panel-heading'>元素属性</div>
											  <div class='panel-body' style="min-height:114px;padding: 15px 6px;">
												  <div class="form-group">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">模板背景</label>
														 <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10"  style="padding-right:0px;">
															<div class='input-group' id="posterbg">
																<input type="text" name="bg" maxlength="300" value="{$certificate['bg']}" class="form-control" />
																<div class='input-group-btn'>
																	<button class="btn btn-default" type="button" onclick="buy_showImageDialog(this);">选择</button>
																	<button class="btn btn-default" type="button" onclick="buy_deleteImage(this);">删除</button>
																</div>
															</div>
															<span class='help-block'>手机:640px*1008px;A4:1588px*2246px</span>
														</div>
													</div>
												  <div class="form-group" > 
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">参数</label>
														 <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															<div class="input-group">
																<span class="input-group-addon" style="padding-right:0px;">宽</span>
																<input type="text" class="form-control" name="certificate[width]" id="poster_width" value="{$certificate['width']}" readonly unselectable='on' style="padding-left:0px;padding-right:0px;"  />
																<span class="input-group-addon" style="padding-left:0px;padding-right:0px;">px；高</span>
																<input type="text" class="form-control" name="certificate[height]" id="poster_height" value="{$certificate['height']}" readonly unselectable='on' style="padding-left:0px;padding-right:0px;"   />
																<span class="input-group-addon" style="padding-left:0px;padding-right:0px;">px；缩放</span>
																<input type="text" class="form-control" name="certificate[bei]" id="poster_bei" value="{$bei}" readonly unselectable='on' style="padding-left:0px;padding-right:0px;"   />
																<span class="input-group-addon" style="padding-left:0px;">倍</span>
															</div>
														</div>
													</div>
													<div class="form-group">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">模板元素</label>
														<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															 <div class="btn-group btn-group-xs" role="group">
																{if $buttons['img']}<button class='label label-success btn-poster' type='button' data-type='img' >{$buttons['img']}</button>{/if}	
																{if $buttons['thumb']}<button class='label label-primary btn-poster' type='button' data-type='thumb' >{$buttons['thumb']}</button>{/if}											
																{if $buttons['avatar']}<button class='label label-warning btn-poster' type='button' data-type='avatar' >{$buttons['avatar']}</button>{/if}
																{if $buttons['qr']}<button class='label label-info btn-poster' type='button' data-type='qr' >{$buttons['qr']}</button>{/if}
															</div>
															<div style="clear: both;height: 5px;"></div>
															 <div class="btn-group btn-group-xs" role="group">
																{if $buttons['text']}<button class='label label-success btn-poster' type='button' data-type='text'>{$buttons['text']}</button>{/if}
																{if $buttons['field']}<button class='label label-primary btn-poster' type='button' data-type='field' >{$buttons['field']}</button>{/if}
																{if $buttons['nickname']}<button class='label label-warning btn-poster' type='button' data-type='nickname' >{$buttons['nickname']}</button>{/if}
															</div>
														</div>
													</div>
												  <div id='namesset' style='display:none'>
												  <div class="form-group">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">文字颜色</label>
														 <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															  {php echo tpl_form_field_color('color')}
														</div>
													</div>
												  <div class="form-group">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">文字大小</label>
														<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															 <div class='input-group'>
																 <input type="text" id="namesize" class="form-control namesize" placeholder="例如: 15"  />
																 <div class='input-group-addon'>px</div>
															</div>
														</div>
													</div>
												  <div class="form-group">
														<label class="col-xs-12 col-sm-3 col-md-2 control-label">文字字体</label>
														<div class="col-sm-6">
															<select class="form-control namefont" id="namefont" >
																{loop $mbfiles $font}
																	{if substr($font  , -3)=='ttf' || substr($font  , -3)=='otf' }
																		{php $font=str_replace("attachment/font/","", str_replace("//","/", $font));}
																		{php $fontname = str_replace(".ttf","", str_replace(".otf","", $font));}
																		<option value="{$font}">{$fontname}</option>
																	{/if}
																{/loop}
															</select>
														</div>
													</div>
													<div class="form-group" id="textbox">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">文字内容</label>
														 <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															  <input type="text" id="nametext" class="form-control nametext">
														</div>
													</div>
													<div class="form-group" id="fieldbox">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">绑定字段</label>
														 <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															<select class="form-control input-medium"  id="fieldselect">
																<option value="">请选择</option>
																{loop $fields $key $titl}
																<option value="{$key}">{$titl}</option>
																{/loop}
															</select>
														</div>
													</div>	
											 </div>
													 <div class="form-group" id="imgsset" style="display:none">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">图片设置</label>
														<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															<div class='input-group'>
																<input type="text" name="img" maxlength="300" value="" class="form-control" />
																<div class='input-group-btn'>
																	<button class="btn btn-default" type="button" onclick="buy_showImageDialog(this);">选择</button>
																	<button class="btn btn-default" type="button" onclick="buy_deleteImage(this);">删除</button>
																</div>
															</div>  
														</div>
													</div>
									   				<div class="form-group qrset">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">二维码来源</label>
														<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															{if $qrtype['qrt0']}<label onclick="$('.qrs').hide();$('#qr0').show();gqrt=0;"><input type="radio" name="qrtype" value="0" {if $certificate['sets']['qrtype']=='0'} checked="checked"{/if}> {$qrtype['qrt0']}</label>{/if}
															{if $qrtype['qrt1']}<label onclick="$('.qrs').hide();gqrt=1;" style="margin-left: 10px"><input type="radio" name="qrtype" value="1"  {if $certificate['sets']['qrtype']=='1'} checked="checked"{/if}> {$qrtype['qrt1']}</label>{/if}
															{if $qrtype['qrt2']}<label onclick="$('.qrs').hide();gqrt=2;" style="margin-left: 10px"><input type="radio" name="qrtype" value="2"  {if $certificate['sets']['qrtype']=='2'} checked="checked"{/if}> {$qrtype['qrt2']}</label>{/if}
															{if $qrtype['qrt3']}<label onclick="$('.qrs').hide();gqrt=3;" style="margin-left: 10px"><input type="radio" name="qrtype" value="3"  {if $certificate['sets']['qrtype']=='3'} checked="checked"{/if}> {$qrtype['qrt3']}</label>{/if}
														</div>
													</div>
													{if $qrtype['qrt0']}
													<div class="form-group qrset">
														<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label"></label>
														<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" style="padding-right:0px;">
															  <input type="text" id="qr0" class="form-control qrs" name="myqr" value="{$certificate['sets']['qr']}" placeholder="请输入二维码网址，请带上http://"/>
														</div>
													</div>
													{/if}
										  </div>
								   </div>
					</div>
				</div>
			</div>
			<div class="panel-footer" style="padding-top: 5px; padding-bottom: 5px;" align="center">
				<input type="hidden" name="data" value="" />
				<input type="hidden" name="token" value="{$_W['token']}" />
				<button type="submit" class="btn btn-primary span3" name="submit" value="提交" style="width:150px;">提交</button>
			</div>
		</div>
	</form> 
</div>

<script>
{if $tp=='1'}
var arralltype = new Array("asp","text","img","nickname","field");
{else}
var arralltype = new Array("asp","text","img","nickname","field","thumb");
{/if}
</script>
<script  src="{MODULE_URL}site/js/poster.js?sd=d" type="text/javascript"></script>
<script type="text/javascript" src="{MODULE_URL}site/js/jquery.form.js"></script>
<script  src="{MODULE_URL}site/js/designer.js?as=13432fd2" type="text/javascript"></script>
<script  src="{MODULE_URL}site/js/jquery.contextMenu.js" type="text/javascript"></script>
<script>
var gqrt = {$certificate['sets']['qrtype']};
var attachurl = "{$_W['attachurl']}";
	var ptype = 0;  //这里为1时 不能改二微码
	function onPoster(type){
		ptype = type;
		if(type != 0){
			$('#qrset').hide();
		}
	}
	var imgcounter = 1 ;
		 function poster_est(obj){
			var imgsset = $('#imgsset');
			var namesset = $("#namesset");
			var qrset = $(".qrset");
			 imgsset.hide();
			 namesset.hide();
			 qrset.hide();
			 $('.qrs').hide();
			 deleteTimers();
			 var type = obj.attr('type');
			 if(type == 'img' || type == 'thumb' || type == 'avatar'){
					if(type == 'img'){
						imgsset.show();
					   var src = obj.attr('src');
					   var input = imgsset.find('input');
					   var img = imgsset.find('img');
					   if(typeof(src)!='undefined' && src!=''){
						   input.val(src); 
						   img.attr('src',getUrl(src));
					  }
					  
					   imgcounter = setInterval(function(){
						   if(input.val()!=src && input.val()!=''){
							   var url = getUrl(input.val());
							   obj.attr('src',input.val()).find('img').attr('src',url);
						   }
					   },100); 	  
					}
			 } else if(type=='qr' && ptype == 0){
				 qrset.show();
				 gqrt = isNaN(obj.attr('data-qrt'))?0:obj.attr('data-qrt');
				 var input = qrset.find('input[type="text"]');
				 var val = obj.attr('data-val');
				 qrset.find('#qr'+gqrt).show();
				 qrset.find('input[type="radio"]').eq(gqrt).prop('checked',true);
				 qrtimer = setInterval(function(){
					 var val = input.val();
					 obj.attr('data-val',val); 
					 obj.attr('data-qrt',gqrt);
				 },100);
			 }else if(type=='text' || type=='nickname' || type=='field' ){
				  namesset.show();
				  var size = obj.attr('size') || "16";
				  var font = obj.attr('font') || "heiti.ttf";  
				  if(type=='text'){
					$("#textbox").show();
					$("#fieldbox").hide();
					var nametext = namesset.find('#nametext');
					var namefont = namesset.find('#namefont');
					nametext.val(obj.attr('data-val'));
				  }else if(type=='field'){
					$("#textbox").hide();
					$("#fieldbox").show();
					var fieldtext = namesset.find('#fieldselect');
					fieldtext.val(obj.attr('data-val'));
				  }else{
					$("#textbox").hide();
					$("#fieldbox").hide();
				  }
				  var namesize = namesset.find('#namesize');
				  var namefont = namesset.find('#namefont');
				  var input = namesset.find('input:first');
				  var color = obj.attr('color') || "#000";
				  var picker = namesset.find('.sp-preview-inner');
				  input.val(color); namesize.val(size.replace("px","")); namefont.val(font); 
				  picker.css( {'background-color':color,'font-size':size});
				  ncounter = setInterval(function(){
					   obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
					   obj.attr('font',namefont.val()).find('.text').css('font-family',namefont.text()); 
					   obj.attr('color',input.val()).find('.text').css('color',input.val());
						if(type=='text'){
							obj.attr('data-val',nametext.val()).find('.text').text(nametext.val());
						} else if(type=='field'){
							var fieldtitle =  fieldtext.find("option:selected").text();
							obj.attr('data-title',fieldtitle).find('.text').text(fieldtitle);
							obj.attr('data-val',fieldtext.val());
						}else{
							obj.attr('data-val','{$buttons['nickname']}').find('.text').text('{$buttons['nickname']}');
						}
				   },100);
				   
			 } 
		 }
		 var bscounter = 0 ;		 
	$(function(){
		{if !empty($certificate['id'])}
		  $('.drag').each(function(){
			  dragEvent($(this));
		  })
		{/if}
		$('.btn-poster').click(function(){
		   var imgsset = $('#imgsset');
		   var namesset = $("#namesset");
		   imgsset.hide();
		   namesset.hide();
		   deleteTimers();
			var type = $(this).data('type');
			var img = "";
		  	if(type=='img'){
				img = '<img src="{MODULE_URL}site/image/n.gif" />';
			}else if(type=='avatar' || type=='thumb'){
				img = '<img src="{MODULE_URL}site/image/head.jpg" />';
			}else if(type=='text'){
				img = "<div class='text'>{$buttons['text']}</div>";
			} else if(type=='field'){
				img = "<div class='text'>{$buttons['field']}</div>";
			}else if(type=='nickname'){
				img = "<div class='text'>{$buttons['nickname']}</div>";
			}else if(type=='qr'){
				img = '<img src="{MODULE_URL}site/image/qr.png" />';
			}
			var index = $('#zmui_poster .drag').length+1;
			var obj = $('<div class="drag" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' + img+'<div class="dRightDown"> </div><div class="dLeftDown"> </div><div class="dRightUp"> </div><div class="dLeftUp"> </div><div class="dRight"> </div><div class="dLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');
			$('#zmui_poster').append(obj);
			dragEvent(obj);
		});
	
		 $('.drag').click(function(){
			 poster_est($(this));
		 })
	})
	var ncounter = 0;
	 $('form').submit(function(){
		 if($.trim($('#title').val()) == ''){
			alert('请输入证书模板名称!');
			return false;
		}
		var poster = [];
		$('.drag').each(function(){
			 var obj = $(this);
			 var type = obj.attr('type');
			 var left = obj.css('left'),top = obj.css('top');
			 var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
			 if(type=='text'){
				 d.size = obj.attr('size');
				 d.color = obj.attr('color');
				 d.font = obj.attr('font');
				 d.val = obj.attr('data-val');
			} else if(type=='field'){
				 d.size = obj.attr('size');
				 d.color = obj.attr('color');
				 d.font = obj.attr('font');
				 d.val = obj.attr('data-val');
				 d.title = obj.attr('data-title');
			 }else if(type=='nickname'){
				 d.size = obj.attr('size');
				 d.color = obj.attr('color');
				 d.font = obj.attr('font');
				 d.val = '昵称';
			 }else if(type=='img'){
				 d.src = obj.attr('src');
			 }else if(type=='avatar' || type=='thumb'){
				 d.src = '';
			 }else if(type=='qr'){
				 d.val = obj.attr('data-val');
				 d.qrt = obj.attr('data-qrt');
			 }
			poster.push(d);
		});
		$('input[name="data"]').val( JSON.stringify(poster));
		return true;
	});
	</script>
	
		<script type="text/javascript">
			function buy_showImageDialog(elm, opts, options) {
				require(["util"], function(util){
					var btn = $(elm);
					var ipt = btn.parent().prev();
					var val = ipt.val();
					var img = ipt.prev().children();
					options = {'global':false,'class_extra':'','direct':true,'multiple':false,'fileSizeLimit':5120000};
					util.image(val, function(url){
						if(url.url){
							if(img.length > 0){
								img.get(0).src = url.url;
							}
							ipt.val(url.attachment);
							ipt.attr("filename",url.filename);
							ipt.attr("url",url.url);
						}
						if(url.media_id){
							if(img.length > 0){
								img.get(0).src = url.url;
							}
							ipt.val(url.media_id);
						}
					}, options);
				});
			}
			function buy_deleteImage(elm){
				$(elm).parent().prev().prev().children().attr("src", "./resource/images/nopic.jpg");
				$(elm).parent().prev().val("");
			}
		</script>
	
{template 'common/footer'}