<template>
	<view class="rectificationReply">
		<headers class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				整改回复
			</view>
		</headers>
		<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
			<view class="reply-form">
				<view class="b-bottom">
					<view class="form-item flex">
						<view class="form-lable"><text>整改人</text></view>
						<view class="form-text">
							<text>{{userName}}</text>
						</view>
					</view>
				</view>
				
				<view class="b-bottom">
					<view class="form-item flex f-column a-start">
						<view class="form-lable"><text>整改内容</text></view>
						<view class="form-textarea">
							<textarea @blur="bindTextAreaBlur"/>
						</view>
					</view>
				</view>
				
				<view class="form-item flex f-column a-start">
					<view class="form-lable"><text>图片</text></view>
					<view class="uni-form-input imgBox_wrap">
						<view class="addImgBox" @click="uploadImg" v-if="replyForm.imgFileList.length<5">
							<image src="/static/safeMange/upload_image.png" class="icon-add" color="#F56C6C"></image>
						</view>
						<view class="imgBox" v-show="replyForm.imgFileList.length>0" v-for="(item,index) in replyForm.imgFileList" :key="index">
							<image :src="url_config+'image/'+item.url" class="img"
								@click="previewImage(url_config+'image/'+item.url)"></image>
							<view @click="deleteImg(item,1)" class="deleteImg">
								<image src="/static/safeMange/close_icon.png" color="#F56C6C"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="submit-btn" @click="submitForm">提交</view>
	</view>
</template>

<script>
	import headers from '../../../components/headers/headers.vue'
	export default{
		data(){
			return{
				statusBarHeight: 0,
				replyForm:{
					imgFileList:[],
					content: ""
				},
				userId: "",
				userName: ""
			}
		},
		components:{
			headers
		},
		onShow(){
			this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
			this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
			this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName
		},
		methods:{
			bindTextAreaBlur(e){
				this.replyForm.content = e.detail.value
			},
			//上传附件
			uploadImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.replyForm.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.replyForm.imgFileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.replyForm.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.replyForm.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}
			
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			
			submitForm(){
				let data = {
					createUser: this.userId,
					fileUrl: "",
					inspectId: "",
					additionalRemarks: this.replyForm.content,
					status: 2,
					type: 1
				}
				let arr = []
				this.replyForm.imgFileList.forEach(item=>{
					arr.push(item.url)
				})
				data.fileUrl = arr.join(",")
				if(uni.getStorageSync('detailData')){
					data.inspectId = uni.getStorageSync('detailData').id
				}
				console.log(this.replyForm, uni.getStorageSync('detailData'), data)
				let _this = this
				this.sendRequest({
					url: 'xmgl/hiddenDangerRectifyRecord/add',
					method: 'post',
					data: data,
					success: (res) => {
						if(res.code == 200){
							uni.showToast({
								title:'保存成功'
							})
							// _this.restForm()
							uni.redirectTo({
								 url: './addExamine?type=5'
							});
						}
						console.log(res.result)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.rectificationReply{
	height: 100%;
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.smallHeight{
		height: 100%;
		box-sizing: border-box;
		background: #F6F6F6;
	}
	.reply-form{
		background: #fff;
		padding-bottom: 20rpx;
		.b-bottom{
			border-bottom: 2rpx solid #f0f0f0;
		}
		.form-item{
			padding: 36rpx 32rpx;
			line-height: 36rpx;
			.form-lable{
				color: #F56C6C;
				white-space: nowrap;
				/deep/span{
					color: #000;
				}
			}
			.form-text{
				color: #9899A2;
			}
			.form-textarea{
				width: 100%;
				margin-top: 20rpx;
				box-sizing: border-box;
				height: 160rpx;
				border: 1px dashed #EAEAEA;
				border-radius: 10rpx;
				overflow: auto;
				/deep/uni-textarea{
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					background: #FAFAFA;
					padding: 20rpx 32rpx;
					box-sizing: border-box;
					.uni-textarea-compute{
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
			}
		}
		.flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.f-column{
			flex-direction: column;
		}
		.a-start{
			align-items: flex-start;
		}
		.imgBox_wrap {
			display: flex;
			flex-wrap: wrap;
			margin-top: 18rpx;
			width: 75%;
		}
		
		.imgBox {
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 16rpx;
		
			.img {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		
			.deleteImg {
				position: absolute;
				right: -12rpx;
				top: -18rpx;
				uni-image{
					width: 20rpx;
					height: 20rpx;
				}
			}
		
		}
		
		.addImgBox {
			border: 1px solid rgba(42, 43, 91, 0.1);
			background-color: #f6f5f8;
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			font-size: 24rpx;
			margin-right: 12rpx;
			uni-image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.submit-btn{
		width: 100%;
		height: 96rpx;
		background: #409EFF;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		line-height: 96rpx;
	}
}
</style>
