<style lang="scss" scoped>
	page {
		background-color: #f8fafb !important;
	}

	.wholeSale {
		background-color: #f8fafb !important;

		.wholeSale-header {
			position: sticky;
			top: 0;
			z-index: 100;
			margin-bottom: 20rpx;
			background-color: #40AE36;
		}

		.wholeSale-section {
			position: sticky;
			top: calc(82rpx + var(--status-bar-height));
			padding: 0rpx 20rpx;
			background-color: #fff;
			transition: height .5s;
			overflow: hidden;
			margin-bottom: 20rpx;

			.wholeSale-nav {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.icon {
					margin-right: 20rpx;
				}

				.search_content {
					flex: 1;
					height: 70rpx;
					padding: 2px 2px 2px 21.05rpx;
					border-radius: 80rpx;
					background: #EDEFF2;
					position: relative;
					box-sizing: border-box;

					.search_content_wrap {
						width: 100%;

						.icon-sousuo {
							font-size: 26.32rpx;
							font-weight: bold;
							color: #c8c7c6;
							margin-right: 17.54rpx;
						}

						input {
							width: 80%;
						}
					}

					.search_btn {
						width: 106rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #40AE36;
						border-radius: 100px;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}

			.category {
				position: relative;
				width: 100%;
				overflow: auto;
				margin-bottom: 20rpx;
				// padding-right: 70rpx;

				.category-wrap {
					display: flex;
					padding-bottom: 10rpx;

					.category-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 38rpx;

						text {
							margin-top: 16rpx;
							font-size: 24rpx;
							color: #666666;
							white-space: nowrap;
						}

						.category-item-text {
							width: 120rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.category-item-active {
						position: relative;

						.category-item-img {
							border: 2px solid #40AE36;
							border-radius: 50%;
						}

						text {
							background-color: #40AE36;
							color: #fff;
							padding: 2rpx 10rpx 6rpx 10rpx;
							border-radius: 50rpx;
						}
					}
				}

				.category-all {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					height: 100%;
					background-color: #f3f3f3;
					z-index: 101;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 24rpx;
					border-radius: 4rpx;
					width: 70rpx;
					color: #919191;
				}
			}

			.cate {
				width: 100%;
				overflow: auto;
				margin-bottom: 30rpx;

				.cate-wrap {
					display: flex;
					padding-bottom: 8rpx;

					.cate-item {

						text {
							padding: 4rpx 16rpx;
							white-space: nowrap;
							font-size: 30rpx;
							color: #333;
						}
					}

					.cate-item-active {
						text {
							color: #40AE36;
							font-weight: bold;
						}
					}
				}
			}

		}

		.wholeSale-con {
			height: 100vh;
			margin: 0 20rpx;
			padding-bottom: 30rpx;
		}

		.comprehensive {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 50rpx;

			[class^=comprehensive-] {
				display: flex;
				align-items: center;

				text {
					margin-right: 12rpx;
					font-size: 26rpx;
					color: #666666;
				}

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

				.loudou {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>
<template>
	<view class="wholeSale">
		<!-- 顶部 -->
		<view class="wholeSale-header">
			<!-- 适配不同机 -->
			<view style="height: var(--status-bar-height);background-color: #40af37;"></view>
			<view style="display: flex;padding: 20rpx 28rpx;background-color: #40af37;color: #fff;">
				<view style="display: flex;font-weight: bold;font-size: 32rpx;"><u-icon style="margin-right: 20rpx;"
						name="arrow-left" size="20" color="#fff" @click="navBack"></u-icon>里海云仓</view>
			</view>
		</view>

		<!-- 分类区域 -->
		<view class="wholeSale-section" :style="{height:wrapHeight + 'rpx'}">
			<view class="wholeSale-nav">
				<view @click="navTo(`/pages/columnGoods/goods_search/index?back=true&searchVal=${where.keyword}`)"
					hover-class="none" class="search_content flex_a_c_j_sb">
					<view class="flex_a_c search_content_wrap">
						<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
						<input type="text" placeholder="搜索商品名称" :value="where.keyword"
							placeholder-style="font-size: 30rpx;color:#999;" disabled style="pointer-events: none;">
					</view>
				</view>
			</view>

			<!-- 商品大分类 -->
			<view class="category">
				<scroll-view scroll-x="true">
					<view class="category-wrap">
						<block v-for="(item,index) in store_category" :key="index">
							<view class="category-item" :class="{'category-item-active': index==cate_change}"
								@click="changeCate(index)">
								<u--image class="category-item-img" width="108rpx" :src="item.pic" height="108rpx"
									shape="circle">
									<template v-slot:loading>
										<u-loading-icon color="#999" size="15" />
									</template>
								</u--image>
								<text class="category-item-text">{{item.cate_name}}</text>
							</view>
						</block>
					</view>
				</scroll-view>

				<!-- <view class="category-all" v-if="store_category.length > 0">
					<view style="margin-bottom: 20rpx;">全部</view>
					<u-icon name="list"></u-icon>
				</view> -->
			</view>

			<!-- 大分类 -->
			<!-- <uni-popup ref="popup" type="top" border-radius="10px 10px 0 0">
				<view></view>
			</uni-popup> -->


			<!-- 商品小分类 -->
			<view class="cate" v-if="store_category_children.length>1">
				<scroll-view scroll-x="true">
					<view class="cate-wrap">
						<block v-for="(item,index) in store_category_children" :key="index">
							<view class="cate-item" :class="{'cate-item-active':index == cate_change_children}"
								@click="changeChildrenCate(index)">
								<text>{{item.cate_name}}</text>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="wholeSale-con"
			:style="{height:'calc(100vh - '+wrapHeight+'rpx - 142rpx '+(isShowSmall?' - 48rpx':'')+')'}">
			<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom" @scroll="onScroll" style="height: 100%;"
				@scrolltoupper="scrolltoupper" :refresher-threshold="0">
				<view>
					<!-- 流水瀑布 -->
					<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
					<loadmore :type="isLoading" style="margin-bottom:20rpx ;"></loadmore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		goShopDetail
	} from '@/libs/order.js'
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import {
		getStoreCategory,
		getProductslist
	} from "@/api/store.js"
	export default {
		components: {
			WaterfallsFlow
		},
		data() {
			return {
				hostProduct: [],
				store_category: [], //商品大分类
				store_category_children: [], //商品小分类
				cate_change: 0,
				cate_change_children: 0,
				isLoading: 0,
				where: {
					page: 1,
					limit: 20,
					mer_type: 1, //1-里海云仓, 2-云市场, 3-名优特产
					cate_pid: '',
					keyword: '',
					deduction_rate: '', //抵扣比例
					rand: 1
				},
				wrapHeight: 300,
				isShowSmall: false,
				scrollTop: 0,
			}
		},
		onLoad(option) {
			this.getStoreCategory();
			this.getProductslist(true);
		},

		onPageScroll(e) {
			uni.$emit('scroll');
		},

		watch: {
			'where.cate_pid'(newVal, oldVal) {
				if (newVal && !oldVal) {
					this.wrapHeight = 300 + 48;
					this.isShowSmall = true;
				}
				if (!newVal && oldVal) {
					this.wrapHeight = 300;
					this.isShowSmall = false;
				}
			}
		},
		methods: {
			scrolltoupper() {
				this.getProductslist(true);
			},

			onScrollBottom(e) {
				this.getProductslist();
			},

			onScroll(e) {
				if (this.scrollTop >= e.target.scrollTop) { //上拉
					this.wrapHeight = 300;
					if (this.where.cate_pid) this.wrapHeight = this.wrapHeight + 48;
				} else {
					this.wrapHeight = 0;
				}
				this.scrollTop = e.target.scrollTop;
			},

			navTo(url) {
				uni.navigateTo({
					url: url,
					success: () => {
						uni.$once('searchValue', (e) => {
							this.$nextTick(() => {
								this.where.keyword = e;
								this.getProductslist(true);
							})
						})
					}
				})
			},

			navBack() {
				uni.navigateBack();
			},

			tabsChange(e) {
				this.tabsCurr = e;
			},
			changeCate(e) {
				this.cate_change = e;
				this.store_category_children = [];
				if (this.store_category[e].children) this.store_category_children = [...this.store_category[e].children];
				this.store_category_children.unshift({
					cate_name: '全部',
					store_category_id: ''
				})
				this.cate_change_children = 0;
				this.where.cate_pid = this.store_category[e].store_category_id;
				this.getProductslist(true);
			},
			changeChildrenCate(e) {
				this.cate_change_children = e;
				this.where.cate_pid = this.store_category_children[e].store_category_id;
				if (e == 0) this.where.cate_pid = this.store_category[this.cate_change]
					.store_category_id; // 如若选中全部, 则取父级id
				this.getProductslist(true);
			},
			getStoreCategory() {
				getStoreCategory(259).then(res => {
					this.store_category = [{
						cate_name: '全部',
						pic: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0bc7a202404021652194310.png',
						store_category_id: ''
					}, ...res.data];
					this.store_category_children = this.store_category[0].children || [];
					this.store_category_children.unshift({
						cate_name: '全部',
						store_category_id: ''
					})
				})
			},
			getProductslist(reLoad = false) {
				if (reLoad) {
					this.where.page = 1;
					this.hostProduct = [];
					this.isLoading = 0;
				}
				if (this.isLoading == -1) return;
				this.isLoading = 1;

				getProductslist(this.where).then(res => {
					this.where.limit = res.data.limit
					this.where.page = res.data.page
					uni.stopPullDownRefresh();
					this.hostProduct = [...this.hostProduct, ...res.data.list];
					this.isLoading = 0;
					if (res.data.list.length < this.where.limit) this.isLoading = -1;
					this.where.page++;
				}).catch(err => {
					uni.stopPullDownRefresh();
				})
			},
			goDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						toLogin();
					}
				})
			}
		}
	}
</script>