<template>
    <div class="container goods">
        <div class="top f-bb-gray">
	        <img src="../assets/images/icon/arrow-left.png" v-on:click="goBack"/>商品分类
	    </div>
        <div class="content cate-content">
        	<div class="left">
        		<ul>
        			<li v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" :class="{ on : isActive === index}" @click="jump(index)">
        				<a href="javascript:void(0)">
        					{{item.combinationName}}
        					<img src="../assets/images/icon/hot.png" class="i-hot" v-if="item.label == '2'"  />
        					<img src="../assets/images/icon/new.png" class="i-new" v-if="item.label == '1'" />
        				</a>
        			</li>
        		</ul>
        	</div>
        	<div class="cate-list right" :scrollTop.prop="scrollTop">
        		<div v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" class="cate-item">
	        		<p class="title" :id="'anchor-'+index">{{item.combinationName}}</p>
	        		<div class="f-relative f-all-1px" v-for="(goods,k) in item.goodsList" :key="k">
		        		<div class="item f-flex">
		        			<a :href="'/mall/web/vgoods/detail/' + goods.goodsNo">
								<img :src=" imghost + goods.bannerImgs" class="thumb"/>
							</a>
		        			 <div class="info f-flex">
		        			 	<div>
			        			 	<p class="title f-ellipsis-1">{{goods.name}}</p>
			        			 	<p class="rule">{{goods.shortDesc}}</p>
			        			 	<div class="full" v-if="toJSON(goods.smallLabel)"><i>{{toJSON(goods.smallLabel)}}</i></div>
			        			</div> 	
		        			 	<div class="f-flex">
		        			 		<p class="price">
		        			 			<span><span class="money">￥</span>{{goods.price/100}}</span>
		        			 		</p>
		        			 		<p class="cost" v-if="goods.originalPrice">￥{{goods.originalPrice/100}}</p>
		        			 	</div>
		        			 </div>
		        		</div>
	        		</div>
        		</div>
        	</div>
        </div>
        <!-- Loading -->
        <div class="Loading-box">
	    	<loading v-model="showLoading" text="loading"></loading>
	    </div> 
    </div>
</template>
<script>
	import goodsApi from "../models/goods-model.js";
	import { Alert,Toast,Popup,Loading } from "vux";
	export default {
	    data() {
	        return {
	        	no: 0, 
	        	id: 0,
	        	c_no: 0,
	        	showLoading: true,
	        	goodsList: [],
	        	imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
	        	isActive: '',
	        	container: document.querySelectorAll('.cate-list')
	        }
	    },
	    components: {
			Toast,
			Popup,
			Loading
		},
        methods:{     
            //返回上一页
            goBack() {
                history.go(-1)
            },
            // 取到路由带过来的参数 
            getParams () {
                this.no = this.$route.params.no
                this.id = this.$route.params.id
                this.c_no = this.$route.params.c_no  
                this.getGoodsList() 
            },
            //加载商品列表
		   	getGoodsList (){
		   		let that = this
		   		that.showLoading = true
		   		var params = {
		   			"merchantNo": this.no,
		   			"districtId": this.id
		   		}
		   		goodsApi.getGoods(params).then(res => {
		   			that.showLoading = false
					if ( res.code == 0 ){
						this.goodsList = res.data || []
					} else {
						this.$vux.toast.text(res.msg,"middle");
					}
				});
				this.$nextTick(function(){
	                for (let i = 0; i < this.goodsList.length; i++) {
						if(this.goodsList[i].combinationNo == this.c_no) {
							this.jump(i)
						}
					}
	            })
		   	},
		   	jump(index){
			    const cateItem = document.querySelectorAll('.cate-item');
			    let total = cateItem[index].offsetTop;
			    let distance = this.container.scrollTop // 获取到顶部的距离(this.container便是.cate-list,为了方便存起来了)
			    let step = total / 20;
			    this.isActive = index; // 菜单列表显示当前样式
			    const _this = this;
			    if (total > distance) {
			    	smoothDown()
			    } else {
				    let newTotal = distance - total
				    step = newTotal / 50
				    smoothUp()
			    }
			    function smoothDown () {
				    if (distance < total) {
					    distance += step
					    _this.scrollTop = distance - 60
				     	setTimeout(smoothDown, 10);
				    } else {
				    	_this.scrollTop = total - 60
			    	}
			    }
			    function smoothUp () {
				    if (distance > total) {
					    distance -= step
					    _this.scrollTop = distance - 60
					    setTimeout(smoothUp, 10)
				    } else {
				    	_this.scrollTop = total - 60
				    }
			    } 
		    },
		   	toJSON (data){
		   		if (data){
		   			return JSON.parse(data)[0].labelText
		   		}else {
		   			return ;
		   		}
		   	},
		   	onScroll () {
			    var _this = this;
			    _this.itemVal.forEach(function(obj, i){
			    	_this.scrollTop = _this.container.scrollTop;
			    	if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top + obj.height-10)){
			    		// scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态
			    		_this.isActive = obj.index;
		    		}
			    })
		   	},
		   	currentStick () {
		    	const {dishId} = this.$route.query;
		    	const cateContent = document.querySelectorAll('.cate-content');
		    	const _this = this;
		    	cateContent.forEach(function(v, i){
			     	if(v.id == dishId){
			    		_this.scrollTop = v.offsetTop; 
			    	}
		    	})
		   	},
		   	scroll () {
		   		// 监听scroll事件
				const _this = this;
				setTimeout(function(){
				   _this.currentStick(); 
				   const rightItem = document.querySelectorAll('.cate-item');
				   const catelist = document.querySelectorAll('.cate-list')[0];
				   var length = rightItem.length;
				   var height = rightItem[length-1].offsetHeight;
				   var scrollHeight = document.querySelectorAll('.cate-menu-wrapper')[0].offsetHeight;
				   // 设置最后一个类别菜品列表的高度(小于适配器高度的话与适配器等高)，不然点击锚点不能够置顶
				   if (height < scrollHeight) {
		           		rightItem[length-1].style.height = scrollHeight+'px';
				   } 
				   var arr =[];
				   rightItem.forEach(function(v, i){
				   		arr.push({top: v.offsetTop, height: v.offsetHeight, index: i});
				   })
				   _this.itemVal = arr; 
				   const cateList = document.querySelectorAll('.cate-list')[0];
				   cateList.addEventListener('scroll', _this.onScroll);
				   _this.container = cateList;
			  	}, 500)
		   	}
        },       
        mounted() {	
            this.getParams()
            this.scroll()	
        },
	}
