<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="搜索结果"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			<mall-archives :data="setting"></mall-archives>
		</el-refresh>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref,computed,nextTick,watch } from "vue";
	import { useAppStore } from "@/store/app";
	
	const keyword     = ref();
	const refreshRef  = ref();
	const navTop      = ref(0);
	const setting     = ref({
		list_style: 2, // 列表样式
		card_style: 3, // 卡片样式 
		chamfer_style: 0, // 倒角样式
		spacing: 30, // 内容间距
		margin: 0, // 上下边距
		padding: 20, // 左右边距
		type: 1, // 内容类型
		background_color: '#f8f8f8',
		list: [], 
		group: {
			id: 0,
			name: '',
			limit: 20,
			link: {}
		},
		layout_radius: 0,
		title: "标题",
		title_color: "#333",
		ctitle: "更多 >",
		ctitle_link: {
			id: 0,
			name: '',
			link: {}
		},
		ctitle_color: "#999",
		is_title: 1
	});
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value);
	})
	
	const init = async ()=>{
		// #ifdef H5
		uni.setNavigationBarTitle({ title: "搜索结果" });
		// #endif
		setting.value.list = [];
		refreshRef.value?.resetPage();
	}
	
	onLoad(async(options)=>{
		keyword.value = options.keyword || "";
		nextTick(()=>{
			init();
		})
	});
	 
	 /**
	  * 下拉刷新
	  */
	 const refresh = ()=>{
		 init();
	 }
	 
	 /**
	  * 上拉加载
	  */
	 const scrolltolower = (data)=>{
		 if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
			
	 		setTimeout(() => {
	 		   uni.$http.get("search/lists",{ page: data.page, keyword: keyword.value }).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.emptyPage();  
				  }
	 		   });
	 		}, 100)
	 	}
	 }
	 
</script>

<style lang="scss">
	
</style>
