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

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

		.wholeSale-header-wrap {
			background-color: #40AE36;
		}

		.wholeSale-header-search-wrap {
			padding: 30rpx 20rpx 0;
			background-color: #fff;
		}

		.wholeSale-header {
			position: sticky;
			top: 0;
			z-index: 100;
			margin-bottom: 20rpx;

			.scrollview {
				display: flex;
				align-items: center;
				height: 98rpx;
				padding-left: 32rpx;

				.scrollview-item {
					margin-right: 30rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.scrollview-active {
					position: relative;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;

					&::after {
						content: "";
						display: inline-block;
						position: absolute;
						bottom: -6rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 100%;
						height: 6rpx;
						background-color: #FFFFFF;
					}
				}
			}
		}

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

		.wholeSale-nav {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.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 {
			width: 100%;
			overflow: auto;
			margin-bottom: 20rpx;

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

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

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

		.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 class="wholeSale-header-wrap">
				<!-- 适配不同机 -->
				<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-header-search-wrap">
				<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>

				<!-- 商品小分类 -->
				<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>

		<!-- 内容 -->
		<view class="wholeSale-con">
			<!-- 流水瀑布 -->
			<WaterfallsFlow :wfList='hostProduct' @itemTap="goDetail" :type="0" />
			<loadmore :type="isLoading"></loadmore>
		</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
				}
			}
		},
		onLoad(option) {
			this.getStoreCategory();
			this.getProductslist(true);
		},
		onReachBottom() {
			this.getProductslist();
		},
		onPageScroll() {
			uni.$emit('scroll');
		},
		onPullDownRefresh() {
			this.getProductslist(true);
		},
		methods: {
			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>