</script>
<style lang="scss" scoped>
	.goods {
		background-color: #fff;
		.top {
			position: relative;
			width: 100%;
			height: 0.9rem;
			line-height: 0.9rem;
			text-align: center;
			font-size: 0.36rem;
			color: #249e6c;
			img {
				position: absolute;
				width: 0.2rem;
				height: 0.35rem;
				top: 50%;
				left: 0.4rem;
				margin-top: -0.17rem;
			}
		}
		.content {
			width: 100%;
			display: flex;
			height: calc(100vh - 0.9rem);
			.left {
				width: 1.74rem;
				background-color: #F3F3F3;
			    overflow-y: auto;
				overflow-x: hidden;
				ul {
					li {
						width: 1.74rem;
						height: 1.1rem;
						line-height: 1.1rem;
						text-align: center;
						font-size: 0.28rem;
						a {
							color: #888;
							position: relative;
							img {
								position: absolute;
								font-size: 10px;
								top: -0.1rem;
								right: -0.2rem;
							}
							.i-hot {
								width: 0.24rem;
								height: 0.1rem;
							}
							.i-new {
								width: 0.24rem;
								height: 0.08rem;
							}	
						}
					}
					.on {
						background-color: #fff;
						color: #333;
					}
				}
			}
			.right {
			    overflow-y: auto;
    			overflow-x: hidden;
				padding: 0.2rem 0.22rem 0;
				width: calc(100% - 1.74rem);
				box-sizing: border-box;
				.title {
					padding: 0.12rem 0 0.12rem;
					font-size: 0.24rem;
					color: #999;
				}
				.item {
					position: relative;
					padding: 0.16rem;
					z-index: 1;
					height: 1.87rem;
					box-sizing: border-box;
					margin-bottom: 0.2rem;
					.thumb {
						width: 1.54rem;
						height: 1.54rem;
					}
					.info {
						margin-left: 0.15rem;
						flex: 1;
						height: 100%;
						font-size: 0;
						flex-direction: column;
					    align-items: flex-start;
					    justify-content: space-between;
						.title {
							font-size: 0.3rem;
							color: #333;
							padding: 0;
						}
						.rule {
							font-size: 0.22rem;
							color: #999;
							padding: 0.1rem 0 0.16rem;
							line-height: 1;
						}
						.full {
							height: 0.3rem;
							font-size:0.2rem;
							color:rgba(244,163,83,1);
							i {
								background:rgba(255,242,229,1);
								padding: 1px 3px;
							}
						}
						.price {
							.money {
								font-size: 0.22rem;
							}
							color: #249E6C;
							font-size: 0.34rem;
						}
						.cost {
							color: #BBBBBB;
							font-size: 0.24rem;
							margin-left: 0.18rem;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
	.Loading-box {
		.weui-toast {
			width: 100%;
			min-height: 100% !important;
			overflow: hidden;
			top: 0;
		}
		.weui-icon_toast.weui-loading {
			margin-top: 75%;
		}
	}
	
</style>