<template>
	<view class="index">
		<view class="oneindex">
			<view class="oneindexbox">
				<view class="oneindexboxswiper" :scroll-y="true" :scroll-with-animation="true"
					:enable-back-to-top="true" :style="'height:'+hh+'px'">
					<view v-for="(item,index) in navList" :key="index" class="oneindexswiperitem">
						<view class="oneindexswiperitem_one" :style="swiperCurrent==index?'background: #fff;':''"
							:class="swiperCurrent==index?'oneindexswiperitem_ones':''" @click="orderswitch(item,index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="towindexbox">
				<swiper :current="swiperCurrent" :disable-touch='disabletouch' @animationfinish="animationfinish"
					:duration='0' :vertical='true' :style="'height:'+hh+'px'">
					<swiper-item v-for="(item,index) in list_" :key="index">
						<scroll-view :scroll-y="true" @scrolltolower="lower" :style="'height:'+hh+'px'">
							<view v-for="(item1,index1) in  list_[index].data" :key="index1"
								class="main-item towindexboxscrollview">
								<view class="towindexboxview_box flex-start">
									<image class="towindexboxview_boximage" :src="item1.host_img" mode="aspectFill">
									</image>
									<view class="towindexboxview_boxtext flex-colum-start">
										<view class="towindexboxview_boxtextone">
											{{item1.title}}
										</view>
										<view class="towindexboxview_boxtexttow">
											销量 100+
										</view>
										<view class="indexboxitemlefttheretext flex-between">
											<view class="flex-start">
												<view class="indexboxitemlefttheretextone">
													<text>¥</text>
													<text>{{item1.price}}</text>
												</view>
												<view class="indexboxitemlefttheretexttow">
													¥{{item1.y_price}}
												</view>
											</view>
											<image src="@/static/mall/cart.png" mode="aspectFill"
												@click="requestSubscribeMessage(0,item1)"
												style="width: 40rpx; height: 40rpx;">
											</image>
											<!-- <u-number-box v-else v-model="item1.number" :min="0" button-size="12"
												color="#ffffff" :bgColor="theme.cartpieces" :max="item1.stock"
												iconStyle="color: #fff" @change="requestSubscribeMessage($event,item1)">
											</u-number-box> -->
										</view>

									</view>
								</view>
							</view>
							<view v-if="list_[index].data.length == 0 && list_[index].is_end == true"
								style="margin-top:200rpx;width: 100%;" class="flex-colum">
								<image :src="bgnothave" mode="" style="width: 100%;width: 100%;">
								</image>
							</view>
							<view class="flex-colum" style="width: 100%;">
								<u-loadmore :status="form.status" />
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>

		</view>
		<bottombbar class="headinga" v-if="style_type == 2" :valuebbar='1'></bottombbar>
		<bottombbar class="headinga" v-else :valuebbar='3'></bottombbar>
	</view>
</template>

