<template>
	<view class="root">
		<InputAndSwiper></InputAndSwiper>
		
		<view>
			<view class="dropdown-bug">
				
			</view>
			<view class="marginLR10">
				<DropDown :getQueryInfo = "setQueryInfo" @changeDrop="getShopList"></DropDown>
			</view>
			<view class="marginLR10">
				<ShowShopList :showStyle="1" :shopInfoList="shopInfoList"></ShowShopList>
			</view>
		</view>
		
		<TabBar :current-page="1"></TabBar>
	</view>
</template>

<script>
	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
	export default {
		components: {
			DropDownItem
		},
		data() {
			return {
				pageSize: 5,
				pageNum: 1,
				shopInfoList: [],
			}
		},
		computed: {
			
		},
		methods: {
			getShopList(){
				let query = this.getQueryInfo()
				console.log("query",query);
				this.$api.getShopList(query).then(res => {
					this.shopInfoList = res.data.data
					console.log(this.shopInfoList);
					this.shopInfoList.forEach(item=>{
						item.pics =this.$api.imgUrl + item.pics
					});
				})
			},
			getQueryInfo(query){
				return this.$u.queryParams({
					type: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					...query
				})
			}
		},
		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>
