{extend name="$base" /}
{block name="resources"}
<link rel="stylesheet" href="ADMIN_CSS/adv_position.css">
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
{/block}
{block name="main"}
<div class="set-style">
	<dl>
		<dt><span style="color:red;margin-right:10px;">*</span>名称：</dt>
		<dd>
			<p><input name="ap_name" type="text" class="input-common"></p>
			<p class="error">请输入广告位名称</p>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;margin-right:10px;">*</span>广告位关键字：</dt>
		<dd>
			<p><input name="ap_keyword" type="text" class="input-common" maxlength="60" onpaste="return false"></p>
			<p class="error">该关键字已被使用</p>
			<p style="color: #999;">广告位关键字可用来调用广告位，关键字必须为英文字符，不得超过60个字符，关键字不可以相同</p>
		</dd>
	</dl>
	<dl>
		<dt>简介：</dt>
		<dd>
			<p><textarea class="textarea-common" name="ap_intro"></textarea></p>
		</dd>
	</dl>
	<dl>
		<dt>是否启用：</dt>
		<dd>
			<p>
				<input name="is_use" type="checkbox" class="checkbox" checked="checked">
			</p>
		</dd>
	</dl>
	{if $terminal eq 1}
	<dl>
		<dt><span style="color:red;margin-right:10px;">*</span>宽度：</dt>
		<dd>
			<p><input name="ap_width" type="number" class="input-common harf"><em class="unit">PX</em></p>
			<p class="error">请输入广告位宽度</p>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;margin-right:10px;">*</span>高度：</dt>
		<dd>
			<p><input name="ap_height" type="number" class="input-common harf"><em class="unit">PX</em></p>
			<p class="error">请输入广告位高度</p>
		</dd>
	</dl>
	{/if}
	<dl>
		<dt>类别：</dt>
		<dd>
			<label class="radio inline normal">
				<i class="radio-common selected">
					<input type="radio" name="ap_display" checked="checked" value="0">
				</i>
				<span>平铺</span>
			</label>
			<label class="radio inline normal">
				<i class="radio-common">
					<input type="radio" name="ap_display" value="2">
				</i>
				<span>轮播</span>
			</label>
		</dd>
	</dl>
	<dl data-control="tiling">
		<dt><span style="color:red;margin-right:10px;">*</span>展示方式：</dt>
		<dd>
			<ul class="display-type-list clear">
				<li class="active" data-num="1" data-type="1">
					<img src="ADMIN_IMG/adv_position/layout_1.png" alt="">
					<h5 class="tit">一行一个</h5>
				</li>
				<li data-num="2" data-type="2">
					<img src="ADMIN_IMG/adv_position/layout_2.png" alt="">
					<h5 class="tit">一行两个</h5>
				</li>
				<li data-num="3" data-type="3">
					<img src="ADMIN_IMG/adv_position/layout_3.png" alt="">
					<h5 class="tit">一行三个</h5>
				</li>
				<li data-num="4" data-type="4">
					<img src="ADMIN_IMG/adv_position/layout_4.png" alt="">
					<h5 class="tit">一行四个</h5>
				</li>
				<li data-num="4" data-type="5">
					<img src="ADMIN_IMG/adv_position/layout_5.png" alt="">
					<h5 class="tit">两左两右</h5>
				</li>
				<li data-num="3" data-type="6">
					<img src="ADMIN_IMG/adv_position/layout_6.png" alt="">
					<h5 class="tit">一左两右</h5>
				</li>
				<li data-num="3" data-type="7">
					<img src="ADMIN_IMG/adv_position/layout_7.png" alt="">
					<h5 class="tit">一上两下</h5>
				</li>
				<li data-num="4" data-type="8">
					<img src="ADMIN_IMG/adv_position/layout_8.png" alt="">
					<h5 class="tit">一左三右</h5>
				</li>				
			</ul>
		</dd>
	</dl>
	<dl>
		<dt><span style="color:red;margin-right:10px;">*</span>图片：</dt>
		<dd>
			<div class="adv-container tiling" data-control="tiling">
				<div class="head">
					<div class="item clear">
						<div class="item-block empty"></div>
						<div class="item-block">图片</div>
						<div class="item-block">链接</div>
						<div class="item-block align-center">背景颜色</div>
					</div>
				</div>
				<div class="body">
					<div class="item clear">
						<div class="item-block">
							<button href="javascript:;" class="btn-common-white draggable-element"><i class="fa fa-arrows"></i></button>	
						</div>
						<div class="item-block">
							<div class="upload-btn-common">
								<div>
									<input class="input-file" name="file_upload" id="uploadTilingImg0" type="file" onchange="imgUpload(this);" title="上传">
									<input type="hidden" id="tiling_img1" value=""/>
								</div>
								<input type="text" id="text_tiling_img1" class="input-common" readonly="readonly" value="" name="img_path"/>
								<em>上传</em>
								<img id="preview_tiling_img1" src="__STATIC__/blue/img/upload-common-select.png" data-html="true" data-container="body" data-placement="top" data-trigger="manual" data-src=""/>
							</div>
						</div>
						<div class="item-block url">
							<input type="text" class="input-common" value="" name="url"/><em onclick="showUrlPopup(this)">选择链接</em>
						</div>
						<div class="item-block align-center">
							<input type="color" class="input-common-color" value="#ffffff" name="bg_color" />
						</div>
					</div>

				</div>
			</div>

			<div class="adv-container slides hide" data-control="slides">
				<div class="head">
					<div class="item clear">
						<div class="item-block empty"></div>
						<div class="item-block">图片</div>
						<div class="item-block">链接</div>
						<div class="item-block align-center">背景颜色</div>
						<div class="item-block align-center">操作</div>
					</div>
				</div>
				<div class="body">
					<div class="item clear">
						<div class="item-block">
							<button href="javascript:;" class="btn-common-white draggable-element"><i class="fa fa-arrows"></i></button>	
						</div>
						<div class="item-block">
							<div class="upload-btn-common">
								<div>
									<input class="input-file" name="file_upload" id="uploadslidesImg0" type="file" onchange="imgUpload(this);" title="上传">
									<input type="hidden" id="slides_img0" value=""/>
								</div>
								<input type="text" id="text_slides_img0" class="input-common" readonly="readonly" value="" name="img_path"/>
								<em>上传</em>
								<img id="preview_slides_img0" src="__STATIC__/blue/img/upload-common-select.png" data-html="true" data-container="body" data-placement="top" data-trigger="manual" data-src=""/>
							</div>
						</div>
						<div class="item-block url">
							<input type="text" class="input-common" value="" name="url"/><em onclick="showUrlPopup(this)">选择链接</em>
						</div>
						<div class="item-block align-center">
							<input type="color" class="input-common-color" value="#ffffff" name="bg_color" />
						</div>
						<div class="item-block align-center">
							<button href="javascript:;" class="btn-common-delete del"><i class="fa fa-times"></i></button>	
						</div>
					</div>
				</div>
				<div class="foot">
					<div class="item clear">
						<div class="item-block">
							<button href="javascript:;" class="btn-common add-slidesr">添加轮播图</button>
						</div>
					</div>
				</div>
			</div>
		</dd>
	</dl>
	<dl>
		<dt></dt>
		<dd>
			<button class="btn-common btn-big" onclick="save();">保存</button>
			<button class="btn-common-cancle btn-big" onclick="javascript:history.back(-1);" >返回</button>
		</dd>
	</dl>
