<template>
	<view class=""  style="height: 100vh;overflow: hidden;background: linear-gradient(to bottom, #3DA7E7, #FFFFFF ) no-repeat;background-size: 100% calc(50px + 150rpx)
	">
		<!-- 搜索框 -->
		<block >
		    <view class="nav-search jianbian" @click="toSearch">
		        <component-search   propPlaceholder="输入商品名称搜索"></component-search>
		    </view>
		</block>
		<view v-if="category_list.length > 0" class="category-content pr  " :style="'height:calc(100vh - '+(50)+'px);'">
		<!-- 商品列表模式 -->
		<block >
		    <!-- 一级导航 -->
		    <view class="top-nav  scroll-view-horizontal">
		        <scroll-view :scroll-x="true" >
		            <block v-for="(item, index) in category_list" :key="index">
		                <view :class="' item dis-inline-block ' + (nav_active_index == index ? 'active-class ' : '')" :data-index="index" :data-itemtwoindex="0"  @tap="nav_event">
		                    <view :class="'icon-content circle br ' + (nav_active_index == index ? 'active-border' : '')">
		                        <image :src="item['big_images']" mode="aspectFit"  class="icon-content-img  circle"></image>
		                    </view>
		                    <view class="margin-top-xs">{{item.name}}</view>
		                </view>
		            </block>
		        </scroll-view>
		    </view>
			
		    <!-- 二级导航 -->
		     <view class="left-nav ">
		        <scroll-view :scroll-y="true" :scroll-top="scrollTop" class="ht-auto">
		            <view class="left-content-actual bs tc">
		                <!-- <view :class="' item  ' + (nav_active_item_two_index == -1 ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="-1" :data-itemthreeindex="-1" @tap="nav_event">
		                    <text>全部</text>
		                </view> -->
		                <block v-if="(data_content || null) != null && (data_content.items || null) != null && data_content.items.length > 0">
		                    <block v-for="(item, index) in data_content.items" :key="index">
		                        <view :class="' item   ' + (nav_active_item_two_index == index ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="index" :data-itemthreeindex="-1" @click="nav_event">
		                            <text>{{item.name}}</text>
		                        </view>
		                    </block>
		                </block>
		            </view>
		        </scroll-view>
		    </view> 
		    <!-- 商品列表 -->
		    <view class="goods-right-content pa ">
				<view class="sort-contain">
					<view class="sort-cla">
						<view :class=" 'sort '+(sortIndex == 1 ? ' sort-active ' : '') "  @tap="sortEvent(1)" >综合</view>
						<view :class=" 'sort '+(sortIndex == 2 ? ' sort-active ' : '') "  @tap="sortEvent(2)">销量</view>
						<view class="sort px "  @tap="sortEvent(3)">
							<text :class=" (sortIndex == 3 ? ' sort-active ' : '') ">价格</text>
							<view class="pri-px">
								<view :class="'icon-ymt to-blod-up ic-pri' +(sortOrder==1? ' sort-active ' : '')"></view>
								<view :class="'icon-ymt to-blod-down ic-pri' +(sortOrder==2 ? ' sort-active ' : '')"></view>	
							</view>
						</view>
					</view>
				</view>
				<view class="goods-right-ms">
					<goodsList :propData="goodsListData" :pageData="pageData" :selectObject="selectObject" @loadData="loadData" @switchCategory="switchCategory"   :paddBottom="0" ></goodsList>
				</view>
		        
		    </view>
		</block>
		</view>
		
		
		<!-- 购物车 -->
		<view class="gouwuche " @click="goCart">
			<uniBadge class="uni-badge-left-margin badgeClass"   max-num="99" text="45" type="warning" size="small" />
			<view class="icon cart font24px">
				
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-badge/components/uni-badge/uni-badge.vue'
	const app = getApp();
	import componentSearch from "@/components/search/search.vue";
	import goodsList from '@/pages/classify/goods-list/goods-list.vue'
	 const listData = require('./data.json')//模拟数据
	const listData2=require('./data2.json')//商品数据模拟数据
	
	export default {
		components: {
		    componentSearch,
			goodsList,
			uniBadge
		},
		data(){
			return{
				static_dir:"",
				category_list: [],//所有数据
				nav_active_index: 0,//一级导航
				nav_active_item_two_index: 0,//二级导航
				data_content: null,//左边导航单个数据	{}是一个对象	
				scrollTop:0,
				
				selectObject:{
					selectIndex:0,
					length:0	
				},
				
				goodsListData: [],//右侧商品数据
				
				pageData:{
					 pageStart:1,
					 pageNum:7,
					 allData:7
					},
				isFinish:false,
				
				// 排序
				 sortIndex:1,//默认按综合
				 lastOrder:0,
				 sortOrder:0,//1表示降序，2表示升序
				 
				 
				 
				 
			}
		},
		onShow() {
		    // 数据加载
		    this.init();
		},
		methods:{
			// 获取数据
			init() {
				this.category_list = listData; //一级导航的数据
				this.data_content = this.category_list[this.nav_active_index] || null;//左边导航的数据
				this.sortIndex=1; //默认排序时按照综合
				this.get_goods_list();//获取右侧商品
				this.selectObject={
					selectIndex:this.nav_active_item_two_index,
					length:this.data_content.items.length	
				};	
			},
			
			//搜索事件
			toSearch() {
				uni.navigateTo({
					url:"/pages/classify/goods-search/goods-search"
				})
			},
			//导航点击
			nav_event(e) {
				this.nav_active_index = e.currentTarget.dataset.index;//一级导航						
				this.initCategory(e.currentTarget.dataset.itemtwoindex)	
			},
			
			initCategory(towIndex){
				this.nav_active_item_two_index = towIndex;//二级导航
				this.data_content = this.category_list[this.nav_active_index] || null;//二级导航目录数据
				this.sortIndex=1;//默认按价格排序
				this.selectObject={
					selectIndex:this.nav_active_item_two_index,
					length:this.data_content.items.length	
				};
	
				this.get_goods_list(this.data_content.id)
			},
			
			get_goods_list(id){	
				
				setTimeout(()=>{
					
					this.goodsListData = listData2
					
				},2000)
		
			},
			loadData(callback){
				let _this = this;

					if(_this.pageData.pageStart < _this.pageData.allData/_this.pageData.pageNum){
					
							let arr =_this.goodsListData.slice(0,7)
							_this.goodsListData = _this.goodsListData.concat(arr);
							_this.pageData.pageStart=_this.pageData.pageStart+1;
	 
					}								
					callback({ list: _this.goodsListData, total: _this.pageData.allData });

			},
			// 切换分类prev,next子组件弹射方法
			switchCategory(type){
				if (type == 'prev') {
					this.initCategory(this.nav_active_item_two_index - 1);//0
					
				}else if(type == 'next'){
					this.initCategory(this.nav_active_item_two_index + 1);//1
					
				}
				this.scrollTop = 40 *(this.nav_active_item_two_index)
				
				
			},
			//排序事件
			sortEvent(num) {
				this.sortIndex = num ;
				
				this.lastOrder = this.sortOrder;

				if(this.sortIndex == 3 ){
					if(this.lastOrder == 0){
						this.sortOrder = 1
					}
					if(this.lastOrder == 1){
						this.sortOrder = 2
					}
					if(this.lastOrder == 2){
						this.sortOrder = 1
					}
				}else{
					this.sortOrder = 0
				}
				
				
			},
			goCart(){
				uni.navigateTo({
					url:"/pages/classify/cart/cart"
				})
			},
			
			
			// //查看商品详情
			// goGoodsDetail(e) {
			// 	console.log(e,"商品详情")
			// },
			// cartChoose(e){
			// 	console.log(e,"购物车选择")
			// }
		}
	}
</script>

<style >
@import url("./classify.css");
.gouwuche {
	position: absolute;
	bottom: 10px;
	right: 15px;
	width: 25px;
	height: 25px;
	color: #3DA7E7 !important;
		
}

.badgeClass {
		position: absolute;
		top:-5px;
		right: -10px;
}

.font24px{
	font-size: 24px !important;
	color: #F0AD4E;
}
</style>