<template>
	<view>
		<global-loading />

		<view style="background-color: #fff;">
					<view class="flex-items-plus flex-row mar-top-20">
						<view class="searchImg-box flex-items-plus">
							<image class="searchImg" src="https://jy.scjysm.asia:18086/mefile/file/static/img//searchImg.png"></image>
							<input class="search-box" v-model="keyWord" placeholder-class="searchboxPlace"
								placeholder="请输入您想要的宝贝" />
		
						</view>
						<view class="mar-left-40 fs26" @click="getList">搜索</view>
					</view>
				</view>
		<view class="content">
			<!-- 分类中心 -->
			<scroll-view scroll-y class="left-aside">
				<view v-for="(item,index) in flist" :key="item.classifyId" class="f-item b-b"
					:class="{active: index === currentIndex}" @click="tabtap(item,index)">
					{{item.classifyName}}
				</view>
			</scroll-view>

			<!-- 			 <view class="" style="display: flex;width: 100%;">
			 	 <view   v-for="(groupItem,groupIndex) in AllList" style="height: 300rpx;">
					 <view class="" v-if="">
					 	
					 </view>
			 	 	   <view v-for="(val,index) in groupItem.list" class="groupList">
									<view>
										<image :src="val.image" mode="" style="width: 260rpx;height: 260rpx;margin-right: 10rpx;"></image>
											<view>{{val.activityType}}</view>
											<view>${{val.price}}</view>
											<view>{{val.shopName}}</view>
									</view>
			 	 	   </view>
			 	 </view>
			 </view> -->



			<scroll-view scroll-with-animation scroll-y class="right-aside" v-if="slist.length >0">
				<view v-for="(item,val) in slist" :key="item.classifyId" class="s-list"  >
					<view class="classBox flex-items-plus" >
						<!-- v-if="item.childs.length>0" -->
						<image class="emptyOrder-img" src="https://jy.scjysm.asia:18086/mefile/file/static/images/classRight.png">
						</image>
						<text class="s-item">{{item.classifyName}}</text>
						<image class="emptyOrder-img" src="https://jy.scjysm.asia:18086/mefile/file/static/images/classLeft.png">
						</image>
					</view>

					<view style="display: flex; width: 100%;flex-wrap: wrap;">
						<view v-for="(groupItem,groupIndex) in AllList[val]"
							style="margin-bottom: 20rpx;padding: 20rpx 10rpx 0rpx 10rpx;width: 49%;"
							@click="goodsDateils(groupItem.shopId,groupItem.productId,groupItem.skuId)">

							<view>
								<image :src="groupItem.image" mode=""
									style="width:240rpx;height: 240rpx;margin-right: 10rpx;border-radius: 10rpx;">
								</image>
								<view class="tableTitle" style="-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;">{{groupItem.productName}}</view>
								<view class="tableText"><text
										style="color: #C44A51;font-weight: 700;">{{groupItem.price}} ￥</text> <text
										style="color: #A9A9A9;">已售 {{groupItem.number}}件</text> </view>
							</view>
						</view>
					</view>
					<!-- </view> -->
					<!-- <view class="t-list">
						<view @click="navToList(item.classifyId, titem.classifyId)" class="t-item"
							v-for="titem in item.childs" :key="titem.classifyId">
							<image :src="titem.classifyImage" class="pic-img default-img"></image>
							<text>{{titem.classifyName}}</text>
						</view>
					</view> -->
				</view>
			</scroll-view>
			<view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
				<image class="emptyOrder-img" src="https://jy.scjysm.asia:18086/mefile/file/static/img//bgnull.png"></image>
				<label class="font-color-999 fs26 mar-top-30">该分类没有商品～</label>
			</view>
		</view>
	</view>
</template>

<script>
	const NET = require('../../../utils/request')
	const API = require('../../../config/api')
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentIndex: 0,
				currentId: '',
				flist: [],
				slist: [],
				ifEmpty: false,
				keyWord: '',
				category3Id: '',
				type: 0,
				AllList: [],
			}
		},
		
		onLoad(option) {
			this.loadData();
		},
		methods: {
			input(e) {
				console.log('输入内容：', e);
			},
			loadData() {
				// uni.showLoading({
				//   mask: true,
				// 	title:'加载中...'
				// })
				NET.request(API.FindCategoryListByDepth, {
					classifyId: "",
				}, 'GET').then(res => {
					this.flist = res.data
					this.currentId = this.flist[0].classifyId
					uni.hideLoading()
					this.getChildCategory()
				}).catch(res => {
					uni.hideLoading()
				})
			},
			getChildCategory() {
				// uni.showLoading({
				//   mask: true,
				// 	title:'加载中...'
				// })
				NET.request(API.FindCategoryListByDepth, {
					classifyId: this.currentId
				}, 'GET').then(res => {
					console.log(res.data)
					let that = this
					for (let i = 0; i < res.data.length; i++) {
						that.getTwoList(res.data[i].classifyId, res.data[i].classifyId, 0)
					}
					uni.hideLoading()
					this.slist = res.data

					if (this.slist.length === 0) {
						this.ifEmpty = true
					}
				}).catch(res => {
					uni.hideLoading()
				})
			},
			//一级分类点击
			tabtap(item, index) {
				this.ifEmpty = false
				if (this.currentIndex == index) {
					return;
				}

				this.currentId = item.classifyId;

				this.currentIndex = index
				this.getChildCategory()
				this.AllList = []
				this.AllListID = []
			},
			//右侧栏滚动
			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;
			},
			// 获取二级所以列表商品
			getTwoList(val, type) {
				NET.request(API.GetClaasifyProducts, {
					classifyId: val,
					type: type,
					page: 1,
					pageSize: 10
				}, 'GET').then(res => {
					uni.hideLoading()
					this.AllList.push(res.data.list)
				}).catch(res => {
					uni.hideLoading()
				})
			},
			navToList(sid, tid) {
				uni.navigateTo({
					url: `../../../pages_category_page1/goodsModule/goodsList?category3Id=${tid}`
				})
			},
			// 搜索
			getList(){
				if (!this.keyWord) {
					uni.showToast({
						title: '请输入要搜索内容！',
						duration: 2000,
						icon: 'none'
					});
				} else {
					uni.navigateTo({
						url: '../../../pages_category_page1/goodsModule/goodsList?keyWord=' + this.keyWord,
					})
				}
			},
			//商品详情
			goodsDateils(shopId, productId, skuId) {
				uni.navigateTo({
					url: '/pages_category_page1/goodsModule/goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' + skuId
				})
			}
		}
	}
