<!-- 滚动吸附效果演示(vue) -->
<template>
	<view class="content">
		<!-- 此处为了让reload时不自动滚动到顶部，需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
			style="background-color: #fff;" @scroll="scroll">
			<!-- 自定义下拉刷新view -->
			<template #refresher="{ refresherStatus }">
				<custom-refresher :status="refresherStatus" />
			</template>
			<view class="navLeft align-center" :style="{ top: statusBarHeight + 'rpx' }">
				<view class="flex" style="width: 100%">
					<view class="title1" style="width: 166rpx; height: 64rpx; margin-top: 5rpx;">
						<image :src="$img1('common/home_logo.png')" style="width: 166rpx; height: 64rpx;" mode="">
						</image>
					</view>
				</view>
			</view>
			<view style="width: 100%;" :style="{ height: statusBarHeight + 'px' }"></view>
			<view style="width: 100%;height: 70rpx;"></view>
			<banner :type-id="9" :height="300" :img-width="94"></banner>
			<home-page-gonggao />
			<home-page-tuijian />
			<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
			<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
				<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar">

				</view>
				<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
				<z-tabs ref="tabs" :current="current" :list="tabList" :scroll-count="1" @change="tabsChange" />
			</view>
			<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
				@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">

					<home-page-goods ref="swiperList" :tabIndex="index" :currentIndex="current"
						@heightChanged="heightChanged" :goodsId="getTabGoodsId">
					</home-page-goods>
				</swiper-item>
			</swiper>

		</z-paging>
		<home-page-coupon ref="homePageCoupon" />
		<home-page-tanchuang ref="homePageTanchuang" />
		<float-ball v-if="!$config.GetVersion()"></float-ball>
		<!-- #ifdef MP -->
		<!-- 隐私政策弹窗 -->
		<priv-pop></priv-pop>
		<!-- #endif -->
	</view>
</template>

<script>
import lffBarrage from "@/components/lff-barrage/lff-barrage.vue";
import FloatBall from "@/components/float-ball/FloatBall.vue";
import homePageGonggao from "@/components/home-page/home-page-gonggao.vue";
import homePageTuijian from "@/components/home-page/home-page-tuijian.vue";
import HomePageCoupon from "@/components/home-page/home-page-coupon.vue";
import HomePageTanchuang from "@/components/home-page/home-page-tanchuang.vue";
import HomePageGoods from "@/components/home-page/home-page-goods.vue";
export default {
	components: {
		lffBarrage,
		FloatBall,
		homePageGonggao,
		homePageTuijian,
		HomePageCoupon,
		HomePageTanchuang,
		HomePageGoods
	},
	onLoad(v) {
		console.log("参数", v);

		if (v.pid) {
			uni.setStorageSync("pid", v.pid);
		}
		if (v.scene) {
			uni.setStorageSync("pid", v.scene);
		}
		this.goodType = this.$config.getGoodType();
		this.tabIndex = 0;

	},
	onShow() {
		this.$refs.homePageCoupon && this.$refs.homePageCoupon.checkCoupon();
		this.$refs.homePageTanchuang && this.$refs.homePageTanchuang.checkNotice();
	},
	computed: {
		tabList() {
			return this.goodType.map(item => item.title);
		},
		getTabGoodsId() {
			return this.goodType[this.current]?.id ?? 0;
		}
	},

	data() {
		let statusBarHeight = this.$sys().statusBarHeight;
		return {
			current: 0,
			statusBarHeight,
			goodType: [],
			swiperHeight: 0,
			tabsBarHeight: 0,
			observer: null,
			isQuerying: false
		}
	},
	methods: {
		scroll(e) {
			// #ifdef MP
			if (e.detail.scrollTop < 700 && this.statusBarHeight > 0) {
				if (this.isQuerying) {
					return;
				}
				this.isQuerying = true;
				const query = uni.createSelectorQuery().in(this);
				query.select('.bar-view').boundingClientRect(rect => {
					if (rect) {
						console.log('aaaa');
						// 判断元素是否粘滞
						if (rect.top <= 30) {
							this.tabsBarHeight = this.statusBarHeight;
						} else if (rect.top > 30 && this.statusBarHeight > 0) {
							this.tabsBarHeight = 0;
						}
					}
					this.isQuerying = false;

				}).exec();
			}
			// #endif
		},
		tabsChange(index) {
			// this.tabIndex = index;
			// 当切换tab时请调用组件的reload方法，请勿直接调用：queryList方法！！
			// this.$refs.paging.reload();
			this._setCurrent(index);
		},
		// 下拉刷新时，通知当前显示的列表进行reload操作
		onRefresh() {
			this.$refs.swiperList[this.current].reload(() => {
				//当当前显示的列表刷新结束，结束当前页面的刷新状态
				this.$refs.pagePaging.endRefresh();
			});
		},
		// 当滚动到底部时，通知当前显示的列表加载更多
		scrolltolower() {
			console.log("this.current", this.current);

			this.$refs.swiperList[this.current].doLoadMore();
		},
		// swiper滑动中
		swiperTransition(e) {
			this.$refs.tabs.setDx(e.detail.dx);
		},
		// swiper滑动结束
		swiperAnimationfinish(e) {
			this._setCurrent(e.detail.current);
			this.$refs.tabs.unlockDx();
		},
		// 设置swiper的高度
		heightChanged(height) {
			if (height === 0) {
				// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
				// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
				height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
			}
			this.swiperHeight = height;
		},
		_setCurrent(current) {
			if (current !== this.current) {
				//切换tab时，将上一个tab的数据清空
				this.$refs.swiperList[this.current].clear();
			}
			this.current = current;
		}
	},
	onShareAppMessage() {
		let imageUrl = this.$config.getShareImageUrl();
		return {
			imageUrl: imageUrl,
			title: this.$config.getAppSetting("app_name") + "，正版潮玩手办一番赏",

			path: "/pages/shouye/index?pid=" + uni.getStorageSync("userinfo").ID,
		};
	}
}
</script>

<style>
.swiper {}

.status-bar {
	background-color: #fff;
	overflow: hidden;
}

.zp-paging-touch-view {
	background-color: #fff;
}

.zp-scroll-view-container {
	background-color: #fff;
}

.banner-view {
	background-color: #007AFF;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.item {
	position: relative;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rpx 30rpx;
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007AFF;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}

.navLeft {
	position: fixed;
	left: 30rpx;
	z-index: 96;


}

.qbt_con {
	padding: 1rpx 30rpx 100rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.content {
	background-color: #fff;
}
</style>