{extend name="admin/base" /}
{block name="resources"/}
<script src="ADMIN_JS/art_dialog.source.js"></script>
<script src="ADMIN_JS/iframe_tools.source.js"></script>
<script src="ADMIN_JS/material_managedialog.js"></script>
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/defau.css">
<style type="text/css">
.error {
	padding-left: 5px !important;
}
.table{
	width:98%;
	display:table;
    border-left: 1px dotted #e5e5e5;
    border-right: 1px dotted #e5e5e5;
    border-bottom: 1px dotted #e5e5e5;
    background: rgba(204, 204, 204, 0.09);
    padding: 0px 10px 10px 10px;
}
.table-body{
	min-height:50px;
	max-height:410px;
	overflow-y:auto;
	overflow-x:hidden;
}
.inline-block{display:inline-block;}
.w5{width:5%;}
.w75{width:15%;}
.w19{width:10%;text-align:center;}
.w100{width:100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dotted #e5e5e5;}
.add-spec{
	height: 40px;
    line-height: 40px;
	border-bottom:1px dotted #E6E6E6;
}
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:0px;
}
.set-style dl dt {
	text-align:left;
	    width: 7%;
}
.attr-choose-wrap label, .relate-norm label {
    cursor: pointer;
    float: left;
    margin: 0 15px 10px 0;
    padding: 0 10px;
    color: #636363;
    line-height: 28px;
/*     border: 1px solid #ccc; */
/*     background-color: #fff; */
}
.attr-choose-wrap label.current, .relate-norm label.current {
    color: #636363;
/*     border-color: #004a73; */
    background: url(../images/icon_choose.gif) no-repeat right bottom;
/*     background-color: #eff7fe; */
}
a:hover{
	    text-decoration: none;
}
input{
	width:100px;
}
.selectbox{
	width:130px;
}
label {
    font-weight: normal;
}
.text {
    color: #fb6b5b;
}
.attr_table{
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: #ffffff;
    border: 1px solid #999;
    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: 0px 20px;
    line-height: 40px;
    background: #e5e5e5;
}
.addSpec{
	    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
}
.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee;
}
.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;
}
</style>
{/block} {block name="main"}
<div class="set-style">
	<dl>
		<dt><span class="color-red">*</span>类型名称:</dt>
		<dd>
			<input id="attr_name" type="text" placeholder="请输入类型名称" />
			<span class="error">请输入类型名称</span>
		</dd>
	</dl>
	<dl>
		<dt><span class="color-red">&nbsp;</span>属性排序:</dt>
		<dd>
			<input id="sort" type="text" value="" 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>
	<div class="table">
		<div class="add-spec">关联规格</div>
		{if condition="$goodsguige neq ''"}
		<div class="padding-top padding-left padding-right attr-choose-wrap clearfix" style="border-bottom: 1px dotted #e5e5e5;">
			{foreach name="goodsguige['data']" item="v"}
			<label class="ralationguige" style="margin-top: 8px;"><input type="checkbox" value="{$v.spec_id}" name="spec"/>{$v.spec_name}</label>
			{/foreach}
		</div>
		{/if}
	</div>
	<div class="table">
		<div class="w100">
			<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">
			<div class="w100 value_data">
				<div class="inline-block w5"><label style="margin-left: 5px;"> <input type="checkbox" style=""></label></div>
				<div class="inline-block w75">
					<input type="text" name="value_sort_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" >
					<span class="spec_box_0"></span>
				</div>
				
				<div class="inline-block w75">
					<select class="selectbox_0" 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" id="value_0">
	
				</div>
				<div class="inline-block w75"  style="width:10%;">
					<a href="javascript:;" class="is_search is_search_0"  is_search="1" onclick="tab_is_search(this)"><i class="fa fa-check text-success text-active"></i></a>
				</div>
				<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
			</div>
		</div>
		<div><a href="javascript:;" onclick="addSpecValue(this)"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加一个属性</a></div>
	</div>
	
	<!-- 点击编辑弹出框开始 -->
<!-- 	<div tabindex="0" style="opacity: 0.7; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; display:none; overflow: hidden; z-index: 1032; background: rgb(0, 0, 0);" class="ui-popup-backdrop shade"></div> -->
			<div class="attr_table" id="Attrbox" style="display:none;">
<!-- 				<div class="edit_top">编辑属性值<span style="float:right;cursor: pointer;" id="close">X</span></div> -->
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">编辑属性值</h3>
				</div>
				<div class="w100">
					<div class="inline-block w5"></div>
					<div class="inline-block w75" style="width:80%;">属性名称</div>
					<div class="inline-block w19">操作</div>
				</div>
				<div class="table-body">
					<div class="w100 Spec_data">
						<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" style=""></label></div>
						<div class="inline-block w75" style="width:80%">
							<input type="text" name="attr_value" style="width:200px;">
						</div>
						<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>
					</div>
				</div>
				<div class="addSpec"><a href="javascript:;" onclick="addAttrSmallValue(this)"><i class="fa fa-plus"></i>&nbsp;&nbsp;添加一个属性</a></div>
				<div class="modal-footer">
					<input type="hidden" value="" id="click_order"/>
					<button class="btn btn-info" onclick="submitAttrValue()" style="display:inline-block;">保存</button>
					<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
