<template>
	<el-layout class="wrap">
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="false" :title="title"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			<view v-for="(item,index) in widget" :key="index" >
				<mall-search v-if="item.type == 'search'" :top="scrollTop" :data="item.value" v-model="searchTop"></mall-search>
				<mall-title v-if="item.type == 'title'" :data="item.value"></mall-title>
				<mall-banner v-if="item.type == 'banner'" :data="item.value"></mall-banner>
				<mall-navigation v-if="item.type == 'navigation'" :data="item.value"></mall-navigation>
				<mall-video v-if="item.type == 'video'" :data="item.value"></mall-video>
				<mall-notice v-if="item.type == 'notice'" :data="item.value"></mall-notice>
				<mall-line v-if="item.type == 'line'" :data="item.value"></mall-line>
				<mall-blank v-if="item.type == 'blank'" :data="item.value"></mall-blank>
				<mall-wechat v-if="item.type == 'wechat'" :data="item.value"></mall-wechat>
				<mall-rubik v-if="item.type == 'rubik'" :data="item.value"></mall-rubik>
				<mall-tabs v-if="item.type == 'tabs'" :data="item.value"></mall-tabs>
				<mall-goods v-if="item.type == 'goods'" :data="item.value"></mall-goods>
				<mall-archives v-if="item.type == 'archives'" :data="item.value"></mall-archives>
			</view>
			
			<mall-goods v-if="setting.status == 1" :data="setting"></mall-goods>
		</el-refresh>
		
		<el-loading v-model="isLoading" zIndex="1000"></el-loading>
		<tabbar></tabbar>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref,computed,nextTick,watch,inject } from "vue";
	import { useAppStore } from "@/store/app";
	import { getUrl } from "@/el-ui/share/wechat.js";
	
	const isLoading   = ref(true);
	const refreshRef  = ref();
	const navTop      = ref(0);
	const appStore    = useAppStore();
	const site        = appStore.getApp();
	const widget      = ref([]);
	const title       = ref('');
	const setting     = ref({
		page_background_color: "#f8f8f8",
		status: 0
	});
	
	let scrollTop 	  = ref(0);
	let searchTop     = ref(0);
	
	const init = async ()=>{
		const { code,data } = await uni.$http.get("index/index");
		if(code){
			title.value   = data.name;
			widget.value  = data.list;
			setting.value = data.setting;
			// #ifdef H5
			uni.setNavigationBarTitle({ title: title.value });
			// #endif
		}
		
		isLoading.value = false;
		if(setting.value.status){
			setting.value.list = [];
			refreshRef.value?.resetPage();
		}
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value - 50);
	})
	 
	onLoad(async()=>{
		nextTick(()=>{
			init();
		})
	}); 
	 
	/**
	* 下拉刷新
	*/
	const refresh = ()=>{
		init();
	}
	 
	/**
	* 上拉加载
	*/
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();

			setTimeout(() => {
				uni.$http.get("index/lists",{ type: "home",page: data.page }).then(res=>{
					if(res.code == 1){
						refreshRef.value.setData(res.data.total,res.data.list.length);
						setting.value.list = setting.value.list.concat(res.data.list);
					}else if(res.code == -1){
						refreshRef.value.endLockPage();  
					}
				});
			}, 100)
		}
	}
	 
</script>

<style lang="scss">
	.wrap {
		background-color: v-bind('setting.page_background_color');
	}
</style>
