<template>
	<view class="root">
		<InputAndSwiper></InputAndSwiper>
		
		<view>
			<view class="dropdown-bug">
				
			</view>
			<view class="marginLR10">
				<DropDown @getQueryInfo = "getShopList"></DropDown>
			</view>
			<view class="marginLR10">
				<SearchShopList :showStyle="1" :searchInfoList="searchInfoList"/>
			</view>
		</view>
		
		<TabBar :current-page="3"></TabBar>
	</view>
</template>

<script>
	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
	export default {
		components: {
			DropDownItem
		},
		data() {
			return {
				pageSize: 5,
				pageNum: 1,
				searchInfoList: [],
				customQuery: {},
				searchListLength: '',
			}
		},
		onReachBottom() {
			if (this.searchListLength !== 0) {
				this.pageNum++
				this.getShopList()
				console.log("触底加载");
			}
		},
		methods: {
			getShopList(q){
				let query = this.getQueryInfo(q)
				console.log("listquery",query);
				this.$api.getShopList(query).then(res => {
					this.searchListLength = res.data.data.length
					this.searchInfoList = [...this.searchInfoList, ...res.data.data]
					console.log(this.searchInfoList);
				})
			},
			getQueryInfo(query){
				console.log("getQueryInfo",query);
				const q = this.$u.queryParams({
					type: 2,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					...query
				})
				this.customQuery = q
				return q
			},
		},
		created() {
			this.getShopList()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color-grey;
	}
	.root{
		position: relative;
	}
	.dropdown-bug {
		position: absolute;
		background-color: $uni-bg-color-grey;
		height: 120rpx;
		width: 100%;
		transform: translateY(-20rpx);
		z-index: 2;
	}
	.marginLR10{
		margin: 0 10px;
	}
	
</style>
