{extend name="admin/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:200px;position:absolute;left:60px;top:210px;cursor:move;} */
#logo{width:143px;position:absolute;left:60px;top:210px;cursor:move;}
/* #code{width:170px;height:170px;position:absolute;left:70px;top:300px;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="right_tab"}
{/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="__UPLOAD__/{$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="__UPLOAD__/{$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="tip">
			<strong>提示：</strong>
			会员昵称、头像和二维码属于第三方提供的信息，您可以在这里调整字体和显示的位置，除此之外的信息您可以根据自己的需求放在背景图片中。
		</div>
		<div class="set-style">
			<dl>
				<dt>背景图片:</dt>
				<dd>
<!-- 					<div class="class-logo"><p><img id="imgLogo"src="" ></p></div> -->
					<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);">
					        <input type="hidden"id="Logo"value="{$info['background']}"/></span><p><i class="fa fa-upload"></i>上传图片</p>
					    </a> 
					</div>
					<p class="hint"><br><span style="color:orange;">建议使用宽640像素-高1138像素内的GIF或PNG透明图片；点击下方"提交"按钮后生效。</span></p>
				</dd>
			</dl>
			<dl>
				<dt>昵称文本颜色:</dt>
				<dd>
					<p><input name="UserCode" id="nick_font_color" type="color" value="{$info['nick_font_color']}"></p>
					<p class="error">请输入昵称文本颜色</p>
				</dd>
			</dl>
			<dl>
				<dt>昵称字体大小:</dt>
				<dd>
					<p><input name="UserCode" id="nick_font_size" type="number" min="10" max="36" step="1" size="4" value="{$info['nick_font_size']}">像素</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>
			<button class="edit_button" onclick="save();">提交</button>
		</div>
	</div>
</div>
<script src="ADMIN_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 str = $(event).next().attr("id");
		var data = { 'file_path' : UPLOADCOMMON };
		uploadFile(fileid,data,function(res){
			if(res.code){
				$("#img"+str).attr("src","__UPLOAD__/"+res.data);
				$("#"+str).val(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 : "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
			},
			async : true,
			success : function(data) {
				 if(data['code'] > 0){
					 showMessage('success', data['message'], 'ADMIN_MAIN/Wchat/weixinQrcodeTemplate');
				 }else{
					 showMessage('error', data['message']);
				 }
			}
		})
	}
</script>

{/block}