<template>
	<app-layout>
		<view class="properties_list">
			<view class="main-around tabs">
				<view class="tab" :class="{'select':audit_state===2}" @click="audit_state=2">已通过<view
						class="under_line"></view>
				</view>
				<view class="tab" :class="{'select':audit_state===1}" @click="audit_state=1">待通过<view
						class="under_line"></view>
				</view>
			</view>
			<view class="item main-left" v-for="(item,index) in dataList">
				<view class="left">
					<image :src="item.cover_img" mode=""></image>
				</view>
				<view class="main-between-y right ">
					<view class="title">{{item.name}}</view>
					<view class="addr">
						<image style="width: 18rpx;height: 20rpx;margin-right: 12rpx;"
							src="https://t17.9026.com/web/statics/image/index/location.png"></image>{{item.address}}
					</view>
					<view class="content t-omit-two" v-html="item.details"></view>
				</view>
				<image class="bg" src="https://t17.9026.com/web/statics/image/sale/properties_gradual.png" mode="">
				</image>
			</view>
			<view class="no-more" v-if="isNoMore && dataList.length>0">没有更多了...</view>
			<app-no-goods v-if="dataList.length===0" :title="`暂无数据`" background="#f7f7f7"></app-no-goods>
			<view style="100rpx"></view>
			<navigator url="/pages/sale/properties/addProperties" hover-class="navigator-hover">
				<button class="addPro" :class="[`coupon-footer`,iphone_x? `iphone_x`:``]" type="default">添加楼盘</button>
				<!-- <view :class="[`footer-space`,iphone_x? `iphone_x`:``]"></view>
			<view :class="[`coupon-footer`,iphone_x? `iphone_x`:``]" @click="toList">去领券</view> -->
			</navigator>
		</view>
	</app-layout>
</template>

<script>
	import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
	export default {
		components: {
			appNoGoods
		},
		data() {
			return {
				audit_state: 2,
				dataList: [],
				iphone_x: false,
				isNoMore: false,
				page: 1,
			};
		},
		watch: {
			audit_state(val) {
				this.getDate()
			},
		},
		onShow() {
			this.getDate()
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					if (res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model
						.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf(
							'Unknown Device') > -1) {
						this.iphone_x = true;
					}
				}
			})
		},
		onReachBottom() {
			if (!this.isNoMore) {
				this.getDate()
			}
		},
		methods: {
			getDate() {
				this.$showLoading()
				this.$request({
					url: this.$api.sale.estate_list,
					data: {
						page: this.page,
						is_sale_myself: 1,
						audit_state: this.audit_state
					},
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.dataList = res.data.list
						} else {
							this.dataList = this.dataList.concat(res.data.list)
						}
						if (res.data.list.length < 20) {
							this.isNoMore = true
						}
					}
					this.$hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-space {
		height: #{100rpx};
	}

	.footer-space.iphone_x {
		height: #{150rpx};
	}

	.coupon-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: #{100rpx};
		line-height: #{100rpx};
		text-align: center;
		background-color: #fff;
		z-index: 2;
	}

	.coupon-footer.iphone_x {
		height: #{150rpx};
		padding-bottom: #{50rpx};
	}

	.properties_list {
		background-color: #F8F8F8;

		.tabs {
			height: 90rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #838584;

			.tab {
				width: 50%;
				line-height: 90rpx;
				text-align: center;
			}

			.select {
				color: #A18353;
				position: relative;

				.under_line {
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					transform: translateX(-50%);
					width: 44rpx;
					height: 3rpx;
					background: #A18353;
					border-radius: 2rpx;
				}
			}
		}

		.item {
			font-family: PingFang SC;
			margin: 25rpx auto;
			width: 678rpx;
			height: 206rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			// background-image: url(https://t17.9026.com/web/statics/image/sale/properties_gradual.png);
			padding: 25rpx;
			position: relative;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 80%;
				height: 100%;
			}

			.left {
				image {
					width: 153rpx;
					height: 153rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				margin-left: 25rpx;

				.title {
					font-size: 30rpx;

					font-weight: bold;
					color: #222222;
				}

				.addr {
					font-size: 22rpx;

					font-weight: 500;
					color: #222222;
				}

				.content {
					font-size: 24rpx;

					font-weight: 500;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}

		.addPro {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #A18353;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		text-align: center;
		line-height: 80rpx;
	}
</style>
