{extend name="adminblue/base" /}
{block name="resources"/}
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="__STATIC__/js/codemirror/codemirror.css">
<link rel="stylesheet" href="__STATIC__/js/codemirror/ambiance.css">
<style>
	.CodeMirror{
		width: 50%;
		background: #eee;
		display: inline-block;
		float: left;
		font-size: 14px;
	}
	.cm-s-ambiance .CodeMirror-linenumber{color: #fff;}
	#show{
		width: 48%;
		height: 290px;
		float: left;
		background: #f5f5f5;
		padding: 5px 1%;
		overflow: scroll;
	}
	#show::-webkit-scrollbar-thumb{
		background-color:#333;
	}
	#show::-webkit-scrollbar{
		width: 2px;
		height: 8px;
	}
	#show::-webkit-scrollbar-track{
		background: #f5f5f5;
	}
	.title{
		width: 100%;
		height: 30px;
	}
	.title span{
		display: inline-block;
		float: left;
		width: 50%;
		height: 30px;
		line-height: 30px;
		text-align: left; 
		background: #eee;
	    border: 1px solid #ddd;
    	box-sizing: border-box;
    	color: #777;
    	padding-left: 3%;
	}
</style>
{/block}
{block name="main"}

<div class="set-style">
	<dl>
		<dt><span class="color-red">*</span>广告名称：</dt>
		<dd>
			<p><input id="adv_title" type="text" class="input-common"></p>
			<p class="error">请输入广告名称</p>
		</dd>
	</dl>
	<dl>
		<dt><span class="color-red">*</span>选择广告位：</dt>
		<dd>
			<p>
				<select name="" id="ap_id" class="select-common">
					<option value="0">请选择广告位</option>
					{notempty name="$platform_adv_position_list"}
						{foreach name="platform_adv_position_list" item="vo"}
						<option value="{$vo.ap_id}" ap-class="{$vo.ap_class}">{$vo.ap_name}</option>
						{/foreach}
					{/notempty}
				</select>
			</p>
			<p class="error">请选择广告位</p>
		</dd>
	</dl>
	<div class="data-image">
		<dl>
			<dt><span style="color:red;margin-right:10px;">*</span>广告图片：</dt>
			<dd>
				<div class="upload-btn-common">
					<div>
						<input class="input-file" name="file_upload" id="uploadAdv" type="file" onchange="imgUpload(this);" title="上传">
						<input type="hidden" id="adv" value="">
					</div>
					
					<input type="text" id="text_adv" class="input-common" readonly="readonly" value="">
					<em>上传</em>								
					<img id="preview_adv" src="__STATIC__/blue/img/upload-common-select.png" data-src="" data-html="true" data-container="body" data-placement="top" data-trigger="manual" data-original-title="" title="">
				</div>
				<p class="error">请上传图片</p>
			</dd>
		</dl>
		<dl>
			<dt>背景色：</dt>
			<dd>
				<input id="background" type="color"  class="input-common-color"/>
			</dd>
		</dl>
		<dl>
			<dt><span class="color-red">*</span>链接地址：</dt>
			<dd>
				<p><input id="adv_url" type="text" class="input-common long"></p>
				<p class="error">请输入链接地址</p>
			</dd>
		</dl>	
	</div>
	<dl>
		<dt><span class="color-red">*</span>排序：</dt>
		<dd>
			<p><input id="slide_sort" type="number" value="0" class="input-common harf"></p>
			<p class="error">请输入序号</p>
		</dd>
	</dl>
	<div class="data-code" style="display: none;">
		<dl>
			<dt><span class="color-red">*</span>广告代码：</dt>
			<dd>
				<div class="title">
					<span>输入代码</span><span style="border-left: none;">预览</span>
				</div>
				<textarea name="" id="adv_code" cols="30" rows="10"></textarea>
				<div id="show">
					
				</div>
				<p class="error" style="clear: both;">请输入广告代码</p>
			</dd>
		</dl>
	</div>
	<dl>
		<dt></dt>
		<dd>
			<button class="btn-common btn-big" onclick="addShopAdvAjax();">保存</button>
			<button class="btn-common-cancle btn-big" onclick="window.location.href = window.history.go(-1);" >返回</button>
		</dd>
	</dl>
