<template>
	<view class="hzIndex">
		<hzHeader title="选房列表"></hzHeader>
		<!-- <view class="banner-box">
			<image src="/static/imgs/housebanner.jpg" mode=""></image>
		</view> -->
		<view class="hzContent">
		<view class="main">
			<view class="tab-box">
				<view  class="tab-item" style="width: 100%;" >可选房列表</view>
			</view>
			<view  v-if="msgList.length > 0">
				<view class="list-view">
					<view v-for="(item, index) in msgList" :key="index"
						class="list-cell list-item box box-row-reverse"
						@tap="detail(item)"
					>
						<view class="box" >
							<image v-if="item.PICTURE[0]" style="width: 180upx;height: 180upx;" :src="formatImgUrl(item.PICTURE[0])" mode=""></image>
							<image v-else style="width: 180upx;height: 180upx;" src="/static/imgs/housebanner.jpg" mode=""></image>
						</view>
						<view class="box box-column" style="padding-left: 20upx;">
							<view class="cell-title-box" >
								<view class="cell-title" >{{ item.HOUSE_NAME }}</view>
							</view>
							<view class="sub-title">
								<text class="tag" style="color: royalblue;">{{formatHouseModel(item.MODEL)+"·"+item.ACREAGE+'㎡'}}</text>
							</view>
							<view class="sub-title">
								<text class="tag" style="color: red;">{{item.RENT+"元/月"}}</text>
								<!-- <text class="tag" style="color: royalblue;">{{item.RENT_TYPE}}</text> -->
							</view>
							<view class="sub-title">
								<text class="tag" >{{item.HOUSE_ADDR}}</text>
							</view>
						</view>
						
						
					</view>
				</view>
			</view>
			<content-none v-else :padTop="35"></content-none>
		</view>
		
		
		</view>
		
	</view>
</template>

<script>
	import {getFreeHouse,getHouseType,getDeptByParentId} from '@/common/api.js';
	import {callbackRequest,formatDate,getStorage,callbackRequestNoLoading,formatImgUrl} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				formatDate: formatDate,
				formatImgUrl:formatImgUrl,
				loading:false,
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				msgList:[],
				infoType:"0",
				houseModel:[],
				applyId:''
			};
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(option) {
			this.applyId = option.id;
			this.houseType = option.houseType||"0";
			this.getDeptByParentId(0,new Array());
			this.getHouseType('houseModel');
			this.getFreeHouse();
		},
		methods:{
			getDeptByParentId(parentId,arr){
				let params = {
					method: getDeptByParentId,
					data: {
						parentId: parentId
					}
				};
				callbackRequest(params).then(res => {});
			},
			getFreeHouse(){
				let data = {
					method: getFreeHouse,
					data: {
						pageSize:this.pageSize,
						pageNum:this.page,
						houseType:this.houseType,
						userId:getStorage('userInfo').userId
						//cate:this.tabbar[this.currentTab].data_code
					}
				};
				callbackRequest(data).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						if (this.page == 1) {
							this.msgList = res.returnData ;
						} else {
							if (res.returnData.length > 0) {
								this.msgList = this.msgList.concat(res.returnData);
								this.loadingType = 0;
							} else {
								this.loadingType = 2;
							}
						}
					} else {
						alertTip(res.returnMsg);
					}
				});
			},
			formatHouseModel(houseModel){
				for(let i=0;i<this.houseModel.length;i++){
					let obj = this.houseModel[i];
					if(obj.id == houseModel){
						return obj.name;
					}
				}
			},
			getHouseType(dataType){
				let params = {
					method: getHouseType,
					data: {
						dataType:dataType
					}
				};
				callbackRequestNoLoading(params).then(res => {
					res = res.data;
					if (res.returnCode == 1) {
						if(dataType == 'houseModel'){
							this.houseModel = res.returnData || [];
						}
					} else {
						
					}
				});
			},
			detail(item) {
				uni.navigateTo({
					url: '/pages/house/house-select-detail?houseInfo='+JSON.stringify(item)+'&houseModel='+JSON.stringify(this.houseModel)+"&applyId="+this.applyId
				});
				return;
			},
		},
		onReachBottom() {
			console.log(1111)
			if(this.loadingType !== 0){
				return false;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getFreeHouse();
			
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.box {
		display: flex;
		display: -webkit-flex;
	}
	
	.box-row-reverse {
		flex-direction: row;
	}
	
	/*上下排列*/
	.box-column {
		flex-direction: column;
	}
	
	/*上下排列*/
	.box-left {
		justify-content: flex-start;
	}
	
	/*居右*/
	.box-right {
		justify-content: flex-end;
	}
	
	/*居左*/
	.box-center {
		justify-content: center;
	}
	
	/*居中*/
	.box-between {
		justify-content: space-between;
	}
	
	/*两端对齐*/
	.box-align-center {
		align-items: center;
	}
	
	.box-wrap {
		flex-wrap: wrap;
	}
		.main {
			margin: 180upx 40upx 0;
			position: relative;
			z-index: 10;
		}
		.tab-box {
			overflow: hidden;
			border-radius: 10upx 10upx 0 0;
			background: rgba(132, 149, 167, 0.8);
			height: 80upx;
			.tab-item {
				float: left;
				height: 70upx;
				width: 50%;
				font-size: 32upx;
				color: #e5f6ff;
				text-align: center;
				line-height: 80upx;
			}
			.active {
				background: #fff;
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
		}
	
	.list-view {
			width: 100%;
			
			box-sizing: border-box;
		}
	
		/* .list-cell {
			padding: 30upx;
			box-sizing: border-box;
		} */
	.list-cell {
		padding: 20upx 20upx;
		box-sizing: border-box;
		background: #f8f8f8;
		margin-bottom: 10upx;
	}
		/* .cell-title-box {
			display: flex;
			justify-content: space-between;
		} */
	.cell-title-box {
		position: relative;
	}
	
	.min {
		min-height: 90upx;
	}
		/* .cell-title {
			font-size: 36upx;
			line-height: 56upx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		} */
	.cell-title {
		font-size: 28upx;
		/* line-height: 56upx; */
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		font-weight: 600;
	}
		.img-container {
			width: 100%;
			padding-top: 24upx;
			display: flex;
			height: 160upx;
			justify-content: space-between;
		}
	
		.cell-img {
			width: 32%;
			overflow: hidden;
			position: relative;
		}
	
		/* .img {
			width: 100%;
			height: 160upx;
			display: block;
			border-radius: 4upx;
		} */
		
		.img{
			position: absolute;
			right: 0;
			top: 6upx;
			width: 146upx;
			height: 146upx;
			border-radius: 4upx;
		}
	
	.sub-title {
		padding-top: 12upx;
		font-size: 30upx;
		color: gray;
	}
		.badge {
			padding: 5upx 10upx;
			font-size: 24upx;
			border-radius: 4upx;
			margin-right: 20upx;
		}
	
		.b-red {
			background: #FCEBEF;
			color: #8A5966;
		}
	
		.b-blue {
			background: #ECF6FD;
			color: #4DABEB;
		}
	
		.b-orange {
			background: #FEF5EB;
			color: #FAA851
		}
	
		.b-green {
			background: #E8F6E8;
			color: #44CF85
		}
		.tag {
			padding: 5upx 0upx;
			font-size: 24upx;
			border-radius: 4upx;
			margin-right: 20upx;
		}
</style>
