<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="../static/imgs/menu1.png" mode="widthFix" class="icon45"></image>
				</view>
				<view class="width100" 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 @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-list mart10"
					v-for="titem in tlist" :id="'main-'+item.id" :key="titem.id">
					<view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2">
						香辣鸡腿堡
					</view>
					<view class="width94 alijun mart5">
						<view class="width60">
							<image src="../static/imgs/prod1.png" mode="widthFix" class="width100"></image>
						</view>
						<view class="width40 fotrt">
							<view class="width100 font12 colorc3">¥<text class="font18 fontwig6 margle">16.8</text>
							</view>
							<view class="width100 font14 mart5 colorc3">已减¥1.7元</view>
							<view class="width100 font14 mart5 fcor999" style="text-decoration: line-through;">原价¥18.5
							</view>
							<view class="mart10 icon-click fotrt">
								<image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"></image>
								<view class="num">1</view>
								<image class="btn-plus" mode="widthFix" src="../static/imgs/plus.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<shopcart :goods="goods" @add="addCart" @dec="decreaseCart" @input="inputCart" @delAll="delAll"></shopcart>
	</view>
</template>

<script>
	import shopcart from '../../components/shopcart.vue';
	export default {
		components: {
			shopcart
		},
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				flist: [],
				slist: [],
				tlist: [],
				goods: [{
						"name": "热销",
						"foods": [{

								"name": "南瓜粥",
								"price": 9.22,
								"oldPrice": "",
								"description": "食材：大米，南瓜",
								"sellCount": 229,
								"img": '../../static/nanguaz.jpg'

							}, {
								"name": "小米粥",
								"price": 9.8,
								"oldPrice": "",
								"description": "食材：小米",
								"sellCount": 239,
								"count": 1,
								"img": '../../static/xiaomi.jpg'

							},
							{
								"name": "油条",
								"price": 1.88,
								"oldPrice": "",
								"description": "食材：油条",
								"sellCount": 229,
								"count": 1,
								"img": '../../static/youtiao.jpg'

							}
						]
					},
					{
						"name": "折扣",
						"foods": [{
							"name": "油条1只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐",
						"foods": [{
							"name": "油条2只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥2",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐2",
						"foods": [{
							"name": "油条3只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥3",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "热销2",
						"foods": [{
							"name": "南瓜粥1",
							"price": 9.22,
							"oldPrice": "",
							"description": "食材：大米，南瓜",
							"sellCount": 229,
							"img": '../../static/nanguaz.jpg'

						}, {
							"name": "小米粥1",
							"price": 9.8,
							"oldPrice": "",
							"description": "食材：小米",
							"sellCount": 239,
							"img": '../../static/xiaomi.jpg'

						}]
					},
					{
						"name": "折扣2",
						"foods": [{
							"name": "油条4只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥4",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐3",
						"foods": [{
							"name": "油条5只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥5",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐4",
						"foods": [{
							"name": "油条6只",
							"price": 1.81,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥6",
							"price": 9.91,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "热销3",
						"foods": [{
							"name": "南瓜粥3",
							"price": 9.21,
							"oldPrice": "",
							"description": "食材：大米，南瓜",
							"sellCount": 229,
							"img": '../../static/nanguaz.jpg'

						}, {
							"name": "小米粥3",
							"price": 9.78,
							"oldPrice": "",
							"description": "食材：小米",
							"sellCount": 239,
							"img": '../../static/xiaomi.jpg'

						}]
					},
					{
						"name": "折扣3",
						"foods": [{
							"name": "油条7只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥7",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐6",
						"foods": [{
							"name": "油条8只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥8",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "套餐7",
						"foods": [{
							"name": "油条9只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥9",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},
					{
						"name": "热销4",
						"foods": [{
							"name": "南瓜粥4",
							"price": 9.22,
							"oldPrice": "",
							"description": "食材：大米，南瓜",
							"sellCount": 229,
							"img": '../../static/nanguaz.jpg'

						}, {
							"name": "小米粥4",
							"price": 9.8,
							"oldPrice": "",
							"description": "食材：小米",
							"sellCount": 239,
							"img": '../../static/xiaomi.jpg'

						}]
					},
					{
						"name": "折扣4",
						"foods": [{
							"name": "油条10只",
							"price": 1.88,
							"oldPrice": "",
							"description": "食材：油条",
							"sellCount": 229,
							"img": '../../static/youtiao.jpg'

						}, {
							"name": "艇仔粥10",
							"price": 9.9,
							"oldPrice": "",
							"description": "食材：瘦肉，干贝，花生等",
							"sellCount": 239,
							"img": '../../static/tingzaiz.jpg'

						}],

					},

				],
				cateList: [{
						id: 1,
						name: '手机数码'
					},
					{
						id: 2,
						name: '礼品鲜花'
					},
					{
						id: 3,
						name: '男装女装'
					},
					{
						id: 4,
						name: '母婴用品'
					},
					{
						id: 5,
						pid: 1,
						name: '手机通讯'
					},
					{
						id: 6,
						pid: 1,
						name: '运营商'
					},
					{
						id: 8,
						pid: 5,
						name: '全面屏手机',
						picture: '/static/temp/cate2.jpg'
					},
					{
						id: 9,
						pid: 5,
						name: '游戏手机',
						picture: '/static/temp/cate3.jpg'
					},
					{
						id: 10,
						pid: 5,
						name: '老人机',
						picture: '/static/temp/cate1.jpg'
					},
					{
						id: 11,
						pid: 5,
						name: '拍照手机',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 12,
						pid: 5,
						name: '女性手机',
						picture: '/static/temp/cate5.jpg'
					},
					{
						id: 14,
						pid: 6,
						name: '合约机',
						picture: '/static/temp/cate1.jpg'
					},
					{
						id: 15,
						pid: 6,
						name: '选好卡',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 16,
						pid: 6,
						name: '办套餐',
						picture: '/static/temp/cate5.jpg'
					},
					{
						id: 17,
						pid: 2,
						name: '礼品',
					},
					{
						id: 18,
						pid: 2,
						name: '鲜花',
					},
					{
						id: 19,
						pid: 17,
						name: '公益摆件',
						picture: '/static/temp/cate7.jpg'
					},
					{
						id: 20,
						pid: 17,
						name: '创意礼品',
						picture: '/static/temp/cate8.jpg'
					},
					{
						id: 21,
						pid: 18,
						name: '鲜花',
						picture: '/static/temp/cate9.jpg'
					},
					{
						id: 22,
						pid: 18,
						name: '每周一花',
						picture: '/static/temp/cate10.jpg'
					},
					{
						id: 23,
						pid: 18,
						name: '卡通花束',
						picture: '/static/temp/cate11.jpg'
					},
					{
						id: 24,
						pid: 18,
						name: '永生花',
						picture: '/static/temp/cate12.jpg'
					},
					{
						id: 25,
						pid: 3,
						name: '男装'
					},
					{
						id: 26,
						pid: 3,
						name: '女装'
					},
					{
						id: 27,
						pid: 25,
						name: '男士T恤',
						picture: '/static/temp/cate13.jpg'
					},
					{
						id: 28,
						pid: 25,
						name: '男士外套',
						picture: '/static/temp/cate14.jpg'
					},
					{
						id: 29,
						pid: 26,
						name: '裙装',
						picture: '/static/temp/cate15.jpg'
					},
					{
						id: 30,
						pid: 26,
						name: 'T恤',
						picture: '/static/temp/cate16.jpg'
					},
					{
						id: 31,
						pid: 26,
						name: '上装',
						picture: '/static/temp/cate15.jpg'
					},
					{
						id: 32,
						pid: 26,
						name: '下装',
						picture: '/static/temp/cate16.jpg'
					},
					{
						id: 33,
						pid: 4,
						name: '奶粉',
					},
					{
						id: 34,
						pid: 4,
						name: '营养辅食',
					},
					{
						id: 35,
						pid: 4,
						name: '童装',
					},
					{
						id: 39,
						pid: 4,
						name: '喂养用品',
					},
					{
						id: 36,
						pid: 33,
						name: '有机奶粉',
						picture: '/static/temp/cate17.jpg'
					},
					{
						id: 37,
						pid: 34,
						name: '果泥/果汁',
						picture: '/static/temp/cate18.jpg'
					},
					{
						id: 39,
						pid: 34,
						name: '面条/粥',
						picture: '/static/temp/cate20.jpg'
					},
					{
						id: 42,
						pid: 35,
						name: '婴童衣橱',
						picture: '/static/temp/cate19.jpg'
					},
					{
						id: 43,
						pid: 39,
						name: '吸奶器',
						picture: '/static/temp/cate21.jpg'
					},
					{
						id: 44,
						pid: 39,
						name: '儿童餐具',
						picture: '/static/temp/cate22.jpg'
					},
					{
						id: 45,
						pid: 39,
						name: '牙胶安抚',
						picture: '/static/temp/cate23.jpg'
					},
					{
						id: 46,
						pid: 39,
						name: '围兜',
						picture: '/static/temp/cate24.jpg'
					},
				]

			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				let list = await this.cateList;
				list.forEach(item => {
					if (!item.pid) {
						this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
					} else if (!item.picture) {
						this.slist.push(item); //没有图的是2级分类
					} else {
						this.tlist.push(item); //3级分类
					}
				})
			},
			//一级分类点击
			tabtap(item) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}

				this.currentId = item.id;
				let index = this.slist.findIndex(sitem => sitem.pid == item.id);
				this.tabScrollTop = this.slist[index].top;
			},
			//右侧栏滚动
			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].pid;
				}
			},
			//计算右侧栏每个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;
			},
			addCart(item) {

			},
			decreaseCart(item) {

			},
			inputCart(item) {},
			// 清空购物车
			delAll() {

			},
			//跳转详情
			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;
		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;
	}

	.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;
		}

	}

	.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 35px;
		height: 28px;
		line-height: 28px;
		font-weight: 600;
		color: #fff;
		background: #d90209;
		border-radius: 18px;
	}

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