<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{kg['category']['title']}} - KGCMS</title>
<meta name="keywords" content="{{kg['category']['seokey']}}" />
<meta name="description" content="{{kg['category']['seodescr']}}" />
<meta name="copyright" content="KGCMS {{kg['server']['KGCMS_VERSION']}}" />
<!-- 自适应移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 禁止缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="{{kg['tpl_url']}}style/photo_list.css"> -->
<link rel="stylesheet" type="text/css" href="{{kg['tpl_url']}}style/product_view.css">
<script src="{{kg['tpl_url']}}script/jquery-3.0.0.min.js"></script>
<script src="{{ kg['server']['HTTP_HOST'] }}/tools/amazeui/js/amazeui.min.js"></script>
<script src="{{kg['tpl_url']}}script/bootstrap.min.js"></script>
<script src="{{kg['tpl_url']}}script/common.js"></script>
<script src="{{kg['tpl_url']}}script/product_view.js"></script>
</head>
<body>
	<div class="container-fluid ngcon-style">
		{%- include 'component_header.tpl' %}
		<div class="row">
			<div class="col-md-3">
				<div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm">
					<ul class="nav bs-docs-sidenav" id="left-nav">
						{%- for row in kg['product']['category'][-1]|category() %}
						<li {% if row['id']==kg['category']['id'] %}class="active" {% endif %}>
							<a href="{{row['url']}}">
								<span class="iconfont icon-dian"></span>{{row['title']}}
							</a>
						</li>
						{%- endfor %}
					</ul>
				</div>
			</div>
			<div class="col-md-9 ngma-Q ngNo-padding">
				<div class="panel panel-default ngNo-margin ngsty-Opan No-shadow">
					<div class="panel-body ngNo-padding ngjs-jh">
						<h1 class="page-title sty-title h1I">{{kg['product']['title']}}</h1>
						<hr class="hr-Rsty ngph-hr1">
                        <!-- <div class="stime"><div class="ng-clear"></div></div> -->
                        <div class="product_details clearfix" style="padding-top: 18px;">
                            <div class="pull-left" id="preview">
								<ul class="product_details_ul clearfix " id="show_picture">
									{% for row in kg['product']['picture'] %}
									<li class="max_img" {% if loop.index0 == 0 %}style="display: block;"{% endif %}>
										<div class="max_box" style="overflow: hidden;width: 600px;height: 400px;"><div class="mask"></div><img src="{{row}}" alt="" onload="kg.img_auto_size(this)" width="600" height="400"></div>
									</li>
									{% endfor %}
								</ul>
								<div class="clearfix" style="padding:0 18px;position: relative;">
									<div class="chevron_l pull-left text-left"><span class="am-icon-chevron-left"></span></div>
									<div class="chevron_r pull-right text-right"><span class="am-icon-chevron-right"></span></div>
									<div class="clearfix" style="width: 556px;height: 80px;;overflow: hidden;position: relative;">
										<ul class="product_details_ul_min clearfix" id="small_show_picture">
											{% for row in kg['product']['picture'] %}
											<li class="min_img {% if loop.index0 == 0 %}active{% endif %}">
												<div class="min_box"><img src="{{row}}" alt="" onload="kg.img_auto_size(this)" width="80" height="80"></div>
											</li>
											{% endfor %}
										</ul>
									</div>
								</div>
								<!-- 大图片 -->
								<div id="big"><img alt=""/></div>
							</div>
							<div class="pull-left" style="flex: 1;">
								<div>
									<input type="hidden" id="product-id" value="{{kg['product']['id']}}">
									<!-- <div class="essential_information_title"><h4>基本信息</h4></div> -->
									<ul class="half clearfix" style="padding-top: 0;">
										<li>优惠价：<span id="price" class="num_price">{{kg['product']['min_price']}}</span></li>
										<li>市场价：<span class="num_market">{{kg['product']['market']}}</span></li>
									</ul>
									<ul class="half clearfix">
										<li>库存数：<span id="inventory">{{kg['product']['inventorys']}}</span></li>
										<li>已售出：<span>{{kg['product']['sales']}}</span></li>
									</ul>
									<ul class="choice_list clearfix" style="padding-bottom: 0;">
										{% for row in kg['speci'] %}
										<li class="speci-li">
											<label class="media hide">
												<input type="radio" name="" class="speci_id" value="{{row}}">
											</label>
											<div class="choice">{{kg['speci'][row]['name']}}</div>
											<ul class="clearfix" style="padding-left: 80px;">
												{% for var in kg['product']['sku_speci'][kg['speci'][row]['id']] %}
												<li class="item_color param-li">
													<input type="hidden" class="param_id" value="{{var}}">
													<div style="padding: 6px 12px;">{{kg['speci'][row]['param'][var]}}</div>
												</li>
												{% endfor %}
											</ul>
										</li>
										{% endfor %}
									</ul>
									<ul class="choice_list clearfix">
										<li class="clearfix" style="margin-bottom: 0;">
											<div class="choice">数量</div>
											<span class="tb-stock pull-left" style="padding-left: 39px;line-height: 33px;">
												<a href="javascript:void(0);" title="减1" class="tb-reduce J_Reduce tb-iconfont am-icon-minus" id="minus"></a>
												<input id="J_IptAmount" type="text" class="tb-text" value="1" maxlength="8" title="请输入购买量" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onafterpaste="this.value=this.value.replace(/[^\d]/g,'')">
												<a href="javascript:void(0);" hidefocus="" class="tb-increase J_Increase tb-iconfont am-icon-plus" title="加1" id="add"></a>件(库存<span id="inventory2">{{kg['product']['inventorys']}}</span>件)
											</span>
										</li>
									</ul>
									<div class="product_btn text-left">
										<button type="button" class="am-btn am-btn-secondary am-radius am-btn-xs" id="add-shopping-cart"><span class="am-icon-shopping-cart">&nbsp;</span>加入购物车</button>
										<button type="button" class="am-btn am-btn-danger am-radius am-btn-xs" id="buy">立即购买</button>
										<div>
											<form action="/user/checkout" method="post" id="order">
												<input type="hidden" name="action" value="order">
												<input type="hidden" id="speci" name="speci[]" value="">
												<input type="hidden" id="quantity" name="quantity[]" value="">
												<input type="hidden" id="product" name="product[]" value="{{kg['product']['id']}}">
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="detailed_information" style="padding: 18px;">
							<div class="clearfix " style="border-bottom: 1px solid #e9eaeb;margin: 20px 0;">
								<ul class="nav nav-pills col-md-4 tab_header" id="tabs">
									<li role="presentation" class="active"><a href="#show_1" data-toggle="tab" aria-expanded="true">商品简介</a></li>
									<!-- <li role="presentation" class=""><a href="#show_2" data-toggle="tab" aria-expanded="false">规格参数</a></li> -->
									<li role="presentation" class=""><a href="#show_3" data-toggle="tab" aria-expanded="false">商品评价（100）</a></li>
									<!-- <li role="presentation" class=""><a href="#show_4" data-toggle="tab" aria-expanded="false">购买咨询（438）</a></li> -->
								</ul>
							</div>
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade active in" id="show_1">
									<div class="clearfix">
										<h6 style="font-size: 12px;color: #666;margin-bottom: 20px;padding-left: 40px;">品牌：&nbsp;<span style="color:#5e69ad;">{{kg['product']['brand']}}</span></h6>
										<ul class="parameter_list clearfix">
											<li>商品名称：&nbsp;<span>{{kg['product']['title']}}</span></li>
											<li>商品编号：&nbsp;<span>{{kg['product']['coding']}}</span></li>
											<li>商品毛重：&nbsp;<span>未知</span></li>
											<li>商品产地：&nbsp;<span>未知</span></li>
											<li>CPU型号：&nbsp;<span>未知</span></li>
										</ul>
										<div class="parameter_img"><img src="" alt=""></div>
									</div>
								</div>
								<!-- <div class="tab-pane fade" id="show_2">
									<div class="clearfix">
										<div class="params-content">
											<h4 style="width: 200px;float: left;">硬件规格</h4>
											<div class="pull-left" style="flex: 1;">
												<div>
													<h4 style="font-size: 16px;color: #6f6e6e;">端口</h4>
													<p>1个10/100/1000M RJ45 WAN端口 4个10/100/1000M RJ45 LAN端口 1个Console端口</p>
												</div>
												<div>
													<h4 style="font-size: 16px;color: #6f6e6e;">端口</h4>
													<p>1个10/100/1000M RJ45 WAN端口 4个10/100/1000M RJ45 LAN端口 1个Console端口</p>
												</div>
												<div>
													<h4 style="font-size: 16px;color: #6f6e6e;">端口</h4>
													<p>1个10/100/1000M RJ45 WAN端口 4个10/100/1000M RJ45 LAN端口 1个Console端口</p>
												</div>
											</div>
										</div>
										<div class="params-content">
											<h4 style="width: 200px;float: left;">包装清单</h4>
											<div class="pull-left">
												<div>
													<h4 style="font-size: 16px;color: #6f6e6e;">包装清单</h4>
													<p>主机×1；安装手册×1；光盘×1；电源线×1；Console连接线×1；L型支架×2；脚垫×4；螺钉×8；保修卡×1；有毒有害物质含量声明×1</p>
												</div>
											</div>
										</div>
									</div>
								</div> -->
								{% if kg['comment_enabled'] %}
								<div class="tab-pane fade" id="show_3">
									<div class="clearfix">
										<ul class="filter_list clearfix">
											<li class="active">全部评价<em>(25)</em></li>
											<li>好评<em>(100)</em></li>
											<li>差评<em>(0)</em></li>
										</ul>
										<div class="consult-content">
											<div class="clearfix">
												<div class="clearfix" style="width: 180px;float: left;padding-left: 20px;">
													<span class="pull-left" style="color: #666;font-size: 12px;line-height: 1.7;"><img src="" alt="" width="30" height="30" style="vertical-align: middle;">用户admin1：</span>
												</div>
												<div style="margin-left: 200px;">
													<p style="font-size: 14px;color: #333;padding-bottom: 10px;margin: 0;">年纪大了眼睛老花，偶尔要看个东西很吃力，有时碰到小的标签戴上老花镜还是看不清。那天正好看到这个放大镜在卖特价，赶紧拍了一个。发货时间还可以接受，大概是4-5天吧。包装挺好的，放大镜做得很结实，看上去是铜的材料，玻璃很透亮，放大效果很好。因为头一次买，没有经验，感觉小了一点，最好是8-10公分直径的用起来就更好了，供要买的人参考一下。店家送的擦镜布和装放大镜的小布袋也很好。</p>
													<div class="comment_message pull-right" style="margin-bottom: 10px;">
														<span>2018/7/25 24:58:16&nbsp;&nbsp;</span>
														<span class="nice"><a href="#" class="glyphicon glyphicon-thumbs-up"></a>&nbsp;0</span>
														<span class="nice"><a href="#" class="am-icon-commenting-o"></a>&nbsp;0</span>
													</div>
												</div>
											</div>
										</div>
										<div class="consult-content">
											<div class="clearfix">
												<div class="clearfix" style="width: 180px;float: left;padding-left: 20px;">
													<span class="pull-left" style="color: #666;font-size: 12px;line-height: 1.7;"><img src="" alt="" width="30" height="30" style="vertical-align: middle;">用户admin2：</span>
												</div>
												<div style="margin-left: 200px;">
													<p style="font-size: 14px;color: #333;padding-bottom: 10px;margin: 0;">年纪大了眼睛老花，偶尔要看个东西很吃力，有时碰到小的标签戴上老花镜还是看不清。那天正好看到这个放大镜在卖特价，赶紧拍了一个。发货时间还可以接受，大概是4-5天吧。包装挺好的，放大镜做得很结实，看上去是铜的材料，玻璃很透亮，放大效果很好。因为头一次买，没有经验，感觉小了一点，最好是8-10公分直径的用起来就更好了，供要买的人参考一下。店家送的擦镜布和装放大镜的小布袋也很好。</p>
													<div class="comment_message pull-right" style="margin-bottom: 10px;">
														<span>2018/7/25 24:58:16&nbsp;&nbsp;</span>
														<span class="nice"><a href="#" class="glyphicon glyphicon-thumbs-up"></a>&nbsp;0</span>
														<span class="nice"><a href="#" class="am-icon-commenting-o"></a>&nbsp;0</span>
													</div>
													<!-- <span class="pull-right" style="color: #666;font-size: 12px;margin-bottom: 10px;">2018/7/25 24:58:16 &nbsp;
														<a class="glyphicon glyphicon-thumbs-up"></a>&nbsp;
														<span><a href="">评论</a></span>
													</span> -->
												</div>
											</div>
										</div>
									</div>
									<div class="clearfix">
										<form action="" method="post" class="am-form tpl-form-line-form">
											<div style="border: 1px solid #e9eaeb;border-radius: 4px;">
												<div class="am-form-group" style="border-bottom: 1px solid #e9eaeb;background: #f5f5f5;"><label for="Template" class="am-u-md-12 am-form-label" style="text-align: left;padding: 10px 15px !important;color: #333;font-size: 14px;font-weight: 500;">回复&nbsp;用户admin1：</label></div>
												<div class="am-form-group">
													<div class="am-u-md-12  am_fl_zi_tihuan" style="padding-left: 1.5rem !important;">
														<textarea type="text" placeholder="" id="Introduction" name="" style="border: 1px solid #e9eaeb;border-radius: 4px;height: 120px;padding: 6px;resize: none;font-size: 16px;"></textarea>
													</div>
												</div>
												<div class="am-form-group">
													<div class="am-u-sm-12" style="padding-left: 1.5rem !important;">
														<button type="button" class="am-btn am-btn-secondary am-radius am-btn-xs">发送</button>
														<div style="float: right;font-size: 16px;color: #888;font-size: 14px;">还可输入&nbsp;200&nbsp;字</div>
													</div>
												</div>
											</div>
										</form>
									</div>
									<!-- 这里放页数 -->
								</div>
								{% endif %}
								<!-- <div class="tab-pane fade" id="show_4">
									<div class="clearfix">
										<div class="consult-content">
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">用户admin1：</span>
													<span class="pull-right" style="color: #999;">2018/7/25 24:58:16</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">这款的最大叠加带宽是多少？</p>
											</div>
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">客服回答：</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">您好！目前在产的TL-ER5510G支持的最大叠加带宽是1G，可以满足您的需求。感谢您对TP-LINK的支持！祝您购物愉快！</p>
											</div>
										</div>
										<div class="consult-content">
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">用户admin2：</span>
													<span class="pull-right" style="color: #999;">2018/7/25 24:58:16</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">这个路由支持的最大带宽是多少？我有2条300M的宽带，能叠加到600M吗？</p>
											</div>
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">客服回答：</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">您好！目前在产的TL-ER5510G支持的最大叠加带宽是1G，可以满足您的需求。感谢您对TP-LINK的支持！祝您购物愉快！</p>
											</div>
										</div>
										<div class="consult-content">
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">用户admin3：</span>
													<span class="pull-right" style="color: #999;">2018/7/25 24:58:16</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">请问： 1、这款路由器有无线WIFI功能吗？ 2、如果有无线WIFI功能，信号强度可以支撑多大面积使用？ 3、设置和使用的方法，和家用路由器有区别吗？</p>
											</div>
											<div class="clearfix">
												<div class="clearfix">
													<span class="pull-left" style="color: #999;">客服回答：</span>
												</div>
												<p style="margin: 5px 0 20px 0;font-size: 14px;color: #333;">您好！TL-ER5110G不支持无线功能。产品的设置情况您可以参考产品用户手册或安装手册： http://www.tp-link.com.cn/search.html?keywords=5110G&type=download。感谢您对TP-LINK的支持！祝您购物愉快！</p>
											</div>
										</div>
									</div>
									<div class="product_btn text-left" style="padding: 0;">
										<button type="button" class="am-btn am-btn-secondary am-radius am-btn-xs" style="margin: 0;">我要咨询</button>
									</div>
								</div> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		{% include 'component_footer.tpl' %}
	</div>
