<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="跟进方式" prop="recordEstateActionName">
					<u-input type="select"  inputAlign="right" :select-open="actionSelectShow" v-model="form.recordEstateActionName"  placeholder="请选择跟进方式" @click="actionSelectShow = true"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="跟进楼盘" prop="estate_name">
					<u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" inputAlign="right" placeholder="请选择跟进楼盘" @click="propertySelectShow = true"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="提醒时间" prop="remind" required>
					<u-input placeholder="请输入" v-model="form.remind" type="number" inputAlign="right"></u-input>
					<view style="color: #333" slot="right">天后提醒我</view>
				</u-form-item>
				<u-form-item label-width="150" label="备注信息" prop="record_remark" required label-position="top">
					<u-input :placeholder="remarkTips" v-model="form.record_remark" type="textarea"></u-input>
				</u-form-item>
			</u-form>
			<view class="scoped-more-img">
				<view class="si-op" v-for="(url, index) in imgArr" :key="index">
					<u-image :src="url" class="img" mode="heightFix" height="150rpx" @click="previewImageHandle(url)" ></u-image>
					<u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="delImg(index)"></u-image>
				</view>
				<view class="si-op" @click="addImg">
					<u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image>
				</view>
			</view>
			
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
		</view>
		
		<!-- utoast -->
		<u-toast ref="uToast" />
		
		
		
		
		
		<u-select mode="single-column" :list="groupTypeSelectList" v-model="actionSelectShow" @confirm="groupTypeSelectConfirm"></u-select>
		
		
		<!-- modal -->
		<u-popup v-model="propertySelectShow" mode="center" width="90%" height="100%">
			<view class="bwin-popup scoped-estate-popup">
				<view class="scoped-popup-header-input">
					<u-input class="input" v-model="curEstateName" placeholder="没找到楼盘？？点这输入关键字搜索"></u-input>
					<view class="b" @click="getEstateList">搜索</view>
				</view>
				<scroll-view :scroll-y="true" class="popup-body">
					<view class="scoped-estate-list">
						<view v-for="(item, index) in estateList" :class="form.estate_id == item.id ? 'sel-item cur' : 'sel-item'" @click="listItemHandle(item)" :key="index">
							<view class="sel-left">
								<image class="img" :src="item.pri_image" mode="aspectFill"></image>
							</view>
							<view class="sel-right">
								<view class="p1">{{item.estate_name}}</view>
								<view class="p2">
									<u-tag
										:text="areaTypeObj[item.area_type]"
										:type="'success'"
										size="mini"
									></u-tag>
								</view>
								<view class="p3" v-if="userInfo2.auth_state == 1">带看需收集：{{ item.report_visit }}</view>
								<view class="p3" v-if="userInfo2.auth_state == 1">报备/带看保护期：{{ item.report_lock }}天/{{ item.lead_lock }}天</view>
								<!-- <view class="p3" v-if="userInfo2.auth_state == 1">预计奖励：{{ item.brokerage }}</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer" style="position: fixed;bottom: 12rpx;">
					<u-button size="medium" @click="propertySelectShow = false">关闭</u-button>
					<u-button size="medium" type="primary" @click="propertySelectShow = false">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		
		
		
	</view>
