<template>
	<view class="homeContent">
		<component v-for="(item, index) in data" :key="index" :is="item.name" :wrapper_props="item.wrapper_props" :isLogin="isLogin" :ref="item.name"></component>
		<BottomBar />
	</view>
</template>

<script>
	import SearchBar from './components/searchbar.vue';
	import Navigation from './components/navigation.vue';
	import Slide from './components/slide.vue';
	import MainTitle from './components/maintitle.vue';
	import GoodsList from './components/goodslist.vue';
	import FunctionMenu from './components/functionmenu.vue';
	import Promotion from './components/promotion.vue';
	import HotRecommd from './components/hotrecommd.vue';
	import CustomStyle from './components/custowstyle.vue';
	import MultImage from './components/multimage.vue';
	import BottomBar from "@/components/BottomBar/BottomBar.vue";
	export default {
		data() {
			return {
				data: [],
				isLogin: 0,
				fixFlag: false
			}
		},
		onLoad() {
			this.getData();
			uni.showLoading({
			    title: '加载中'
			});
			// #ifdef H5
			//默认请求微信分享
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({titie: this.$getNavigationBarTitle()});
			}
			// #endif
		},
		onPageScroll() {
			const top = this.$refs.HotRecommd[0].$refs.fix.$el.getBoundingClientRect().top;
			if(top <= 50  && !this.fixFlag) {
				this.fixFlag = true;
				this.$refs.HotRecommd[0].fixFlag = true;
			} else if(top > 50  && this.fixFlag) {
				this.fixFlag = false;
				this.$refs.HotRecommd[0].fixFlag = false;
			}
		},
		methods: {
			getData() {
				uni.request({
					url: '/uni/api/index/style_info',
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						this.data = res.data.data;
						this.isLogin = res.data.login_flg;
						uni.hideLoading();
					}
				});
			}
		},
		components: {
			BottomBar,
			SearchBar,
			Navigation,
			Slide,
			MainTitle,
			GoodsList,
			FunctionMenu,
			Promotion,
			HotRecommd,
			CustomStyle,
			MultImage
		}
	}
</script>

<style lang="less" scoped>
	.homeContent {
		padding: 100rpx 0 110rpx;
		background-color: #f8f8f8;
	}
</style>