<template>
	<view class="deetailPage">
		<headers :showBack="true">
			<view class="headerName">
				进度管理系统
			</view>
		</headers>
		<view class="content">
			<view class="title">
				工程进度
			</view>
			<view class="b-bottom2">
				<view class="name"><text class="mustStar">*</text>上报时间</view>
				<view class="inputFrom">
					<dateTimePiccker fields="minute" :defaultValue=form.uploadDate
						@change="bindPickerChange($event,'startTime')" class="dateTimePiccker">
						<view class="uni-input uni-select cl" v-if="form.uploadDate===''">
							请选择 <image class="icon-right" src="/static/icon-right-ccc.png"></image>
						</view>
						<view class="uni-input uni-select" v-else>{{form.uploadDate}}
							<image class="icon-right" src="/static/icon-right.png"></image>
						</view>
					</dateTimePiccker>
				</view>
			</view>
			<view class="b-bottom" style="display: block;">
				<view class="name"><text class="mustStar">*</text>上报进度</view>
				<view class="inputFrom" style="width: 100%;margin-left: 0px;">
					<slider :value="form.progressRatio" @change="sliderChange" min="0" max="100" show-value />
				</view>
			</view>
			<view class="b-bottom">
				<view class="name">反馈内容</view>
				<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
					@input='supplementTextarea' :value="form.feedbackContent" placeholder="多行输入"></textarea>
			</view>
			<view class="b-bottom" style="border-bottom: 2rpx solid #f0f0f0;">
				<view class="name">上传图片</view>
				<view class="uni-form-input imgBox_wrap">
					<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList" :key="index">
						<image :src="url_config+'image/'+item.url" class="img"
							@click="previewImage(url_config+'image/'+item.url)"></image>
						<view @click="deleteImg(item)" style="margin: 5px;" class="deleteImg">×</view>
					</view>
					<view class="addImgBox" @click="uploadImg()" v-if="imgFileList.length<5">
						<image src="/static/icon-add.png" class="icon-add"></image>
					</view>
				</view>
			</view>
			<view class="title">
				材料用量
			</view>
			<view class="martNum" v-for="(item, index) in materialList" :key="index">
				<view class="name">{{item.name}}</view>
				<input type="number" placeholder-class="cl" class="inpuStyle  uni-select cl" :value="item.actualUsage"
					placeholder="请输入" @input='eventData($event,index)' />
				<view class="unit">{{item.unit}}</view>
			</view>
			<view class="addProgess" @click="addSaveBtn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import dateTimePiccker from '@/components/dateTimePicker/index.vue'

	export default {
		components: {
			dateTimePiccker
		},
		data() {
			return {
				form: {
					uploadDate: '',
					progressRatio: 0,
					feedbackContent: '',
				},
				imgFileList: [],
				projectSn: '',
				materialList: [],
				id: ''
			}
		},
		onLoad(option) {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.id = option.id
			console.log('id有了吗', this.id);
		},
		onShow() {
			this.getList()
		},
		methods: {
			//获取材料用量列表
			getList() {
				let data = {
					projectSn: this.projectSn,
					taskProgressId: this.id,
				}
				this.sendRequest({
					url: 'xmgl/taskProgressMaterialRel/detailList',
					method: 'get',
					data,
					success: res => {
						if (res.result.length > 0) {
							console.log('获取材料用量列表', res);
							this.materialList = res.result
							this.getDetail()
						}

					}
				})
			},

			// /xmgl/taskProgressContent/list?lang=zh_CN&taskProgressId=1722560016547635200
			//获取任务
			getDetail() {
				let data = {
					taskProgressId: this.id,
				}
				this.sendRequest({
					url: 'xmgl/taskProgressContent/list',
					method: 'get',
					data,
					success: res => {
						if (res.result.length > 0) {
							console.log('获取上传进度详情-----', res);
							this.form.uploadDate = res.result[0].uploadDate
							this.form.progressRatio = res.result[0].progressRatio
							this.form.feedbackContent = res.result[0].feedbackContent
							console.log('获取上传进度详情+++++', this.form);
							if (res.result[0].image !== "") {
								this.imgFileList = JSON.parse(res.result.image)
							}
						}else {
							this.selectNowDate()
						}

					}
				})
			},
			sliderChange(e) {
				this.form.progressRatio = e.detail.value
			},
			bindPickerChange(e, type) {
				if (type == 'startTime') {
					this.form.uploadDate = e.f3;
				}
			},
			//反馈内容
			supplementTextarea(e) {
				this.form.feedbackContent = e.detail.value
			},
			//材料用量
			eventData(e, index) {

				this.materialList[index].actualUsage = e.detail.value;
				console.log('输入的数据', this.materialList[index].actualUsage);

			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			uploadImg(type) {
				var that = this
				this.$chooseImage({
					count: 5 - that.imgFileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.imgFileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
							fileArr.forEach((item, index) => {
								if (item.url == val.url) {
									fileArr.splice(index, 1)
								}
							})
							that.imgFileList = fileArr;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//新增保存
			addSaveBtn() {
				if (this.form.uploadDate == "") {
					uni.showToast({
						title: "请选择上报时间",
						icon: 'error'
					})
					return
				}
				let data = JSON.parse(JSON.stringify(this.form));
				data.projectSn = this.projectSn;
				data.taskProgressId = String(this.id)
				data.image = JSON.stringify(this.imgFileList)
				data.typeDataList = this.materialList
				console.log('新增提交的数据', data);
				this.sendRequest({
					url: 'xmgl/taskProgressContent/add',
					method: 'post',
					data: data,
					success: (res) => {
						console.log(res)
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 1000)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			},
			selectNowDate() {
				let date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hours = date.getHours(), //获取当前小时数(0-23)
					minutes = date.getMinutes(), //获取当前分钟数(0-59)
					seconds = date.getSeconds()
				month >= 1 && month <= 9 ? (month = '0' + month) : ''
				day >= 0 && day <= 9 ? (day = '0' + day) : ''
				hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
				minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
				seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
				let timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
				// console.log(timer)
				this.form.uploadDate = timer
			},
		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		font-size: 28rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			margin: 20rpx 0 30rpx 4rpx;
		}

		.b-bottom2 {
			display: flex;
			margin-bottom: 30rpx;

			.name {
				width: 20%;
			}

			.inputFrom {
				width: 80%;
				margin-left: 20rpx;
			}
		}

		.b-bottom {
			border-top: 2rpx solid #f0f0f0;
			display: flex;
			height: 200rpx;
			line-height: 80rpx;

			.inputFrom {
				width: 80%;
				margin-left: 40rpx;
			}

			.name {
				width: 20%;
			}

			.icon-right {
				margin-left: 16rpx;
				width: 16rpx;
				height: 32rpx;
			}


		}

		.addProgess {
			width: 50%;
			background: #5181f6;
			text-align: center;
			margin: auto;
			height: 60rpx;
			color: #fff;
			border-radius: 40rpx;
			line-height: 60rpx;
			margin-top: 110rpx;
			font-size: 28rpx;
		}

	}

	::v-deep .uni-slider-thumb {
		width: 15px !important;
		height: 13px !important;
		margin-top: -7px !important;
	}

	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		width: 75%;
	}

	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 60px;
		height: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;

		.icon-add {
			width: 18px;
			height: 18px;
		}
	}

	.deleteImg {
		position: absolute;
		right: -3px;
		top: -18px;
		font-size: 16px;
		color: #fff;
	}

	.imgBox {
		width: 60px;
		height: 60px;
		display: inline-flex;
		position: relative;
		margin-right: 15px;
		margin-bottom: 8px;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

		.deleteImg {
			position: absolute;
			right: -3px;
			top: -18px;
			font-size: 16px;
			color: #fff;
		}

	}

	.textarea {
		width: calc(79% - 32px);
		padding: 16rpx 30rpx;
		box-sizing: border-box;
	}

	.martNum {
		display: flex;
		align-items: center;
		margin: 20rpx 20rpx 0 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
		padding-bottom: 20rpx;

		.name {
			width: 15%;
			// white-space: nowrap;
		}

		.unit {
			width: 10%;
			margin-left: 80rpx;
			text-align: center;
			white-space: nowrap;
		}
	}

	::v-deep .uni-input-input {
		color: #000 !important;
	}

	.mustStar {
		color: red;
	}
</style>