<template>
	<view class="content">
		<view>
			<view class="form-data">
					<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
							<u-form-item label="其他垃圾:" >
								<u-input placeholder="请输入" :maxlength="30" v-model="form.receiverName" />
								<text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
							</u-form-item>
							<u-form-item label="厨余垃圾:" >
								<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
								<text slot="right" style="color: #000000;">桶(约{{125}}kg)</text>
							</u-form-item>
							<u-form-item label="建筑垃圾:" >
								<u-input placeholder="请输入" :maxlength="11" type="number" v-model="form.receiverPhone" />
								<text slot="right" style="color: #000000;">吨(约{{125}}kg)</text>
							</u-form-item>
					</u-form>
				</view>
				<view class="form-data remark">
					<text>信息备注</text>
					<textarea :auto-height="true" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/>
				</view>
				<view class="form-data qyImg">
					<text>清运照片</text>
					<view class="info-main">
						<view class="photograph-con">
							<u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
							<u-icon v-show="!photograph" name="camera" color="#bfbfbf" size="60" class="photograph-icon"></u-icon>
							<!-- <u-image src="/static/camera.png"></u-image> -->
							<u-image v-show="photograph" width="100%" height="100%" :src="photograph" @click="previewPictures"></u-image>
						</view>
					</view>
				</view>
			<u-button  @click="open" class="submitBtn" type="success" shape="circle">提交</u-button>
			<uni-popup ref="openModal" type="center">
				<uni-popup-dialog content="确认提交吗？" @close="close" @confirm="onOk" :title="title"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		saveAddress
	} from '@/api/receiveAddress.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,uniPopupDialog
		},
		data() {
			return {
				title:'',
				show:false,
				src:"",
				photograph: [], //  图片路径
				form: {
					receiverName: '',
					receiverPhone: '',
					receiveAddress: '' // 详细地址
				},
			};
		},
		onLoad(option) {
			console.log(option,option.id,'ppppppppp')
			// 查看
			if(option && option.id){
				
			}else {
				console.log('--------新增')
				this.photograph = []
			}
		},
		onUnload() {
		},
		methods: {
			//  签到拍照
			goPhotograph() {
				uni.chooseImage({
				    count: 3, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success:  (res) =>{
				        console.log(JSON.stringify(res.tempFilePaths));
						// this.photograph = JSON.stringify(res.tempFilePaths)
						uni.showLoading({
							title: '保存中，请稍后...', 
							mask: true
						})
						saveImgToAliOss(res.tempFilePaths[0],function(ret){
							console.log(ret)
							_this.photograph = ret.data
							uni.hideLoading()
						})
				    }
				});
				// const _this = this;
				
				// wx.chooseImage({
				// 	count: 3, //最多可以选择的图片张数，默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: ['camera'], //album 从相册选图，camera 使用相机，默认二者都有
				// 	success: function(res) {
				// 		// tempFilePaths 图片的本地文件路径列表,tempFiles 图片的本地文件列表，每一项是一个 File 对象
				// 		console.log(JSON.stringify(res.tempFilePaths));
				// 		uni.showLoading({
				// 			title: '保存中，请稍后...', 
				// 			mask: true
				// 		})
				// 		// saveImgToAliOss(res.tempFilePaths[0],function(ret){
				// 		// 	console.log(ret)
				// 		// 	_this.photograph = ret.data
				// 		// 	uni.hideLoading()
				// 		// })
				// 	}
				// });
			},
			//  预览签到图
			previewPictures() {
				const photograph = [this.photograph];
				uni.previewImage({
					urls: photograph
				});
			},
			//  删除签到图
			cancelPhotograph() {
				setTimeout(() => {
					this.photograph = '';
				}, 500);
			},
			// 提交
			open(){
				this.$refs.openModal.open()
			},
			// 取消
			close(){
			},
			// 确认提交
			onOk() {
				this.$refs.openModal.open()
				// this.show=true
				
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 		if (this.form.receiverName ==='') {
				// 			uni.showToast({
				// 				title: '请输入姓名',
				// 				icon: 'none'
				// 			})
				// 			return false
				// 		}
				// 		if (this.form.receiverPhone ==='') {
				// 			uni.showToast({
				// 				title: '请输入电话',
				// 				icon: 'none'
				// 			})
				// 			return false
				// 		}
				// 		//  省市区
				// 		if(this.areaIdArr.length == 0){
				// 			uni.showToast({icon: 'none',title: '请选择省市区'})
				// 			return
				// 		}
				// 		if (this.form.receiveAddress ==='') {
				// 			uni.showToast({
				// 				title: '请输入详细地址',
				// 				icon: 'none'
				// 			})
				// 			return false
				// 		}
				// 		let params = {
				// 			receiverName: this.form.receiverName,
				// 			receiverPhone: this.form.receiverPhone,
				// 			receiveAreasName: this.areaInfo.label.replace(/\-/g,','), // 地址名称
				// 			receiveAreas: this.areaIdArr.join(','), 
				// 			receiveAddress: this.form.receiveAddress // 详细地址
				// 		}
				// 		if(this.form.id) {
				// 			params.id = this.form.id
				// 		}
				// 		saveAddress(params).then(res=>{
				// 			if(res.status == 200) {
				// 				uni.showToast({
				// 					title: res.message,
				// 					icon: 'none'
				// 				})
				// 				setTimeout(()=>{
				// 					uni.navigateBack()
				// 				},300)
				// 			} 
				// 		})
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			},
			// 拍照
			takePhoto() {
			            const ctx = uni.createCameraContext();
			            ctx.takePhoto({
			                quality: 'high',
			                success: (res) => {
			                    this.src = res.tempImagePath
			                }
			            });
			        },
			        error(e) {
			            console.log(e.detail);
			        }
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		padding: 0;
		background: #F5F5F5;
		// .buttons{
		// 	font-size: 32upx;
		// 	display: block;
		// 	height: 80upx;
		// 	line-height: 80upx;
		// 	margin: 0 auto;
		// 	background-color: #0DC55F;
		// 	color: #fff;
		// 	border-radius: 50upx;
		// }
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
		.form-data{
			padding: 0 40upx;
			margin-bottom: 20upx;
			background-color: #fff;
		}
		.remark{
			padding: 40upx ;
		}
		.qyImg{
			padding: 40upx ;
		}
		.info-main {
			margin-top: 14upx;
			border-radius: 12upx;
			background-color: #fff;
			.location-icon {
				padding-left: 10upx;
				vertical-align: sub;
			}
			.photograph-con {
				border: 2upx dashed #bfbfbf;
				border-radius: 12upx;
				width: 160upx;
				height: 160upx;
				text-align: center;
				position: relative;
				.photograph-icon {
					display: inline-block;
					padding-top: 48upx;
				}
				.close-circle-icon {
					background-color: #fff;
					border-radius: 50%;
					position: absolute;
					right: -23upx;
					top: -23upx;
					z-index: 9;
				}
			}
		}
		.submitBtn{
			font-size: 32upx;
			display: block;
			width: 670upx;
			height: 80upx;
			line-height: 80upx;
			margin: 0 auto;
			color: #fff;
			border-radius: 50upx;
		}
	}
</style>
