<template>
	<view class="root">
		<InputAndSwiper @getQueryInfo="getInput" :bannerURL="swiperList" :refresh="isRefresh"></InputAndSwiper>

		<view>
			<view class="dropdown-bug">

			</view>
			<view class="marginLR10 sticky">
				<DropDown @getQueryInfo="getShopList" ref="dropdown" @cancelPageNum="cancelPageNum"></DropDown>
			</view>
			<view class="marginLR10">
				<SearchShopList :showStyle="1" :searchInfoList="searchInfoList" />
			</view>
		</view>
		<view v-if="showNull" class="showNull">
			<text>没有符合条件的数据, 请下拉刷新重置数据~
			</text>
		</view>
		<TabBar :current-page="3"></TabBar>
	</view>
</template>

<script>
	import DropDownItem from "@/components/DropDown/DropDownItem.vue"
	export default {
		components: {
			DropDownItem
		},
		data() {
			return {
				pageSize: 8,
				pageNum: 1,
				searchInfoList: [],
				swiperList: [],
				customQuery: {},
				searchListLength: '',
				showNull: false,
				refresh: false,
				isRefresh: false
			}
		},
		onPullDownRefresh() {
			this.refresh = true
			// if (this.showNull = true) {
			const q = this.$u.queryParams({
				type: 2,
				pageSize: this.pageSize,
				pageNum: 1,
			})
			// if(this.showNull=true){
			// 	this.pageNum=1
			// }
			this.getShopList(q, "refresh")
			this.$refs.dropdown.resetInfo()

			// }
		},
		onReachBottom() {
			if (!this.refresh && this.searchListLength !== 0) {
				this.isRefresh = true
				this.pageNum++
				this.getShopList()
				console.log("触底加载");
			} else if (this.searchListLength == 0) {
				this.pageNum = 1
			}
		},
		created() {
			this.getShopList()
			this.getBanner()
		},
		methods: {
			getBanner() {
				this.$api.getBanner().then(res => {
					res.data.data.forEach(item => {
						item.img = this.$api.imgUrl + item.img
					})
					this.swiperList = res.data.data
					// .map(item => this.$api.imgUrl + item.img)
				})
			},
			getInput(val) {
				console.log('搜索值', val);
				if (this.pageNum !== 1) {
					this.pageNum = 1
				}
				const q = this.$u.queryParams({
					type: 2,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					kw: val
				})
				this.$api.getShopList(q).then(res => {
					this.searchListLength = res.data.data.length
					this.searchInfoList = res.data.data
				})
			},
			getShopList(q, type) {
				let query = {}
				if (type == "refresh") {
					query = q
				} else {
					query = this.getQueryInfo(q)
				}
				console.log("listquery", query);
				this.$api.getShopList(query).then(res => {
					this.searchListLength = res.data.data.length
					if (query.includes('business') || query.includes('areatype') || query.includes('sortType') || query
						.includes('region') || this.refresh) {
						console.log('筛选');
						// this.resetQuery(q)
						this.searchInfoList = res.data.data
						this.refresh = false
						if (res.data.data.length == 0) {
							this.showNull = true
						} else {
							this.showNull = false
						}
					} else {
						console.log('查询');
						this.searchInfoList = [...this.searchInfoList, ...res.data.data]
					}
					console.log(this.searchInfoList);
					uni.stopPullDownRefresh()
				})
			},
			getQueryInfo(query) {
				console.log("getQueryInfo", query);
				const q = this.$u.queryParams({
					type: 2,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					...query
				})
				return q
			},
			cancelPageNum() {
				this.pageNum = 1;
				this.refresh = true
			}
		}

	}
</script>

<style lang="scss" scoped>
	.showNull {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		color: darkgray;
	}

	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>