<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">
			<div class="left" ref="menuWrapper">
				<ul>
					<li v-if="goodsList.length != 0" :class="{'on': (currentIndex < 0 ? 0 : currentIndex) === index}" v-for="(item,index) in goodsList" :key="index" @click="selectMenu(index,$event)">
						<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="right" ref="foodWrapper">
				<div>
					<div v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" class="food-list-hook">
						<p class="title">{{item.combinationName}}</p>
						<div class="f-relative f-all-1px" v-for="(goods,k) in item.goodsList" :key="k">
							<a style="display:block" :href="'/mall/web/vgoods/detail/' + goods.goodsNo">
								<div class="item f-flex">
									<a :href="'/mall/web/vgoods/detail/' + goods.goodsNo" class="list-img-box">
										<img :src=" imghost + goods.bannerImgs" class="thumb" />
									</a>
									<div class="info f-flex">
										<div class="info-box">
											<p class="title f-ellipsis-1 ellipsis">{{goods.name}}</p>
											<p class="rule f-ellipsis-1">{{goods.shortDesc}}</p>
											<div class="card-name">
												<i :style="{marginRight:(i+1)==goods.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in goods.labelList">{{label.labelText}}</i>
											</div>
										</div>
										<div class="f-flex">
											<p class="price">
												<span><span class="money">￥</span>{{goods.price?goods.price/100:goods.originalPrice/100}}</span>
											</p>
											<p class="cost" v-if="goods.originalPrice&&goods.price&&goods.originalPrice!=goods.price">￥{{goods.originalPrice/100}}</p>
										</div>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Loading -->
		<loading :show="showLoading" text="loading"></loading>
	</div>
