{php $this->template('header')}
	
	<link rel="stylesheet" href="{$public}css/shop/index/index.css?{php echo time()}">
	
	<div class="bui-page ">

		<main class="main">
			<div class="filter-bar">
	            <ul class="bui-nav">
	                <li class="bui-btn">
	                    <div id="uiDropdownOrder" class="bui-dropdown">
	                        <div class="bui-btn bui-box">
	                            <div class="span1">综合</div>
	                            <i class="icon-dropdown"></i>
	                        </div>
	                    </div>
	                </li>
	                <li class="bui-btn" onclick="searchs(4)">销量</li>
	                <li class="bui-btn" onclick="searchs(3)">人气</li>
	                <li class="bui-btn" id="btnFilter">分类<i class="icon-filter"></i></li>
	            </ul>
	        </div>
	       
	        <div id="scrollList" class="bui-scroll">
	        	<div class="img" style="display: none;">
					<img src="{$public}img/empty.png">
					<p>空空如也...</p>
				</div>

				<div class="bui-scroll-head"></div>
				<div class="bui-scroll-main">
					<ul class="bui-list bui-list-thumbnail">

					</ul>
				</div>
				<div class="bui-scroll-foot"></div>
			</div>
     	</main>
	</div>
	<div id="dialogRight" class="bui-dialog dialog-filter">
    <div class="bui-dialog-head">分类</div>
    <div class="bui-dialog-main cardinfo">
        
		<div class="bui-fluid">
		    {loop $cate $k $v}
		    <div class="span4">
		    	<div class="box {if $v['id']==input('get.cid')} active {/if}" data-id="{$v['id']}">{$v['title']}</div>
		    </div>
		  	{/loop}
	
		</div>
		
		<div class="bui-btn ring sub smail">确定</div>

    </div>
    <div class="bui-dialog-close"><i class="icon-close"></i></div>
</div>


	<script>
 
		bui.ready(function(){
			var tval;
			var cid={php echo input('get.cid')};
			var uiDropdown = !uiDropdown && bui.dropdown({
	            id: "#uiDropdownOrder",
	            data: [{
	                name: "综合",
	                value: "1"
	            }, {
	                name: "推荐",
	                value: "2"
	            }, {
	                name: "人气",
	                value: "3"
	            }],
	            relative: false,
	            callback: function(e) {
	            	tval=this.value();
	            	 if( uiList ){
		                uiList.empty();
		                uiList.init({
		                    page: 1,
		                    data: {
		                        "pai":tval,
		                    }
		                });
		                
		            }
	            }
	        });

	        var uiList = bui.list({
		        id: "#scrollList",
		        url: "{php echo iurl('shop/index/lst')}",
		        data: {
		        	cid:cid
		        },
		        pageSize: 10,
		       
		        field: {
		            page: "page",
		            size: "pageSize",
		            data: "data"
		        },

		        template: function(data) {
		            var html = "";
		            data.forEach(function(el, index) {

		                html += `<li class="shoplst">
		                	<a  class="bui-btn bui-box click" href="{php echo iurl('shop/index/item')}&id=${el.id}">
		                    <div class="bui-thumbnail bgauto " style="background-image:url(${el.img});height:2rem;width:2rem;"></div>
		                    <div class="span1">
		                        <h3 class="item-title bui-ellipsis-2 block">${el.title}</h3>
		                        <p class="item-text hong"> <span class="money">￥</span> ${el.price}</p>
		                        <p class="item-text zeng"> <span class="song">赠送积分 ${el.songintegral}</span> 已售 ${el.sales}</p>
		                        <div class="gouwu"> 
		                        	<div class="yuan text-c"> <i class="iconfont icon-gouwu f-z-20"></i> </div>
		                        </div>
		                    </div>
		                   	</a>
		                </li>`
		            });
 
		            if (html=='') {  

		            	return $('#scrollList .img').show().siblings('.bui-scroll-foot').css('display','none');
		            	
		            }else{

		            	$('#scrollList .img').css('display','none').siblings('.bui-scroll-foot').show();

		            }

		            return html;
		        }
		    })

		    window.searchs=function(i){

		    	if( uiList ){
		            uiList.empty();
		            uiList.init({
		                page: 1,
		                data: {
		                    "pai":i
		                }
		            });
		            
		        }

		    }

		    var uiDialogRight = bui.dialog({
		        id: "#dialogRight",
		        effect: "fadeInRight",
		        position: "right",
		        fullscreen: true,
		        buttons: []
		    });
		    $('#btnFilter').on("click", function() {
		        uiDialogRight.open();
		    })

		    $('.box').on('click',function(){

		    	$(this).addClass('active').parent('.span4').siblings('.span4').find('.box').removeClass('active');

		    });

		   	$('.sub').on('click',function(){

		   		var id=$('.span4 .box.active').data('id');

		   		if( uiList ){
		            uiList.empty();
		            uiList.init({
		                page: 1,
		                data: {
		                    "pai":tval,
		                    "cid":id
		                }
		            });
		            
		        }
		        uiDialogRight.close()
		   		

		   	})

		})
	

  


	</script>

{php $this->template('footer')}