<template>
	<view>
		<view  class="index-container" style="background-color: white;padding-bottom: 10upx;">
			<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: 40upx 0 0 40upx;">物业费{{houseInfo.PROPERTY}}</text>
			</view>
			<view class="box">
				<text style="font-size:32upx;padding: 40upx 0 0 40upx;">押金{{houseInfo.AMOUNT}}</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">
				<text style=" font-size:32upx;padding: 20upx 0 0 40upx;">{{houseInfo.BUILDING_YEAR+"年建 " +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 class="form-box" style="border-radius: 10upx;border-top: 1px solid #e5e5e5;">
				<view class="form-item">
					<text class="label"><text style="color: red;">*</text>合同期限:</text>
					<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange" type="daterange"  /></view>
				</view>
				<view class="form-item" >
					<text class="label">合同上传:</text>
					<view class="ipt-box">
						<view class="pic">
							<view class="img-box">
								<view class="img-item" v-for="(item, index) in imgs2" :key="index">
									<image class="remove-btn" @click="removeImg2(index)" src="/static/icons/delete-icon.png" mode=""></image>
									<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
								</view>
								<view class="img-item upload-btn" @click="chooseImg(1)" v-if="imgs2.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
							</view>
						</view>
					</view>
					<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
				</view>
				<view class="form-item" >
					<text class="label">缴费凭证:</text>
					<view class="ipt-box">
						<view class="pic">
							<view class="img-box">
								<view class="img-item" v-for="(item, index) in imgs" :key="index">
									<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
									<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
								</view>
								<view class="img-item upload-btn" @click="chooseImg(0)" v-if="imgs.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
							</view>
						</view>
					</view>
					<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
				</view>
				
			</view>
			<view  class="occupied" style="height: 200upx;"></view>
			
			<view  style="position: fixed;bottom:0upx;width: 100%;;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(1)">上传合同</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} from '@/common/api.js';
import { formatImgUrl,vbPicture,callPhone,getStorage,callbackRequest,alertTip,callbackRequestNoLoading,convertImgToBase64,uploadImg} 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:'',
			dateRange:'',
			imgs:[],
			imgsId:[],
			imgs2:[],
			imgsId2:[],
			submitResult:false,
			submitFlag:true,
		};
	},
	onLoad(option) {
		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: {
		getHouseType(dataType){
			let params = {
				method: getHouseType,
				data: {
					dataType:dataType
				}
			};
			callbackRequest(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.imgsId.join())
			// console.log(this.imgsId2.length)
			// if (!this.dateRange) {
			// 	alertTip('请选择合同期限');
			// 	return false;
			// }
			// if (this.imgsId2.length==0) {
			// 	alertTip('请上传合同图片');
			// 	return false;
			// }
			if(!this.submitFlag){
				return false;
			}
			this.submitFlag=false;
			uni.showModal({
				title: '确认',
				content: '请确认是否开始上传合同！',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认',
				success: res => {
					if (res.confirm) {
						let data = {
							method: addSelectedHouse,
							data: {
								// photo:this.imgsId.join(),
								// contractPhoto:this.imgsId2.join(),
								// contractStartTime:this.dateRange[0],
								// contractEndTime:this.dateRange[1],
								userId:getStorage('userInfo').userId,
								applyId:this.applyId,
								HOUSE_ID:this.houseInfo.UUID,
								HOUSE_NAME:this.houseInfo.HOUSE_NAME,
								HOUSE_TYPE:this.houseInfo.HOUSE_TYPE,
								HOUSE_ADDR:this.houseInfo.HOUSE_ADDR,
								ACREAGE:this.houseInfo.ACREAGE,
								MODEL:this.houseInfo.MODEL,
								BUILDING_YEAR:this.houseInfo.BUILDING_YEAR,
								DEVICE:this.houseInfo.DEVICE,
								RESPONSIBLE:this.houseInfo.RESPONSIBLE,
								RESPONSIBLE_PHONE:this.houseInfo.RESPONSIBLE_PHONE,
								PRICE:this.houseInfo.PRICE,
								RENT_TYPE:this.houseInfo.RENT_TYPE
							}
						};
						// console.log(data,"data");
						callbackRequest(data).then(res => {
							res = res.data;
							if (res.returnCode == 1) {
								console.log(res);
								// uni.redirectTo({
								// 	url: '/pages/house/house?currentTabIndex=1'
								// });
								
								this.submitFlag = true;
								alertTip(res.returnMsg);
								this.goPageA()
							} else {
								alertTip(res.returnMsg);
								this.submitFlag = true;
							}
						});
					} else if (res.cancel) {
						this.submitFlag = true;
					}
				}
			});
		},
		goPageA(){
		     // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
		     let pages = getCurrentPages() 
		     // 2. 上一页面实例
		     	// 注意是length长度，所以要想得到上一页面的实例需要 -2
		     	// 若要返回上上页面的实例就 -3，以此类推
		     let prevPage = pages[pages.length -4] 
		     // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
		     prevPage.$vm.dataList()
		     // 4. 返回上一页面
		     uni.navigateBack({
		         delta: 3 // 返回的页面数
		     })
		 },
		formatHouseModel(houseModel){
			for(let i=0;i<this.houseModel.length;i++){
				let obj = this.houseModel[i];
				if(obj.id == houseModel){
					return obj.name;
				}
			}
		},
		//上传图片
		
		async chooseImg(type) {
			let chec = 0;
			let sty = [];
			let _this = this;
			uni.showActionSheet({
				itemList:['拍照','相册'],
				success:function(resp){
					chec = resp.tapIndex;
					if (chec == 0) {
						sty = ['camera']; //从相册相机选择 
					} else {
						sty = ['album']; //从相册相机选择
					}
					uni.chooseImage({
						count:5,
						sizeType: ['compressed'],
						sourceType: sty, 
						quality: 1,
						success: async function(res){
							let resData = res.tempFilePaths;
							for(let i=0;i<resData.length;i++){
								if(_this.imgs.length>3){
									break;
								}
								uni.getImageInfo({
									src: resData[i],
									success:async (path) => {
										convertImgToBase64(path.path, async function(base64) {
											if(_this.imgs.length<5||_this.imgs2.length<3){
												// _this.imgs.push(base64);
												uni.showLoading({
													title: '图片上传中'
												})
												let blength = base64.length;
												let glength = 7500;
												if(blength<=glength){
													let uploadParam = {
														base64: base64,
														userId:  getStorage('userInfo').userId+i,
														groupEnd: '1'
													}
													await uploadImg(uploadParam).then(resu => {
														resu = resu.data ;
														uni.hideLoading();
														if (resu.returnCode != 1) {
															alertTip(resu.returnMsg);
														}else{
															if(type==0){
																_this.imgs.push(base64);
																_this.imgsId.push(resu.returnData+".jpg");
															}
															if(type==1){
																_this.imgs2.push(base64);
																_this.imgsId2.push(resu.returnData+".jpg");
															}
															
														}
													});
												}else{
													let fnum = parseInt(blength/glength);
													for(let j=1;j<fnum+1;j++){
														if(j==fnum){
															let groupBase = base64.slice((j-1)*glength);
															console.log(groupBase.length,"groupBaselength");
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '1'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																	if(type==0){
																		_this.imgs.push(base64);
																		_this.imgsId.push(resu.returnData+".jpg");
																	}
																	if(type==1){
																		_this.imgs2.push(base64);
																		_this.imgsId2.push(resu.returnData+".jpg");
																	}
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}else{
															let groupBase = base64.slice((j-1)*glength,glength*j);
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '0'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}
														
													}
													uni.hideLoading();
												}
												
												
											}
											
										});
									},
								});
							}
							
						}
					});
				},
				fail:function(resp){
					console.log(resp.errMsg);
				}
			});
		},
		//删除图片
		removeImg(index) {
			this.imgs.splice(index, 1);
			this.imgsId.splice(index, 1);
			console.log(this.imgs);
			console.log(this.imgsId);
		},
		removeImg2(index) {
			this.imgs2.splice(index, 1);
			this.imgsId2.splice(index, 1);
			console.log(this.imgs);
			console.log(this.imgsId);
		},
		alertTip() {
			alertTip('敬请期待');
		}
	}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';

.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;

	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.remove-btn {
			position: absolute;
			top: -18upx;
			right: -18upx;
			width: 44upx;
			height: 44upx;
			z-index: 2;
		}
	}

	.upload-btn {
		.img {
			width: 60upx;
			height: 60upx;
			margin: unset;
		}
	}
}
.form-box {
	background: #fff;
	.form-item {
		overflow: hidden;
		// border-bottom: 1px solid #eee;
		padding: 30upx 20upx;
		.label {
			float: left;
			width: 150upx;
			font-size: 32upx;
			color: #333;
			font-weight: bold;
			line-height: 68upx;
		}
		.ipt-box {
			margin-left: 160upx;
			input {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
			}
		}
		.select {
			.arrow {
				float: right;
				width: 16upx;
				height: 29upx;
				margin-top: 10upx;
			}
			.picker {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				color: #666;
				margin-left: 10upx;
			}
		}
	}
}
.batchBtn{
		position: absolute;height: 140upx; background: white;padding-top: 30upx;
		.btn1{
			width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
		}
		.btn2{
			width:40%;border-radius: 10upx;
		}
		.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>