</div>

{include file="admin/Config/selectUrl" /}

<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<script src="ADMIN_JS/drag-arrange.js"></script>
<script>
$(function(){
	$('.adv-container .body .item').arrangeable({dragSelector: '.draggable-element'});

	// 选择展示类型
	$('[name="ap_display"]').change(function(event) {
		var type = $(this).val();
		if(type == 0){
			$('[data-control="tiling"]').removeClass('hide');
			$('[data-control="slides"]').addClass('hide');
		}else if(type == 2){
			$('[data-control="slides"]').removeClass('hide');
			$('[data-control="tiling"]').addClass('hide');
		}
	});

	// 点击展示方式
	$('.display-type-list li').click(function(event) {
		$(this).addClass('active').siblings('li').removeClass('active');
		var num = $(this).attr('data-num'),
			html = '',
			old_data = getFields();

		for (var i = 0; i< num; i ++) {
			var data_item = old_data[i] != undefined ? old_data[i] : {imgPath : '', url : ''};
			html += `<div class="item clear">
						<div class="item-block">
							<button href="javascript:;" class="btn-common-white draggable-element"><i class="fa fa-arrows"></i></button>	
						</div>
						<div class="item-block">
							<div class="upload-btn-common">
								<div>
									<input class="input-file" name="file_upload" id="uploadTilingImg`+ i +`" type="file" onchange="imgUpload(this);" title="上传">
									<input type="hidden" id="tiling_img`+ i +`" value="`+ data_item['imgPath'] +`"/>
								</div>
								<input type="text" id="text_tiling_img`+ i +`" class="input-common" readonly="readonly" value="`+ data_item['imgPath'] +`" name="img_path"/>
								<em>上传</em>
								<img id="preview_tiling_img`+ i +`" src="__STATIC__/blue/img/upload-common-select.png" data-html="true" data-container="body" data-placement="top" data-trigger="manual" data-src="`+ __IMG(data_item['imgPath']) +`"/>
							</div>
						</div>
						<div class="item-block url">
							<input type="text" class="input-common" value="`+ data_item['url'] +`" name="url"/><em onclick="showUrlPopup(this)">选择链接</em>
						</div>
						<div class="item-block align-center">
							<input type="color" class="input-common-color" value="#ffffff" name="bg_color" />
						</div>
					</div>`;
		}

		$('.tiling .body').html(html);
		$('.adv-container .body .item').arrangeable({dragSelector: '.draggable-element'});
	});

	// 添加轮播图
	$('.slides .add-slidesr').click(function(event) {
		var length = $('.slides .body .item').length;
		if(length == 10) return;

		var html = `<div class="item clear">
						<div class="item-block">
							<button href="javascript:;" class="btn-common-white draggable-element"><i class="fa fa-arrows"></i></button>	
						</div>
						<div class="item-block">
							<div class="upload-btn-common">
								<div>
									<input class="input-file" name="file_upload" id="uploadslidesImg`+ length +`" type="file" onchange="imgUpload(this);" title="上传">
									<input type="hidden" id="slides_img`+ length +`" value=""/>
								</div>
								<input type="text" id="text_slides_img`+ length +`" class="input-common" readonly="readonly" value="" name="img_path"/>
								<em>上传</em>
								<img id="preview_slides_img`+ length +`" src="__STATIC__/blue/img/upload-common-select.png" data-html="true" data-container="body" data-placement="top" data-trigger="manual" data-src=""/>
							</div>
						</div>
						<div class="item-block url">
							<input type="text" class="input-common" value="" name="url"/><em onclick="showUrlPopup(this)">选择链接</em>
						</div>
						<div class="item-block align-center">
							<input type="color" class="input-common-color" value="#ffffff" name="bg_color" />
						</div>
						<div class="item-block align-center">
							<button href="javascript:;" class="btn-common-delete del"><i class="fa fa-times"></i></button>	
						</div>
					</div>`;
		$('.slides .body').append(html);
		$('.adv-container .body .item').arrangeable({dragSelector: '.draggable-element'});
	});

	// 删除
	$('body').on('click', '.slides .body .del', function(){
		$(this).parents('.item').remove();
	})
});

