<!-- 里海云仓小分类 -->
<template>
	<view class="smallClassification">
		<!-- 占位 -->
		<view style="height: var(--status-bar-height);"></view>

		<!-- 搜索 -->
		<view class="search">
			<view class="icon" @click="handleBack" />
			<view class="input-wrap">
				<icon type="search" size="18" />
				<input type="text" class="uni-input" placeholder="搜索商品" @input="" />
			</view>
		</view>

		<!-- goods -->
		<view class="con">
			<view class="con-left" :style="{'height':leftDomHeight}">
				<!-- 侧边栏商品类型 -->
				<block v-for="(item,indx) in cateData" :key="indx">
					<view class="con-left-bili_num_2" @click="handleChooseSideBar(item.store_category_id)">
						<u--image :src="item.pic" width="100rpx" height="100rpx" style="margin-bottom: 20rpx;"
							shape="circle">
							<template v-slot:loading>
								<u-loading-icon color="#999"></u-loading-icon>
							</template>
						</u--image>
						<text class="cate-name"
							:class="{active:searchParam.mer_cate_id == item.store_category_id?true:false}">{{item.cate_name}}</text>
					</view>
				</block>
			</view>

			<view class="con-right">
				<!-- 补贴比例标签 -->
				<view class="con-right-proportion">
					<image src="../../../static/cloud_warehouse/dkbl.png" />
					<block v-for="(item,indx) in propotionData" :key="indx">
						<view class="con-right-proportion-item"
							:class="{active:searchParam.deduction_rate == item.product_label_id}"
							@click="handleChooseProp(item.product_label_id)">{{item.label_name}}</view>
					</block>
				</view>

				<!-- 商品列表 -->
				<scroll-view scroll-y="true" class="con-right-goods" :style="{'height':goodsListHeight}"
					:show-scrollbar="false" :scroll-with-animation="true" @scrolltolower="scrolltolower">
					<view v-if="goodsData.length > 0">
						<view class="con-right-goods-item" v-for="(item,indx) in goodsData" :key="indx">
							<view class="goods-item-left">
								<u--image :src="item.image" width="190rpx" height="190rpx" radius="10" />
							</view>
							<view class="goods-item-right">
								<view class="goods-item-right-title">
									<text class="city">同城</text>
									<text class="name line1">{{item.store_name}}</text>
								</view>
								<view class="goods-item-right-redpackat line1">可使用补贴抵扣20%</view>
								<view class="goods-item-right-rules">
									<text class="unit">规格：1{{item.unit_name}}</text>
									<!-- 方山镇 -->
									<text class="addr"></text>
								</view>
								<view class="goods-item-right-purchase">
									<text class="num">￥{{item.price}}</text>
									<text class="buy"></text>
								</view>
							</view>
						</view>
						<view class="loadingicon acea-row row-center-wrapper" style="color: #ccc;">
							<text class="loading iconfont icon-jiazai" :hidden="hotLoading == false"></text>
							{{ hotTitle }}
						</view>
					</view>

					<view class='empty-box' v-else>
						<view class='pictrue'>
							<u--image src='../../../static/images/empty-box.png' width="414rpx"
								height="240rpx"></u--image>
							<view class="txt">暂无更多商品~</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 悬浮购买按钮 -->
		<view class="flow">
			<image src="../../../static/cloud_warehouse/gwc.png"></image>
			<text>11</text>
		</view>

		<!-- 底部结算 -->
		<view class="footer">
			<view class="footer-left">
				<text class="price">￥184.00</text>
				<text class="desc">支持配送 售后无忧</text>
			</view>
			<view class="footer-right">去结算</view>
		</view>
	</view>
</template>

