<template>
	<view class="invest_list">
		{{list.length + '' + isTotle + '------------'}}
		<u-navbar class="navbar" :title="title" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="list">
			<view class="" v-for="(item,index) in list" :key="index">
				<Cart :info="item" @toLink="toLink" @click.native="toInfo(item)" class="item" width="328rpx"
					height="246rpx"></Cart>
			</view>
		</view>
		<view class="loading" v-if="isLoading">
			<u-loading mode="flower"></u-loading>
		</view>
		<view v-if=" list.length - 1 && isTotle">
			<view class="loading" style="height: 40px;">
				我们是有底线的
			</view>
		</view>
	</view>
</template>

<script>
	import Cart from '@/components/cart.vue'
	export default {
		data() {
			return {
				info: {
					imgUrl: "../../../static/banner.png",
					name: '云凌藏隐陵园002号神塔',
					position: '72墓穴｜5层',
					link: '',
				},
				totle: 9,
				type: 1,
				list: [],
				isTotle: false,
				isLoading: false,
				queryData: {
					pageNum: 0,
					pageSize: 10,
					pagodaName: '',
					pagodaStatus: 'reselling', // 
					isRecommend: false
				},
			}
		},
		methods: {
			toInfo(info) {
				console.log('--------')
				uni.navigateTo({
					url: '../cemeteryInfo/cemeteryInfo?id=' + info.pagodaId + '&type=' + this.type
				})
			},
			getList() {
				this.totle = this.totle + 6
			},
			toLink() {
				uni.navigateTo({
					url: '../linkInfo/linkInfo'
				})
			},
			getList() {
				if (this.isTotle) {
					return
				}
				this.isLoading = true
				this.queryData.pageNum = this.queryData.pageNum + 1
				this.$u.api.pagoda.getPagodaList(this.queryData).then(res => {
					this.total = res.data.total
					let data = res.data.rows
					data.forEach(item => item.show = false)
					this.list.push(...data)
					console.log(res, 88)
					setTimeout(() => {
						this.isLoading = false
						if (this.list.length === this.total) {
							this.isTotle = true
						}
					}, 700)
				})
			},
		},
		components: {
			Cart,
		},
		// 监听触底
		onReachBottom() {
			this.getList()
		},
		onLoad(data) {
			console.log(data)
			this.type = data.type
			if (this.type === '2') {
				this.queryData.pagodaStatus = 'renting'
			}
			this.getList()
		},
		computed: {
			title() {
				return this.type === '1' ? '购买投资' : '归属租赁'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invest_list {
		.navbar {
			box-shadow: 0 2rpx 30rpx -1rpx #F1F1F1;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 36rpx;
			justify-content: space-between;

			.item {
				margin-top: 48rpx;
			}
		}
	}
</style>
