<template>
	<page-meta :page-font-size="$store.state.vuex_fontsize+'px'" :root-font-size="$store.state.vuex_fontsize+'px'"></page-meta>
	<view>
		<view class="title-box" v-if="detail!='' && isOther==false">{{detail.children[classIndex].name}}</view>
		<view class="title-box" v-else>其他情况</view>
		<view class="content-box" v-if="detail!=''">
			<view class="content-name">
				{{(1+parseInt(classIndex2))+'. '+detail.children[classIndex].children[classIndex2].name}}
			</view>
			<view class="content-content">
				{{detail.children[classIndex].children[classIndex2].content}}
			</view>
		</view>

		<view class="problem-top-box">
			<view class="problem-title" style="margin-left: 15px;">发现问题</view>
			<!-- 	<view class="jc-one-btns">
				<u-icon class="jc-one-icon" size="18" name="checkmark-circle" color="rgb(96, 98, 102)"
					@click="noProblem"></u-icon>
				<u-icon class="jc-one-icon" size="18" name="warning-fill" color="#F56C6C"
					style="margin-left:100%">
				</u-icon>
			</view> -->
		</view>

		<view class="problem-box" v-for="(itemForm,index) in form" :key="index">

			<view class="problem-form-box">
				<view class="delDiv">
					<u-icon v-if="index!=0" name="minus-circle" color="#F56C6C" size="22" class="delBtn"
						@click="delProblem(index)"></u-icon>
				</view>
				<u--form labelPosition="left" :model="form[index]" :ref="'uForm'+index" :rules="rules">
					<u-form-item label="现场情况" prop="remark" borderBottom labelWidth="70">
						<u--input v-model="form[index].remark" border="none"></u--input>
					</u-form-item>
					<u-form-item v-if="isShow()" label="责任人" prop="responsiblePerson" borderBottom labelWidth="70">
						<u--input v-model="form[index].responsiblePerson" border="none"></u--input>
					</u-form-item>
					<u-form-item label="照片" prop="photo" :ref="'upLoad'+index" labelWidth="70">
						<u-upload :fileList="form[index].img" @afterRead="afterRead(index,$event)"
							@delete="deletePic(index,$event)" multiple :maxCount="9">
						</u-upload>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="problem-add-box" @click="addProblem">+ 添加问题</view>
		<view style="display:flex;">
			<u-button type="primary" text="确定"
				style="margin: 30px auto; width: 30%;background-color:#00b27b;border-color:#00b27b;"
				@click="submiProblem"></u-button>
			<u-button type="default" plain text="取消" style="margin: 30px auto; width: 30%;" @click="noProblem">
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../config.js'
	import {
		getToken
	} from '@/utils/auth'
	import {
		gethandbookInfo
	} from '@/api/handbook.js'
	import auth from "@/plugins/auth.js"
	export default {
		data() {
			return {
				id: "", // 页面id 
				tid: "", // 子记录id 
				address: "", // 地图页面的地址
				otherUser: "", // 同行人
				projectName: "", // 工程名称
				form: [],
				rules: {
					'remark': {
						type: 'string',
						required: true,
						message: '请填写现场情况',
						trigger: ['blur', 'change']
					},
					'responsiblePerson': {
						type: 'string',
						required: true,
						message: '请填写责任人',
						trigger: ['blur', 'change']
					},
				},
				formTem: {
					indexId: "",
					type: '1',
					responsiblePerson: "",
					remark: "",
					img: [],
				},
				fileList1: [],
				detail: "",
				classIndex: "",
				classIndex2: "",
				key: "",
				isOther: false,
			}
		},
		// onBackPress(options) {
		// 	if (options.from === 'navigateBack') {
		// 		uni.showModal({
		// 			title: '提示',
		// 			content: '确定要退出吗？',
		// 			success: function(res) {
		// 				if (res.confirm) {
		// 					// 用户点击了确定，正常进行返回行为
		// 					return true;
		// 				} else if (res.cancel) {
		// 					// 用户点击了取消，不执行返回行为
		// 					return false;
		// 				}
		// 			}
		// 		});
		// 	}
		// 	// 如果不是 navigateBack 触发的返回，比如导航栏的返回按钮或者系统返回按钮，则不会阻止默认行为
		// 	return false;
		// },
		onLoad(option) {
			if (option.isOther == 1) {
				this.isOther = true;
				this.otherInit();
			} else {
				this.id = option.id;
				this.classIndex = option.classIndex;
				this.classIndex2 = option.classIndex2;
				this.gethandbookInfo(this.id);
			}





		},
		methods: {
			isShow() {
					console.log(auth.hasPermi('system:config:showResponsiblePerson'));
				return auth.hasPermi('system:config:showResponsiblePerson');
			},
			beforeRouteLeave(to, from, next) {
				// 在这里编写你离开当前页面前需要执行的操作
				// 例如：提示用户是否确认离开
				uni.showModal({
					title: '提示',
					content: '您确定要离开此页面吗？',
					success: function(res) {
						if (res.confirm) {
							// 用户点击确定，通过next()方法继续路由跳转
							next();
						} else if (res.cancel) {
							// 用户点击取消，不执行路由跳转
							// 不调用next()方法，即不进行路由跳转
						}
					}
				});
			},
			gethandbookInfo(id) {
				this.key = this.classIndex + '_' + this.classIndex2;

				gethandbookInfo(id).then(res => {
					console.log(this.$store.getters.problemList, this.key);
					this.detail = res.data;

					this.formTem.indexId = this.detail.children[this.classIndex].children[this.classIndex2].id;

					if (this.$store.getters.problemList.hasOwnProperty(this.key)) {
						if (this.$store.getters.problemList[this.key].length > 0) {
							this.form = this.$store.getters.problemList[this.key];
						} else {
							this.form = [];
							this.form.push({
								...this.formTem
							});
						}

					} else {
						this.form = [];
						this.form.push({
							...this.formTem
						});

					}



				})
			},
			otherInit() {
				this.key = 'other';
				this.formTem.indexId = '1';
				if (this.$store.getters.problemList.hasOwnProperty(this.key)) {
					this.form = this.$store.getters.problemList[this.key];
				} else {
					this.form = [];
					this.form.push({
						...this.formTem
					});
				}




			},

			addProblem() {
				this.formTem.img = [];
				this.form.push({
					...this.formTem
				});

			},
			delProblem(index) {
				this.form.splice(index, 1);
			},
			noProblem(index) {
				let flag = 0;
				this.form.forEach(item => {
					if (item.remark != "" && item.remark != null) {
						uni.$u.toast('现场情况不能为空')
						flag = 1;
					}
				
				})
				
				if (flag == 1) {
					uni.showModal({
						title: '提示',
						content: '是否清除问题？',
						success:  (res)=> {
							if (res.confirm) {
								this.$store.commit('SET_PL', {
									key: this.key,
									value: []
								})
								uni.navigateBack({
									delta: 1
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					this.$store.commit('SET_PL', {
						key: this.key,
						value: []
					})
					uni.navigateBack({
						delta: 1
					})
				}
				
				
				
				
				
				
			},
			submiProblem() {
				let flag = 0;
				this.form.forEach(item => {
					if (item.remark == "" || item.remark == null) {
						uni.$u.toast('现场情况不能为空')
						flag = 1;
					}

				})

				if (flag == 1) {
					return false;
				}

				this.$store.commit('SET_PL', {
					key: this.key,
					value: this.form
				})
				uni.navigateBack({
					delta: 1
				})

				// console.log(this.$refs['uForm'+0]);
				// for(let i=0; i<this.form.length;i++){
				// 	this.$refs['uForm'+i].validate().then(res => {
				// 		uni.$u.toast('校验通过')
				// 	}).catch(errors => {
				// 		uni.$u.toast('校验失败')
				// 	})
				// }


				// console.log(this.form);
			},




			// 删除图片
			deletePic(index, event) {
				this.form[index].img.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(index, event) {
				console.log(index, event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form[index].img.length
				lists.map((item) => {
					this.form[index].img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)

					console.log("result>>", result);


					let item = this.form[index].img[fileListLen]
					this.form[index].img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + getToken()
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							if (res.data) {
								let imgUrl = JSON.parse(res.data).fileName;
								setTimeout(() => {
									resolve(imgUrl)
								}, 1000)
							}


						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		margin: 10px;
		min-height: 38px;
		overflow: auto;
		display: flex;
		font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 19px;
		padding: 5px;
	}

	.content-box {
		margin: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(242, 242, 242);
		box-sizing: border-box;
		box-shadow: rgba(102, 102, 102, 0.35) 0px 0px 5px;
		background: #ffffff;
		padding: 5px;

		.content-name {
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 16px;
			color: #000000;
			text-align: left;
			line-height: 28px;
		}

		.content-content {
			background: inherit;
			background-color: rgba(255, 255, 255, 1);
			box-sizing: border-box;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(228, 228, 228, 1);
			box-shadow: none;
			font-size: 14px;
			color: #000000;
			text-align: left;
			line-height: 20px;
			padding: 5px;
		}
	}

	.problem-top-box {
		display: flex;
		align-items: center;

		.problem-title {
			font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
			font-weight: bold;
			font-style: normal;
			font-size: 16px;
			color: rgb(217, 0, 27);
			text-align: left;
			line-height: 28px;
		}

		.jc-one-btns {
			display: flex;
			align-items: center;
			margin-left: 50%;
		}
	}

	.problem-box {
		margin: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(242, 242, 242);
		box-sizing: border-box;
		box-shadow: rgba(102, 102, 102, 0.35) 0px 0px 5px;
		background: #ffffff;
		padding: 5px;



		.problem-form-box {
			position: relative;
		}
	}

	.problem-add-box {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c1c1c1;
		font-family: 'Arial Normal', 'Arial', sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 13px;
		letter-spacing: normal;
		margin: 10px;
		border-width: 1px;
		border-style: solid;
		border-color: #ffffff;
		box-sizing: border-box;
		box-shadow: #ffffff 0px 0px 5px;
		background: #ffffff;
		border-radius: 8px;
		padding: 10px;
	}

	.delDiv {
		display: flex;
		justify-content: end;

		.delBtn {
			margin-top: 8px;
			margin-right: 8px;
		}
	}
	::v-deep .u-button__text{
		font-size:14px !important;
	}
</style>