<template>
	<view class="container">
		<view class="top-box">
			<view class="search-box">
				<u-search v-model="keyword"  placeholder="请输入小区名/台账号" :show-action="false" :clearabled="true" bg-color="#F8F8F8" shape="round" height="78"></u-search>
			</view>
		</view>
		<view class="select-box">
			<view class="select-item" @click="addressShow=true">位置</view>
			<view class="select-item" @click="priceShow=true">价格</view>
			<view class="select-item" @click="kaipanShow=true">开盘</view>
			<view class="select-item" @click="moreShow=true">更多</view>
		</view>
		<view class="list-box">
			<view class="list-item" @click="topage(item)" v-for="(item,index) in listData" :key="index">
				<image class="house-img" src="/static/kehu/pic1.png" mode="" />
				<view class="item-info">
					<view class="house-name u-line-1">吉利家园 3号楼21层</view>
					<view class="type">3改4 / 20㎡</view>
					<view class="rent-time">剩余租期：11个月</view>
					<view class="bot-wrap">
						<view class="left u-line-1"><image class="person-icon" src="/static/person.png" mode="" />邵海波</view>
						<view class="money">3600/月</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 位置 -->
		<u-popup v-model="addressShow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.value==searchForm.addressval}" v-for="(item,index) in addressList" :key="index" @click="secectAddress(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
		<!-- 价格弹窗 -->
		<u-popup v-model="priceShow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.value==searchForm.priceval}" v-for="(item,index) in priceList" :key="index" @click="secectPrice(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
		<!-- 开盘弹窗 -->
		<u-popup v-model="kaipanShow" mode="top">
			<view class="select-list">
				<view class="item" :class="{'selected':item.value==searchForm.kaipanval}" v-for="(item,index) in kaipanList" :key="index" @click="secectKaipan(item)">
					{{item.label}}
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				addressShow: false,
				priceShow: false,
				kaipanShow: false,
				moreShow: false,
				keyword: '',
				searchForm: {
					addressval: '',
					kaipanval: '',
					priceval: ''
				},
				addressList: [
					{
						label: '北京',
						value: 1
					},
					{
						label:'郑州',
						value: 2
					},
					{
						label:'天津',
						value: 3
					},
					{
						label:'宁波',
						value: 4
					},
					{
						label:'信阳',
						value: 5
					},
					{
						label:'沙溪',
						value: 6
					},
					{
						label:'信阳1',
						value: 7
					},
					{
						label:'沙溪2',
						value: 8
					},
				],
				kaipanList: [
					{
						label:'1000~2000',
						value: 1
					},
					{
						label:'2000~3000',
						value: 2
					},
					{
						label:'3000~4000',
						value: 3
					},
				],
				priceList: [
					{
						label:'1000~2000',
						value: 1
					},
					{
						label:'2000~3000',
						value: 2
					},
					{
						label:'3000~4000',
						value: 3
					},
				],
				listData: [{},{},{},{},{}],
				selectorObj: [
					{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				pageNumber: 10,
				current: 1,
				loadDone: false
			};
		},
		onLoad(options) {
		},
		onShow() {
		
		},
		methods: {
			
			secectAddress(item){
				this.searchForm.addressval = item.value
				this.addressShow = false
				this.current = 1
				this.getList()
			},
			secectKaipan(item){
				this.searchForm.kaipanval = item.value
				this.kaipanShow = false
				this.current = 1
				this.getList()
			},
			secectPrice(item){
				this.searchForm.priceval = item.value
				this.priceShow = false
				this.current = 1
				this.getList()
			},
			confirm1(e) {
			},
			confirm2(e) {
			},
			topage(item){
				uni.navigateTo({
					url: '/pages/otherPage/rentDetail?id=' + item.id
				})
			},
			getList(){
				if (this.loadDone) return;
				let params = {
					current: this.current,
					size: this.pageNumber
				};
      // if (this.pageNum == 1) {
      //   this.showLoading = true;
      // }
      // this.$u.api.roomList(params).then((res) => {
      //   this.showLoading = false;
      //   if (res.data.records && res.data.records.length) {
      //     res.data.records.forEach((item) => {
      //       if (item.labelName) {
      //         item.labelName = item.labelName.split(",") || [];
      //       }
      //     });
      //     this.total = res.data.total;
      //     this.listData = [...this.listData, ...res.data.records];
      //     this.pageNum += 1;
      //     // if (this.listData.length == 0) {
      //     //   this.noneData = true;
      //     // }
      //     if (this.listData.length == res.data.total) {
      //       this.loadDone = true;
      //     }
      //   }
      // });
			}
    },

		onLoad: function(options) {
		},
		onHide: function() {},
		onReachBottom() {
			this.getList();
		},
	};
</script>

<style lang="scss" scoped>
.container{
	width: 750rpx;
	min-height: 100vh;
	.top-box{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		.search-box{
			width: 690rpx;
			height: 78rpx;
		}
	}
	.select-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		padding: 30rpx 0;
		border-bottom: 1px solid #e0e0e0;
		.select-item{
			height: 36rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			letter-spacing: 1px;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				top: 16rpx;
    		right: -24rpx;
				border-color: #969696;
				border: 8rpx solid transparent;
      	border-top: 8rpx solid #969696;
			}
		}
	}
	.list-box{
		padding: 30rpx;
		.list-item{
			width: 690rpx;
			height: 202rpx;
			margin-bottom: 30rpx;
			display: flex;
			.house-img{
				width: 248rpx;
				height: 202rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				flex: 0 0 248rpx;
			}
			.item-info{
				flex: 1;
				.house-name{
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
					margin-bottom: 2rpx;
					max-width: 410rpx;
				}
				.type,.rent-time{
					height: 36rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
					margin-bottom: 12rpx;
				}
				.bot-wrap{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						display: flex;
						align-items: center;
						.person-icon{
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
					.money{
					height: 48rpx;
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF6D25;
					line-height: 48rpx;
					}
				}
				
			}

		}
	}
	.select-list{
		padding: 0 40rpx;
		max-height: 600rpx;
		overflow: auto;
		.item{
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1px solid #e0e0e0;
			&:last-child{
				border: 0;
			}
			&.selected{
				color: #FF6D25;
			}
		}
	}
	
}
</style>
