{extend name="adminblue/base" /}
{block name="resources"/}
<!-- 用 ，加载数据-->
<style>
/* .service-guarantee{text-align: center;width:700px;margin:20px;} */
.service-guarantee input{width:90%;}
.service-guarantee input.error{border:1px solid #f72424 !important;}
.table-class{border:1px solid #e5e5e5;}
.input-file{
	opacity: 0;
    position: absolute;
    top: -13px;
    left: 23px;
    z-index: 1;
	height:50px;
}
.js-goods-spec-value-img img{
	position: absolute;
    top: -11px;
    left: 44px;
}
.table-class tr td{
	cursor: pointer;
}
.black-bg{
	    position: absolute;
    right: 0;
    top: -1px;
    left: 85px;
    bottom: 0;
/*     background-color: rgba(0,0,0,0.6); */
    width: 30px;
    height: 30px;
    z-index: 999999;
    border-radius: 50%;
}
.off-box{
       position: absolute;
    width: 30px;
    height: 30px;
    /* right: 12%; */
    /* top: 11%; */
    line-height: 27px;
    /* background-color: #FFF; */
    cursor: pointer;
    text-align: center;
    z-index: 999999;
    text-align: center;
	background:url('__STATIC__/blue/img/goods_sku_del.png') no-repeat;
	background-size: 100%;
}

.shop_service_item{position: relative;cursor: pointer;width: 200px;height: 30px;}
.shop_service_item:hover .black-bg{display: block;} 
.shop_service_item input[type="file"]:hover{color: #ffffff;}
</style>
{/block}
{block name="alert_info"}
<p style="margin: 0;">添加成功后，商家服务将会在商品详情中展示</p>
{/block}
{block name="main"}
<div class="service-guarantee">
	<table class="table-class">
		<colgroup>
			<col width="20%">
			<col width="30%">
			<col width="50%">
		</colgroup>
		<tr>
			<th>图标</th>
			<th>标题</th>
			<th>描述</th>
		</tr>
		{foreach name="$list" item="vo" key=key}
		<tr data-flag="{$vo.id}">
			<td align="center">
				<div class="shop_service_item" >
					<input class="input-file" name="file_upload" id="uploadImg{$key}" type="file" onchange="imgUpload(this);" style="cursor: pointer;width: 30px;margin-top: 12px;margin-left: 62px;" title=" " >
					<input type="hidden" id="logo{$key}" value="{$vo.pic}" class="sg-pic" >
					{if condition="$vo.pic eq ''"}
					<img id="imglogo{$key}" src="__STATIC__/blue/img/goods_sku_add.png" style="cursor: pointer;width:28px;height:28px;">
					{else/}
					<img src="{$vo.pic}" id="imglogo{$key}" style="cursor: pointer;width:28px;height:28px;" class="black_data">
					<div class="black-bg hide">
						<div class="off-box"></div>
					</div>
					{/if}
				</div>
			</td>
			<td align="center">
				<input type="text" placeholder="请输入商家服务标题" class="input-common sg-title" value="{$vo.title}"/>
			</td>
			<td align="center">
				<input type="text" placeholder="请输入商家服务描述" class="input-common sg-describe" value="{$vo.describe}"/>
			</td>
		</tr>
		{/foreach}
		<tr>
			<td align="center" ><button class="btn-common btn-big"  onclick="save()">保存</button></td>
			<td colspan="2"></td>
		</tr>
	</table>
</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>
 var UPLOADICO = '{$Think.const.UPLOAD_ICO}';
 var html = '<div class="black-bg hide"><div class="off-box"></div></div>';
function imgUpload(event) {
	var fileid = $(event).attr("id");
	var data = { 'file_path' : UPLOADICO };
	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);
			$("#img"+id).after(html);
			showTip(res.message,"success");
			load();
		}else{
			showTip(res.message,"error");
		}
	});
}

// $(".input-file").mouseover(function(){
// 	$(this).nextAll(".hide").show();
// }).mouseout(function (){  
// 	$(this).nextAll(".hide").hide();  
// });  

var orignal_pic = '__STATIC__/blue/img/goods_sku_add.png';
var new_pic = '';
function load(){

	$(".off-box").click(function(){
		$(this).parent().prev().attr('src',orignal_pic);
		$(this).parent().prev().prev(".sg-pic").val(new_pic);
		$(this).parent().remove();
	})
}


var is_ok = true;
$(function(){
	
	//商家服务标题验证
	$(".sg-title").keyup(function(){
		if($(this).val().length>10){
			showTip("标题不能超出10个字","warning");
			$(this).addClass("error");
			is_ok = false;
		}else{
			$(this).removeClass("error");
			is_ok = true;
		}
	});
	
	//商家服务描述验证
	$(".sg-describe").keyup(function(){
		if($(this).val().length>60){
			showTip("描述不能超出60个字","warning");
			$(this).addClass("error");
			is_ok = false;
		}else{
			$(this).removeClass("error");
			is_ok = true;
		}
	});
	load();
});
function save() {
	if(!is_ok || $(".table-class input.error").length){
		showTip("请检查填写的数据是否正确","warning");
		return;
	}
	var value = new Array();
	$(".service-guarantee .table-class tr[data-flag]").each(function(i){
		var obj = {
			"id" : i,
			"title" : $(this).find(".sg-title").val(),
			"describe" : $(this).find(".sg-describe").val(),
			"pic" : $(this).find(".sg-pic").val()
		};
		
		value.push(obj);
		
	});
// 	alert(JSON.stringify(value));die;
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/config/merchantService')}",
		data : { 'value' : JSON.stringify(value) },
		success : function(data) {
			if (data["code"] > 0) {
				showTip(data.message,"success");
			} else {
				showTip(data.message,"error");
			}
		}
	});
}
</script>
{/block}