<template>
	<view class="content">
		<view class="content-form">
			<view class="form-data">
				<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
						<u-form-item prop="time" label="用户类型:" >
							<u-select v-model="show"  mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
							<u-input placeholder="请选择用户类型" v-model="form.time" @click="selectTime" :disabled="true"/>
							<u-icon name="arrow-right" slot="right" @click="selectTime"></u-icon>
						</u-form-item>
						<u-form-item prop="info" label="用户名称:" >
							<u-input placeholder="请输入用户名称"  v-model="form.info"/>
						</u-form-item>
						<u-form-item prop="info" label="联系电话:" >
							<u-input placeholder="请输入联系电话" v-model="form.info"/>
						</u-form-item>
				</u-form>
			</view>
			<view class="form-data">
				<u-form :model="form" ref="uForm" :label-width="140" :error-type="['toast']">
						<u-form-item prop="address" label="通讯地址:" >
							<u-input placeholder="请选择通讯地址" v-model="form.address" @click="selectAddress" :disabled="true"/>
							<u-icon name="arrow-right" slot="right"></u-icon>
						</u-form-item>
						<u-form-item prop="info" label="详细信息:" >
							<u-input placeholder="请输入详细信息" v-model="form.info"/>
						</u-form-item>
				</u-form>
			</view>
			<view class="form-data qyImg">
				<view> 上传图片 <text style="color: #a6a6a6;">(仅可上传1张，10MB以内)</text></view> 
				<view class="info-main">
					<view v-if="photograph.length<1 && !isView" class="camera-btn">
						<view @click="goPhotograph" class="photograph-camera">
							<u-icon name="camera" color="#bfbfbf" size="60" ></u-icon>
						</view>
					</view>
					<view v-show="photograph.length" v-for="(item,index) in photograph" :key="index" class="photograph-con">
						<u-icon v-show="!isView" name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph(index)"></u-icon>
						<u-image width="100%" height="100%" :src="item" @click="previewPictures(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<u-button @click="submit" :loading="loading" :custom-style="submitBtn">提交</u-button>
		</view>
		<!-- <uni-popup ref="openModal" type="center">
			<uni-popup-dialog content="确认提交吗？" @confirm="onOk" :title="title"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {gatherSave,gatherDetail} from '@/api/index.js'
	import {saveImgToAliOss} from '@/libs/tools.js'
	export default {
		// components: {
		// 	uniPopup,uniPopupDialog
		// },
		data() {
			return {
				title:'',
				loading:false, // 提交按钮加载圈
				photograph: [], //  图片路径
				form: {
					time: '', // 其它垃圾
					info: '', // 厨余垃圾
					address:'' // 通讯地址
				},
				isView: false ,// 是否是查看详情
				itemId:'',
				submitBtn:{
					backgroundColor: '#4F88F7',
					color: '#fff',
					borderRadius: '12px'
				},
				show: false,
				list: [
					{
						value: 1,
						label: '今天',
						children: [
							{
								value: 2,
								label: '上午（08-13点）',
							},
							{
								value: 3,
								label: '下午（13-18点）',
							}
						]
					},
					{
						value: 4,
						label: '明天',
						children: [
							{
								value: 5,
								label: '上午（08-13点）',
							},
							{
								value: 6,
								label: '下午（13-18点）',
							}
						]
					},
					{
						value: 7,
						label: '后天',
						children: [
							{
								value: 8,
								label: '上午（08-13点）',
							},
							{
								value: 9,
								label: '下午（13-18点）',
							}
						]
					},
				],
				rules: {
					time: [
						{
							required: true,
							message: '请选择时间',
							trigger: ['blur', 'change']
						}
					],
					info:[{required:true,message:'请选择用户信息',trigger:['change']}]
				}
			};
		},
		onLoad(option) {
			console.log(option,option.id,'ppppppppp')
			// 查看
			if(option && option.id){
				this.isView = true
				this.itemId=option.id
				this.getDetailData()
			}else {
				console.log('--------新增')
				this.photograph = []
				this.form.remarks = ''
				this.$refs.uForm.resetFields()
			}
		},
		onUnload() {
		},
		methods: {
			// 保留几位小数
			// numberToFixed: function (key, num, max) {
			//   let val = this.form[key]
			//   let ret = numberToFixed(val, num, max)
			//   this.$nextTick(() => {
			//   	this.form[key] = ret
			//   })
			// },
			selectAddress(){
				 wx.chooseLocation({
				      success: function(res) {
						  if(res){
							this.form.address=res,address  
						  }
				        console.log(res,'-----------dizhi --------------')
				      },
				    })
			},
			// 选择用户类型
			selectTime(){
				wx.hideKeyboard()
				setTimeout(()=>{
					this.show=true
				},500)
				
				
			},
			confirm(e) {
				console.log(e);
				this.form.time=e[0].label + e[1].label
			},
			// 选择用户信息
			selectUserInfo(){
				uni.navigateTo({
				    url: '/pages/index/userInfo'
				})
			},
			// 获取详情数据
			getDetailData(){
				gatherDetail({id:this.itemId}).then(res=>{
					if(res.status==200){
						console.log(res)
						const a = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_BUILDING')
						const b = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_OTHER')
						const c = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_KITCHEN')
						this.form.gatherNum_jianzhu= a ? a.gatherNum.toString() : '0'
						this.form.gatherNum_chuyu= c ? c.gatherNum.toString() : '0'
						this.form.gatherNum_other= b ? b.gatherNum.toString() : '0'
						this.form.remarks=res.data.remarks
						this.photograph=res.data.imageUrlList || []
						console.log(this.form,'this.form')
					}
				})
			},
			// 拍照或从相册选图片
			goPhotograph() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success:  (res) =>{
						console.log(res,'rrrrrrrrrrr')
				        console.log(JSON.stringify(res.tempFilePaths));
						console.log(this.photograph.length,'this.photograph')
						if(res.tempFiles[0].size>10485760){
							uni.showToast({
								title: '图片过大无法上传！',
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title:'正在保存图片...',
							mask: true
						})
						saveImgToAliOss(res.tempFilePaths[0],(ret)=>{
							// console.log(ret,'----------ret')
							this.photograph.push(ret.data)
							// _this.photograph = ret.data
							uni.hideLoading()
						})
				    }
				});
			},
			//  预览图片
			previewPictures(item) {
				const photograph = [item];
				uni.previewImage({
					urls: photograph,
				});
			},
			//  删除图片
			cancelPhotograph(index) {
				setTimeout(() => {
					this.photograph.splice(index,1)
				}, 500);
			},
			// 提交
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 确认提交
			// onOk() {
			// 	this.$refs.openModal.close()
			// 	let params = {
			// 		rubbishEntityList: [],
			// 		imageUrlList: this.photograph,
			// 		remarks: this.form.remarks
			// 	}
			// 	if(this.itemId){
			// 		params.id=this.itemId
			// 	}
			// 	if(this.form.gatherNum_other) {
			// 		params.rubbishEntityList.push({
			// 			"rubbishType":"GATHER_OTHER",
			// 			"rubbishWeight": this.form.gatherNum_other*240,
			// 			"gatherNum": this.form.gatherNum_other,
			// 			"unit":"BUCKET"
			// 		})
			// 	}
			// 	if(this.form.gatherNum_chuyu) {
			// 		params.rubbishEntityList.push({
			// 			"rubbishType":"GATHER_KITCHEN",
			// 			"rubbishWeight": this.form.gatherNum_chuyu*240,
			// 			"gatherNum": this.form.gatherNum_chuyu,
			// 			"unit":"BUCKET"
			// 		})
			// 	}
			// 	if(this.form.gatherNum_jianzhu) {
			// 		params.rubbishEntityList.push({
			// 			"rubbishType":"GATHER_BUILDING",
			// 			"rubbishWeight": this.form.gatherNum_jianzhu*1000,
			// 			"gatherNum": this.form.gatherNum_jianzhu,
			// 			"unit":"TON"
			// 		})
			// 	}
			// 	this.loading=true
			// 	gatherSave(params).then(res=>{
			// 		if(res.status == 200) {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'none'
			// 			})
			// 			setTimeout(()=>{
			// 				uni.navigateBack()
			// 			},300)
			// 		} else {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: 'none'
			// 			})
			// 		}
			// 		this.loading= false
			// 	})
			// },
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100vh;
		padding: 0;
		background: #F5F5F5;
		display: flex;
		flex-direction: column;
		.content-form{
			flex: 1;
			overflow-y: scroll;
		}
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
		.form-data{
			padding: 0 30upx;
			margin-bottom: 20upx;
			background-color: #fff;
		}
		.qyImg{
			padding: 40upx ;
		}
		.info-main {
			margin-top: 14upx;
			border-radius: 12upx;
			background-color: #fff;
			display: flex;
			.location-icon {
				padding-left: 10upx;
				vertical-align: sub;
			}
			.photograph-camera {
				border: 2upx dashed #bfbfbf;
				border-radius: 12upx;
				width: 140upx;
				height: 140upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.camera-btn{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999999;
				font-size: 24upx;
			}
			.photograph-con {
				margin: 0 20upx;
				width: 140upx;
				height: 140upx;
				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;
				}
			}
		}
		.btns{
			padding: 30upx 30upx 50upx;
			background-color: #fff;
		}
	}
</style>
