<template>
	<view class="content">
		<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
			<view class="form-item">
				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
				<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>
			</view>
			<view class="form-item">
				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
				<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>
			</view>
			<view class="form-item">
				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
				<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>
			</view>
			<view class="form-item">
				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
				<u-form-item label="信息备注" style="width: 100%;">
					<u-input placeholder="请输入" :maxlength="11" type="textarea" v-model="form.receiverPhone" />
					<!-- <textarea :auto-height="true" placeholder="请输入备注(最多500个字符)" :maxlength="500" v-model="form.receiveAddress" class="receiveAddress"/> -->
				</u-form-item>
			</view>
			<view class="form-item">
				<image src="../../static/CLOTHES.png" mode=""  class="form-item-icon"></image>
				<u-form-item label="清运照片" style="width: 100%;">
					<text style="color: #c0c4cc;" v-if="!photograph">最多3张</text>
						<u-icon v-show="photograph" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph"></u-icon>
						<u-icon  slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon"  @click="photograph.length ? null : goPhotograph()"></u-icon>
						<u-image width="100%" height="100%" v-for="item in photograph" :src="item" @click="previewPictures"></u-image>
					<!-- <u-icon  slot="right" name="camera" color="#2979ff" size="60" class="photograph-icon"></u-icon> -->
					<!-- <camera device-position="back" flash="off"></camera>
					        <!-- <button type="primary" @click="takePhoto">拍照</button>
							<!-- <uni-icons type="camera"  @click="takePhoto" size="30rpx"></uni-icons>
					        <view>预览</view>
					        <image mode="widthFix" :src="src"></image> -->
				</u-form-item>
			</view>
		</u-form>
		<view class="buttons">
			<u-button type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		saveAddress
	} from '@/api/receiveAddress.js'
	import Address from '@/components/address.vue'
	export default {
		components: {
			Address
		},
		data() {
			return {
				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);
			},
			submit() {
				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{
		padding: 0 50upx;
		background: #FFFFFF;
		width: 100%;
		.buttons{
			padding: 80upx 100upx;
		}
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
		.form-item{
			display: flex;
			.form-item-icon{
				width: 45upx;
				height: 45upx;
				margin: auto 10upx;
			}
		}
	}
</style>
