<template>
	<view class="hzIndex">
	<hzHeader title="房源详情"></hzHeader>
		<view class="hzContent">
		<view class="index-container" style="background-color: white;padding-bottom: 20upx;padding: 10upx;margin: 20upx;border-radius: 20upx;">
			<view class="banner">
				<swiper v-if="houseInfo.PICTURE&&houseInfo.PICTURE.length>0" class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1500">
					<swiper-item v-for="(item, index) in houseInfo.PICTURE" :key="index">
						<view class="swiper-item" >
							<image @click="vbPicture(new Array(formatImgUrl(item)))" :src="formatImgUrl(item)"></image>
						</view>
					</swiper-item>
				</swiper>
				<view v-else style="height: 500upx;line-height: 500upx;text-align: center;font-size: 60upx;border-bottom: 1px solid #e5e5e5;color: #606060;">
					暂无图片
				</view>
			</view>
			<view style="clear: both;"></view>
			<view class="box">
				<text style="color: red; font-size:42upx;padding: 40upx 0 0 40upx;">{{houseInfo.RENT+"元/月 "}}</text>
			</view>
			<view class="box">
				<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_NAME}}</text>
			</view>
			<view class="box">
				<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_ADDR}}</text>
			</view>
			<view class="box" style="font-size:32upx;padding: 20upx 0 0 40upx;">
				<text v-if="houseInfo.BUILDING_YEAR" style="margin-right: 10upx;">{{houseInfo.BUILDING_YEAR+"年建 "}}</text><text>{{formatHouseModel(houseInfo.MODEL)+" "+houseInfo.ACREAGE+"㎡"}}</text> 
			</view>
			<view style="margin: 20upx 40upx;border-bottom: 1px solid #e5e5e5;"></view>
			<view class="box box-row-reverse box-wrap" style="padding: 20upx 40upx 0 40upx;">
				<view v-for="(item, index) in DEVICE_NAME" :key="index"  style="color:#606060;padding: 14upx 24upx;background-color: #F6F6F6;border-radius: 10upx;font-size: 28upx;margin-right: 20upx;margin-bottom: 20upx;">
					{{item}}
				</view>
			</view>
			
		</view>
		
		<view  class="occupied" style="height: 180upx;"></view>
		<view  style="position: fixed;bottom:0upx;width: 100%;z-index: 9999;border-top: 1px solid #e5e5e5;height: 150upx;">
			<view>
				<view class="footer-btn footer-btn-two batchBtn" >
					<view style="background-color:#FEB952;" class="btn btn-col1 btn1" @click="callPhone(houseInfo.RESPONSIBLE_PHONE)">负责人电话</view>
					<view v-if="!submitResult" style="background-color:#4db4ea ;" class="btn btn-col1 btn2" @click="submit()">确认房型</view>
				</view>
			</view>
		</view>
		
	</view>
	</view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import clipboard from '@/js_sdk/dc-clipboard/clipboard.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { addSelectedHouse,getHouseType,getDeptByParentId} from '@/common/api.js';
import { formatImgUrl,vbPicture,callPhone,getStorage,callbackRequest,alertTip,callbackRequestNoLoading} from '@/common/util.js';
export default {
	components: {
		uniIcons,
		listCell,
		uniPopup
	},
	data() {
		return {
			formatImgUrl:formatImgUrl,
			vbPicture:vbPicture,
			callPhone:callPhone,
			houseInfo:{},
			vbPicData:[],
			DEVICE_NAME:[],
			houseDevice:[],
			houseModel:[],
			applyId:'',
			submitResult:false
		};
	},
	onLoad(option) {
		this.getDeptByParentId(0,new Array());
		this.applyId = option.applyId;
		let houseInfo = option.houseInfo||{};
		this.houseInfo = JSON.parse(houseInfo);
		this.getHouseType("houseDevice");
		this.houseModel = JSON.parse(option.houseModel);
		let pictures = this.houseInfo.PICTURE||[];
		for(let i=0;i<pictures.length;i++){
			let newUrl = this.formatImgUrl(pictures[i]);
			this.vbPicData.push(newUrl);
		}
		console.log(this.houseInfo);
	},
	methods: {
		getDeptByParentId(parentId,arr){
			let params = {
				method: getDeptByParentId,
				data: {
					parentId: parentId
				}
			};
			callbackRequest(params).then(res => {});
		},
		getHouseType(dataType){
			let params = {
				method: getHouseType,
				data: {
					dataType:dataType
				}
			};
			callbackRequestNoLoading(params).then(res => {
				res = res.data;
				if (res.returnCode == 1) {
						this.houseDevice = res.returnData;
						let device = this.houseInfo.DEVICE;
						var DEVICE_NAME = [];
						if(device!=null&&device!=''){
							let devices = device.split(",");
							for(let i=0;i<devices.length;i++){
								for(let j=0;j<this.houseDevice.length;j++){
									if(devices[i] == this.houseDevice[j].id){
										DEVICE_NAME.push(this.houseDevice[j].name);
									}
								}
							}
						}
						this.DEVICE_NAME = DEVICE_NAME;
				} else {
					
				}
			});
		},
		submit(){
			console.log(this.houseInfo)
			console.log(this.applyId)
			console.log(this.houseModel)
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 3]; //上一页页面实例
			prevPage.$vm.houseInfo = this.houseInfo;
			prevPage.$vm.chosenHouse = this.houseInfo.HOUSE_NAME;
			prevPage.$vm.chosenHouseCost = this.houseInfo.RENT;
			prevPage.$vm.applyId = this.applyId;
			// prevPage.$vm.houseModel = this.houseModel;
			uni.navigateBack({   // 返回上一页面
				delta: 2   // 返回的页面数
			});
		},
		formatHouseModel(houseModel){
			for(let i=0;i<this.houseModel.length;i++){
				let obj = this.houseModel[i];
				if(obj.id == houseModel){
					return obj.name;
				}
			}
		},
		alertTip() {
			alertTip('敬请期待');
		}
	}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.batchBtn{
		position: absolute;height: 140upx;padding-top: 30upx;
		.btn1{
			width:40%;margin-left:7%;margin-right: 6%;border-radius: 20upx;
		}
		.btn2{
			width:40%;border-radius: 20upx;
		}
		.btn3{
			width: 28%;margin-left: 4%;border-radius: 10upx;
		}
		.btn4{
			width: 28%;margin-left: 4%;border-radius: 10upx;
		}
		.btn5{
			width: 28%;margin-left: 4%;border-radius: 10upx;
			background: #348CF2;
		}
	}
