<style type="text/css">
.spectable td,.spectable th {border:1px solid #ccc; vertical-align: middle;text-align:center;};
.spectable th {font-weight: bold;}
.spectable  input {text-align: center;}
.f {border-color: #b94a48;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
</style>


<div class="form-group">
	<label class="checkbox-inline col-xs-12 col-sm-2 col-md-2 control-label">
		<input type="checkbox" id="hasoption" value="1" name="hasoption" {if $item['hasoption']==1}checked{/if} />启用商品规格
	</label>
	<div class="col-sm-9 col-xs-12">
		<span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则不显示,-1为不限制</span>
	</div>
</div>

<div id='tboption' style='{if $item['hasoption']!=1}display:none{/if}'>
	<div class="alert alert-info">
		1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br/>
		2. 每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
	</div>
	<div id='specs'>
		{loop $allspecs $spec}
		{php include $this->template('spec')}
		{/loop}
	</div>
	<table class="table">
		<tr>
			<td>
				<h4><a href="javascript:;" class='btn btn-primary' id='add-spec' onclick="addSpec()" style="margin-top:10px;margin-bottom:10px;"title="添加规格"><i class='fa fa-plus'></i> 添加规格</a> 
				<a href="javascript:;" onclick="calc()" title="刷新规格项目表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格项目表</a></h4>
			</td>
		</tr>
	</table>
	<div class="panel-body table-responsive" id="options" style="padding:0;">
		{$html}
	</div>
</div>


<script language="javascript">
	$(function(){
		$('#specs').sortable({
			stop: function(){
				window.optionchanged = true;
			}
		});
		$('.spec_item_items').sortable({
			handle:'.fa-arrows',
			stop: function(){
				window.optionchanged = true;
			}
		});
		$("#hasoption").click(function(){
			var obj = $(this);
			if (obj.get(0).checked){
				$("#tboption").show();
			}else{
				$("#tboption").hide();
			}
		});
	})
	
	function addSpec(){
		$("#add-spec").html("正在处理...").attr("disabled", "true").toggleClass("btn-primary");
		var url = "{php echo $this->createWebUrl('spec')}";
		$.ajax({
			"url": url,
			success:function(data){
				$("#add-spec").html('<i class="fa fa-plus"></i> 添加规格').removeAttr("disabled").toggleClass("btn-primary"); ;
				$('#specs').append(data);
				var len = $(".add-specitem").length -1;
				$(".add-specitem:eq(" +len+ ")").focus();
				window.optionchanged = true;
			}
		});
	}
	
	function removeSpec(specid){
		if (confirm('确认要删除此规格?')){
			$("#spec_" + specid).remove();
			window.optionchanged = true;
		}
	}
	
	function addSpecItem(specid){
		$("#add-specitem-" + specid).html("正在处理...").attr("disabled", "true");
		var url = "{php echo$this->createWebUrl('specitem')}" + "&specid=" + specid;
		$.ajax({
			"url": url,
			success:function(data){
				$("#add-specitem-" + specid).html('<i class="fa fa-plus"></i> 添加规格项').removeAttr("disabled");
				$('#spec_item_' + specid).append(data);
				var len = $("#spec_" + specid + " .spec_item_title").length -1;
				$("#spec_" + specid + " .spec_item_title:eq(" +len+ ")").focus();
				window.optionchanged = true;
			}
		});
    }
	
	function removeSpecItem(obj){
		$(obj).parent().parent().parent().remove();
	}
	
	function calc(){
		window.optionchanged = false;
		var html = '<table class="table table-bordered table-condensed"><thead><tr class="active">';
		var specs = [];
		$(".spec_item").each(function(i){
			var _this = $(this);
			var spec = {
				id: _this.find(".spec_id").val(),
				title: _this.find(".spec_title").val()
			};
			var items = [];
			_this.find(".spec_item_item").each(function(){
				var __this = $(this);
				var item = {
					id: __this.find(".spec_item_id").val(),
					title: __this.find(".spec_item_title").val(),
					show:  __this.find(".spec_item_show").get(0).checked?"1":"0"
				}
				items.push(item);
			});
			spec.items = items;
			specs.push(spec);
		});
		specs.sort(function(x,y){
			if (x.items.length > y.items.length){
				return 1;  
			}
			if (x.items.length < y.items.length) {
				return -1;  
			}
		});
		var len = specs.length;
		var newlen = 1; //多少种组合
		var h = new Array(len); //显示表格二维数组  
		var rowspans = new Array(len); //每个列的rowspan
		for(var i=0;i<len;i++){
			//表头
			html+="<th style='width:80px;'>" + specs[i].title + "</th>";
			//计算多种组合
			var itemlen = specs[i].items.length;
			if(itemlen<=0) { itemlen = 1 };
			newlen*=itemlen;
			//初始化 二维数组
			h[i] = new Array(newlen);
			for(var j=0;j<newlen;j++){
				h[i][j] = new Array();
			}    
			//计算rowspan
			var l  = specs[i].items.length;
			rowspans[i] = 1;
			for(j=i+1;j<len;j++){
				rowspans[i]*= specs[j].items.length;
			}
		}
		html += '<th class="info" style="width:130px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">库存</div><div class="input-group"><input type="text" class="form-control option_stock_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_stock\');"></a></span></div></div></th>';
		html += '<th class="success" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">销售价格</div><div class="input-group"><input type="text" class="form-control option_marketprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_marketprice\');"></a></span></div></div></th>';
		html+='<th class="warning" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">市场价格</div><div class="input-group"><input type="text" class="form-control option_productprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_productprice\');"></a></span></div></div></th>';
		html+='<th class="danger" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">成本价格</div><div class="input-group"><input type="text" class="form-control option_costprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_costprice\');"></a></span></div></div></th>';
		html+='<th class="info" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">重量（克）</div><div class="input-group"><input type="text" class="form-control option_weight_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_weight\');"></a></span></div></div></th>';
		html+='</tr></thead>';
		for(var m=0;m<len;m++){
			var k = 0,kid = 0,n=0;
			for(var j=0;j<newlen;j++){
				var rowspan = rowspans[m]; //9
				if( j % rowspan==0){
					h[m][j]={title: specs[m].items[kid].title, html: "<td rowspan='" +rowspan + "'>"+ specs[m].items[kid].title  +"</td>\r\n",id: specs[m].items[kid].id};
					//   k++; if(k>specs[m].items.length-1) { k=0; }
				}else{
					h[m][j]={title:specs[m].items[kid].title, html: "",id: specs[m].items[kid].id};    
				}
				n++;
				if(n==rowspan){
					kid++; if(kid>specs[m].items.length-1) { kid=0; }
					n=0;
				}
			}
		}

		var hh = "";
		for(var i=0;i<newlen;i++){
			hh+="<tr>";
			var ids = [];
			var titles = [];
			for(var j=0;j<len;j++){
				hh+=h[j][i].html; //每一行的每个规格项列
				ids.push( h[j][i].id);
				titles.push( h[j][i].title);
			}
			ids =  ids.join('_');
			titles= titles.join('+');
			var val ={ id : "",title:titles, stock : "",costprice : "",productprice : "",marketprice : "",weight:"" };
			if( $(".option_id_" + ids).length>0){
				val ={
					id : $(".option_id_" + ids+":eq(0)").val(),
					title: titles,
					stock : $(".option_stock_" + ids+":eq(0)").val(),
					costprice : $(".option_costprice_" + ids+":eq(0)").val(),
					productprice : $(".option_productprice_" + ids+":eq(0)").val(),
					marketprice : $(".option_marketprice_" + ids +":eq(0)").val(),
					weight : $(".option_weight_" + ids+":eq(0)").val()
				}    
			}
			hh += '<td class="info">'
			hh += '<input name="option_stock_' + ids +'[]"type="text" class="form-control option_stock option_stock_' + ids +'" value="' +(val.stock=='undefined'?'':val.stock )+'"/></td>';
			hh += '<input name="option_id_' + ids+'[]"type="hidden" class="form-control option_id option_id_' + ids +'" value="' +(val.id=='undefined'?'':val.id )+'"/>';
			hh += '<input name="option_ids[]"type="hidden" class="form-control option_ids option_ids_' + ids +'" value="' + ids +'"/>';
			hh += '<input name="option_title_' + ids +'[]"type="hidden" class="form-control option_title option_title_' + ids +'" value="' +(val.title=='undefined'?'':val.title )+'"/></td>';
			hh += '</td>';
			hh += '<td class="success"><input name="option_marketprice_' + ids+'[]" type="text" class="form-control option_marketprice option_marketprice_' + ids +'" value="' +(val.marketprice=='undefined'?'':val.marketprice )+'"/></td>';
			hh += '<td class="warning"><input name="option_productprice_' + ids+'[]" type="text" class="form-control option_productprice option_productprice_' + ids +'" " value="' +(val.productprice=='undefined'?'':val.productprice )+'"/></td>';
			hh += '<td class="danger"><input name="option_costprice_' +ids+'[]" type="text" class="form-control option_costprice option_costprice_' + ids +'" " value="' +(val.costprice=='undefined'?'':val.costprice )+'"/></td>';
			hh += '<td class="info"><input name="option_weight_' + ids +'[]" type="text" class="form-control option_weight option_weight_' + ids +'" " value="' +(val.weight=='undefined'?'':val.weight )+'"/></td>';
			hh+="</tr>";
		}
		html+=hh;
		html+="</table>";
		$("#options").html(html);
	}
	
	function setCol(cls){
		$("."+cls).val( $("."+cls+"_all").val());
	}
	
	function showItem(obj){
		var show = $(obj).get(0).checked?"1":"0";
		$(obj).next().val(show);
	}
	
	function nofind(){
		var img=event.srcElement;
		img.src="./resource/images/nopic-small.jpg";
		img.onerror=null; 
	}
</script>