<template>
	<view>
		<headers :showBack="true">
			<view class="headerName">
				{{pageTitle}}
			</view>
		</headers>
		<view class="content">
			<form @submit="formSubmit">
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>回复内容
					</view>
					<view class="uni-form-input">
						<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent" @input='changeTextarea'
						 :value="content" placeholder="请输入"></textarea>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label" >
						<text class="star">*</text>附件
					</view>
					<view class="uni-form-input imgBox_wrap">
						<view class="imgBox" v-show="fileList.length>0" v-for="(item,index) in fileList" :key="index">
							<image :src="url_config+'image/'+item.url" class="img"></image>
							<uni-icons @click="deleteImg(item)" class="deleteImg" type="clear" size="24"></uni-icons>
						</view>
						<view class="addImgBox" @click="selectImg" v-if="fileList.length<5">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>
				</view>
				<view v-if="type==1" class="flex btn_wrap">
					<button class="deleteBtn" @click="deleteFn">取消</button>
					<button form-type="submit" type="primary" class="submitBtn">提交</button>
				</view>
				<view v-if="type==2"  class="flex btn_wrap">
					<button class="deleteBtn" @click="audit(3)">不通过</button>
					<button form-type="submit" type="primary" class="submitBtn">通过</button>
				</view>
			</form>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '审核整改',
				type: 1, // 1 整改回复  2 审核
				stateId: '', //获取到整改单最后一个整改内容id
				id:'',
				content: '', //回复内容 
				fileList: [],
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.id = Number(option.id);
			this.stateId = Number(option.stateId),
			this.pageTitle = option.type == 1 ? '整改回复' : '审核整改'
		},

		methods: {
			//回复内容
			changeTextarea(e) {
				this.content = e.detail.value;
			},
			
			
			//上传附件
			selectImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.fileList.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.fileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val) {
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除该附件吗?',
				    success: function (res) {
				        if (res.confirm) {
							let fileArr = JSON.parse(JSON.stringify(that.fileList));
							fileArr.forEach((item, index) => {
								if (item.url == val.url) {
									fileArr.splice(index, 1)
								}
							})
							that.fileList = fileArr;
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			
			},
			//提交表单
			formSubmit(e) {
				if(this.content==''){
					uni.showToast({
						title:"请输入回复内容",
						icon:"none"
					})
					return
				}
				if(this.fileList.length==0){
					uni.showToast({
						title:"请上传附件",
						icon:"none"
					})
					return
				}
				
				if(this.type==2){
					this.audit(2)
				}else{
					this.sendRequest({
						url:'xmgl/inspectionRectifyRecord/add',
						method:'post',
						data:{
							inspectId:this.id,
							replyContent:this.content,
							replyImg:JSON.stringify(this.fileList)
						},
						success:res=>{
							if(res.code==200){
								uni.showToast({
									title:"新增整改回复成功",
									duration:2000
								})
								uni.navigateBack()
							}
						}
					})
				}
				
				
			},
			
			//审核
			audit(status){
				if(this.content==''){
					uni.showToast({
						title:"请输入回复内容",
						icon:"none"
					})
					return
				}
				if(this.fileList.length==0){
					uni.showToast({
						title:"请上传附件",
						icon:"none"
					})
					return
				}
				let data = {
					auditReplyContent: this.content,
					auditReplyImg:JSON.stringify(this.fileList),
					status:status,
					id:this.stateId,
					inspectId:this.id,
				};
				
				this.sendRequest({
					url:'xmgl/inspectionRectifyRecord/auditInspectionRectifyRecord',
					data:data,
					method:'post',
					success:res=>{
						if(res.code==200){
							uni.showToast({
								title:"审核成功"
							})
							uni.navigateBack()
						}
					}
				})
				
			},
			
			
			
			
			
			//取消
			deleteFn(){
				nuni.showModal({
					title:'提示',
					content:'确定取消编辑整改回复吗？',
					 success: function (res) {
					        if (res.confirm) {
					           uni.navigateBack({})
					        } else if (res.cancel) {
					        }
					    }
					})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.content {
		padding: 10px 30rpx 0;
		box-sizing: border-box;

	}
	.uni-form-label{
		margin:10px 0;
	}

	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.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: -10px;
			top: -10px;
		}
	}

	.textarea {
		width: 100%;
		border-radius: 10px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 90px;
	}
	.submitBtn{
		font-size: 32rpx;
		width: 33%;
		line-height: 40px;
		height: 42px;
		margin: 0;
	}
	.deleteBtn{
		font-size: 32rpx;
		width: 33%;
		line-height: 36px;
		height: 38px;
		margin: 0;
	}
	.btn_wrap{
		margin-top: 100px;
	}
</style>
