<template>
	<view class="page-body">
		<scroll-view class="nav-left" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item"  v-for="(item,index) in classifyData" @click="categoryClickMain(item.id)" :key="item.id"
				:class="item.id == categoryId ? 'active' : ''" :style="[scrollBottom]">
				<view class="imgbox" v-if="item.icon&&sizeList[index].width">
					<image :style="{'height':sizeList[index].height+'rpx','width':sizeList[index].width+'rpx'}" :src="item.icon"/>
				</view>
				<view :style="{'margin-top':'4rpx'}"><span>{{ item.name }}</span></view>
				<!-- <view :class="item.id == categoryId ? 'active-line' : ''"></view> -->
			</view>
		</scroll-view>
		<scroll-view class="nav-right" :style="[heightStyle]" :class="[shopCarFlag?'shopCarcss':'' ]" scroll-y :scroll-top="scrollTop" @scroll="scroll" @touchstart="openScroll"
			scroll-with-animation>
			<view v-for="(category,index) in classifyData" :id="category.id" :key="category.id" class="box" :style="[goodBottom,scrollBottom]">
				<view :style="loads" class="right-title">{{ category.name }}</view>
				<view class="nav-right-item" v-for="item in category.goods" :key="item.goodsId">
					<view class="thumbnailBox">
						<image src="/static/imgs/aixin.png" v-if="item.isRecommend == 1" class="isRecommend" />
						<image @click="cart(item, category)" class="thumbnail" v-if="item.pics.thumbnailApplet" :src="item.pics.thumbnailApplet" />
						<image @click="cart(item, category)" class="thumbnail" v-else :src="item.pics.thumbnail" />
					</view>
					<view @click="cart(item, category)" class="info">
						<view class="goods-name">{{ item.name }}</view>
						<view class="tags" v-if="item.tags">
							<view class="tag-item" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
						</view>
						<view class="desc-box">
							<view class="desc">{{ item.desc || '' }}</view>
						</view>
						<view class="mon">
							<view class="priceBox">
								<view class="discount"><text class="moneyLog">￥</text>{{ Utils.isInteger(getSku(item).discount) }}</view>
								<view class="price" v-if="getSku(item).price!=getSku(item).discount">￥<text class="num">{{ Utils.isInteger(getSku(item).price) }}</text></view>
							</view>
							<view class="addbox" v-if="shopState&&isInRange">
								<image v-if="getSku(item).state==1" @click.stop="cart(item, category)" class="add" :src="'../../static/imgs/jiahao.png'" />
								<!-- <u-icon  class="add" name="plus-circle-fill" color="#0050F6" @click.stop="getallNum(item, category)" size="22"></u-icon> -->
								<div v-if="getSku(item).state!=1"  style="color: #858585;font-size: 20rpx;margin-top:16rpx">已售罄</div>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<show-toast ref="toast"/>
	</view>
</template>