<script>
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			bottombbar
		},
		data() {
			return {
				bgnothave: uni.getStorageSync('bgnothave'),
				style_type: uni.cache.get('loginuser').style_type,
				hh: 0,
				navList: [{
					id: '',
					title: ''
				}],
				navCount: 0,
				valuenumber: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				list_: {},
				like: '', //备注
				form: {
					status: 'loadmore',
				},
				disabletouch: true, //控制是否可以滑动
			};
		},
		async onLoad() {
			let res = await this.api.shoppingindexgoodsclass()
			this.navList = res
		},
		onShow() {
			this.shoppingindexgoodsclass()
			this.$store.dispatch("actionsclassification");
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
			//计算选中商品的总价

		},
		onReady() {
			this._onReadyApi()
			uni.hideLoading()
		},
		methods: {
			animationfinish(e) {
				let current = e.detail.current;
				if (this.list_['list' + current].data.length < 10) {
					this.form.status = 'nomore';
				}
				this.swiperCurrent = current;
				this.current = current;
			},
			lower(e) {
				console.log(e)
				this.onReachBottom_fn(this.list_['list' + this.swiperCurrent])
			},
			onReachBottom_fn(list) {
				if (!list.is_end) {
					this.get_order_list(this.current);
				} else {
					this.disabletouch = false
					this.form.status = 'nomore';
					console.log(this.disabletouch)
					this.$forceUpdate();
				}
			},
			init_fn() {
				for (let i = 0; i < this.navList.length; i++) {
					this.$set(this.list_, 'list' + [i], { //全部
						data: [],
						page: 1,
						is_end: false,
					})
					this.get_order_list(i);
				}
				console.log(this.list_)
			},
			async get_order_list(i) {
				this.form.status = 'loading';
				let page = null;
				let order_type = 0
				order_type = this.navList[i].id
				page = this.list_['list' + i].page
				let res = await this.api.shoppingindex({
					classid: order_type,
					page: page,
					like: this.like
				})
				this.paging(res, this.list_['list' + i])
				uni.hideLoading();
			},
			paging(res, list) {
				if (res.length == 0) {
					this.form.status = 'nomore';
					list.is_end = true;
					return false;
				} else {
					this.form.status = 'loading';
					list.page = list.page + 1;
					setTimeout(() => {
						list.data = [...list.data, ...res];
						if (res.length != 10) {
							list.is_end = true;
							this.form.status = 'nomore';

						} else {
							this.disabletouch = true
							this.form.status = 'loading';
						}
						this.$forceUpdate();
					}, 500)
				}
			},
			async shoppingindexgoodsclass() {
				let res = await this.api.shoppingindexgoodsclass()
				this.navList = res
				this.init_fn();
			},
			orderswitch(s, index) {
				console.log(index, this.list_['list' + index])
				if (this.list_['list' + index].data.length < 10) {
					this.form.status = 'nomore';
				}
				this.swiperCurrent = index;
			},
			requestSubscribeMessage(e, s) {
				console.log(e)
				// this.valuenumber = e.value
				// if (e == 0) {

				// } else {

				// }
				this.$u.debounce(this.shoppingindexgoodindexsaddcar(s), 200);
			},
			async shoppingindexgoodindexsaddcar(s) {
				console.log(s)
				let res = await this.api.shoppingindexgoodindexsaddcar({
					number: 1,
					goods_id: s.id,
					spec: s.spec_title,
				})
				if (res == 1) {
					uni.showToast({
						title: '添加购物车成功',
						icon: 'none'
					});
				}

			},
			_onReadyApi() {
				var windowHeight = uni.getSystemInfoSync().windowHeight
				//#ifdef MP-WEIXIN || H5
				uni.createSelectorQuery().select('.headinga').boundingClientRect((res) => {
					this.hh = windowHeight - res.height
					this.navCount = Math.round(this.hh / 50)
				}).exec()
				//#endif
				//#ifdef MP-ALIPAY
				my.createSelectorQuery().selectAll('.headinga').boundingClientRect().exec(ele => {
					var nodeData = ele[0]
					this.height = (nodeData.height) + "px";
				})
				//#endif


			}
		},
	}
</script>

<style lang="scss">
	.index {
		.oneindex {
			background-color: #fff;
			display: flex;

			.oneindexbox {
				width: 24%;
				background-color: #f7f7f7;
				overflow: auto;

				.oneindexboxswiper {
					width: 100%;

					.oneindexswiperitem {
						width: 100%;
						height: 84rpx;

						.oneindexswiperitem_ones::before {
							position: absolute;
							left: 0;
							top: 0;
							transform: translateY(50%);
							content: '';
							display: inline-block;
							background: #fc821c;
							width: 8rpx;
							height: 40rpx;
							border-radius: 0 10rpx 10rpx 0;
						}

						.oneindexswiperitem_one {
							position: relative;
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #000;
							height: 84rpx;
						}
					}
				}
			}

			.towindexbox {
				width: 76%;

				.towindexboxscrollview {
					margin-left: 24rpx;

					.towindexboxview_box {
						width: 100%;
						padding: 32rpx 0 28rpx 0;
						border-bottom: 1rpx solid #F6F6F6;

						.towindexboxview_boximage {
							background: #f8f8f8;
							width: 156rpx;
							height: 156rpx;
							border-radius: 12rpx;
						}

						.towindexboxview_boxtext {
							position: relative;
							margin-left: 20rpx;

							.towindexboxview_boxtextone {
								width: 300rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #333333;
							}

							.towindexboxview_boxtexttow {
								margin-top: 12rpx;
								width: 300rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #999999;
							}

							.indexboxitemlefttheretext {
								margin-top: 20rpx;
								width: 100%;

								.flex-start {
									.indexboxitemlefttheretextone {
										text {
											font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
											font-weight: normal;
											color: #FF5053;
										}

										text:nth-child(1) {
											font-size: 24rpx;
										}

										text:nth-child(2) {
											font-weight: bold;
											font-size: 34rpx;
										}
									}

									.indexboxitemlefttheretexttow {
										margin-top: 10rpx;
										margin-left: 12rpx;
										font-size: 20rpx;
										font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
										font-weight: normal;
										color: #999999;
									}
								}

							}

							.indexboxitemleftthere_countdown {
								.indexboxitemleftthere_countdowntext {
									font-family: Roboto, Roboto;
									font-weight: 400;
									color: #333333;
									font-size: 18rpx;
								}

								.indexboxitemleftthere_countdowntexts {
									font-family: Roboto, Roboto;
									font-weight: 400;
									color: #333333;
									margin-left: 16rpx;
									font-size: 22rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>