<!-- 点击编辑弹出框结束 -->
	<button class="edit_button" onclick="addGoodsAttribute();">提交</button>
</div>

<script>
//点击改变是否可以编辑属性值
function updateAttrselectvalue(order,e){
	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).html();
	var value_arr = value_str.split(',');
	var html = '';
	for(var i=0; i<value_arr.length; i++){
		html += '<div class="w100 Spec_data">';
	    html += '<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" style=""></label></div>';
	    html += '<div class="inline-block w75" style="width:80%">';
	    html += '<input type="text" name="attr_value" style="width:200px;margin-left:4px;" value="'+value_arr[i]+'">';
	    html += '</div>';
	    html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
	    html += '</div>';
	}
	$(".Spec_data").remove();
	$(".attr_table .table-body").append(html);
	$("#Attrbox").show();
}
$(".close").click(function(){
	$("#Attrbox").hide();
})
$(".btn").click(function(){
	$("#Attrbox").hide();
})

function tab_is_search(e){
	var type = $(e).attr("is_search");
	if(type == 0){
		$(e).html('<i class="fa fa-check text-success text-active"></i>');
		$(e).attr("is_search", 1);
	}else{
		$(e).html('<i class="fa fa-times text-danger text"></i>');
		$(e).attr("is_search", 0);
	}
}
function submitAttrValue(){
	var click_order = $("#click_order").attr('click_order');
	
	var attr_value_obj = $("input[name='attr_value']");
	var attr_value_str = '';
	attr_value_obj.each(function(i){
		if(attr_value_obj.eq(i).val() != ''){
			attr_value_str += ',' + trim(attr_value_obj.eq(i).val());
		}
	});
	attr_value_str = attr_value_str.substr(1);
	$("#value_"+click_order).text(attr_value_str);
}
function addAttrSmallValue(e){
	var spec_data_num = $(".Spec_data").length;
	var html = '<div class="w100 Spec_data">';
	html += '<div class="inline-block w5"><label style="margin-left: 15px;"> <input type="checkbox" style=""></label></div>';
	html += '<div class="inline-block w75" style="width:80%">';
	html += '<input type="text" name="attr_value" style="width:200px;margin-left: 4px;">';
	html += '</div>';
	html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
	html += '</div>';
	$(e).parents(".attr_table").find(".table-body").append(html);
}
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="text" name="value_sort_'+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+'" style="margin-right:5px;"><span class="spec_box_'+data_obj_num+'">输入框无需编辑</span>';
	 html += '</div>';
	 html += '<div class="inline-block w75" style="margin-right: 5px;">';
	 html += '<select class="selectbox_'+data_obj_num+'" 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" style="margin-right: 4px;" id="value_'+data_obj_num+'">';
	 html += '</div>';
	 html += '<div class="inline-block w75" style="margin-right: 5px;width:10%;">';
	 html += '<a href="javascript:;" class="is_search is_search_'+data_obj_num+'"  is_search="1" onclick="tab_is_search(this)"><i class="fa fa-check text-success text-active"></i></a>';
	 html +='</div>';
	 html += '<div class="inline-block w19"><a href="javascript:;" onclick="delSpecValue(this)">删除</a></div>';
	 html += '</div>';
	 $(e).parents(".table").find(".table-body").append(html);
}
function delSpecValue(e){
	$( "#dialog" ).dialog({
		buttons: {
			"确定": function() {
				$(this).dialog('close');
				$(e).parents('.w100').remove();
			},"取消,#e57373" : function(){
				$(this).dialog('close');
			}
		},
		contentText:"你确定删除吗？",
		title:"消息提醒"
	});
}
function validation() {
	var attr_name = $("#attr_name");
	if (attr_name.val() == "") {
		attr_name.focus().next("span").show();
		return false;
	} else {
		attr_name.next("span").hide();
	}
	
	return true;
}
//编辑属性弹出框
$("#showAttrbox").click(function(){
	$("#Attrbox").show();
})

var flag = false;//防止重复提交
function addGoodsAttribute() {
	var attr_name = trim($("#attr_name").val());
	if(attr_name == ''){
		showMessage('error', "类型名称不能为空！");
		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 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();
			//alert(type);
			var value = $("#value_"+i).html();
			if(type > 1){
				if(value == ''){
					$("#type_"+i).focus();
					showMessage('error', '类型为单选框或复选框时，属性值不能为空');
					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 = 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] == ''){
		showMessage('error', "商品类型属性名称不能为空！");
		return false;
	}
	
	if(flag){
		return;
	}
	flag = true;
	$.ajax({
		type : "post",
		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
		},
		success : function(data) {
			if (data["code"] > 0) {
				showMessage('success', "添加成功",'ADMIN_MAIN/Goods/attributelist');
			} else {
				showMessage('error', "添加失败");
				flag = false;
			}
		}
	});
}
function delSpecValue(e){
	$(e).parents(".Spec_data").remove();
}
</script>
{/block}