<script>
import { $EventBus } from "../../utils/EventBus";
import Utils from '@/utils/utils'
import Order from '@/request/order'
export default {
	name: 'menuAssembly',
	props:['buied','shopState','isInRange'],
	data() {
		return {
			scrollBottom: {
				'--scroll-marginbottom': 0
			},
			heightStyle: {
				'--scroll-height': 0
			},
			goodBottom: {
				'--good-bottom':0
			},
			Utils,
			categoryId: '',
			categoryPostion: [],
			scrollLeftTop: 0,
			scrollTop: 0,
			scrolled: true,
			goods:[],
			shopCarFlag:false,
			taBarHeight:0,
			lastNumber:0,
			width:0,
			sizeList:[]
		}
	},
	watch:{
		isInRange(val) {
			if(!val) {
				this.scrollBottom['--scroll-marginbottom'] = 131+'rpx'
			}else{
				this.scrollBottom['--scroll-marginbottom'] = 0+'rpx'
			}
		},
		shopState(val) {
			if(!val) {
				this.scrollBottom['--scroll-marginbottom'] = 131+'rpx'
			}else{
				this.scrollBottom['--scroll-marginbottom'] = 0+'rpx'
			}
		},
		goods(val){
			this.shopCarFlag = val.length>0
		},
		buied(val) {
			if(val){
				this.heightStyle['--scroll-height'] = (this.taBarHeight+122)+'rpx'
				this.initScroll()

			}else{
				this.heightStyle['--scroll-height'] = (this.taBarHeight+22)+'rpx'
			}
		}
	},
	computed:{
		classifyData(){
			this.scrollTop = 0
			let categorys = this.$store.state.menu.setMenuCategorys.length!=0?JSON.parse(JSON.stringify(this.$store.state.menu.setMenuCategorys)):[]
			// if(categorys.length!=0){
			// 	const lastGood = 1
			// 	this.lastNumber = lastGood<=2?3-lastGood:0
			// 	this.goodBottom['--good-bottom'] = ((this.lastNumber*50))+'px'
			// 	console.log(this.lastNumber)
			// }
			// 删除没有商品的分类
			if(categorys) {
				for(var i=categorys.length-1; i>=0; i--) {
					var category = categorys[i];
					if(!category.goods || category.goods.length<=0) {
						categorys.splice(i, 1);
					}
				}
				if(categorys.length>0){
					this.categoryId = categorys[0].id;
				}
			}
			this.initScroll()
			// console.log(categorys)
			// categorys[0]?categorys[0].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
			// categorys[1]?categorys[1].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
			// categorys[2]?categorys[2].icon = 'https://s1.ax1x.com/2022/08/05/vnHQw6.jpg':''
			// categorys.map((item,index)=>{
			// 		this.imagesHeight(item.src,index)
			// })
			if(categorys.length!=0)this.imagesHeight(categorys)
			return categorys
		}
	},
	created() {
		$EventBus.$off('updateCar');
	},
	mounted(){
		this.$nextTick(()=>{
			this.taBarHeight = uni.getStorageSync('taBarHeight')
			this.heightStyle['--scroll-height'] = (this.taBarHeight+44)+'rpx'
		})
		this.goods = uni.getStorageSync('shopCarInfo') || [];
		$EventBus.$on('updateCar', () => {
			this.goods = uni.getStorageSync('shopCarInfo') || [];
		});
	},
	methods: {
		initScroll() {
			this.scrollLeftTop = 0
			this.scrollTop = 0
			const timer = setTimeout(() => {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.box').boundingClientRect(data => {
						console.log(data,'data')
						this.categoryPostion = data
						clearTimeout(timer)
					}).exec();
				})
			}, 1000);
		},
		async imagesHeight(list,index) {
			// return
			let i = 0
			const newList = list.map(item=>{
				return ''
			})
			const func =  async () => {
				if(list[i].icon){
					const val = await uni.getImageInfo({
						src: list[i].icon
					})
					let w = val[1].width
					let h = val[1].height
					if(w>80){
						w = 80
					}
					if(h>60){
						h = 60
					}
					newList[i] = {
						width:w,
						height:h
					}
				}
				i++
				if(i<newList.length){
					func()
				}else{
					this.sizeList = newList
				}
			}
			func()

			// console.log(val)
			// if(val.length==2){
			// 	this.sizeList[index] = {
			// 		width:val[1].width,
			// 		height:val[1].height
			// 	}
			// }
		},
		getSku(data) {
			const { skus } = data;
			if (!skus || skus.length == 0) {
				return { discount: data.discount, price: data.price};
			}
			const sku = data.skus.find(v => v.isDefault == 1 && v.state == 1)
			|| data.skus.find(v => v.state == 1)
			|| data.skus.find(v => v.isDefault == 1)
			|| data.skus[0];
			return sku;
		},
		createList(data) {
			// this.classifyData = data;
			// console.log(this.classifyData);
			
			// // 删除没有商品的分类
			// if(this.classifyData) {
			// 	for(var i=this.classifyData.length-1; i>=0; i--) {
			// 		var category = this.classifyData[i];
			// 		if(!category.goods || category.goods.length<=0) {
			// 			this.classifyData.splice(i, 1);
			// 		}
			// 	}
			// 	if(this.classifyData.length>0){
			// 		this.categoryId = this.classifyData[0].id;
			// 	}
			// }
			// this.$nextTick(() => {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.selectAll('.box').boundingClientRect(data => {
			// 		this.categoryPostion = data
			// 	}).exec();
			// })
		},
		getallNum(item, category) {
			this.$emit('getallNum', item, category)
		},
		openScroll() {
			this.scrolled = true
		},
		scroll(e) {
			if (!this.scrolled) return;
			const { categoryPostion } = this;
			let otherHeight = 0
			if(this.buied){
				otherHeight = 320
			}else{
				otherHeight = 270
			}
			if(this.shopCarFlag){
				otherHeight += 100
			}else{
				otherHeight+=0
			}
			const el = categoryPostion.filter(item =>   {return item.top <= e.target.scrollTop+otherHeight});
			console.log(el[el.length-1],'-------------------',e.target.scrollTop+otherHeight,otherHeight)
			if (el[el.length-1]) this.categoryId = el[el.length-1].id
		},
		categoryClickMain(id) {
			this.scrolled = false
			this.categoryId = id;
			this.categoryPostion.forEach(item => {
				if (item.id == id) {
					this.scrollTop = this.buied ? item.top - 320 : item.top - 270
				}
			});

		},
		async cart(item, category){
			console.log(item,category)
			const skuStatus = item.skus.filter(item=>{return (Number(item.state)===1&&item.isDelete === 0)})
	
			if(skuStatus.length===0){
				this.showToast({
					title: '该商品已售罄',
					icon: 'none',
				  })
			}else{
				if(this.shopState&&this.isInRange){
					const {data} = await Order.checkSku({skuId:skuStatus[0].skuId})
					const {goods} = data.data
					uni.setStorageSync('goodsInfo', JSON.stringify({ ...goods, category }));
				} else {
					uni.setStorageSync('goodsInfo', JSON.stringify({ ...item, category }));
				}
				uni.navigateTo({ url: '/menuSubPackage/pages/goodsDetail/goodsDetail' })
			}

		}
	}
}
</script>


