<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				{{pageTitle}}
			</view>
		</headers>
		<view class="formBox">
			<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="form.inspectContent"
						 placeholder="请输入"></textarea>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>检查位置
					</view>
					<view class="uni-form-input">
						<input class="uni-input" placeholder-class="cl" name="inspectPlace" @input='changeInput' :value="form.inspectPlace" placeholder="请输入" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label" style="padding-left: 12px; box-sizing: border-box;">
						附件
					</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 class="uni-form-item">
					<view class="uni-form-label" style="padding-left: 12px; box-sizing: border-box;">
						是否需要整改
					</view>
					<switch :checked="form.isRectify" @change="switchChange" />
				</view>
				<view class="uni-form-item" v-if="form.isRectify">
					<view class="uni-form-label">
						<text class="star">*</text>整改人
					</view>
					<view class="uni-form-input">
						<picker @change="bindPickerChange" :value="selectIndex" :range="personList" range-key="workerName">
							<view class="uni-input uni-select cl" v-if="selectIndex==null">
								请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{personList[selectIndex].workerName}}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>



				<button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
				<button class="btn deleteBtn" v-show="!isAdd" @click="deleteFn">删除</button>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: '新增巡检',
				projectDetail: {},
				personList: [],
				form: {
					isRectify: true,
					inspectContent: "",
					imgUrl: "",
					inspectPlace: "",
					inspector: "",
					rectifyPeople: "", //整改人
				},
				selectIndex: null,
				fileList: [],
				isAdd: true,
			}
		},

		onLoad(options) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
			this.getPersonList();

		},
		mounted() {


		},
		methods: {
			//获取整改人列表
			getPersonList() {
				let that = this;
				console.log(that.projectDetail)
				this.sendRequest({
					url: 'xmgl/systemUser/getProjectChilderSystemUserList',
					method: 'post',
					data: {
						projectSn: that.projectDetail.projectSn
					},
					success: res => {
						this.personList = res.result;
					}
				})
			},
			
			//输入内容
			changeTextarea(e){
				this.form.inspectContent = e.detail.value;
			},
			//输入位置
			changeInput(e){
				this.form.inspectPlace = e.detail.value;
			},
			
			//是否需要整改
			switchChange(e) {
				this.form.isRectify = e.detail.value;
				if (!e.detail.value) {
					this.selectIndex = null;
				}
			},
			//整改人选择
			bindPickerChange(e) {
				console.log(e)
				this.selectIndex = 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) {
				let data = JSON.parse(JSON.stringify(this.form));
				console.log(data)
				if(data.inspectContent==''){
					uni.showToast({
					    title: '请输入检查内容',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				if(data.inspectPlace==''){
					uni.showToast({
					    title: '请输入检查位置',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				
				// if(this.fileList.length==0){
				// 	uni.showToast({
				// 	    title: '请上传附件',
				// 	    duration: 2000,
				// 		icon:"none"
				// 	});
				// 	return
				// }
				if(data.isRectify && this.selectIndex==null){
					uni.showToast({
					    title: '请选择整改人',
					    duration: 2000,
						icon:"none"
					});
					return
				}
				
				data.rectifyPeople = data.isRectify?this.personList[this.selectIndex].userId:'';
				data.imgUrl = this.fileList.length>0?JSON.stringify(this.fileList):'';
				data.isRectify = data.isRectify?0:1;
				data.projectSn = this.projectDetail.projectSn;
				data.inspector = JSON.parse(uni.getStorageSync('userInfo')).userId;
				
				
				this.sendRequest({
					url:'xmgl/inspectionRecord/add',
					method:'post',
					data:data,
					success:res=>{
						if(res.code==200){
							uni.showToast({
								title:'新增成功',
								duration:2000,
							})
							uni.navigateBack({})
						}
					}
				})
				
			},

			deleteFn() {

			},
				
		}
	}
</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;
		}
	}

	.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: calc(100% - 32px);
		border-radius: 10px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 90px;
	}
</style>
