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

	.wholeSale {
		.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 30rpx;

			.search_content {
				margin-bottom: 40rpx;
				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: 70rpx;

				.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-active {
						position: relative;

						&::after {
							content: "";
							display: inline-block;
							position: absolute;
							bottom: -6rpx;
							width: 100%;
							height: 6rpx;
							background-color: #40AE36;
							border-radius: 4rpx;
						}
					}
				}
			}

			.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 style="height: var(--status-bar-height);"></view>

			<!-- 滚动tab -->
			<scroll-view scroll-x="true" :scroll-top="100" :show-scrollbar="false" scroll-into-view="a1">
				<view class="scrollview">
					<block v-for="(item,indx) in tabsArr" :key="indx">
						<view class="scrollview-item" :id="'a' + indx"
							:class="{'scrollview-active':tabsCurr == item.val}" @click="tabsChange(item.val)">
							{{item.name}}
						</view>
					</block>
				</view>
			</scroll-view>
		</view>

		<!-- 内容 -->
		<view class="wholeSale-con">
			<!-- 搜索 -->
			<navigator url="/pages/columnGoods/goods_search/index" 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="搜索您需要批发进货的产品名称" placeholder-style="font-size: 30rpx;color:#999;"
						disabled>
				</view>
				<button class="search_btn">搜索</button>
			</navigator>

			<!-- 商品大分类 -->
			<view class="category">
				<scroll-view scroll-x="true">
					<view class="category-wrap">
						<block v-for="(item,index) in 10" :key="index">
							<view class="category-item category-item-active">
								<u-image width="108rpx" height="108rpx" shape="circle" :lazy-load="true">
									<template v-slot:loading>
										<u-loading-icon color="#999" size="15" />
									</template>
								</u-image>
								<text>水果蔬菜</text>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>

			<!-- 商品小分类 -->
			<view class="cate">
				<scroll-view scroll-x="true">
					<view class="cate-wrap">
						<block v-for="(item,index) in 10" :key="index">
							<view class="cate-item" :class="{'cate-item-active':index == 0}">
								<text>水果</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" />
		</view>
	</view>
</template>

<script>
	import {
		goShopDetail
	} from '@/libs/order.js'
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	export default {
		components: {
			WaterfallsFlow
		},
		data() {
			return {
				tabsArr: [{
					name: '里海云仓批发',
					val: 1
				}, {
					name: '供销云市场批发',
					val: 2
				}, {
					name: '名优特产批发',
					val: 3
				}],
				tabsCurr: 1
			}
		},
		methods: {
			tabsChange(e) {
				this.tabsCurr = e;
			},
			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>