<template>
	
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="报备客户" prop="curName">
					<u-input placeholder="请输入推荐人" v-model="curName" disabled="true" type="text"></u-input>
				</u-form-item>
				<!-- <u-form-item label-width="150" label="中间四位" v-if="oldPhone.indexOf('****') > -1">
					<u-input placeholder="请输入中间四位" v-model="b4" type="number"></u-input>
				</u-form-item> -->
				<u-form-item label-width="150" label="报备状态" prop="report_state" required>
					<u-radio-group v-model="form.report_state" active-color="#2979ff">
						<u-radio name="1">有效</u-radio>
						<u-radio name="3">无效</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-position="top" label-width="150" label="报备二维码(非江投必填)" prop="report_code">
					<view class="id_card" @click="uploadImage">
						<u-icon v-if="form.report_code == null" name="plus" size="32" color="#606266"></u-icon>
						<text v-if="form.report_code == null">请先上传报备二维码照片</text>
						<image v-if="form.report_code != null" :src="form.report_code" mode="aspectFill"></image>
					</view>
					<view style="color: #999" @click="setDefaultImg">设置默认图</view>
				</u-form-item>
				<u-form-item label-width="150" label="备注信息" prop="remark" label-position="top">
					<u-radio-group v-model="form.remark" active-color="#2979ff">
						<u-radio name="已到访客户">已到访客户</u-radio>
						<u-radio name="项目集团老客户">项目集团老客户</u-radio>
						<u-radio name="他人报备有效期内">他人报备有效期内</u-radio>
						<u-radio name="其他原因">其他原因</u-radio>
					</u-radio-group>
					<u-input v-if="form.remark === '其他原因'" placeholder="备注信息,将显示在报备的详情页面" v-model="otherRemark" type="textarea"></u-input>
				</u-form-item>
			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">确定</u-button>
		</view>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			otherRemark: '',
			eId: '',
			curName: '',
			curId: '',
			oldPhone: '',
			b4: '',
			form: {
				report_code: null,
				report_state: '1',
			},
		};
	},
	onLoad(params) {
		this.curId = params.id
		this.eId = params.eid
		this.curName = `${params.name}--${params.phone}`
		this.oldPhone = `${params.phone}`
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		setDefaultImg () {
			this.form.report_code = 'https://img.fangpiaovip.com/20230209031226-7200.png'
		},
		getTime(n) {
			let date = n ? new Date(n) : new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			month = month > 9 ? month : '0' + month
			let day = date.getDate()
			day = day > 9 ? day : '0' + day
			let hour = date.getHours()
			hour = hour > 9 ? hour : '0' + hour
			let minute = date.getMinutes()
			minute = minute > 9 ? minute : '0' + minute
			let second = date.getSeconds()
			second = second > 9 ? second : '0' + second
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
		uploadImgHandle (bc) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				success: function(res) {
					const filePath = res.tempFilePaths[0];
					let token = uni.getStorageSync('MD_token') || ''
					uni.uploadFile({
						url: uni.baseUrl + 'api/upload/cloud',
						filePath,
						name: 'upload',
						formData: {
							'token': token
						},
						success: (f) => {
							const cData = JSON.parse(f.data)
							if (cData.errno === 0) {
								if (bc && typeof(bc) === 'function') bc(cData.data)
							} else {
								uni.$msg(cData.errmsg || `未知错误-${cData.errno}`)
							}
						}
					})
				}
			})
		},
		// 上传照片
		uploadImage() {
			this.uploadImgHandle((d) => {
				this.form.report_code = d.url
			})
		},
		submitHandle() {
			const that = this
			uni.api.estate.apiestatedetail({
				id: that.eId
			}).then(function (dtl) {
				let remark = that.form.remark || ''
				if (remark === '其他原因') {
					remark = that.otherRemark
				}
				if (that.form.report_state == 1) {
					if (dtl.is_only == 2) {
						if (!that.form.report_code) {
							uni.$msg('非独家项目，请上传报备二维码~')
							return
						}	
					}
				} else {
					if (!remark) {
						uni.$msg('报备无效请备注原因')
						return
					}
				}
				that.$refs.uForm.validate(valid => {
					if (valid) {
						let params = {
							...that.form,
							id: that.curId,
							report_at: that.getTime(),
							remark,
						}
						// if (cPhone) params.phone = cPhone
						uni.api.cust.apireportverify(params).then(res => {
							uni.$msgConfirm('编辑成功', () => {
								uni.reLaunch({
									url: '/pages/agent/recommend/list'
								})
							}, () => {
								uni.reLaunch({
									url: '/pages/agent/recommend/list'
								})
							})
						})
					}
				});
			})
			// let cPhone = ''
			// if (that.oldPhone.indexOf('****') > -1) {
			// 	if (that.b4 && that.b4.length === 4) {
			// 		cPhone = that.oldPhone.replace('****', that.b4)
			// 	} else {
			// 		uni.$msg('请输入前三后四的中间四位')
			// 		return
			// 	}
			// }
		},


		// 以下是工具函数
		// 格式化日期的月份或天数的显示（小于10，在前面增加0）
		getFormatDate(value) {
			if (value == undefined || value == '') {
				return '';
			}
			var str = value;
			if (parseInt(value) < 10) {
				str = '0' + value;
			}
			return str;
		}
	}
};
</script>
<style lang="scss">
.page {
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
	border-radius: 10rpx;

	image {
		border-radius: 10rpx;
	}
}

.footer {
	position: relative;
	text-align: center;
	font-size: $u-p2;
	left: 0;
	bottom: 20rpx;
	.agreement {
		color: $u-theme-color;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}

.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 400rpx;
	height: 400rpx;
	background-color: #fff;
}
</style>