{template 'common/header'}
<link rel="stylesheet" type="text/css" href="/addons/{$_GPC['m']}/resource/css/style.css"/>
<link rel="stylesheet" type="text/css" href="../addons/{php echo $_GPC['m']}/resource/css/style.css" />
<link rel="stylesheet" type="text/css" href="../addons/{php echo $_GPC['m']}/resource/css/jquery.contextMenu.css" />
<link rel="stylesheet" type="text/css" href="../addons/{php echo $_GPC['m']}/resource/swal/dist/sweetalert2.min.css" />
<script type="text/javascript" src="/addons/{$_GPC['m']}/resource/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../addons/{$_GPC['m']}/resource/js/jquery.gcjs.js"></script>
<script type="text/javascript" src="../addons/{$_GPC['m']}/resource/js/jquery.form.js"></script>
<script type="text/javascript" src="../addons/{$_GPC['m']}/resource/js/tooltipbox.js"></script>
<script language='javascript' src="../addons/{$_GPC['m']}/resource/js/designer.js"></script>
<script language='javascript' src="../addons/{$_GPC['m']}/resource/js/jquery.contextMenu.js"></script>
<style type="text/css" media="screen">
    .form-group{float:left;width: 100%;}
    	/* 输入框样式 */
	.red{float:left;color:red}
	.white{float:left;color:#fff}
	.tooltipbox{background:#fef8dd;border:1px solid #c40808;position:absolute;left:0;top:0;text-align:center;height:20px;color:#c40808;padding:2px 5px 1px 5px;border-radius:3px;z-index:1000}
	.red{float:left;color:red}
    .tab-content>.tab-pane { visibility: visible; }
    #poster_btn .btn-default {margin: 5px 0;}
#poster{width:320px;height:570px;border:1px solid #ccc;position:relative}
#poster .bg{position:absolute;width:100%;z-index:0;}
#poster .drag[type=img] img,#poster .drag[type=thumb] img{width:100%;height:100%}
#poster .drag{position:absolute;width:80px;height:80px;border:1px solid #000}
#poster .drag{position:absolute;width:80px;height:80px}
#poster .drag[type=qr]{width:150px;height:150px;}
#poster .drag[type=nickname]{width:80px;height:22px;line-height:22px;font-size:16px;font-family:黑体}
#poster .drag[type=title]{width:190px;height:44px;line-height:22px;font-size:16px;font-family:黑体}
#poster .drag[type=coupon]{width:50px;height:22px;line-height:22px;font-size:16px;font-family:黑体}
#poster .drag[type=price]{width:50px;height:22px;line-height:22px;font-size:16px;font-family:黑体}
#poster .drag[type=discount]{width:50px;height:22px;line-height:22px;font-size:16px;font-family:黑体}

#poster .drag img{position:absolute;z-index:0;width:100%}
#poster .rRightDown,.rDown,.rLeft,.rLeftDown,.rLeftUp,.rRight,.rRightUp,.rUp{position:absolute;width:7px;height:7px;z-index:1;font-size:0}
#poster .rRightDown,.rDown,.rLeft,.rLeftDown,.rLeftUp,.rRight,.rRightUp,.rUp{background:#428bca}
.rLeftDown,.rRightUp{cursor:ne-resize}
.rLeftUp,.rRightDown{cursor:nw-resize}
.rLeft,.rRight{cursor:e-resize}
.rDown,.rUp{cursor:n-resize}
.rLeftDown{left:-4px;bottom:-4px}
.rRightUp{right:-4px;top:-4px}
.rRightDown{right:-4px;bottom:-4px}
.rRightDown{background-color:#00F}
.rLeftUp{left:-4px;top:-4px}
.rRight{right:-4px;top:50%;margin-top:-4px}
.rLeft{left:-4px;top:50%;margin-top:-4px}
.rUp{top:-4px;left:50%;margin-left:-4px}
.rDown{bottom:-4px;left:50%;margin-left:-4px}
.context-menu-layer{z-index:9999}
.context-menu-list{z-index:9999}
.btn-success2 { color: #fff; background-color: #428bca; border-color: #428bca; }

</style>

{template 'common/design_tab'}

<div class="panel-body">

	<div class="form-group">
		<!--<label class=" col-sm-3 col-md-2 control-label">-->
            <!--<span style='color:red'>*</span>名片码设计-->
        <!--</label>-->
		<div class="col-sm-12">
            <form class="form-horizontal" role="form" method="post" action="{url 'site/entry/bargainPoster',array('m'=>$_GPC['m'],'op'=>'bargainPoster','version_id'=>$_GPC['version_id'])}&tab_id=2">
			<input type="hidden" name="poster[data]" id="poster_data" value="{$item['poster']['data']}">
			<table style='width:100%;'>
				<tr>
					<td style='width:320px;padding:10px;' valign='top'>
						<div id='poster' style="background: antiquewhite;">
							<img src="{php echo tomedia($item['poster']['bg'])}" class='bg' /> 
							{loop $poster_data $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']}" isYuan="{$d['isYuan']}">
									{if $d['type']=='qr'}
										<img src="../addons/{$_GPC['m']}/resource/images/code.png" /> 
									{elseif $d['type']=='head'}
										<img src="../addons/{$_GPC['m']}/resource/images/head.jpg" /> 	
									{elseif $d['type']=='nickname'}
										<div class=text style="font-size:{$d['size']};color:{$d['color']}">微信昵称</div>
									{elseif $d['type']=='title'}
										<div class=text style="font-size:{$d['size']};color:{$d['color']}">商品名称</div>
                                    {elseif $d['type']=='goodsimg'}
										<img src="../addons/{$_GPC['m']}/resource/images/goods.png" /> 
									{elseif $d['type']=='coupon'}
										<div class=text style="font-size:{$d['size']};color:{$d['color']}">优惠券</div>
                                    {elseif $d['type']=='price'}
										<div class=text style="font-size:{$d['size']};color:{$d['color']}">原价</div>
									{elseif $d['type']=='discount'}
										<div class=text style="font-size:{$d['size']};color:{$d['color']}">券后价</div>
                                    {elseif $d['type']=='img' || $d['type']=='thumb'}
										<img src="{php echo empty($d['src'])?'../addons/'.$_GPC['m'].'/resource/images/default.jpg':tomedia($d['src'])}" /> 
									{/if}
									<div class="rRightDown"> </div>
									<div class="rLeftDown"> </div>
									<div class="rRightUp"> </div>
									<div class="rLeftUp"> </div>
									<div class="rRight"> </div>
									<div class="rLeft"> </div>
									<div class="rUp"> </div>
									<div class="rDown"></div>
								</div>
							{/loop} 
						</div>

					</td>
					<td valign='top' style='padding:10px;'>
						<div class='panel panel-default'>
							<div class='panel-body'>
								<div class="form-group" id="bgset">
									<label class=" col-sm-3 col-md-2 control-label">背景图</label>
									<div class="col-sm-9 ">

										{php echo tpl_form_field_image2('poster[bg]',$item['poster']['bg'])}

										<span class='help-block' style="color:red;">背景大小 640px*1140px</span>
									</div>

								</div>
								<div class="form-group" id="poster_btn">
									<label class=" col-sm-3 col-md-2 control-label">元素</label>
									<div class="col-sm-9 ">
                                        <button class='btn btn-default btn-com' type='button' data-type='qr'>小程序码</button>
										<button class='btn btn-default btn-com' type='button' data-type='title'>商品标题</button>
										<button class='btn btn-default btn-com' type='button' data-type='goodsimg'>商品图片</button>
                                        <button class='btn btn-default btn-com' type='button' data-type='price'>商品原价</button>
									</div>
								</div>

								<div id='nameset' style='display:none'>
									
                                    <div class="form-group">
										<label class=" col-sm-3 col-md-2 control-label">颜色</label>
										<div class="col-sm-9 ">
											{php echo tpl_form_field_color('poster[color]')}
										</div>
									</div>

									<div class="form-group">
										<label class=" col-sm-3 col-md-2 control-label">大小</label>
										<div class="col-sm-4">
											<div class='input-group'>
												<input type="text" id="namesize" class="form-control namesize" placeholder="例如: 14,16" />
												<div class='input-group-addon'>px</div>
											</div>
										</div>
									</div>
								</div>

								<div class="form-group" id="imgset" style="display:none">
									<label class=" col-sm-3 col-md-2 control-label">图片设置</label>
									<div class="col-sm-9 ">
										{php echo tpl_form_field_image2('poster[img]',$item['poster']['img'])}
									</div>
									<label class=" col-sm-3 col-md-2 control-label"></label>
                                    <div class="col-sm-9 ">
                                         <div class="checkbox"> 
                                             <label><input name="isYuan" value="1" type="checkbox">圆形化</label> 
                                         </div>
                                    </div>
								</div>

                                <div class="form-group" id="qrOrheadset" style="display:none">
									
                                    <label class=" col-sm-3 col-md-2 control-label"></label>
                                    <div class="col-sm-9 ">
                                         <div class="checkbox"> 
                                             <label><input name="isYuan" value="1" type="checkbox">圆形化</label> 
                                         </div>
                                    </div>
								</div>


							</div>
						</div>
					</td>
				</tr>
			</table>

            <div class="form-group">
				<label class="control-label col-xs-12 col-sm-1"></label>
                    <div class="col-xs-12 col-sm-8">
						<a id="tqr" class="btn btn-default">清空小程序码</a>
					</div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-6 col-sm-6">
                  <input type="submit" name="submit" class="btn btn-default">
                </div>
            </div>

		</div>
        </form>
	</div>
   
</div>
	<script type="text/javascript">
        require(["../addons/{php echo $_GPC['m']}/resource/swal/dist/sweetalert2.min.js"],function(){
		    $(function(){
		        //删除
		        $("#tqr").click(function(){
		            var that=$(this);
		            var id=$(this).attr('data-id');
		            //console.log(id);
		            swal({
		                title: '您确定要清空吗?小程序码生成有次数限制，请谨慎操作?',
		                text: "确定清空吗?",
		                type: 'warning',
		                showCancelButton: true,
		                confirmButtonColor: '#3085d6',
		                cancelButtonColor: '#d33',
		                confirmButtonText: '清空',
		                cancelButtonText: '取消',
		            }).then(function(isConfirm) {
		                if (isConfirm) {
		                    $.ajax({
		                        type:"post",
		                        url:"{url 'site/entry/turncateQrcode',array('m'=>$_GPC['m'],'op'=>'turncateQrcode','version_id'=>$_GPC['version_id'])}",
		                        data:{id:3},
		                        dataType:'json',
		                        success:function(res){
		                            if(res.status==1){
		                                swal('操作成功!', '操作成功!', 'success');
		                            }else{
		                                swal('操作失败!', '操作失败!', 'error');
		                            }
		                        }
		                    })
		                }
		            })
		        });     

		    })
		})
	</script>

	<!-- 单图上传 -->
	<script type="text/javascript">
		function showImageDialog(elm, opts, options) {
			require(["util"], function(util){
				var btn = $(elm);
				var ipt = btn.parent().prev();
				var val = ipt.val();
				var img = ipt.parent().next().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 = "";
						}
						ipt.val(url.media_id);
					}
				}, options);
			});
		}
		function deleteImage(elm){
            console.log('here');
			$(elm).prev().attr("src", "./resource/images/nopic.jpg");
			$(elm).parent().prev().find("input").val("");
            //clearTimers(bgtimer);
		}
	</script>

	<!-- 选择链接地址 -->
	<script type="text/javascript">
		require(['jquery', 'util'], function($, util){
			
			$('.longurl_but').click(function(){
				var but = $(this);
				var ipt = but.prev();

				util.linkBrowser(function(href){
					var site_url = "{$_W['siteroot']}";
					if(href.substring(0, 4) == 'tel:') {
						util.message('长链接不能设置为一键拨号');
						return;
					} else if(href.indexOf("http://") == -1 && href.indexOf("https://") == -1) {
						href = href.replace('./index.php?', '/index.php?');
						href = site_url + 'app' + href;
					}
					ipt.val(href);
				});
			});
			
		});
	</script>

	<!-- 自定义富文本 -->
	<script type="text/javascript">
		require(['util'],function(util){
		    util.editor($(".ruledesc")[0]);
		    util.editor($(".desc1")[0]);
		    util.editor($(".desc2")[0]);
		})
	</script>
	
	<!-- bootstrap 引用 -->
	<script type="text/javascript">
		require(['bootstrap'], function () {

			// tab切换
			$('#myTab a').click(function (e) {
				$('#tab').val( $(this).attr('href'));
				e.preventDefault();
				$(this).tab('show');
			})

			// tip提示
			$('.btn,.tip').each(function(){
				if( $(this).closest('td').css('position')=='relative'){
					return true;
				}
				$(this).hover(function () {
					$(this).tooltip('show');
				}, function () {
					$(this).tooltip('hide');
				});
			})

			// 弹出提示
			$('.btn.tip-pop,.tip-pop').each(function(){
				if( $(this).closest('td').css('position')=='relative'){
					return true;
				}
				$(this).hover(function () {
					$(this).popover();
				}, function () {
					$(this).popover();
				});
			})

		});
		
		// 复制链接
		$('.js-clip').each(function(){
			util.clip(this, $(this).attr('data-url'));
		});

		// 定时触发
		$(function(){
			// $.ajax({
			// 	url: "{php echo $this->createWebUrl('runtasks')}",
			// 	cache:false
			// });
		});
    
</script>

<script type="text/javascript">

	$('form').submit(function() {
		
		var data = [];
		$('.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 == 'nickname' || type == 'title' || type == 'coupon' || type == 'price' || type == 'discount') {
				d.size = obj.attr('size');
				d.color = obj.attr('color');

			} else if(type == 'qr' || type == 'goodsimg' || type == 'head'){

				d.isYuan = obj.attr('isYuan');

			} else if(type == 'img') {
				d.isYuan = obj.attr('isYuan');
				d.src = obj.attr('src');
			}
			data.push(d);
		});
        console.log(data);
		$('#poster_data').val(JSON.stringify(data));
		return true;
	})
