<template>
	<view class="content">
		<!-- <view class="width100 height85 backcorfff heads">
			<view class="paddtop10 width90 alijusstart">
				<view class="width80p font16 fcor333 fontwig6">
					<image mode="widthFix" class="icon15 marRight10" src="../static/imgs/shop.png"></image>时代天街
				</view>
				<view class="width20 fotrt">
					<image mode="widthFix" class="icon20" src="../static/imgs/nocollection.png"></image>
					<image mode="widthFix" class="icon20" src="../static/imgs/collection.png"></image>
				</view>
			</view>
			<view class="width90 mart5 font12 fcor999">前门西大街正阳市场1号楼中部</view>
		</view> -->

		<scroll-view scroll-y class="left-aside">
			<view v-for="item in flist" :key="item.id" class="f-item" :class="{active: item.id === currentId}"
				@click="tabtap(item)">
				<view class="width100 fotct">
					<image :src="item.ext2" mode="widthFix" class="icon45"></image>
				</view>
				<view class="width100 fotct" style="margin-top: -30px;">
					{{item.name}}
				</view>
			</view>
		</scroll-view>


		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
			:scroll-top="tabScrollTop">
			<view v-for="item in slist" :key="item.id" :id="'main-'+item.id">
				<view class="s-item width90">
					<text class="promotion_mixg1 backcor99" style="margin-right: -3px;"></text>
					<text class="promotion_mixg1 backcor66" style="margin-right: -3px;"></text>
					<text class="promotion_mixg1 backcor33 marglerig"></text>
					{{item.name}}
				</view>
				<view v-if="titem.ext1 == item.id" class="t-list mart10 paddbotm10" v-for="titem in tlist"
					:key="titem.id" @click="showPopup(titem)">
					<view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2">
						{{titem.name}}
					</view>
					<view class="width94 alijun mart5">
						<image :src="titem.defaultImage" mode="widthFix" class="qzgoodsimg"></image>
						<view class="width50 fotrt">
							<view class="width100 font12 color2f6f43">¥<text
									class="font18 fontwig6 margle">{{titem.salesTallPrice}}</text>
							</view>
							<view class="width100 font14 mart5 color2f6f43">
								已减¥{{(titem.marketTallPrice - titem.salesTallPrice).toFixed(2)}}元</view>
							<view class="width100 font14 mart5 fcor999" style="text-decoration: line-through;">
								原价¥{{titem.marketTallPrice}}
							</view>
							<view class="mart10 icon-click fotrt">
								<!-- <image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"></image> -->
								<!-- <view class="num fcorfff" style="background: #d90209;">1</view> -->
								<image class="btn-plus" mode="widthFix" src="../static/imgs/blueplus.png"></image>
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>

		<shopcart :goods="shoppingcart" @add="addCart" @dec="decreaseCart" @input="inputCart" @delAll="delAll">
		</shopcart>


		<!-- 弹窗选择规格 -->
		<wybPopup ref="popup" type="bottom" width="500" height="1000" scrollY="true" radius="6" :showCloseIcon="true">
			<image mode="widthFix" class="width40w mart40" :src="cbkchangelist.defaultImage"></image>
			<view class="width100 line1 mart10"></view>
			<view class="mart20 width90 font18 fontwig6 fcor333">{{cbkchangelist.name}}</view>
			<view class="width90 mart10">
				<view class="fcor333 font16 fontwig6">杯型</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[cupSizeid == item ? 'bocactive' : '']" v-for="(item,index) in cupSize" :key="index"
					@click="changetype(1,item)">
					{{item}}
				</view>
			</view>
			<view class="width90 mart10">
				<view class="fcor333 font16 fontwig6">温度</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[temperatureid == item ? 'bocactive' : '']" v-for="(item,index) in temperature"
					@click="changetype(2,item)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="width90 mart10" v-if="cream">
				<view class="fcor333 font16 fontwig6">奶油</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[creamid == item ? 'bocactive' : '']" v-for="(item,index) in cream"
					@click="changetype(3,item)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="width90 mart10" v-if="espresso">
				<view class="fcor333 font16 fontwig6">浓缩咖啡</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[espressoid == item ? 'bocactive' : '']" v-for="(item,index) in espresso"
					@click="changetype(4,item)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="width90 mart10" v-if="milk">
				<view class="fcor333 font16 fontwig6">牛奶</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[milkid == item ? 'bocactive' : '']" v-for="(item,index) in milk"
					@click="changetype(5,item)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="width90 mart10" v-if="milkBubble">
				<view class="fcor333 font16 fontwig6">奶泡</view>
				<view class="mart10 width30 fotct height30  fcor666 font12 typecage"
					:class="[milkBubbleid == item ? 'bocactive' : '']" v-for="(item,index) in milkBubble"
					@click="changetype(6,item)" :key="index">
					{{item}}
				</view>
			</view>
			<view class="height30"></view>
			<view class="wybfot width100">
				<view class="height70 pricefot alijusstart backcorfff">
					<view class="width60 margle10">
						<view class="width100">
							¥<text class="font24 fontwig6 color2f6f43 margle">{{cbkchangelist.salesTallPrice}}</text>
						</view>
						<view class="width100 font12 fcor999">
							<text>{{cupSizeid}}</text><text>,{{temperatureid}}</text><text
								v-if="creamid">,{{creamid}}</text><text v-if="espressoid">,{{espressoid}}</text><text
								v-if="milkid">,{{milkid}}</text><text v-if="milkBubbleid">,{{milkBubbleid}}</text>
						</view>
					</view>
					<view class="icon-click alijusstart">
						<image class="btn-reduce" mode="widthFix" @click="decreaseshopCart()"
							src="../static/imgs/wreduce.png"></image>
						<view class="num fcor333">{{nums}}</view>
						<image class="btn-plus" mode="widthFix" @click="addshopCart()"
							src="../static/imgs/blueplus.png">
						</image>
					</view>
				</view>
				<view class="width100 height50 backcorf2f6 fotct fcorfff" @click="close()">加入购物车
				</view>
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import shopcart from '../../components/shopcart.vue';
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
	import {
		getStarbucksProducts
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		components: {
			shopcart,
			wybPopup
		},
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				flist: [], //一级
				slist: [], //二级
				tlist: [], //商品
				cateList: [],
				storeCode: '', //门店编号
				cupSize: '', //杯型数据
				cupSizeid: '', //杯型id
				temperature: '', //温度数据
				temperatureid: '', //温度id
				cream: '', //奶油数据
				creamid: '', //奶油id
				espresso: '', //浓缩数据
				espressoid: '', //浓缩id
				milk: '', //牛奶数据
				milkid: '', //牛奶id
				milkBubble: '', //奶泡数据
				milkBubbleid: '', //奶泡id
				cbkchangelist: '', //选择的数据
				nums: 1, //数量
				shoppingcart: [], //购物车
				productId: '', //商品id
			}
		},
		onLoad(options) {
			this.storeCode = options.storeCode;
			this.getStarbucksProducts();
		},
		methods: {
			//星巴克查询商品
			getStarbucksProducts() {
				uni.showLoading({
					title: '加载中...'
				})
				let datas = {
					regionId: app.globalData.cityId
				}
				getStarbucksProducts(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.cateList = res.return_data;
						this.loadData();
					}
				})
			},
			async loadData() {
				let list = await this.cateList;
				list.forEach(item => {
					if (!item.categoryName) {
						this.flist.push(item); //pid为父级id, 没有pid或者n=0是一级分类
					}
					if (!item.defaultImage) {
						this.slist.push(item); //没有图的是2级分类
					}
					if (item.categoryName && item.defaultImage) {
						this.tlist.push(item); //3级分类
					}
				})
				this.currentId = this.flist[0].id;
			},

			//一级分类点击
			tabtap(item) {
				uni.showLoading({
				})
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				setTimeout(() => {
					uni.hideLoading();
					this.currentId = item.id;
					let index = this.slist.findIndex(sitem => sitem.id == item.id);
					this.tabScrollTop = this.slist[index].top;
				}, 200);
			},
			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].id;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			// 规格
			addshopCart() {
				this.nums = this.nums + 1;
			},
			decreaseshopCart() {
				if (this.nums > 1) {
					this.nums = this.nums - 1;
				}
			},
			//购物车
			addCart: function(item) {
				if (item.num >= 0) {
					item.num++
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							good.num = item.num
					})

				} else {
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							Vue.set(good, 'count', 1)
					})
				}

			},
			decreaseCart(item) {
				if (item.num) {
					item.num--
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							good.num = item.num
					})
				}
			},
			inputCart: function(item) {
				if (item.num >= 0) {
					item.num++
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							good.num = item.num + -1
					})

				} else {
					this.shoppingcart.forEach((good) => {
						if (item.name == good.name)
							Vue.set(good, 'count', 1)
					})
				}

			},
			// 清空购物车
			delAll() {
				this.shoppingcart.forEach((good) => {
					if (good.num) {
						good.num = 0
					}
				})
			},
			//弹出弹窗
			showPopup(item) {
				this.nums = 1;
				this.cbkchangelist = item;
				if (item.cupSize) {
					this.cupSize = item.cupSize.split(',');
					this.cupSizeid = this.cupSize[0];
				}
				if (item.temperature) {
					this.temperature = item.temperature.split(',');
					this.temperatureid = this.temperature[0];
				}
				if (item.cream) {
					this.cream = item.cream.split(',');
					this.creamid = this.cream[0];
				}
				if (item.espresso) {
					this.espresso = item.espresso.split(',');
					this.espressoid = this.espresso[0];
				}
				if (item.milk) {
					this.milk = item.milk.split(',');
					this.milkid = this.milk[0];
				}
				if (item.milkBubble) {
					this.milkBubble = item.milkBubble.split(',');
					this.milkBubbleid = this.milkBubble[0];
				}

				this.$refs.popup.show();
			},
			//选择类型
			changetype(item, item1) {
				if (item == 1) {
					this.cupSizeid = item1
				}
				if (item == 2) {
					this.temperatureid = item1
				}
				if (item == 3) {
					this.creamid = item1
				}
				if (item == 4) {
					this.espressoid = item1
				}
				if (item == 5) {
					this.milkid = item1
				}
				if (item == 6) {
					this.milkBubbleid = item1
				}
			},

			//关闭弹窗
			close() {
				let datas = {
					"num": this.nums,
					"storeCode": this.storeCode,
					"productId": this.cbkchangelist.id,
					"cupSize": this.cupSizeid,
					"temperature": this.temperatureid,
					"milk": this.milkid,
					"cream": this.creamid,
					"espresso": this.espressoid,
					"milkBubble": this.milkBubbleid,
					"name": this.cbkchangelist.name,
					"imgs": this.cbkchangelist.defaultImage,
					"price": this.cbkchangelist.salesTallPrice,
					"oldprice": this.cbkchangelist.marketTallPrice
				}

				this.shoppingcart.push(datas);
				this.$refs.popup.hide();
			},
			//跳转详情
			navToList() {
				uni.navigateTo({
					url: '../kfc-details/kfc-details'
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
		bottom: 55px;
	}

	.heads {
		position: absolute;
	}

	.icon20 {
		width: 20px;
	}

	.icon15 {
		width: 15px;
	}

	.icon45 {
		width: 45px;
	}


	.left-aside {
		flex-shrink: 0;
		width: 80px;
		height: 100%;
		// margin-top: 85px;
		margin-bottom: 55px;
		background-color: #fff;
	}


	.f-item {
		display: grid;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 180upx;
		padding: 10px 0px;
		font-size: 24upx;
		color: #666666;
		position: relative;

		&.active {
			background: #f8f8f8;
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		// margin-top: 85px;
		padding-left: 20upx;
		margin-bottom: 60px;
	}

	.s-item {
		justify-content: flex-end;
		align-items: center;
		display: flex;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: #333333;

		.promotion_mixg1 {
			width: 12px;
			height: 2px;
			border-radius: 18px;
			transform: rotate(125deg);
		}


	}

	.t-list {
		width: 96%;
		border-radius: 15px;
		background: #fff;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}

	}

	.qzgoodsimg {
		margin-top: -10px;
		width: 120px;
	}

	.icon-click {
		// position: absolute;
		height: 28px;
		right: 6%;
	}

	.btn-reduce {
		// position: absolute;
		// left: 0px;
		// top: 0;
		width: 28px;
		height: 28px;
		// z-index: 1;

	}

	.btn-plus {
		// position: absolute;
		// right: 0px;
		// top: 0;
		width: 28px;
		height: 28px;
		// z-index: 1;
	}

	.num {
		padding: 0px 20px;
		height: 28px;
		line-height: 28px;
		font-weight: 600;
		border-radius: 18px;
	}

	.typecage {
		margin-left: 2.5%;
		border-radius: 3px;
		border: 1px solid #333333;
		display: inline-block;

	}

	.footbtn {
		height: 50px;
		background-color: #000000;
		display: flex;
		bottom: 0px;
	}

	.pricefot {
		border-radius: 15px 15px 0 0;
		box-shadow: 0px 5px 20px #333333;
	}

	.bocactive {
		background-color: #eaf0ec;
		color: #00713e;
	}

	.wybfot {
		position: fixed;
		bottom: 0px;
	}
</style>
