<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + path+"/";
	request.setAttribute("contextPath", basePath);
	
	String redirectUrl= request.getParameter("redirectUrl");
	request.setAttribute("redirectUrl", redirectUrl);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <script src="${contextPath }app/lib/flexible.js"></script>
    <script type="text/javascript" src="<%=basePath %>res/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>res/js/layer/layer.min.js"></script>
    <link rel="stylesheet" href="${contextPath }app/lib/flexible.css">
    <link rel="stylesheet" href="${contextPath }app/lib/swiper-4.3.2.min.css" />
    <link rel="stylesheet" href="${contextPath }app/css/basem.css">
    <link rel="stylesheet" href="${contextPath }app/css/public.css">
    <link rel="stylesheet" href="${contextPath }app/css/index.css">
	</head>
	<body>
		<header>
              <div class="fl"><a href="#"><img src="${contextPath }app/img/logo@2x.png" alt=""></a></div>
              <a href="${contextPath }web/messageWebCtl/message.cs?userId=${USER.id}" class="fr"><img src="${contextPath }app/img/xiaox@2x.png" alt="">
                            ${MESSAGE_COUNT=="0"?"":"<span></span>"}
              </a>
        </header>
        <div class="main">
            <!--导航 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                   <c:forEach var="imglist" varStatus="status" items="${imglist}">
                      <div class="swiper-slide">
	                      <c:choose>
	                      		<c:when test="${imglist.advType=='1' }">
			                        	<a href="${imglist.advSrc}"><img src="${imglist.advPic}" alt=""></a>
	                      		</c:when>
	                      		<c:otherwise>
			                        	<img src="${imglist.advPic}" alt="">
	                      		</c:otherwise>
	                      </c:choose>
	                     </div>
                   </c:forEach>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 首页大导航 -->
            <nav>
                <ul class="oneul">
                    <li>
                        <a href="${contextPath}web/mgmOrder/recommendlist.cs">
                            <img src="${contextPath }app/img/tuij@2x.png" alt="">
                            <span>推介记录</span>
                        </a>
                    </li>
                    <li>
                        <a href="${contextPath }web/mgmInviteRecordCtl/me_invite.cs">
                            <img src="${contextPath }app/img/haoy@2x.png" alt="">
                            <span>邀请好友</span>
                        </a>
                    </li>
                    <li>
                        <a href="${contextPath}web/news/newsList.cs">
                            <img src="${contextPath }app/img/gongg@2x.png" alt="">
                            <span>集团公告</span>

                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="wrap">
            <div class="kind">
                <div class="scrollNav">
                
	                <ul class="kindul tabs">
	                <c:forEach var="cg" varStatus="status" items="${category }">
	                
	                    <li <c:if test="${status.index == 0 }">class="default"</c:if> ><%-- onclick="replace('${cg.id}', '${cg.num}', '${cg.type}', '${cg.twotype}', '2', '1')" --%>
	                        <a href="javascript:void(0);"> 
	                            ${cg.name }
	                            <%--  --%>
	                        </a>
	                        <input type="hidden" value="${cg.id}" id="categoryid" type="hidden"/>
	                        <input type="hidden" value="${cg.num}" id="num" type="hidden"/>
	                        <input type="hidden" value="${cg.type}" id="type" type="hidden"/>
	                        <input type="hidden" value="${cg.twotype}" id="twotype" type="hidden"/>
	                    </li>
	                 </c:forEach>
	                    <%-- <li class="kindMore">
	                        <a href="#">
	                            <img src="${contextPath }app/img/xian@2x.png" class="xian" alt=""> 
	                            <img src="${contextPath }app/img/tianz@2x.png" alt="">
	                        </a>
	            
	                    </li> --%>
	                </ul> 
                </div>
                <script type="text/javascript">
                function morep(){
                	var iobj = $('.tabs .default');
                	if(typeof(iobj) != "undefined"){
                		var categoryid = iobj.children("#categoryid").val();
                		var num = iobj.children("#num").val();
                		var type = iobj.children("#type").val();
                		var twotype = iobj.children("#twotype").val();
                		window.location.href = "<%=basePath%>web/mgmProduct/more.cs?categoryid="+categoryid+"&num="+num+"&type="+type+"&twotype="+twotype+"&page=1&ismore=1";
                	}
                }
                </script>
                <!-- 房产推介 -->
                <div class="referrals swiper-container2" style="overflow: hidden;">
                	<div class="swiper-wrapper" style="height:auto">
                        <div class="swiper-slide">
			                <div class="hot">
			                    <img src="${contextPath }app/img/hot@2x.png" alt="">
			                    <a href="javascript:void(0);" onclick="morep();">全部产品<img src="${contextPath }app/img/jinr@2x.png" alt=""></a>
			                </div>
                    <ul>
                    <c:forEach var="p" varStatus="status" items="${pager}">
                    	<c:forEach var="p1" varStatus="status" items="${p.pager.results }">
                    
                        <li>
                            <a href="<%=basePath%>web/mgmProduct/detail.cs?productid=${p1.id }&plat=H5">
                                <label class="mycheck hide">
                                      <input type="checkbox" value="1" value="" />
                                      <div class="option"></div><!--该div盛放的是优化后的按钮图片-->
                                </label>

                                <div class="referinfo">
                                    <img src="${p1.productImg }" alt="">
                                    <div class="referCont">
                                        <p class="refertit">${p1.productName }</p>
                                        <p>
                                            <span class="designation graytxt">${p1.productRemark }</span>
                                            <c:if test="${p1.commissionRate != '0' }">
                                            <span class="commission">佣金：${p1.commissionRate }%</span>
                                            </c:if>
                                        </p>
                                        <p>
                                            <span class="designation graytxt">价格：</span>
                                            <span class="price">${p1.productPrice }</span>
                                        </p>
                                        <p>
                                            <span class="designation graytxt">类型：</span>
                                            <span class="graytxt">${p1.gc }</span>
                                        </p>
                                    </div>
                                </div>
                            </a>
                            <div class="buy">
                                <a href="<%=basePath %>web/mgmProduct/buyNow.cs?productId=${p1.id }" class="buygo">立即购买</a>
                                <a href="<%=basePath %>web/mgmProduct/recommend.cs?productids=${p1.id }" class="buyt">我要推介</a>
                            </div>
                        </li>
                        </c:forEach>
                       </c:forEach> 
                    </ul>
                    <div class="seemore">
                       <a href="javascript:void(0)" onclick="morep();">
                            <img src="${contextPath }app/img/shangp@2x.png" alt="">
                             查看更多商品
                        
                        <img src="${contextPath }app/img/jinr@2x.png" alt="" >
                       </a>
                    </div>
                </div>
                
                <c:forEach var="cg" varStatus="status" items="${category }">
                	<c:if test="${status.index > 0 }">
		                <div class="swiper-slide">
		                            <div class="hot">
		                                <img src="${contextPath }app/img/hot@2x.png" alt="">
		                                <a href="javascript:void(0);" onclick="morep();">全部产品<img src="${contextPath }app/img/jinr@2x.png" alt=""></a>
		                            </div>
		                            <ul>
		                                <li>
		                                   	 <p style="text-align:center" num='1'>正在加载中。。。</p>
		                                </li>
		                            </ul>
		                            <div class="seemore">
		                               <a href="javascript:void(0)" onclick="morep();">
		                                    <img src="${contextPath }app/img/shangp@2x.png" alt="">
		                                     	查看更多商品
		
		                                <img src="${contextPath }app/img/jinr@2x.png" alt="" >
		                               </a>
		                            </div>
		                        </div>
		                  </c:if>
                        </c:forEach>
                
                
            </div>
            
            
            	</div>
            </div>
        </div>
  <footer>
        <a href="<%=basePath %>web/mgmUserCtl/index.cs" class="active">
            <img src="${contextPath }app/img/shouye@2x.png" class="img1">
            <img src="${contextPath }app/img/shouygao@2x.png" class="img2">
            <p>首页</p>
        </a>
         <a href="<%=basePath%>web/mgmProduct/followList.cs?page=1">
            <img src="${contextPath }app/img/guanz@2x.png" class="img1">
            <img src="${contextPath }app/img/guanzgao@2x.png" class="img2">
            <p>关注</p>
        </a>
         <a href="${contextPath}web/mgmOrder/getOrderList.cs">
            <img src="${contextPath }app/img/jindu@2x.png" class="img1">
            <img src="${contextPath }app/img/jindgao@2x.png" class="img2">
            <p>进度</p>
        </a>
         <a href="${contextPath }web/meWebCtl/me.cs" >
            <img src="${contextPath }app/img/my.png" class="img1">
            <img src="${contextPath }app/img/wode@2x.png" class="img2">
            <p>我的</p>
        </a>
    </footer>
    </body>
	<script src="${contextPath }app/lib/swiper-4.3.2.min.js"></script>
    <script type="text/javascript" src="${contextPath }app/lib/jquery.min.js"></script>
    <script type="text/javascript" src="${contextPath }app/js/public.js"></script>
      <script>        
      var mySwiper = new Swiper ('.swiper-container', {
        autoplay:true,//等同于以下设置
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
            },
        loop: true,   
        // 分页器
        pagination: {
          el: '.swiper-pagination',
        }
        
      })   
      
      function replace(categoryid, num, type, twotype, ismore, page){
	       var products = $('.swiper-container2 .swiper-wrapper .swiper-slide').eq($(".tabs .default").index());
			
         	 if(products.children('ul').children('li').eq(0).children('p').attr('num') == '1'){
			$.ajax({
	             type: "GET",
	             url: "<%=basePath%>web/mgmProduct/now.cs",
	             data: {
	            	 categoryid:categoryid, 
	            	 num: num, 
	            	 type: type, 
	            	 twotype: twotype, 
	            	 ismore: ismore,
	            	 page: page
	             },
	             dataType: "json",
	             success: function(data){
	            		 products.children('ul').html("");
	                         var html="";
	                         data.forEach(function(value,index,array){
	                        	 value.pager.results.forEach(function(value,index,array){
	                        		 html += "<li>";
	                        		 html += "<a href='<%=basePath%>web/mgmProduct/detail.cs?productid="+value.id+"&plat=H5'>";
	                        		 html += "<label class='mycheck hide'>";
	                        		 html += "<input type='checkbox' value='1' value='' />";    
	                        		 html += "<div class='option'></div>";          
	                        		 html += "</label>";          
	                        		 html += "<div class='referinfo'>";    
	                        		 html += "<img src='"+value.productImg +"' alt=''>";    
	                        		 html += "<div class='referCont'>";        
	                        		 html += "<p class='refertit'>"+value.productName +"</p>";        
	                        		 html += "<p>";            
	                        		 html += "<span class='designation graytxt'>"+value.productRemark +"</span>";
	                        		 if(value.commissionRate != '0'){
	                        		 html += "<span class='commission'>佣金："+value.commissionRate+ "%</span>";                
	                        		 }
	                        		 html += "</p>";                
	                        		 html += "<p>";           
	                        		 html += "<span class='designation graytxt'>价格：</span>";
	                        		 html += "<span class='price'>"+value.productPrice +"</span>";                
	                        		 html += "</p>";                
	                        		 html += "<p>";            
	                        		 html += "<span class='designation graytxt'>类型：</span>";            
	                        		 html += "<span class='graytxt'>"+value.gc +"</span>";                
	                        		 html += "</p>";                
	                        		 html += "</div>";             
	                        		 html += "</div>";            
	                        		 html += "</a>";       
	                        		 html += "<div class='buy'>"; 
	                        		 html += "<a href='<%=basePath %>web/mgmProduct/buyNow.cs?productId="+value.id +"' class='buygo'>立即购买</a>"; 
	                        		 html += "<a href='<%=basePath %>web/mgmProduct/recommend.cs?productids="+value.id+"' class='buyt'>我要推介</a>";     
	                        		 html += "</div>";    
	                        		 html += "</li>";
	                             
	                        	 });
	                        });
	                         products.children('ul').html(html);
	                         $(".tabs .default").click();
	            	 }
	         });
	       }
		}
      
      
      var mySwiper2 = new Swiper('.kind .swiper-container2',{
          autoHeight: true,
          on:{
               slideChangeTransitionStart: function(){
                $(".tabs .default").removeClass('default');
                $(".tabs li").eq(mySwiper2.activeIndex).addClass('default');
                var iobj = $('.tabs .default');
            	if(typeof(iobj) != "undefined"){
            		var categoryid = iobj.children("#categoryid").val();
            		var num = iobj.children("#num").val();
            		var type = iobj.children("#type").val();
            		var twotype = iobj.children("#twotype").val();
                	replace(categoryid, num, type, twotype, "2", "1");
            	}
            	//上面导航列表同时滚动
              	var w = 0;
              	$(".tabs li").each(function(){
				    w = w + $(this).width();
				    if($(this).attr('class').indexOf('default') >= 0){
				    	return false;
				    }
				  });
              	 $(".scrollNav").scrollLeft(w);
              }
          }
      });
      $(".tabs li").click(function(e){
            e.preventDefault();
            $(".tabs .default").removeClass('default');
            $(this).addClass('default');
            mySwiper2.slideTo($(this).index());
      });
      $(".tabs li").click(function(e){
          e.preventDefault();
      });
  </script>
</html>