.tip-num {
			color: #fff;
			position: absolute;
			right: 48upx;
			top: -8upx;
			font-size: 24upx;
			background: red;
			border-radius: 50%;
			width: 36upx;
			height: 36upx;
			text-align: center;
			line-height: 36upx;
		}
.index-container {
	overflow: hidden;

	.banner {

		image {
			width: 100%;
			height: 500upx;
			border-radius: 10rpx;
			vertical-align: top;
		}
		
		.swiper-banner {
			height: 500upx;
				
			.swiper-item {
				line-height: 50upx;
				@include overstepOne;
				
				text {
					display: block;
					vertical-align: top;
					font-size: 26rpx;
				}
			}
		}
	}

	.backlog {
		background: #f3f4fa;
		padding: 20rpx 30rpx;

		.icon {
			float: left;
			width: 36rpx;
			height: 36rpx;
			vertical-align: top;
			margin-top: 8rpx;
		}

		.fr-text {
			margin-left: 70rpx;

			.swiper-box {
				height: 50upx;

				.swiper-item {
					line-height: 50upx;
					@include overstepOne;

					text {
						display: block;
						vertical-align: top;
						font-size: 26rpx;
					}
				}
			}
		}
		
		
	}
}

.category-view {
	border-bottom: 1px solid #e3e3e5;
	padding-bottom: 8rpx;

	.category-name {
		padding: 36rpx 0 40rpx 20upx;
		font-size: 30upx;
		/* margin-bottom: 40upx; */
		font-weight: bold;
		line-height: 36rpx;

		image {
			margin-right: 14upx;
			width: 36upx;
			height: 36upx;
			vertical-align: top;
		}
	}
}

.category-view:last-child {
	border-bottom: 0px;
}

.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;
}

.button-fun {
	margin-bottom: 36upx;
	position: relative;

	image {
		width: 60upx;
		height: 60upx;
		margin-bottom: 4upx;
	}

	text {
		font-size: 24upx;
		color: #666;
	}

	.tip-num {
		color: #fff;
		position: absolute;
		right: 48upx;
		top: -8upx;
		font-size: 24upx;
		background: red;
		border-radius: 50%;
		width: 36upx;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
}

.wth25 {
	width: 24%;
}

%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.server {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	color: #929292;
	margin-top: 20upx;
}

.server .line {
	border-bottom: 1px solid #333333;
	width: 66.6667upx;
}

.server .s-text {
	font-size: 25upx;
	margin-left: 15upx;
	margin-right: 15upx;
}

.user-section {
	height: 373upx;
	padding: 20upx 20upx 0 20upx;
}

.img-icon {
	width: 70upx;
	height: 70upx;
	margin-bottom: 18upx;
}

.user-info-box {
	width: 100%;
	height: 100%;
}

.cover-container {
	background: $page-color-base;
	padding: 0 30upx;
	position: relative;
	background: #f5f5f5;
	padding-bottom: 20upx;
}

.order-section {
	@extend %section;
	padding: 28upx 0;
	margin-top: 20upx;

	.order-item {
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $font-color-dark;
	}

	.yticon {
		font-size: 48upx;
		margin-bottom: 18upx;
		color: #fa436a;
	}
}

.history-section {
	padding: 10upx 0 0;
	margin-top: 20upx;
	background: #fff;
	border-radius: 10upx;

	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40upx;
		margin-left: 30upx;

		.yticon {
			font-size: 44upx;
			color: #5eba8f;
			margin-right: 16upx;
			line-height: 40upx;
		}
	}
}

.img-b {
	width: 100%;
	height: 330upx;
}
.tip-area {
	opacity: 0.8;
	filter: alpha(opacity=20);
	position: absolute;
	background: #ffffff;
	width: 60upx;
	height: 60upx;
	text-align: center;
	line-height: 36upx;
}
</style>
