<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="gatherNum_huishou" label="可回收物:">
							<u-input :disabled="isView" @input="numberToFixed('gatherNum_huishou',2,999999)" type="number" placeholder="请输入" v-model="form.gatherNum_huishou" />
							<text slot="right" style="color: #000000;">KG</text>
						</u-form-item>
						<u-form-item prop="gatherNum_harm" label="有害垃圾:" >
							<u-input :disabled="isView" @input="numberToFixed('gatherNum_harm',2,999999)" placeholder="请输入" type="number" v-model="form.gatherNum_harm" />
							<text slot="right" style="color: #000000;">KG</text>
						</u-form-item>
						<u-gap height="20" bg-color="#f5f5f5"></u-gap>
						<u-form-item prop="gatherNum_chuyu" label="厨余垃圾:" >
							<u-input :disabled="isView" @input="numberToFixed('gatherNum_chuyu',2,999999)" placeholder="请输入" type="number" v-model="form.gatherNum_chuyu" />
							<text slot="right" style="color: #000000;">L(约{{form.gatherNum_chuyu*1}}KG)</text>
						</u-form-item>
						<u-form-item prop="gatherNum_other" label="其他垃圾:" >
							<u-input :disabled="isView" @input="numberToFixed('gatherNum_other',2,999999)" type="number" placeholder="请输入" v-model="form.gatherNum_other" />
							<text slot="right" style="color: #000000;">L(约{{form.gatherNum_other*1}}KG)</text>
						</u-form-item>
						<u-gap height="20" bg-color="#f5f5f5"></u-gap>
						<u-form-item prop="gatherNum_jianzhu" label="建筑垃圾:" >
							<u-input :disabled="isView" @input="numberToFixed('gatherNum_jianzhu',2,999999)" placeholder="请输入" type="digit" v-model="form.gatherNum_jianzhu" />
							<text slot="right" style="color: #000000;">KG</text>
						</u-form-item>
						<u-gap height="20" bg-color="#f5f5f5"></u-gap>
						<u-form-item prop="remarks" label="信息备注:">
							<u-input :disabled="isView" placeholder="请输入" v-model="form.remarks" :maxlength="30" class="receiveAddress"  height="0" auto-height :clearable="false"></u-input>
						</u-form-item>
				</u-form>
			</view>
			<!-- <view class="form-data remark">
				<text>信息备注</text>
				<textarea :disabled="isView" :auto-height="true" :maxlength="30" v-model="form.remarks" class="receiveAddress" placeholder="请输入" />
			</view> -->
			<view class="form-data qyImg">
				<text>清运照片</text>
				<view class="info-main">
					<view v-if="photograph.length<3 && !isView" class="camera-btn">
						<view @click="goPhotograph" class="photograph-camera">
							<u-icon name="camera" color="#bfbfbf" size="60" ></u-icon>
						</view>
						<view >
							(最多3张)
						</view>
						<view >
							(每张最大不超过10M)
						</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="content-btn"> 
			<u-button v-if="isView" @click="isView = false" class="submitBtn" type="waring" shape="circle">修改</u-button>
			<u-button v-else @click="submit" :loading="loading" class="submitBtn" type="success" shape="circle">提交</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 {numberToFixed,saveImgToAliOss} from '@/libs/tools.js'
	export default {
		components: {
			uniPopup,uniPopupDialog
		},
		data() {
			return {
				title:'',
				loading:false, // 提交按钮加载圈
				photograph: [], //  图片路径
				form: {
					gatherNum_huishou: '',
					gatherNum_harm: '',
					gatherNum_other: '', // 其它垃圾
					gatherNum_chuyu: '', // 厨余垃圾
					gatherNum_jianzhu: '', // 建筑垃圾
					remarks: '' // 备注
				},
				isView: false ,// 是否是查看详情
				itemId:''
			};
		},
		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
			  })
			},
			// 获取详情数据
			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')
						const d = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_HARM')
						const e = res.data.gatherRubbishList.find(item=>item.rubbishType=='GATHER_RECYCLING')
						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.gatherNum_harm= d ? d.gatherNum.toString() : '0'
						this.form.gatherNum_huishou= e ? e.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(){
				if((!this.form.gatherNum_huishou ||this.form.gatherNum_huishou==0) && (!this.form.gatherNum_harm ||this.form.gatherNum_harm==0) &&(!this.form.gatherNum_other ||this.form.gatherNum_other==0)  && (!this.form.gatherNum_chuyu || this.form.gatherNum_chuyu==0) && (!this.form.gatherNum_jianzhu || this.form.gatherNum_jianzhu==0)) {
					uni.showToast({
						title: '请至少输入一项垃圾分类的数量！',
						icon: 'none'
					})
					return false
				} else {
					this.$refs.openModal.open()
				}
			},
			// 确认提交
			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_huishou) {
					params.rubbishEntityList.push({
						"rubbishType":"GATHER_RECYCLING",
						"rubbishWeight": this.form.gatherNum_huishou*1000,
						"gatherNum": this.form.gatherNum_huishou,
						"unit":"KILOGRAM"
					})
				}
				if(this.form.gatherNum_harm) {
					params.rubbishEntityList.push({
						"rubbishType":"GATHER_HARM",
						"rubbishWeight": this.form.gatherNum_harm*1000,
						"gatherNum": this.form.gatherNum_harm,
						"unit":"KILOGRAM"
					})
				}
				if(this.form.gatherNum_other) {
					params.rubbishEntityList.push({
						"rubbishType":"GATHER_OTHER",
						"rubbishWeight": this.form.gatherNum_other*1000,
						"gatherNum": this.form.gatherNum_other,
						"unit":"LITER"
					})
				}
				if(this.form.gatherNum_chuyu) {
					params.rubbishEntityList.push({
						"rubbishType":"GATHER_KITCHEN",
						"rubbishWeight": this.form.gatherNum_chuyu*1000,
						"gatherNum": this.form.gatherNum_chuyu,
						"unit":"LITER"
					})
				}
				if(this.form.gatherNum_jianzhu) {
					params.rubbishEntityList.push({
						"rubbishType":"GATHER_BUILDING",
						"rubbishWeight": this.form.gatherNum_jianzhu*1000,
						"gatherNum": this.form.gatherNum_jianzhu,
						"unit":"KILOGRAM"
					})
				}
				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;
		.receiveAddress{
			width: 100%;
			line-height: 1.5em;
			box-sizing: border-box;
			font-style: normal;
		}
		.content-form{
			flex:1;
			overflow-y: scroll;
		}
		.form-data{
			// padding: 40upx;
			margin-bottom: 20upx;
			background-color: #fff;
			.u-form-item.data-v-5e7216f1 {
				padding:20rpx 40rpx;
			}
		}
		.u-form-item{
			 padding: 0 40upx;
		}
		.remark{
			padding: 40upx ;
		}
		.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;
				}
			}
		}
		.content-btn{
			background-color: #fff;
			padding: 40rpx;
		}
		.submitBtn{
			font-size: 32upx;
			color: #fff;
			border-radius: 50upx;
		}
	}
</style>