</script>


<!-- 操作海报 -->
<script language='javascript'>
	function bindEvents(obj) {
		
        var index = obj.attr('index');
		var type = obj.attr('type');

       if(type == 'img' || type == 'qr' || type == 'head' || type == 'goodsimg'){
		    var rs = new Resize(obj, {
		    	Max: true,
		    	mxContainer: "#poster"
		    });
		    rs.Set($(".rRightDown", obj), "right-down");
		    rs.Set($(".rLeftDown", obj), "left-down");
		    rs.Set($(".rRightUp", obj), "right-up");
		    rs.Set($(".rLeftUp", obj), "left-up");
		    rs.Set($(".rRight", obj), "right");
		    rs.Set($(".rLeft", obj), "left");
		    rs.Set($(".rUp", obj), "up");
		    rs.Set($(".rDown", obj), "down");
		    rs.Scale = true;
		}

		new Drag(obj, {
			Limit: true,
			mxContainer: "#poster"
		});
		$('.drag .remove').unbind('click').click(function() {
			$(this).parent().remove();
		})

		$.contextMenu({
			selector: '.drag[index=' + index + ']',
			callback: function(key, options) {
				var index = parseInt($(this).attr('zindex'));

				if(key == 'next') {
					var nextdiv = $(this).next('.drag');
					if(nextdiv.length > 0) {
						nextdiv.insertBefore($(this));
					}
				} else if(key == 'prev') {
					var prevdiv = $(this).prev('.drag');
					if(prevdiv.length > 0) {
						$(this).insertBefore(prevdiv);
					}
				} else if(key == 'last') {
					var len = $('.drag').length;
					if(index >= len - 1) {
						return;
					}
					var last = $('#poster .drag:last');
					if(last.length > 0) {
						$(this).insertAfter(last);
					}
				} else if(key == 'first') {
					var index = $(this).index();
					if(index <= 1) {
						return;
					}
					var first = $('#poster .drag:first');
					if(first.length > 0) {
						$(this).insertBefore(first);
					}
				} else if(key == 'delete') {
                    var type = $(this).attr('type')
                    $('#poster_btn button[data-type='+type+']').removeClass('btn-success2');
					$(this).remove();
				}
				var n = 1;
				$('.drag').each(function() {
					$(this).css("z-index", n);
					n++;
				})
			},
			items: {
				"next": {
					name: "调整到上层"
				},
				"prev": {
					name: "调整到下层"
				},
				"last": {
					name: "调整到最顶层"
				},
				"first": {
					name: "调整到最低层"
				},
				"delete": {
					name: "删除元素"
				}
			}
		});
		obj.unbind('click').click(function() {
			bind($(this));
		})

	}
	var imgsettimer = 0;
	var nametimer = 0;
	var bgtimer = 0;

	function clearTimers() {
		clearInterval(imgsettimer);
		clearInterval(nametimer);
		clearInterval(bgtimer);
	}

	function getImgUrl(val) {
		if(val.indexOf('http://') == -1) {
			val = "{$_W['attachurl']}" + val;
		}
		return val;
	}

	function bind(obj) {
		var imgset = $('#imgset'),
			nameset = $("#nameset"),
			qrOrheadset = $("#qrOrheadset");
		imgset.hide(), nameset.hide(), qrOrheadset.hide();
		clearTimers();
		var type = obj.attr('type');

		if(type == 'img') {
			imgset.show();
			var src = obj.attr('src');
			var input = imgset.find('input');
			var img = imgset.find('img');
			if(typeof(src) != 'undefined' && src != '') {
				input.val(src);
				img.attr('src', getImgUrl(src));
			}

			imgsettimer = setInterval(function() {
				if(input.val() != src && input.val() != '') {
					var url = getImgUrl(input.val());

					obj.attr('src', input.val()).find('img').attr('src', url);
				}
			}, 10);

            var sel = imgset.find('input[name="isYuan"]');
            var v = obj.attr('isYuan') == 'true' ? true : false;
            sel.prop('checked', v);
			sel.unbind('change').change(function() {
				obj.attr('isYuan', sel.is(":checked"));
			});

		} else if(type == 'nickname' || type == 'title' || type == 'coupon' || type == 'price' || type == 'discount') {
			
            nameset.show();
			var color = obj.attr('color') || "#333";
			var size = obj.attr('size') || "16";
			var input = nameset.find('input:first');
			var namesize = nameset.find('#namesize');
			var picker = nameset.find('.sp-preview-inner');
			input.val(color);
			namesize.val(size.replace("px", ""));
			picker.css({
				'background-color': color,
				'font-size': size
			});
			nametimer = setInterval(function() {
				obj.attr('color', input.val()).find('.text').css('color', input.val());
				obj.attr('size', namesize.val() + "px").find('.text').css('font-size', namesize.val() + "px");
			}, 10);

		} else if(type == 'head' || type == 'qr' || type == 'goodsimg') {
            
			qrOrheadset.show();
            var sel = qrOrheadset.find('input[name="isYuan"]');
            var v = obj.attr('isYuan') == 'true' ? true : false;
            sel.prop('checked', v);
			sel.unbind('change').change(function() {
				obj.attr('isYuan', sel.is(":checked"));
			});
	
		}
	}

	$(function() {
		{if !empty($poster_data)} 
			$('.drag').each(function() {
                var type = $(this).attr('type')
                $('#poster_btn button[data-type='+type+']').addClass('btn-success2');
				bindEvents($(this));
			})
		{/if}

		//改变背景
		$('#bgset').find('button:first').click(function() {
			var oldbg = $(":input[name='poster[bg]']").val();
			bgtimer = setInterval(function() {
				var bg = $(":input[name='poster[bg]']").val();
				if(oldbg != bg) {
					bg = getImgUrl(bg);

					$('#poster .bg').remove();
					var bgh = $("<img src='" + bg + "' class='bg' />");
					var first = $('#poster .drag:first');
					if(first.length > 0) {
						bgh.insertBefore(first);
					} else {
						$('#poster').append(bgh);
					}

					oldbg = bg;
				}
			}, 10);
		})

		$('.btn-com').click(function() {
			var imgset = $('#imgset'),
				nameset = $("#nameset");
			imgset.hide(), nameset.hide();
			clearTimers();
            
			if($('#poster img').attr('src') == '') {
				alert('请选择背景图片!');
				return false;
			}

            var type = $(this).data('type');
            if($(this).hasClass('btn-success2')){ 
                $('#poster .drag[type='+type+']').remove();
                $(this).removeClass('btn-success2');
                return false;
            }
            $(this).addClass('btn-success2');

			
			var img = "";
			if(type == 'qr' || type == 'qrcode') {
				img = '<img src="../addons/{$_GPC['m']}/resource/images/code.png" />';
			} else if(type == 'head') {
				img = '<img src="../addons/{$_GPC['m']}/resource/images/head.jpg" />';
			} else if(type == 'goodsimg') {
				img = '<img src="../addons/{$_GPC['m']}/resource/images/goods.png" />';
			} else if(type == 'img' || type == 'thumb') {
				img = '<img src="../addons/{$_GPC['m']}/resource/images/default.jpg" />';
			} else if(type == 'nickname') {
				img = '<div class=text>微信昵称</div>';
			} else if(type == 'title') {
				img = '<div class=text>商品标题</div>';
			} else if(type == 'coupon') {
				img = '<div class=text>优惠券</div>';
            } else if(type == 'price') {
				img = '<div class=text>原价</div>';
			} else if(type == 'discount') {
				img = '<div class=text>券后价</div>';
			}
			var index = $('#poster .drag').length + 1;
			var obj = $('<div class="drag" type="' + type + '" index="' + index + '" style="z-index:' + index + '">' + img + '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');

			$('#poster').append(obj);

			bindEvents(obj);

		});

		$('.drag').click(function() {
			bind($(this));
		})

	})
</script>
{template 'common/footer'}