<script>
	import {
		getProportion,
		getCategory,
		goodsList
	} from "@/api/cloud_warehouse.js";
	export default {
		data() {
			return {
				leftDomHeight: 0, //左侧农产品类型高度
				goodsListHeight: 0, //右侧商品列表高度
				propotionData: [], //比例
				cateData: [], //分类
				goodsData: [], //商品列表
				pid: '', //上一级id
				searchParam: {
					mer_cate_id: '', //商品类型id
					mer_id: '', //商铺id
					deduction_rate: '', //抵扣比例id
					keyword: '', //关键字查询
					page: 1,
					limit: 10
				},
				// 滚动加载
				hotTitle: '加载更多',
				hotLoading: false,
				hotScroll: true,
			}
		},
		onLoad(opt) {
			this.pid = opt.pid;
			this.searchParam.mer_id = opt.mer_id; //商铺id

			this.initHeight();
			this.initGoodsListHeight();
			this.initConfig();
		},
		methods: {
			// 返回
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 初始化商品列表参数
			initConfig() {
				uni.showLoading({
					title: "加载中",
				})
				Promise.all([getProportion({
					mer_id: this.searchParam.mer_id
				}), getCategory(this.searchParam.mer_id, this.pid)]).then(res => {
					uni.hideLoading();
					const [proportion, cate] = res;
					this.cateData = cate.data;
					this.propotionData = proportion.data;

					//初始化
					this.searchParam.mer_cate_id = this.cateData[0].store_category_id;
					// this.searchParam.deduction_rate = this.propotionData[0].product_label_id;

					this.getGoodsList();
				}).catch(er => {
					uni.hideLoading();
				})
			},

			// 滚动到底部
			scrolltolower(e) {
				this.getGoodsList();
			},

			// 获取商品分类列表
			getGoodsList() {
				let that = this;
				let num = that.searchParam.limit;
				if (!that.hotScroll) return;
				if (that.hotLoading) return;
				that.hotLoading = true;
				that.hotTitle = '';

				goodsList(this.searchParam).then(res => {
					let list = res.data.list;
					let hotScroll;
					if (list.length < num && list.length != 0 || list.length == 0)
						hotScroll = true;
					else
						hotScroll = false;
					that.hotScroll = hotScroll;
					that.hotLoading = false;
					that.hotTitle = hotScroll ? '已全部加载' : '加载更多';
					that.goodsData = that.goodsData.concat(list);
					that.searchParam.page += 1;
				});
			},

			// 比例
			handleChooseProp(e) {
				this.goodsData = [];
				this.searchParam.page = 1;
				this.searchParam.deduction_rate = e;
				this.getGoodsList();
			},

			// 侧边栏商品类型
			handleChooseSideBar(e) {
				this.goodsData = [];
				this.searchParam.page = 1;
				this.searchParam.mer_cate_id = e;
				this.getGoodsList();
			},

			// 具体商品列表高度
			initGoodsListHeight() {
				this.$nextTick(async () => {
					let footerDom = await this.getDomInfo(".footer");
					let goodsDom = await this.getDomInfo(".con-right-goods");
					this.goodsListHeight = footerDom.top - goodsDom.top + "px";
				})
			},

			// 农产品类型高度
			initHeight() {
				this.$nextTick(async () => {
					let leftDom = await this.getDomInfo(".con-left");
					let flowDom = await this.getDomInfo(".flow");
					this.leftDomHeight = flowDom.top - leftDom.top + "px";
				})
			},

			// 获取dom布局信息
			getDomInfo(selector) {
				return new Promise((resolve, reject) => {
					uni.createSelectorQuery().in(this).select(selector).boundingClientRect((data) => {
						resolve(data);
					}).exec();
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		background-color: #F7F7F7;
	}

	view,
	text {
		line-height: 1;
	}

	.smallClassification {
		width: 100%;
		height: 760rpx;
		background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/80b54202402290906142644.webp");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.search {
			display: flex;
			align-items: center;
			padding: 102rpx 30rpx 0;
			box-sizing: border-box;
			margin-bottom: 42rpx;

			.icon {
				width: 24rpx;
				height: 24rpx;
				border: 2rpx solid #fff;
				border-bottom-color: transparent;
				border-right-color: transparent;
				transform: rotate(-45deg);
				margin-right: 20rpx;
			}

			.input-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 29rpx;
				height: 58rpx;
				padding-left: 16rpx;

				input {
					width: 494rpx;
					height: 100%;
					margin-right: 20rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
					color: #7A7A7A;
				}

				.uni-input-placeholder {
					font-size: 28rpx;
					color: #9f9f9f;
				}
			}

			text {
				width: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			image {
				width: 42rpx;
				height: 40rpx;
			}
		}

		.con {
			display: flex;

			.con-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 176rpx;
				overflow: auto;

				.con-left-bili_title {
					margin-bottom: 40rpx;
				}

				[class^=con-left-bili_num_] {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 30rpx;

					text {
						position: relative;
						display: inline-block;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #262626;
						text-align: center;
						width: 80%;
					}

					.active {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #252525;

						&::after {
							content: "";
							display: inline-block;
							position: absolute;
							bottom: -10rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 80rpx;
							height: 18rpx;
							background: linear-gradient(90deg, #FF8057 0%, rgba(86, 197, 113, 0) 100%);
							border-radius: 9rpx 0rpx 0rpx 9rpx;
						}
					}
				}
			}

			.con-right {
				width: calc(100vw - 176rpx);
				padding-right: 20rpx;
				box-sizing: border-box;

				.con-right-proportion {
					display: flex;
					align-items: center;
					height: 38rpx;
					margin-bottom: 25rpx;

					image {
						width: 154rpx;
						height: 28rpx;
						margin-right: 50rpx;
					}

					.con-right-proportion-item {
						margin-right: 22rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.active {
						padding: 7rpx 22rpx;
						background: #FEE109;
						border-radius: 17rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #616161;
					}
				}

				.con-right-goods {
					overflow: auto;

					.con-right-goods-item {
						display: flex;
						width: 100%;
						margin-bottom: 20rpx;
						padding: 20rpx;
						background: #FFFFFF;
						border-radius: 30rpx;

						.goods-item-left {
							background: #A3CAB9;
							border-radius: 20rpx;
							margin-right: 20rpx;
						}

						.goods-item-right {
							flex: 1;

							.goods-item-right-title {
								display: flex;
								margin-bottom: 20rpx;

								.city {
									margin-right: 10rpx;
									padding: 4rpx 8rpx;
									background: #FF8056;
									border-radius: 6rpx;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}

								.name {
									width: 206rpx;
									height: 28rpx;
									font-size: 26rpx;
									font-family: PingFang SC;
									color: #1A1A1A;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
							}

							.goods-item-right-redpackat {
								display: inline-block;
								margin-bottom: 18rpx;
								padding: 6rpx 14rpx;
								background: rgba(246, 68, 39, .28);
								border-radius: 17rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #F23131;
							}

							.goods-item-right-rules {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 25rpx;

								.unit,
								.addr {
									font-size: 22rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #7A7A7A;
								}

								.unit {}

								.addr {}
							}

							.goods-item-right-purchase {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.num {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #1A1A1A;
								}

								.buy {
									position: relative;
									display: inline-block;
									width: 40rpx;
									height: 40rpx;
									background: #FF8056;
									border-radius: 50%;

									&::after,
									&::before {
										content: "";
										display: inline-block;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
										width: 24rpx;
										height: 4rpx;
										background: #FFFFFF;
									}

									&::before {
										transform: translate(-50%, -50%) rotate(90deg);
									}
								}
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx 0 40rpx;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;

			.footer-left {
				display: flex;
				flex-direction: column;
				margin-top: 14rpx;

				.price {
					width: 131rpx;
					height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #1A1A1A;
					margin-bottom: 18rpx;
				}

				.desc {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #616161;
				}
			}

			.footer-right {
				width: 200rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				background: linear-gradient(-20deg, #FF8154 0%, #FF8154 100%);
				border-radius: 39rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
		}

		.flow {
			position: fixed;
			bottom: 180rpx;
			left: 35rpx;

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

			text {
				position: absolute;
				top: -3rpx;
				right: -2rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #FFCE51;
				border-radius: 50%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #616161;
				text-align: center;
			}
		}

		.empty-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 100rpx auto 0;

			image {
				width: 414rpx;
				height: 240rpx;
			}

			.txt {
				font-size: 26rpx;
				color: #999;
				text-align: center;
			}
		}
	}
</style>