// 保存
var is_sub = false;
function save(){
	if(verfify()){
		var data = {
			ap_name : $('[name="ap_name"]').val(),
			ap_keyword : $('[name="ap_keyword"]').val(),
			ap_display : $('[name="ap_display"]:checked').val(),
			ap_intro : $('[name="ap_intro"]').val(),
			is_use : $('[name="is_use"]').is(':checked') ? 1 : 0,
			layout : 1,
			type : {$terminal},
			imgs : getFields()
		};

		{if $terminal eq 1}
			data.ap_width = $('[name="ap_width"]').val();
			data.ap_height = $('[name="ap_height"]').val();
		{else/}
			data.ap_width = 0;
			data.ap_height = 0;
		{/if}

		if(data.ap_display == 0){
			data.layout = $('.display-type-list .active').attr('data-type');
		}

		if(is_sub) return;
		is_sub = true;
		$.ajax({
			url: "{:__URL('ADMIN_MAIN/system/addShopAdvPosition')}",
			type: 'post',
			data: {value: JSON.stringify(data)},
			async : false,
			success : function(res){
				if(res.code > 0){
					location.href = "{:__URL('ADMIN_MAIN/system/shopAdvPositionList', 'terminal='.$terminal)}";
					showMessage('success', res["message"]);
				}else{
					showMessage('error', res["message"]);
				}
				is_sub = false;
			}
		});
	}
}

