<template>
	<view class="scarchList">
		<u-navbar back-text="返回" :is-back="false" :title-bold="true">
			<view class="slot-wrap">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 :show-action="showAction" -->
				<u-search v-model="searchText" bg-color="#f5f7fa" :show-action="false" height="72"
					:action-style="{color: '#fff'}" @search="confirm">
				</u-search>
				<text class="clear" @click="back">取消</text>
			</view>
		</u-navbar>

		<!-- 	<view class="title">
			<u-icon name="search" size="30" class="icon" color="#737373"></u-icon>
			<u-input class="input" :clearable='false' v-model="searchText"
				style="background-color: #f5f7fa;width: 594rpx;" confirm-type="search" @confirm="search()" />
			<text class="clear" @click="back">取消</text>
		</view> -->
		<view class="screen">
			<u-tabs-swiper ref="uTabs" :list="rentOrbuy" :current="current" @change="tabsChange" :is-scroll="false">
			</u-tabs-swiper>
		</view>

		<view class="list" :style="{height: newsPanelHeight + 'px'}">
			<swiper class="swiper-box" @change="swiperChange" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" :lower-threshold="150" @scrolltolower="onreachBottom">
						<view class="" v-for="(info, __index) in item">
							<ListItem :info="info" width="240rpx" height="180rpx" @click.native="toInfo(info)">
							</ListItem>
							<view class="" v-if="index === 0 && __index === swiperList[0].length - 1">
								<view class="loading" style="height: 40px;" v-if="reselling.istotale">
									我们是有底线的
								</view>
							</view>
							<view class="" v-if="index === 1 &&  __index === swiperList[1].length - 1">
								<view class="loading" style="height: 40px;" v-if="renting.istotale">
								   我们是有底线的
								</view>
							</view>

						</view>
						<view class="loading" v-if="index === 0 && reselling.loding && !reselling.istotale ">
							<u-loading mode="flower"></u-loading>
						</view>
						<view class="loading" v-if="index === 1 && renting.loding && !renting.istotale ">
							<u-loading mode="flower"></u-loading>
						</view>
						<view class="" v-if="index === 0 && item.length === 0 && reselling.istotale">
							<view class="loading" style="height: 40px;">
								没有相关信息
							</view>
						</view>
						<view class="" v-if="index === 1 && item.length === 0 && renting.istotale">
							<view class="loading" style="height: 40px;">
								没有相关信息
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import ListItem from '@/components/listItem.vue'
	export default {
		data() {
			return {
				swiperList: [
					[],
					[]
				],
				resellingList: [],
				rentingList: [],
				current: 0,
				searchText: '',
				pagodaStatus: 'reselling', // 当前显示出租 | 出售
				reselling: {
					// 出售数据对象
					loding: false,
					totale: 0,
					istotale: false,
					queryData: {
						pageNum: 0,
						pageSize: 10,
						pagodaName: '',
						pagodaStatus: 'reselling', // 
						isRecommend: false
					},
				},
				renting: {
					// 出租数据对象
					loding: false,
					totale: 0,
					istotale: false,
					queryData: {
						pageNum: 0,
						pageSize: 10,
						pagodaName: '',
						pagodaStatus: 'renting', // 
						isRecommend: false
					},
				},
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				newsPanelHeight: 0,
				rentOrbuy: [{
					name: '购买'
				}, {
					name: '租赁'
				}],
			}
		},
		methods: {

			// 详情页
			toInfo(info) {
				console.log('-00--', info)
				uni.navigateTo({
					url: '../cemeteryInfo/cemeteryInfo?id=' + info.pagodaId + '&type=' + this.pagodaStatus
				})
			},
			back() {
				uni.navigateBack()
			},
			reset() {
				this.reselling.queryData.pageNum = 0
				this.reselling.istotale = false
				this.swiperList[0] = []

				this.renting.queryData.pageNum = 0
				this.renting.istotale = false
				this.swiperList[1] = []

				console.log('swiperList', '-----------0-----------------------0-----------------------')

			},
			confirm() {
				// this.list = []
				this.reselling.queryData.pagodaName = this.searchText
				this.renting.queryData.pagodaName = this.searchText
				this.reset()
				if (this.pagodaStatus === 'reselling') {
					this.getList()
				} else {
					this.getList()
				}
			},
			swiperChange(event) {
				if (this.isTbarClick) {
					this.isTbarClick = false
					return
				}
				this.tabsChange(event.detail.current)
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.isTbarClick = true
				this.swiperCurrent = index;
				console.log(index, 999)
				if (index === 0) {
					this.pagodaStatus = 'reselling'
					if (this.swiperList[0].length === 0) {
						setTimeout(() => {
							this.getList()
						}, 300)
					}

				} else {
					this.pagodaStatus = 'renting'
					if (this.swiperList[1].length === 0) {
						setTimeout(() => {
							this.getList()
						}, 300)
					}

				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('-000-',this.pagodaStatus )
				this.getList()
			},
			async getList() {
				console.log('009900------')
				if (this.pagodaStatus === 'reselling') {
					if (this.reselling.istotale) {
						return
					}
					this.reselling.loding = true
					this.reselling.queryData.pageNum = this.reselling.queryData.pageNum + 1
					let res = await this.$u.api.pagoda.getPagodaList(this.reselling.queryData)
					console.log(res, 9999)
					this.swiperList[0].push(...res.data.rows)
					this.reselling.total = res.data.total
					setTimeout(() => {
						this.reselling.loding = false
						// 如果请求响应和当前数组都为空 则提示无数据
						if (res.data.rows.length === 0 && this.resellingList.length === 0 || this.reselling
							.total === this.swiperList[0].length) {
							this.reselling.istotale = true
						}
					}, 400)
				} else {
					// 出租
					console.log('009900------', this.renting.totale, this.swiperList[1].length)
					if (this.renting.istotale) {
						return
					}
					console.log('009900------')
					this.renting.loding = true
					this.renting.queryData.pageNum = this.renting.queryData.pageNum + 1
					let res = await this.$u.api.pagoda.getPagodaList(this.renting.queryData)
					this.swiperList[1].push(...res.data.rows)
					console.log(this.swiperList, 9999)
					this.renting.totale = res.data.total
					setTimeout(() => {
						this.renting.loding = false
						// 如果请求响应和当前数组都为空 则提示无数据
						if (res.data.rows.length === 0 && this.rentingList.length === 0 || this.renting
							.total === this.swiperList[1].length) {
							this.renting.istotale = true
						}
					}, 400)
				}
			}
		},
		components: {
			ListItem,
		},
		onLoad(data) {
			console.log(data['text'])
			this.searchText = data['text']
			this.reselling.queryData.pagodaName = data['text']
			this.renting.queryData.pagodaName = data['text']
			this.getList()
		},
		onReachBottom() {
			console.log('-----')
			this.getList()
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					uni.createSelectorQuery().select(".list")
						.boundingClientRect(function(boundRect) {
							_this.newsPanelHeight = res.windowHeight - boundRect.top;
						}).exec();
				}
			});
			console.log(this.newsPanelHeight, 999999)
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	uni-page-body,
	.scarchList {
		// height: 100%;
		height: 100%;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 36rpx;

		.clear {
			margin-left: 36rpx;
		}
	}


	.list {
		padding: 0 36rpx;
		height: 100%;

		.swiper-box {
			height: 100%;
		}


		.cart {
			// margin: 24rpx 0;
			// background-color: #FFFFFF;
			height: 228rpx;
			border-bottom: 2rpx solid #F7F9FCFF;
		}
	}
</style>