<style lang="scss" scoped>
.page-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav {
	display: flex;
	width: 100%;
}

.nav-left {
	box-sizing: border-box;
	width: 164rpx;
	background: #fff;
	border-right: 2rpx solid #F0F0F0;
	height: calc(100vh - var(--scroll-height));
	overflow-y: auto;
	// background: var(--header-color);
}

.nav-left-item {
	position: relative;
	height: 145rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-family: PingFangSC-Regular, PingFang SC;
	
	.imgbox {
		// margin-top: 21.8rpx;
		// border: 1px solid red;
		width: 80rpx;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.active {
	font-family: PingFangSC-Medium, PingFang SC;
	box-shadow: 0px 4px 8px 0px rgba(102, 102, 102, 0.1);
	font-weight: 500;
	color: #333333;
	background: #FFFFFF;
	font-size: 24rpx;
	background: #fff;
	border-right: 4rpx solid #0050F6;
}

.nav-left-item:last-child {
	margin-bottom: var(--scroll-marginbottom);
	border-bottom: none;
}

.nav-right {
	box-sizing: border-box;
	height: calc(100vh - var(--scroll-height));
	overflow: auto;
	width: 585.21rpx;
	// padding-top: 42rpx;
}
.buiedcss{
	height: calc(100vh - 376rpx - 183rpx);
}

.shopCarcss{
	padding-bottom: 100rpx;
}

.box {
	display: block;
	overflow: hidden;
	/* min-height: 100vh; */
	/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}

.box:last-child {
	border: none;
	// min-height: 100vh;
}

.right-title {
	font-family: PingFangSC-Semibold, PingFang SC;
	padding-left: 32rpx;
	margin-bottom: 25rpx;
	height: 44rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	line-height: 44rpx;
}

.nav-right-item {
	display: flex;
	align-items: center;
	padding: 0rpx 32rpx 0rpx 32rpx;
	margin-bottom: 60rpx;
	background: #fff;
	position: relative;
	.thumbnailBox{
		position: relative;
		.isRecommend {
			position: absolute;
			width: 22.46rpx;
			height: 22.46rpx;
			top: 28rpx;
			right: 24rpx
		}
		.thumbnail {
			//缩略图
			width: 160rpx;
			height: 160rpx;
			// margin-top: -2rpx;
			vertical-align: bottom;
		}
	}


	.info {
		flex: 1;
		margin-left: 24rpx;

		.goods-name {
			font-family: PingFangSC-Medium, PingFang SC;
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 500;
			color: #333333;
		}
	
		.tags {
			height: 28rpx;
			margin-top: 8rpx;
			.tag-item {
				font-family: PingFangSC-Regular, PingFang SC;
				background-color: #F0F0F0;
				padding: 0rpx 8rpx;
				font-size: 20rpx;
				color: #999999;
				vertical-align: top;
				display: inline-block;
				margin-right: 16rpx;
			}
		}
	
		.desc-box {
			display: flex;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			margin-top: 14rpx;
			height: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
	
			.desc {
				flex: 1;
				vertical-align: top;
				line-height: 26rpx;
			}
		}
	
		.mon {
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			.priceBox{
				display: flex;
				flex-wrap: nowrap;
				align-items: flex-end;
				justify-content: flex-start;
				
				.discount {
					font-family: Futura-Medium, Futura;
					height: 38rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 30rpx;
					margin-right: 4.2rpx;
					font-weight: 500;
					
					.moneyLog {
						font-size: 24rpx;
					}
				}
				
				.price {
					flex: 1;
					height: 26rpx;
					font-size: 20rpx;
					color: #999999;
					font-family: Futura-Medium, Futura;
					line-height: 15rpx;
					
					.num {
						text-decoration: line-through;
					}
				}
			}
			.addbox{
				// line-height: 26rpx;
				padding-top: 12rpx;
				.add {
					// padding-top: 10rpx;
					margin-right: -1rpx;
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}

	.sellNull{
		position: absolute;
		right: 32rpx;
		top: 0rpx;
	}

}
.box:first-child {
	margin-top: 40rpx;
}
.box:last-child{
	// padding-bottom: var(--good-bottom);
	padding-bottom: 200rpx;
	// height: 100%;

}

.nav-right-item image {
	width: 150rpx;
	height: 150rpx;
}
.box:last-child {
	margin-bottom: var(--scroll-marginbottom);
	border-bottom: none;
}

::-webkit-scrollbar {
	/*取消小程序的默认导航条样式*/
	width: 0;
	height: 0;
	color: transparent;
}
</style>