// 链接选择
var curlEl;
function showUrlPopup(event){
	curlEl = event;
	layer.open({
		type: 1,
		title: '链接选择',
		shadeClose: true,
		shade: 0.8,
		area: ['860px', '500px'],
		content: $('#url-container')
	});
}

// 图片上传
function imgUpload(event) {
	var fileid = $(event).attr("id");
	var id = $(event).next().attr("id");
	var data = { 'file_path' : "config" };
	uploadFile({
		url: __URL(ADMINMAIN + '/config/uploadimage'),
		fileId: fileid,
		data : data,
		callBack: function (res) {
			if(res.code){
				$("#" + id).val(res.data.path);
				$("#text_" + id).val(res.data.path);
				$("#preview_"+ id).attr("data-src",__IMG(res.data.path));
				showTip(res.message,"success");
			}else{
				showTip(res.message,"error");
			}
		}
	});
}

// 获取字段
function getFields(){
	var type = $('[name="ap_display"]:checked').val(),
		fields = [];

	if(type == 0){
		// 平铺
		$('.tiling .body .item').each(function(index, el) {
			fields.push({
				imgPath : $(el).find('[name="img_path"]').val(),
				url : $(el).find('[name="url"]').val(),
				bgColor : $(el).find('[name="bg_color"]').val(),
				sort : index
			})
		});
	}else if(type == 2){
		// 轮播
		$('.slides .body .item').each(function(index, el) {
			fields.push({
				imgPath : $(el).find('[name="img_path"]').val(),
				url : $(el).find('[name="url"]').val(),
				bgColor : $(el).find('[name="bg_color"]').val(),
				sort : index
			})
		});
	}
	return fields;
}

function verfify(){
	if($('[name="ap_name"]').val().search(/[\S]+/)){
		showTip('请输入广告位名称', 'error');
		$('[name="ap_name"]').focus();
		return false;
	}
	if($('[name="ap_keyword"]').val().search(/[\S]+/)){
		showTip('请输入广告位关键字', 'error');
		$('[name="ap_keyword"]').focus();
		return false;
	}

	var keyword_is_exits = false;
	$.ajax({
		url: 'ADMIN_MAIN/system/checkapkeywordisexists',
		type: 'post',
		data: { ap_keyword: $('[name="ap_keyword"]').val()},
		async : false,
		success : function(res){
			if(res > 0){
				keyword_is_exits = true;
			}
		}
	});
	if(keyword_is_exits){
		showTip('关键字已存在', 'error');
		$('[name="ap_keyword"]').focus();
		return false;
	}

	{if $terminal eq 1}
	if($('[name="ap_width"]').val() <= 0){
		showTip('请输入广告位宽度', 'error');
		$('[name="ap_width"]').focus();
		return false;
	}
	if($('[name="ap_height"]').val() <= 0){
		showTip('请输入广告位高度', 'error');
		$('[name="ap_height"]').focus();
		return false;
	}
	{/if}

	var type = $('[name="ap_display"]:checked').val(),
		is_null = false;

	if(type == 0){
		// 平铺
		$('.tiling .body .item').each(function(index, el) {
			var imgPathEl = $(el).find('[name="img_path"]'),
				urlEl = $(el).find('[name="url"]');
			if(imgPathEl.val() == ''){
				is_null = true;
				showTip('请上传广告图片', 'error');
				$(imgPathEl).focus();
				return false;
			}
			if(urlEl.val() == ''){
				is_null = true;
				showTip('请选择广告链接', 'error');
				urlEl.focus();
				return false;
			}
		});
	}else if(type == 2){
		// 轮播
		$('.slides .body .item').each(function(index, el) {
			var imgPathEl = $(el).find('[name="img_path"]'),
				urlEl = $(el).find('[name="url"]');
			if(imgPathEl.val() == ''){
				is_null = true;
				showTip('请上传轮播图图片', 'error');
				$(imgPathEl).focus();
				return false;
			}
			if(urlEl.val() == ''){
				is_null = true;
				showTip('请选择轮播图链接', 'error');
				urlEl.focus();
				return false;
			}
		});
	}
	if(is_null) return false;
	return true;
}
</script>
{/block}