</template>
<script>
	import { arrToObj } from '@/utils'
	export default {
		data() {
			return {
				actionSelectShow: false,
				groupTypeSelectList: [],
				estateList: [],
				areaTypeObj: {},
				userInfo2: {},
				curEstateName: '',
				propertySelectShow: false,
				imgArr: [],
				form: {
					estate_id: '',
					estate_name: '',
					remind: '',
					record_remark: null,
				},
				customer_id: null,
				rules: {
					record_remark: [
						{
							required: true,
							message: '备注不能为空',
							trigger: ['change']
						},
					],
					remind: [
						{ required: true, message: "提醒时间不能为空", trigger: ['blur', 'change'] }
					],
				},
				remarkTips: '请输入',
			
			};
		},
		onLoad(data) {
			this.customer_id = data.id
			
		  let userInfo2 = this.userInfo2 = uni.getStorageSync('MD_userInfo2')
			const dictObj = uni.getStorageSync('MD_dict')
			this.areaTypeObj = arrToObj(dictObj.area_type)
			this.getEstateList()
			this.form.action = userInfo2.record_estate_action || ''
			let list = dictObj.record_estate_action || []
			let groupTypeSelectList = []
			list.forEach(item => {
				if (item.val == userInfo2.record_estate_action) {
					this.form.recordEstateActionName = item.key
				}
				groupTypeSelectList.push({
					value: item.val,
					label: item.key,
				})
			})
			this.groupTypeSelectList = [...groupTypeSelectList]
		},
		created() {
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			groupTypeSelectConfirm(e) {
				e.map((val, index) => {
					this.form.action = val.value;
					this.form.recordEstateActionName = val.label;
				});
			},
			getEstateList () {
				uni.api.estate.apiestatelist({page_size: 100, report_open: 1, estate_name: this.curEstateName}).then(res => {
					let list = res.list || []
					this.estateList = [...list]
				})
			},
			listItemHandle (val) {
				this.form.estate_id = val.estate_id;
				this.form.estate_name = val.estate_name;
			},
			addImg () {
				this.uploadComImg((arr) => {
					let imgArr = [...this.imgArr, ...arr]
					this.imgArr = [...imgArr]
				}, 9)
			},
			uploadComImg (bc, count, moreStr) {
				const that = this
				uni.chooseImage({
					count: count ? count : 1, // 默认9
					sizeType: ['compressed'],  // original
					sourceType: ['album', 'camera'],
					success: function (res) {
						const tempFilePaths = res.tempFilePaths
						if (tempFilePaths.length > 0) {
							let imgBcArr = []
							tempFilePaths.forEach((p, i) => {
								that.diyUploadFile(p, moreStr).then(url => {
									imgBcArr.push(url)
									if (bc && imgBcArr.length === tempFilePaths.length) {
										bc(imgBcArr)
									}
								})
							})
						}
					}
				})
			},
			diyUploadFile (filePath, moreStr) {
				return new Promise((resolve, reject) => {
					let token = uni.getStorageSync('MD_token')
					let url = uni.baseUrl + 'api/upload/cloud'
					// if (moreStr === 'noSign') url = uni.baseUrl + 'api/upload/cloud'
					uni.uploadFile({
						url,
						filePath,
						name: 'upload',
						formData: {
							'token': token
						},
						success (res){
							const cData = JSON.parse(res.data)
							let curImg = cData.data.url || ''
							resolve(curImg)
						}
					})
				})
			},
			delImg (index) {
				let imgArr = [...this.imgArr]
				imgArr.splice(index, 1)
				this.imgArr = [...imgArr]
			},
			previewImageHandle (current, arr) {
				uni.previewImage({
					current,
					urls: this.imgArr
				})
			},
			submitHandle() {
				const that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证成功
						let apiStr = 'apiprivaterecordadd'
						let params = {
							record_remark: that.form.record_remark,
							estate_id: that.form.estate_id,
							estate_name: that.form.estate_name,
							action: that.form.action,
							remind: that.form.remind,
							customer_id: that.customer_id
						}
						if (that.imgArr) params.record_img = that.imgArr.join(',')
						if (that.isEdit) {
							apiStr = 'apiprivaterecordedit'
							params.id = that.form.id
						}
						uni.api.cust[apiStr](params).then(res => {
							if (that.isEdit) {
								uni.$msgConfirm('编辑成功', () => {
									uni.reLaunch({
										url: '/pages/cust/my'
									})
								}, () => {
									uni.reLaunch({
										url: '/pages/cust/my'
									})
								})
							} else {
								uni.$msgConfirm('添加跟进记录成功,是否前往列表？', () => {
									uni.navigateBack()
								}, () => {
									that.imgArr = []
									that.form = {
										record_remark: null,
									}
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	};
</script>
<style lang="scss">
	.page {
		padding: 20rpx;
		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;
	}

	.footer {
		position: absolute;
		text-align: center;
		bottom: 40rpx;
		font-size: $u-p2;

		.agreement {
			color: $u-type-error;
		}
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding: 20rpx;
	}
	
	
.scoped-more-img {
	padding-top: 30rpx;
	.si-op {
		display: inline-block;
		vertical-align: middle;
		width: 150rpx;
		height: 150rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		border: 1PX solid #f2f2f2;
		.img {
			width: 150rpx;
			height: 150rpx;
		}
		.i {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 9;
		}
	}
}	
	
	
	
	
	
.scoped-estate-popup {
	height: 100%;
	padding-bottom: 100rpx;
	.popup-body {
		box-sizing: border-box;
		border-bottom: 1PX solid #dcdcdc;
	}
}
.scoped-estate-list {
	.sel-item {
		display: flex;
		border-bottom: 1PX solid #dcdcdc;
		padding: 20rpx;
		&.cur {
			background: #369af7;
			border-radius: 10rpx;
			overflow: hidden;
			.img {
				opacity: .6;
			}
			.p1 {
				color: #fff;
			}
			.p3 {
				color: #fff;
			}
		}
	}
	.sel-left {
		width: 180rpx;
		border-radius: 10rpx;
		.img {
			width: 180rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
	}
	.sel-right {
		// width: 450rpx;
		margin-left: 20rpx;
		.p1 {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.p2 {
			margin-bottom: 10rpx;
		}
		.p3 {
			color: #369af7;
			font-size: 24rpx;
			font-weight: bold;
		}
	}
}
.scoped-popup-header-input {
	position: fixed;
	width: 90%;
	display: flex;
	border-bottom: 1PX solid #dcdcdc;
	.input {
		flex: 1;
		padding-left: 20rpx;
		height: 80rpx;
		.u-input__input {
			height: 80rpx;
		}
	}
	.b {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #2d8cf0;
		color: #fff;
		text-align: center;
		margin-left: 20rpx;
	}
}

</style>