</template>
<script>
import goodsApi from "../models/goods-model.js";
//import configs from '../configs';
import { Alert, Toast, Popup, Loading } from "vux";
import BScroll from "better-scroll";
export default {
    data() {
        return {
            no: 0,
            id: 0,
            c_no: 0,
            showLoading: false,
            goodsList: [],
            imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
            listHeight: [], //存储区块的高度
            scrollY: {},
            clickTrue: false,
            currentNum: 0
        };
    },
    computed: {
        currentIndex() {
            const { scrollY, listHeight, clickTrue, currentNum } = this;
            let index = listHeight.findIndex((height, index) => {
                return (
                    scrollY >= listHeight[index] &&
                    scrollY < listHeight[index + 1]
                );
            });
            if (scrollY > listHeight[index] + 50) {
                index++;
            }
            if (
                listHeight[listHeight.length - 1] -
                    this.$refs.foodWrapper.clientHeight <=
                scrollY
            ) {
                if (clickTrue) {
                    return currentNum;
                } else {
                    return listHeight.length - 1;
                }
            }
            return index;
        }

        /*currentIndex() {
				for (let i = 0; i < this.listHeight.length; i++){
					let height = this.listHeight[i]
					let height2 = this.listHeight[i + 1]
					//当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
					//>=height,是因为一开始this.scrollY=0,height=0
					if( !height2 || (this.scrollY >= height && this.scrollY < height2)) {
						return i
					}
					if(this.listHeight[this.listHeight.length-1] - this.$refs.foodWrapper.clientHeight <= this.scrollY ) {
						if(this.clickTrue) {
							return this.currentNum
						} else {
							return (this.listHeight.length-1)
						}
					}
				}
				return 0
			}*/
    },
    components: {
        Toast,
        Popup,
        Loading
    },
    methods: {
        //返回上一页
        goBack() {
            // history.go(-1)
            this.$router.push({
                name: "首页"
            });
		},
		goTo(no){
			location.href=""
		},
        // 取到路由带过来的参数
        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 || [];
                    let list = [];
                    for (var i = 0; i < this.goodsList.length; i++) {
                        if (this.goodsList[i].goodsList.length != 0) {
                            list.push(this.goodsList[i]);
                        }
                    }
                    for (let y = 0; y < list.length; y++) {
                        for (let z = 0; z < list[y].goodsList.length; z++) {
                            list[y].goodsList[z].labelList = list[y].goodsList[
                                z
                            ].smallLabel
                                ? JSON.parse(list[y].goodsList[z].smallLabel)
                                : "";
                        }
                    }
                    this.goodsList = list;
                    this.$nextTick(function() {
                        //调用scroll函数，实现滚动
                        this._initScroll();
                        //拿到数据以后计算高度
                        this._calculateHeight();
                        // 自动选中
                        this.autoSelect(list, this.c_no);
                    });
                } else {
                    this.$vux.toast.text(res.msg, "middle");
                }
            });
        },
        toJSON(data) {
            if (data) {
                return JSON.parse(data)[0].labelText;
            } else {
                return;
            }
        },
        _initScroll() {
            this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                click: true //允许better-scroll列表上的点击事件
            });
            this.foodsScroll = new BScroll(this.$refs.foodWrapper, {
                click: true, //允许better-scroll列表上的点击事件
                probeType: 3 //让better-scroll监听scroll事件
            });
            this.foodsScroll.on("scroll", pos => {
                this.scrollY = Math.abs(Math.round(pos.y));
            });
        },
        _calculateHeight() {
            //food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块
            let foodList = this.$refs.foodWrapper.getElementsByClassName(
                "food-list-hook"
            );
            let height = 0;
            this.listHeight.push(height);
            //listHeight是一个递增的区间数组，是每个专区高度的累加
            for (let i = 0; i < foodList.length; i++) {
                let item = foodList[i];
                height += item.clientHeight;
                this.listHeight.push(height);
            }
        },
        /*selectMenu(index, event) {        
				if(event && !event._constructed) {          
					return ;        
				}        
				let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");        
				let el = foodList[index];        
				this.foodsScroll.scrollToElement(el,300)
			},*/
        selectMenu(index, event) {
            this.clickTrue = true; //触发过事件之后，clickTrue的值变为true
            this.currentNum = index;

            //在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
            // 浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
            if (event && !event._constructed) {
                return;
            } else {
                let foodList = this.$refs.foodWrapper.getElementsByClassName(
                    "food-list-hook"
                );
                let el = foodList[index];
                this.foodsScroll.scrollToElement(el, 300);
            }
        },
        autoSelect(list, no) {
            list.forEach((v, i, a) => {
                if (v.combinationNo === no) {
                    this.selectMenu(i);
                }
            });
        },
        ShareWenXin() {
            var merchantNo = this.no;
            this.wxShare({
                merchantNo: merchantNo,
                source: 0,
                url: encodeURIComponent(location.href),
                shareUrl: encodeURIComponent(
                    "http://" + location.host + "/v2/home"
                )
            });
        }
    },
    mounted() {
        this.getParams();
        this.ShareWenXin();
    }
};
</script>
<style lang="scss" scoped>
.card-name {
    height: 0.3rem;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    color: #f4a353;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	word-wrap: break-word;
	margin-top:0.1rem;
    i {
        font-style: normal;
        background: rgba(255, 242, 229, 1);
		padding: 0.05rem 0.1rem;
		line-height: 0.28rem;
    }
}
.ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	line-height: 1 !important;
    word-wrap: break-word;
    height: 0.32rem;
}
.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);
        -webkit-overflow-scrolling: touch;
        .left {
            width: 1.74rem;
            background-color: #f3f3f3;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            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;
            -webkit-overflow-scrolling: touch;
            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;
            }
            .list-img-box {
                display: flex;
                // align-items: center;
            }
            .item {
				align-items: flex-start;
				height: 1.87rem;
				// position: relative;
				a{
					display: block;
				}
				padding: 0.16rem;
				width: 5.32rem;
                z-index: 1;
                // height: 1.87rem;
                box-sizing: border-box;
				margin-bottom: 0.2rem;
				.list-img-box{
					margin-right: 0.15rem;
				}
                .thumb {
                    width: 1.54rem;
                    height: 1.54rem;
                }
                .info {
					padding-top:0.05rem;
					display: flex;
					width: 3.33rem;
					flex-grow:1;
                    height: 100%;
                    font-size: 0;
					flex-direction: column;
					height: 100%;
                    align-items: flex-start;
					justify-content: space-between;
					.info-box{
						width: 100%;
						display: flex;
						flex-direction: column;
					}
                    .title {
                        font-size: 0.3rem;
						color: #333;
						width: 100%;
                        padding: 0;
                        line-height: 1;
                    }
                    .rule {
                        font-size: 0.22rem;
						color: #999;
						width: 100%;
						padding: 0.1rem 0 0;
						height: 0.22rem;
						overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        word-wrap: break-word;
                        margin-top: 0.16rem;
                        line-height: 1;
                    }
                    .full {
                        height: 0.2rem;
						font-size: 0.2rem;
						width: 100%;
                        font-style: normal;
                        font-weight: 400;
                        color: rgba(244, 163, 83, 1);
                        text-overflow: ellipsis;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        word-wrap: break-word;
                        margin-top: 0.16rem;
                        line-height: 1;
                        i {
                            font-weight: 400;
                            color: #f4a353;
                            overflow: hidden;
                            height: 0.22rem;
                            font-style: normal;
                            background: rgba(255, 242, 229, 1);
                            padding: 1px 3px;
                        }
                    }
                    .price {
                        font-size: 0;
                        min-width: 1.5rem;
                        span {
                            display: inline-block;
                            font-size: 0.34rem;
                        }
                        .money {
                            font-size: 0.22rem;
                        }
                        color: #249e6c;
                    }
                    .cost {
                        color: #bbbbbb;
                        font-size: 0.24rem;
                        margin-left: 0.1rem;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
}
</style>