{extend name="adminblue/base" /}
{block name="resources"/}
<style type="text/css">
.error {padding-left: 5px !important;}
.table{width:100%;display:table;}
.inline-block{display:inline-block;}
.w1{width:1%;}
.w5{width:5%;}
.w75{width:15%;}
.w19{width:10%;text-align:center;}
.w100{width:99.87% !important;height: 40px;line-height: 40px;border-bottom: 1px dotted #E1E6F0;border-left: 1px solid #E1E6F0;border-right: 1px solid #E1E6F0;}
.add-spec{height: 40px;line-height: 40px;border-bottom:1px dotted #E6E6E6;padding:0 10px;}
input{vertical-align: initial;}
.table input[type="text"], input[type="password"], input.text, input.password {font: 12px/20px Arial;color: #777;background-color: #FFF;vertical-align: baseline;margin-bottom:0;}
.set-style dl dt {width: 130px;text-align: right;}
.attr-choose-wrap label, .relate-norm label {cursor: pointer;float: left;margin: 0 15px 10px 0;padding: 0 10px;color: #636363;line-height: 28px;}
.attr-choose-wrap label.current, .relate-norm label.current {color: #636363;background: url(../images/icon_choose.gif) no-repeat right bottom;}
input{width:100px;}
.selectbox{width:130px;}
.text {color: #fb6b5b;}
.attr_table{position: fixed;top: 50%;left: 50%;z-index: 1050;width: 560px;margin-left: -281px;margin-top:-133.5px;background-color: #ffffff;border: 1px solid rgba(0, 0, 0, 0.3);outline: none;	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);background-clip: padding-box;}
.edit_top{padding: 0 20px;line-height: 40px;background: #e5e5e5;}
.addSpec{height: 40px;line-height: 40px;padding: 0 10px;}
.modal-header {padding: 9px 15px;border-bottom: 1px solid #eee;margin-bottom:10px;}
.modal-footer {padding: 14px 15px 15px;margin-bottom: 0;text-align: right;background-color: #f5f5f5;border-top: 1px solid #ddd;border-radius: 0 0 6px 6px;box-shadow: inset 0 1px 0 #ffffff;margin-top:10px;}
.w140{width:140px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;padding:0;height:23px;line-height:26px;}

/* 规格 */
.guige_p{background: #eeeeee;padding-left: 10px;}
.guige_list a,.brand_list a{display: block;float: left;margin: 2px 5px 10px 0;padding: 0 8px;border-radius: 2px;color: #333333;line-height: 29px;border: 1px solid rgb(210, 204, 204);position: relative;}
.guige_list a img,.brand_list a img{display: none;}
.guige_list a:hover,.brand_list a:hover{background: #126AE4;color: #126AE4;}
.guige_list a:hover img,.brand_list a:hover img{display: block;position: absolute;top: 9px;left: 42%;}

/* 规格表格设置 */
.attribute_table{width: 100%;}
.attribute_table thead{background: #eeeeee;}
.attribute_table th{padding: 7px 0 7px 10px;}
.attribute_table td{border:1px solid #eeeeee;padding: 7px 0 7px 10px;}
.attribute_table td input{margin-right: 5px;vertical-align: middle;}
#setGoodsBrand{width: 800px;left: 44%;}
.set-style dl dd input[type="text"], .set-style dl dd input[type="password"]{width: 100px;}
.attr_table .checkbox-common{vertical-align:1px;}

/* 关联品牌 */
.brand_content .brand_item{display: inline-block;border: 1px solid #eeeeee;text-align: center;cursor: pointer;border-radius: 5px;margin: 8.5px;width: 11.3%;height: 95px;overflow: hidden;}
.brand_content .brand_item .img_content{width: 100%;height: 70px;line-height: 70px;border-bottom: 1px solid #eeeeee;overflow: hidden;}
.brand_content .brand_item .img_content img{display: inline-block !important;vertical-align: middle !important;max-width: 100% !important;max-height: 100% !important;height: auto !important;}
.brand_content .brand_item.select p{background: #126AE4;color: #ffffff;}
.brand_content .brand_item p{margin-bottom: 0;line-height: 26px;}
.add_relation{display: block;background: #126AE4;float: left;padding: 0 12px;margin: 2px 5px 5px 0;line-height: 30px;}
.set-style dl dd textarea{height:100px;width:350px !important;}
</style>
{/block}
{block name="main"}
<div class="space-10"></div>
<div class="set-style">
	<dl>
		<dt><span class="color-red">*</span>类型名称：</dt>
		<dd>
			<input id="attr_name" type="text" placeholder="请输入类型名称" class="input-common"/>
			<span class="error">请输入类型名称</span>
		</dd>
	</dl>
	<dl>
		<dt><span class="color-red">&nbsp;</span>属性排序：</dt>
		<dd>
			<input id="sort" type="number" class="input-common harf" placeholder="0" onkeyup='this.value=this.value.replace(/\D/gi,"")'/>
		</dd>
	</dl>
	<dl>
		<dt><span class="color-red">&nbsp;</span>是否启用：</dt>
		<dd>
			<input id="is_visible" type="checkbox" class="checkbox" checked="checked" />
		</dd>
	</dl>

	<dl>
		<dt><span class="color-red">&nbsp;</span>关联规格：</dt>
		<dd>
			<div class="guige_list">
			</div>
			<a href="javascript:;" class="add_relation" data-toggle="modal" data-target="#setGoodsAttribute"><img src="ADMIN_IMG/add_ico.png" alt="" /></a>
		</dd>
	</dl>
	
	<dl>
		<dt><span class="color-red">&nbsp;</span>关联品牌：</dt>
		<dd>
			<div class="brand_list">
			</div>
			<a href="javascript:;" class="add_relation" data-toggle="modal" data-target="#setGoodsBrand"><img src="ADMIN_IMG/add_ico.png" alt="" /></a>
		</dd>
	</dl>
	
	<div class="table">
		<div class="w100" style="background: #F2F6FC;border-top: 1px solid #E1E6F0;">
			<div class="inline-block w5"></div>
			<div class="inline-block w75">排序</div>
			<div class="inline-block w75" style="width:23%;">属性名称</div>
			<div class="inline-block w75">所属类型</div>
			<div class="inline-block w75">属性值</div>
			<div class="inline-block w75" style="width:10%;">是否筛选</div>
			<div class="inline-block w19">操作</div>
		</div>
		<div class="table-body">
<!-- 		style="overflow-y:auto;max-height:330px;" -->
			<div class="w100 value_data">
				<div class="inline-block w5">
<!-- 				<label style="margin-left: 5px;"><input type="checkbox"></label> -->
				</div>
				<div class="inline-block w75">
					<input type="number" name="value_sort_0" class="input-common harf" placeholder="0" onkeyup='this.value=this.value.replace(/\D/gi,"")' />
				</div>
				<div class="inline-block w75" style="width:23%;">
					<input type="text" name="value_name_0" class="input-common middle"/>
					<span class="spec_box_0"></span>
				</div>
				
				<div class="inline-block w75">
					<select class="selectbox_0 select-common middle" id="type_0" onchange="updateAttrselectvalue(0,this);" style="width:110px;">
						<option value="1">输入框</option>
						<option value="2">单选框</option>
						<option value="3">复选框</option>
					</select>
				</div>
				<div class="inline-block w75 w140" id="value_0" style="width:11%;"></div>
				<input type="hidden" id="value_hidden_0">
				<div class="inline-block w75" style="width:13%;text-align:center;">
					<a href="javascript:;" class="is_search is_search_0" is_search="1" onclick="tab_is_search(this)">
						<img src="ADMIN_IMG/checked.png" alt="" width="15"/>
					</a>
				</div>
				<div class="inline-block w19" style="width:12%;"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
			</div>
		</div>
		<div style="padding:10px 0;">
			<div class="inline-block w5"></div>
			<a href="javascript:;" onclick="addSpecValue(this)"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加一个属性</a>
		</div>
	</div>
	
	<!-- 点击编辑弹出框开始 -->
	<div class="attr_table" id="Attrbox" style="display:none;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">编辑属性值</h3>
		</div>
		<dl>
			<dt><span class="color-red">*</span>属性值：</dt>
			<dd>
				<textarea rows="" cols="" id="attr_value" class="textarea-common"></textarea>
				<p class="hint">一行为一个属性值，多个属性值用换行输入</p>
			</dd>
		</dl>
		<div class="modal-footer">
			<input type="hidden" id="click_order"/>
			<button class="btn-common btn-big" onclick="submitAttrValue();hide_modal();" style="display:inline-block;">保存</button>
			<button class="btn-common-cancle btn-big" data-dismiss="modal" aria-hidden="true" onclick="hide_modal();">关闭</button>
		</div>
	</div>
	
	<!-- 点击编辑弹出框结束 -->
	<dl>
		<dt></dt>
		<dd>
			<button class="btn-common btn-big" onclick="addGoodsAttribute();">保存</button>
			<button class="btn-common-cancle btn-big" onclick="window.location.href = window.history.go(-1);">返回</button>
		</dd>
	</dl>
</div>

<!--设置规格 -->
<div class="modal fade hide" id="setGoodsAttribute" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3>规格关联设置</h3>
			</div>
			<div class="modal-body">
				<table class="attribute_table">
					<thead>
						<tr>
							<th width="30%">规格</th>
							<th width="70%">描述</th>
						</tr>
					</thead>
					<tbody>
						{volist name="goodsguige['data']" id="v" key="k"}
							<tr>
								<td>
									<label for="attribute_check{$k}">
										<i class="checkbox-common">
											<input type="checkbox" id="attribute_check{$k}" value="{$v.spec_id}" spec_name="{$v.spec_name}" {in name="v.spec_id" value="$info.spec_id_array"}checked{/in} name="spec"/>
										</i>
										{$v.spec_name}
									</label>
								</td>
								<td>{$v.spec_des}</td>
							</tr>
						{/volist}
						
					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn-common btn-big" onclick="setSku();">确定</button>
				<button type="button" class="btn btn-big" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

<!--设置品牌 -->
<div class="modal fade hide" id="setGoodsBrand" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h3>关联品牌设置</h3>
			</div>
			<div class="modal-body">
				<div class="brand_content">
					{foreach name="brand_list" item="v"}
					<div class="brand_item {in name="v.brand_id" value="$info.brand_id_array"}select{/in}" brand_id = "{$v.brand_id}">
						<div class="img_content"><img src="{:__IMG($v.brand_pic)}" alt="" /></div>
						<p>{$v.brand_name}</p>
					</div>
					{/foreach}
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn-common btn-big" onclick="setBrand();">确定</button>
				<button type="button" class="btn btn-big" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<script src="ADMIN_JS/plugin/drag-arrange.js"></script>
<script>
//点击改变是否可以编辑属性值
function updateAttrselectvalue(order,e){
	$("#Attrbox").hide();
	if($(e).val()==1){
		$(e).parents(".value_data").find(".spec_box_"+order).html('<a href="javascript:;" style="color: #777;"></a>');
	}else{
		$(e).parents(".value_data").find(".spec_box_"+order).html('<a href="javascript:;" id="showAttrbox_'+order+'" onclick="showAttrbox('+order+',this);"> 编辑属性值</a>');
	}
	$(e).parents(".value_data").find("#value_"+order).html('');
	$("#Attrbox .Spec_data:gt(0)").remove();
	$("#Attrbox .Spec_data").eq(0).find("input[name='attr_value']").val('');
}

//点击编辑属性值弹出框事件
function showAttrbox(order,e){
	var click_order = $("#click_order").attr('click_order',order);
	var value_str = $(e).parents(".value_data").find("#value_"+order).text();
	var attr_value = "";
	if(value_str != undefined){
		var value_arr = value_str.split(',');
		for(var i=0; i<value_arr.length; i++){
			if(value_arr[i] != ""){
				if((i+1) == value_arr.length) attr_value += value_arr[i];
				else attr_value += value_arr[i]+"\n";
			}
		}
	}
	$("#attr_value").val($.trim(attr_value));
	$("#Attrbox").show();
}

$(".close").click(function(){
	$("#Attrbox").hide();
});

$(".btn").click(function(){
	$("#Attrbox").hide();
});

$('.brand_content>.brand_item').click(function(){

	if($(this).hasClass('select')){
		$(this).removeClass('select');
	}else{
		$(this).addClass('select');	
	}
});

function tab_is_search(e){
	var type = $(e).attr("is_search");
	if(type == 0){
		$(e).html('<img src="ADMIN_IMG/checked.png" alt="" width="15"/>');
		$(e).attr("is_search", 1);
	}else{
		$(e).html('<img src="ADMIN_IMG/un_checked.png" alt="" width="15"/>');
		$(e).attr("is_search", 0);
	}
}

function submitAttrValue(){
	var v = $("#attr_value").val().split("\n").toString();
	var click_order = $("#click_order").attr('click_order');
	$("#value_"+click_order).text(v);
	$("#value_hidden_"+click_order).val(v);
}

function addSpecValue(e){
	var data_obj_num = $(".value_data").length;
	var html = '<div class="w100 value_data">';
	html += '<div class="inline-block w5" style="padding-right:3px;"><!--<label style="margin-left: 5px;"> <input type="checkbox" style=""></label>--></div>';
	html += '<div class="inline-block w75" style="padding-right: 4px;">';
	html += '<input type="number" name="value_sort_'+data_obj_num+'"  class="input-common harf" value="'+data_obj_num+'" onkeyup=\'this.value=this.value.replace(/\D/gi,"")\'>';
	html += '</div>';
	html += '<div class="inline-block w75" style="margin-right: 5px;width:23%;">';
	html += '<input type="text" name="value_name_'+data_obj_num+'" class="input-common middle" style="margin-right:5px;"><span class="spec_box_'+data_obj_num+'"></span>';
	html += '</div>';
	html += '<div class="inline-block w75" style="margin-right: 9px;">';
	html += '<select class="selectbox_'+data_obj_num+' select-common middle" id="type_'+data_obj_num+'" style="width:110px;" onchange="updateAttrselectvalue('+data_obj_num+',this);">';
	html += '<option value="1">输入框</option>';
	html += '<option value="2">单选框</option>';
	html += '<option value="3">复选框</option>';
	html += '</select>';
	html += '</div>';
	html += '<div class="inline-block w75 w140" style="width:11%;" id="value_'+data_obj_num+'">';
	html += '</div>';
	html += '<input type="hidden" id="value_hidden_'+data_obj_num+'" value="">';
	html += '<div class="inline-block w75" style="text-align:center;width:13%;padding-right:5px;">';
	html += '<a href="javascript:;" class="is_search is_search_'+data_obj_num+'"  is_search="1" onclick="tab_is_search(this)"><img src="ADMIN_IMG/checked.png" alt="" width="15"/></a>';
	html +='</div>';
	html += '<div class="inline-block w19" style="width:12%;"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
	html += '</div>';
	$(e).parents(".table").find(".table-body").append(html);
	$('.select-common').selectric();
}

function delSpecValue(e){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$(this).dialog('close');
				$(e).parents('.w100').remove();
			},"取消,#f5f5f5,#666" : function(){
				$(this).dialog('close');
			}
		},
		contentText:"你确定删除吗？",
		title:"消息提醒"
	});
}

var flag = false;//防止重复提交
function addGoodsAttribute() {
	var attr_name = trim($("#attr_name").val());
	if(attr_name == ''){
		$("#attr_name").focus();
		showTip("类型名称不能为空",'warning');
		return false;
	}
	var sort = $("#sort").val();
	if ($("#is_visible").prop("checked")) {
		var is_visible = 1;
	} else {
		var is_visible = 0;
	}
	
	var select_box = '';
	$("input[name='spec']:checked").each(function(){
		select_box = select_box+','+$(this).val();
	});
	select_box = select_box.substring(1);
	
	var select_brank = '';
	$(".brand_list a").each(function(){
		select_brank = select_brank+','+$(this).attr('value');
	});
	
	var data_obj = $(".value_data");
	var data_obj_str = '';
	data_obj.each(function(i){
		if(data_obj.eq(i) != ''){
			var value_sort = $("input[name='value_sort_"+i+"']").val();
			var value_name = trim($("input[name='value_name_"+i+"']").val());
			var type = $("#type_"+i).val();
			var value = $("#value_hidden_"+i).val();
			if(type > 1){
				if(value == ''){
					$("#type_"+i).focus();
					showTip("类型为单选框或复选框时，属性值不能为空",'warning');
					flag = true;
					return false;
				}else{
					flag = false;
				}
			}
			var is_search = $(".is_search_"+i).attr("is_search");
			var new_str = '';
			new_str = value_name+ '|' +type+ '|' +value_sort+ '|' +is_search+ '|' +value;
			data_obj_str += ';' + new_str;
		}
	});
	data_obj_str = data_obj_str.substr(1);
	var data_obj_arr = data_obj_str.split('|');
	if(data_obj_arr[0] == ''){
		showTip("商品类型属性名称不能为空！",'warning');
		return false;
	}
	
	if(flag) return;
	flag = true;
	$.ajax({
		type : "post",
		url : "{:__URL('ADMIN_MAIN/goods/addattributeservice')}",
		data : {
			'attr_name' : attr_name,
			'sort' : sort,
			'is_visible' : is_visible,
			'select_box' :select_box,
			'data_obj_str' : data_obj_str,
			'select_brank' : select_brank
		},
		success : function(data) {
			if (data["code"] > 0) {
				showTip("添加成功","success");
				location.href = "{:__URL('ADMIN_MAIN/goods/attributelist')}";
			} else {
				showTip("添加失败","error");
				flag = false;
			}
		}
	});
}

//修改sku
function setSku(){
	
	var guige_list_html = '';
	$('#setGoodsAttribute input[name="spec"]').each(function(){
		if($(this).is(":checked")){
			
			guige_list_html += '<a href="javascript:;" value="'+ $(this).val() +'">'+ $(this).attr('spec_name') +'<img src="ADMIN_IMG/delete_ico.png" alt="" /></a>';
		}
	})
	$('.guige_list').html(guige_list_html);
	$("#setGoodsAttribute").modal('hide');
	load();
}

//修改关联品牌
function setBrand(){
	var brand_list_html = '';
	$('.brand_content>div.select').each(function(){
		brand_list_html += '<a href="javascript:;" value="'+ $(this).attr('brand_id') +'">'+ $(this).find('p').text() +'<img src="ADMIN_IMG/delete_ico.png" alt="" /></a>';
	})
	$('.brand_list').html(brand_list_html);
	$("#setGoodsBrand").modal('hide');
	load();
}

function load(){
	/* 删除自我选择， 规格、品牌 */
	$('.guige_list a, .brand_list a').click(function(){
		
		var value = $(this).attr('value');
		
		if($(this).parents().hasClass('guige_list')){
			$('#setGoodsAttribute input[value="'+value+'"]').prop("checked", false); 
		}else{
			$('#setGoodsBrand .brand_item[brand_id="'+value+'"]').removeClass("select");
		}
		$(this).remove();
	})

}

//隐藏修改属性弹框
function hide_modal(){
	$("#Attrbox").hide();
}
</script>
{/block}