</script>

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

	.header {
		border-bottom: 1px solid #F3F4F5FF;
	}

	.logo {
		width: 280rpx;
		height: 42rpx;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100vh;
		background-color: #F8F8F8;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #FFFFFF;
		}
	}

	.right-aside {
		flex: 1;
		padding: 20upx 0 20upx 0;
		background: #fff;
		height: 100vh;
	}

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

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

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

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}

	.emptyOrder-box {
		margin-left: 180upx;

		.emptyOrder-img {
			margin-top: -130upx;
			width: 113upx;
			height: 98upx;
		}
	}

	.classBox {
		image {
			width: 66rpx;
			height: 4rpx;
			margin-top: 10rpx;
		}

		.s-item {
			margin: 0 10rpx;
		}
	}



	.product-list {
		position: relative;

		&-box {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;

			&.swiper {
				height: 620rpx;
			}
		}

		&.product-swiper .product-list-box {
			padding-left: 0;
		}

		&-item-warp {
			margin: 0 0 20rpx 0;
		}

		&-item {
			width: 348rpx;
			padding: 0 7rpx;
			box-sizing: content-box;
		}

		&-img {
			width: 348rpx;
			height: 348rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx 10rpx 0 0;

			.img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				border-radius: 20rpx;
			}
		}

		&-info {
			background-color: #FFFFFF;
			//box-shadow: 0px 0px 15px 0px rgba(52, 52, 52, 0.15);
			border-radius: 0 0 10rpx 10rpx;
			padding: 20rpx;

			label {
				font-weight: normal;
			}

			.product-name {
				font-size: 28rpx;
				color: #333;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 18rpx;
				line-height: 40rpx;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			.shop-box {
				background-color: #39be7a;
				border-radius: 0rpx 20rpx 20rpx 0rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				height: 40rpx;
				margin-right: 10rpx;

				.shop-name {
					font-size: 20rpx;
					color: #FFEBC4;
					padding: 0 8rpx 0 12rpx;
				}

				.shop-logo {
					border: 2rpx solid #fff;
					border-radius: 50%;
					overflow: hidden;
					float: right;

					img {
						width: 34rpx;
						height: 34rpx;
						display: block;
					}
				}
			}

			.buy-count {
				color: #C5AA7B;
				font-size: 20rpx;
				border: 2rpx solid #E4E5E6;
				line-height: 40rpx;
				padding: 0 5rpx;
			}

			.price-warp {
				display: flex;
				align-items: baseline;
				line-height: 56rpx;

				.iconImg {
					width: 58rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}

				.price {
					color: #C83732;
					font-size: 40rpx;
					margin-right: 20rpx;
				}

				.original-price {
					font-size: 24rpx;
					color: #ccc;
					text-decoration: line-through;
				}
			}
		}

	}

	.tableTitle {
		font-size: 28rpx;
		padding: 0 4rpx;
		margin: 10rpx 0;
		max-width: 100%; /* 确保文本容器有最大宽度限制 */
	}

	.tableText {
		padding: 0rpx 10rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
	}

	.iconboder::before {
		content: '';
		position: absolute;
		top: 6rpx;
		left: 46rpx;
		width: 3rpx;
		height: 30rpx;
		background-color: #E2E2E2;

	}
	input {
		padding-left: 80upx;
	}
	.searchImg-box{
		.searchImg {
			width: 36upx;
			height: 36upx;
			position: absolute;
			left: 60upx;
		}
		.search-box {
			background-color: #F1F1F1;
			width: 530upx;
			height: 66upx;
		}
		.searchboxPlace {
			font-size: 26upx;
			color: #A9A9A9;
			padding-right: 30upx;
		}
		.searchClose-icon {
			width: 30upx;
			height: 30upx;
			margin-left: -50upx;
	    z-index: 99999;
		}
	}
	.hotSearchBox{
		padding: 0 36upx;
		.historyText{
			flex: 1;
		}
		.hotSearchListSee-icon {
			height: 24upx;
		}
		.hotSearchListNotSee-icon {
			height: 36upx;
		}
		.seeIcon {
			width: 40upx;
			position: absolute;
			right: 30upx;
		}
		.notSeeContent {
			margin-top: 20upx;
			text-align: center;
			font-size: 24upx;
			color: #CCCCCC;
		}
	}
</style>