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

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

		.wholeSale-header {
			margin-bottom: 20rpx;
			// background-color: #40AE36;

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

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

				.icon {
					margin-right: 20rpx;
				}
			}

			.search_content {
				// margin-bottom: 40rpx;
				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" style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
			<!-- 适配不同机 -->
			<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-con" style="padding-top: calc(var(--status-bar-height) + 100rpx);">
			<view class="wholeSale-nav">
				<!-- <u-icon class="icon" name="arrow-left" size="20" @click="navBack"></u-icon> -->
				<!-- 搜索 -->
				<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>
					<!-- <button class="search_btn">搜索</button> -->
				</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 class="comprehensive">
				<view class="comprehensive-price">
					<text>价格</text>
					<image src="@/static/new_define/priceChange.png"></image>
				</view>
				<view class="comprehensive-sales_num">
					<text>销量</text>
				</view>
				<view class="comprehensive-discount">
					<text>抵扣</text>
					<image class="loudou" src="@/static/new_define/loudou.png"></image>
				</view>
			</view> -->

			<!-- 流水瀑布 -->
			<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-名优特产
					mer_cate_id: '',
					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.mer_cate_id = this.store_category[e].store_category_id;
				this.getProductslist(true);
			},
			changeChildrenCate(e) {
				this.cate_change_children = e;
				this.where.mer_cate_id = this.store_category_children[e].store_category_id;
				if (e == 0) this.where.mer_cate_id = 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 => {
					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>