</div>

<input type="hidden" id="ap_id" value="{$ap_id}">
{/block}
{block name="script"}
<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="__STATIC__/js/codemirror/codemirror.js"></script>
<script src="__STATIC__/js/codemirror/mode/xml/xml.js"></script>

<script>
var editor=CodeMirror.fromTextArea(document.getElementById("adv_code"),{
    mode:"text/html",
   	lineNumbers: true,
    matchBrackets: true,
    styleActiveLine: true,
    tabSize : 4,
    completeSingle: true,
    extraKeys:{"Ctrl-Space":"autocomplete"},
    lineWrapping : true,
    autofocus: true,
    // theme: "ambiance",
    flattenSpans : false,
    scrollbarStyle : null //隐藏滚动条
});

editor.on('change', function() {  
    adv_code = editor.getValue();
    $("#show").html(adv_code);
});

function imgUpload(event) {
	var fileid = $(event).attr("id");
	var data = { 'file_path' : UPLOADADV };
	var id = $(event).next().attr("id");
	uploadFile(fileid,data,function(res){
		if(res.code){
			$("#" + 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");
		}
	});
}

$("#ap_id").change(function(){
	var ap_class = $(this).find("option:selected").attr("ap-class");
	if(ap_class == 0){
		$(".data-image").show();
		$(".data-code").hide();
	}else if(ap_class == 4){
		$(".data-image").hide();
		$(".data-code").show();
	}
})

//添加广告位
var is_click = false;
function addShopAdvAjax() {
	var adv_title = $("#adv_title").val();
	var ap_id = $("#ap_id").val();
	var adv_image = $("#adv").val();
	var adv_url = $("#adv_url").val();
	var slide_sort = $("#slide_sort").val();
	var background = $("#background").val();
	var ap_class =  $("#ap_id option:selected").attr("ap-class");
	var adv_code = editor.getValue();
	if(verify(adv_title,adv_image,adv_url,slide_sort,ap_id,ap_class,adv_code)){
		if(is_click){
			return false;
		}
		is_click = true;
		$.ajax({
			type : "post",
			url : "{:__URL('ADMIN_MAIN/system/addshopadv')}",
			data : {
				'adv_title' : adv_title,
				'ap_id' : ap_id,
				'adv_image' : adv_image,
				'adv_url' : adv_url,
				'slide_sort' : slide_sort,
				'background' : background,
				'adv_code' : adv_code
			},
			success : function(data) {
				if (data["code"] > 0) {
					showTip("添加成功",'success');
					location.href = __URL('ADMIN_MAIN/system/shopadvlist');
				}else{
					showTip("添加失败",'error');
				}
			}
		});
	}
}

function verify(adv_title,adv_image,adv_url,slide_sort,ap_id,ap_class,adv_code){
	if(adv_title == ''){
		$("#adv_title").parent().next(".error").show();
		$('#adv_title').focus();
		return false;
	}else{
		$(".error").hide();
	}
	if(ap_id == 0){
		$("#ap_id").parent().next(".error").show();
		return false;
	}else{
		$(".error").hide();
	}

	if(adv_image == '' && ap_class == 0){
		$("#adv").parents('dd').find(".error").show();
		return false;
	}else{
		$(".error").hide();
	}
	
	if(adv_url == '' && ap_class == 0){
		$("#adv_url").parent().next(".error").show();
		$("#adv_url").focus();
		return false;
	}else{
		$(".error").hide();
	}
	
	if(slide_sort == ''){
		$("#slide_sort").parent().next(".error").show();
		$("#slide_sort").focus();
		return false;
	}else{
		$(".error").hide();
	}

	if(adv_code.length == 0 && ap_class == 4){
		$("#adv_code").parents("dd").find(".error").show();
		$("#adv_code").focus();
		return false;
	}else{
		$(".error").hide();
	}
	return true;
}
</script>
{/block}