{extend name="adminblue/base" /}
{block name="resources"/}
<style>
.table{max-width:945px;padding:15px;}
.table:after{display:block;content:'';clear:both;}
.l{float:left;}
.r{float:right;}
.qrcode{width:320px;height:569px;margin-right:25px;background:#f5f5f5;position:relative;z-index:;}
.form{width:600px;}
.tip{background:#d9edf7;color:#3a87ad;padding:8px 35px 8px 15px;}
#imgLogo{max-width:320px;max-height:569px;}
#header{width:45px;height:45px;position:absolute;left:59px;top:15px;cursor:move;}
#logo{width:143px;position:absolute;left:60px;top:210px;cursor:move;}
#code{width:144px;height:144px;position:absolute;left:70px;top:300px;cursor:move;}
#name{position:absolute;left:128px;top:23px;font-size:14px;color:#000;cursor:move;}
</style>
{/block}
{block name="alert_info"}
<strong>提示：</strong>
会员昵称、头像和二维码属于第三方提供的信息，您可以在这里调整字体和显示的位置，除此之外的信息您可以根据自己的需求放在背景图片中。
{/block}
{block name="main"}
<div class="table">
	<input type="hidden" id="id" value="{$id}">
	<div class="l qrcode" id="divBlock">
		{if condition="$info['background'] != ''"}
		<img id="imgLogo" src="{:__IMG($info['background'])}">
		{else/}
		<img id="imgLogo">
		{/if}
		<img id="header" src="ADMIN_IMG/icon-header.png" style="left:{$info['header_left']};top:{$info['header_top']};" ondragstart="return false">
		<img id="logo" src="{:__IMG($web_info.logo)}" style="left:{$info['logo_left']};top:{$info['logo_top']};{eq name='info["is_logo_show"]' value='0'}display:none;{/eq}" ondragstart="return false">
		<img id="code" src="__STATIC__/images/template_qrcode.png" style="left:{$info['code_left']};top:{$info['code_top']};" ondragstart="return false">
		<span id="name" style="left:{$info['name_left']};top:{$info['name_top']};color:{$info['nick_font_color']};font-size:{$info['nick_font_size']}px;" ondragstart="return false">昵称</span>
	</div>
	<div class="r form">
		
		<div class="set-style">
			<dl>
				<dt>背景图片:</dt>
				
				<dd>
					<div class="upload-btn-common">
						<div>
							<input class="input-file" name="file_upload" id="uploadImg" type="file" onchange="imgUpload(this);" title="上传">
							<input type="hidden" id="Logo" value="{$info['background']}" />
						</div>
						<input type="text" id="text_Logo" class="input-common" readonly="readonly" value="{if condition='$info.background'}{$info.background}{/if}" />
						<em>上传</em>
						
						<img id="preview_Logo" src="__STATIC__/blue/img/upload-common-select.png" {if condition="$info.background"}data-src="{:__IMG($info.background)}"{/if} data-html="true" data-container="body" data-placement="top" data-trigger="manual"/>
		
					</div>
					<p class="hint">背景图必须是<i class="important-note">640*1138</i>的<i class="important-note">png</i>图像；点击下方"保存"按钮后生效。</p>
				</dd>
			</dl>
			<dl>
				<dt>昵称文本颜色:</dt>
				<dd>
					<p><input id="nick_font_color" type="color" value="{$info['nick_font_color']}" class="input-common-color"></p>
					<p class="error">请输入昵称文本颜色</p>
				</dd>
			</dl>
			<dl>
				<dt>昵称字体大小:</dt>
				<dd>
					<p><input id="nick_font_size" type="number" min="10" max="36" step="1" size="4" value="{$info['nick_font_size']}" class="input-common harf"><em class="unit">PX</em></p>
					<p class="hint">字体大小的单位为像素（px）</p>
					<p class="error">请输入昵称字体大小</p>
				</dd>
			</dl>
			<dl>
				<dt>是否显示logo:</dt>
				<dd>
					<p><input id="is_logo_show" type="checkbox" class="checkbox" {eq name="info['is_logo_show']" value="1"}checked {/eq}/></p>
				</dd>
			</dl>
			<dl>
				<dt></dt>
				<dd>
					<button class="btn-common btn-big" onclick="save();">保存</button>
					<button class="btn-common-cancle btn-big" onclick="window.location.href = window.history.go(-1);" >返回</button>
				</dd>
			</dl>
		</div>
	</div>
</div>
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<script>
$("#nick_font_color").change(function(){
	$("#name").css('color', $("#nick_font_color").val());
});

$("#nick_font_size").change(function(){
	$("#name").css('font-size', $("#nick_font_size").val()+'px');
});

$("#is_logo_show").change(function(){
	if($("#is_logo_show").prop('checked')){
		$("#logo").show();
	}else{
		$("#logo").hide();
	}
});

$("#divBlock").bind("mousedown", function (e) {
	var xo = e.pageX;
	var yo = e.pageY;
	var bX = $("#divBlock").offset().left;
	var bY = $("#divBlock").offset().top;
	var imgLeft = $("#header").position().left;
	var imgTop = $("#header").position().top;
	var nameLeft = $("#name").position().left;
	var nameTop = $("#name").position().top;
	var logoLeft = $("#logo").position().left;
	var logoTop = $("#logo").position().top;
	var codeLeft = $("#code").position().left;
	var codeTop = $("#code").position().top;
	if ( ((xo - bX) > imgLeft) && ((xo - bX) < imgLeft + 45) && ((yo - bY) > imgTop) && ((yo - bY) < imgTop + 45) ) {
		//头像位置
		$("#divBlock").bind("mousemove", function (e) {
			var x = e.pageX;
			var y = e.pageY;
			$("#header").css("left", x - bX - (xo - bX) + imgLeft);
			$("#header").css("top", y - bY - (yo - bY) + imgTop);
		});
	}
	if (((xo - bX) > nameLeft) && ((xo - bX) < nameLeft + $("#name").width()) && ((yo - bY) > nameTop) && ((yo - bY) < nameTop + $("#name").height())) {
		//昵称位置
		$("#divBlock").bind("mousemove", function (e) {
			var x = e.pageX;
			var y = e.pageY;
			$("#name").css("left", x - bX - (xo - bX) + nameLeft);
			$("#name").css("top", y - bY - (yo - bY) + nameTop);
		});
	}
	if (((xo - bX) > logoLeft) && ((xo - bX) < logoLeft + $("#logo").width()) && ((yo - bY) > logoTop) && ((yo - bY) < logoTop + $("#logo").height())) {
		//LOGO位置
		$("#divBlock").bind("mousemove", function (e) {
			var x = e.pageX;
			var y = e.pageY;
			$("#logo").css("left", x - bX - (xo - bX) + logoLeft);
			$("#logo").css("top", y - bY - (yo - bY) + logoTop);
		});
	}
	if (((xo - bX) > codeLeft) && ((xo - bX) < codeLeft + $("#code").width()) && ((yo - bY) > codeTop) && ((yo - bY) < codeTop + $("#code").height())) {
		//二维码位置
		$("#divBlock").bind("mousemove", function (e) {
			var x = e.pageX;
			var y = e.pageY;
			$("#code").css("left", x - bX - (xo - bX) + codeLeft);
			$("#code").css("top", y - bY - (yo - bY) + codeTop);
		});
	}
});

$("#divBlock").bind("mouseup mouseout", function () {
	$("#divBlock").unbind("mousemove");
});

//图片上传
function imgUpload(event) {

	var fileid = $(event).attr("id");
	var data = { 'file_path' : UPLOADCOMMON };
	var id = $(event).next().attr("id");
	uploadFile(fileid,data,function(res){
		if(res.code){
			$("#img"+id).attr("src",__IMG(res.data));
			$("#"+id).val(res.data);
			$("#text_" + id).val(res.data);
			$("#preview_" + id).attr("data-src",__IMG(res.data));
			showTip(res.message,"success");
		}else{
			showTip(res.message,"error");
		}
	});
}

function save(){
	var id = $("#id").val();
	var background = $("#Logo").val();
	var nick_font_color = $("#nick_font_color").val();
	var nick_font_size = $("#nick_font_size").val();
	if($("#is_logo_show").prop("checked")){
		var is_logo_show = 1;
	}else{
		var is_logo_show = 0;
	}
	var header_left = $("#header").position().left;
	var header_top = $("#header").position().top;
	var name_left = $("#name").position().left;
	var name_top = $("#name").position().top;
	var logo_left = $("#logo").position().left;
	var logo_top = $("#logo").position().top;
	var code_left = $("#code").position().left;
	var code_top = $("#code").position().top;
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/wchat/qrcode')}",
		data : {
			'id':id,
			'background' : background,
			'nick_font_color' : nick_font_color,
			'nick_font_size' : nick_font_size,
			'is_logo_show' : is_logo_show,
			'header_left' : header_left,
			'header_top' : header_top,
			'name_left' : name_left,
			'name_top' : name_top,
			'logo_left' : logo_left,
			'logo_top' : logo_top,
			'code_left' : code_left,
			'code_top' : code_top
		},
		success : function(data) {
			if(data['code'] > 0){
				showTip(data['message'],"success");
				location.href = "{:__URL('ADMIN_MAIN/wchat/weixinqrcodetemplate')}";
			}else{
				showTip(data['message'],"error");
			}
		}
	})
}
</script>
{/block}