<script>
	$(function(){
		function isContained(aa, bb) {
			for (var i = 0; i < bb.length; i++) {
				var flag = false;
				for(var j = 0; j < aa.length; j++){
					if(aa[j].toString() == bb[i].toString()){
						flag = true;
						break;
					}
				}
				if(flag == false){
					return flag;
				}
			}
			return true;
		}
		// 判断多参数的规格被选中的个数
		function active_count() {
			var specis = $('.speci-li')
			var count = []
			for(var i=0; i<specis.length; i++){
				var params = specis.eq(i).find('.param-li')
				var active = specis.eq(i).find('.active')
				if(params.length > 1 && active.length>0){
					count.push(i)
				}
			}
			return count
		}


		var sku_list = {{kg['product']['sku']}};
		console.log(sku_list);
		var sku_param_list = [];
		for(var i=0; i<sku_list.length; i++){
			sku_param_list.push(sku_list[i]['speci'])
		}
		// 参数的点击事件
		$('.param-li').click(function(){
			// 判断自己是否可以点击
			if($(this).hasClass('unbuy')){
				// 不可点击
			}else{
				// 可以点击
				if($(this).hasClass('active')){
					$(this).removeClass("active")
				}else{
					$(this).addClass("active").siblings(".item_color").removeClass("active");  // 移除同级的active
				}
				// 获取当前已选参数判断是否选全
				var specis = $('.speci-li')
				var sku_param = []
				var not_select = []  // 未选的参数
				for(var i=0; i<specis.length; i++){
					if(specis.eq(i).find('.active').length > 0){
						sku_param.push([specis.eq(i).find('.speci_id').val(), specis.eq(i).find('.active .param_id').val()])
					}else{
						not_select.push(i)
					}
				}
				// 未选的参数确认不可选规格
				var active_select = active_count()
				var select_count = active_select.length
				if(select_count == 1){
					specis.eq(active_select[0]).find('.param-li').removeClass('unbuy')
					var cycle = not_select
				}else{
					var cycle = specis
				}
				for(var i=0; i<cycle.length; i++){
					if(select_count == 1){
						var param_list = specis.eq(cycle[i]).find('.param-li')
					}else{
						var param_list = specis.eq(i).find('.param-li')
					}

					for(var n=0; n<param_list.length; n++){
						var current_sku = []
						$.extend(true, current_sku, sku_param)
						if(select_count == 1){
							current_sku.push([specis.eq(cycle[i]).find('.speci_id').val().toString(),param_list.eq(n).find('.param_id').val()])
						}else{
							current_sku.push([specis.eq(i).find('.speci_id').val().toString(),param_list.eq(n).find('.param_id').val()])
						}
						var flag = false
						for(var m=0; m<sku_param_list.length; m++){
							if(isContained(sku_param_list[m], current_sku)){
								if(sku_list[m]['inventory'] < 1){
									flag = false;
								}else{
									// 参数全选
									if(not_select.length == 0){
										$('#price').html(sku_list[m]['price'])
										$('#inventory').html(sku_list[m]['inventory'])
										$('#inventory2').html(sku_list[m]['inventory'])
										$('#show_picture').find('li').hide();
										// 替换展示图
										$('#specipic').remove();
										var pic = '<li class="max_img" id="specipic" style="display: block;"><div class="max_box"><div class="mask"></div><img src="' + sku_list[m]['specipic'] + '" alt="" onload="kg.img_auto_size(this)" width="600" height="400"></div></li>'
										$('#show_picture').append(pic);
										// 透明背景
										$('#specipic').on("mouseover",function(){
											$(this).find(".mask").show();
										})
										$('#specipic').on("mouseout",function(){
											$(this).find(".mask").hide();
										})
										$('#specipic').on("mousemove",function(e){
											var l = e.pageX - $("#preview").offset().left - (($(this).find(".mask").width()+40) / 2)
											var t = e.pageY - $("#preview").offset().top - ($(this).find(".mask").height() / 2);
											if (l < 0) {
												l = 0
											}
											if (l > $(this).find(".max_box").width() - $(this).find(".mask").width()) {
												l = $(this).find(".max_box").width() - $(this).find(".mask").width();
											}
											if (t < 0) {
												t = 0
											}
											if (t > $(this).find(".max_box").height() - $(this).find(".mask").height()) {
												t = $(this).find(".max_box").height() - $(this).find(".mask").height();
											}
											$(this).find(".mask").css({
												"left": l+2,
												"top": t+2,
											})
											var pX = l / ($(this).find(".mask").outerWidth() - $(this).find(".mask").width());
											var pY = t / ($(this).find(".mask").outerHeight() - $(this).find(".mask").height())
											$("#big").find("img").css({
												"left": -pX * ($("#big").find("img").width() - $("#big").width()),
												"top": -pY * ($("#big").find("img").height() - $("#big").height())
											})
										})
										// 放大图替换
										$("#big img").attr('src', sku_list[m]['specipic'])
									}else{
										$('#specipic').remove();
										$('#price').html("{{kg['product']['min_price']}}")
										$('#inventory').html("{{kg['product']['inventorys']}}")
										// 展示图替换
										var index = $("#small_show_picture").find('li').index($("#small_show_picture").find('.active'))
										$('#show_picture li').eq(index).show();
										// 放大图替换
										$("#big img").attr('src', $("#small_show_picture").find('.active img').attr('src'))
									}
									flag = true;
								}
								break;

							}
						}
						if(flag == false){
							param_list.eq(n).addClass('unbuy')
						}else{
							param_list.eq(n).removeClass('unbuy')
						}
					}
				}
			}
		})

		var specipic_=$("#specipic");
		var mask_=$(".mask");
    	var big_=$("#big");
		$("#show_picture").on("mouseover",specipic_,function(){
			mask_.show();
        	big_.show();
		})
		$("#show_picture").on("mouseout",specipic_,function(){
			$(this).find(mask_).hide();
        	big_.hide();
		})
	})
</script>
</body>
</html>