<template>
	<view class="container" style="padding-bottom: 60px;">
		<!--学号 -->
		<view class="form-item">
			<text class="label">学号：</text>
			<text class="uni-input">{{ stuInfo.stuNo }}</text>
		</view>

		<!--姓名 -->
		<view class="form-item">
			<text class="label">姓名：</text>
			<text class="uni-input">{{ stuInfo.studentName }}</text>
		</view>

		<!-- 性别 -->
		<view class="form-item">
			<text class="label">性别：</text>
			<text class="uni-input">{{ stuInfo.gender }}</text>
		</view>

		<!--院部 -->
		<view class="form-item">
			<text class="label">院部：</text>
			<text class="uni-input">{{ stuInfo.departmentName }}</text>
		</view>

		<!--班级 -->
		<view class="form-item">
			<text class="label">班级：</text>
			<text class="uni-input">{{ stuInfo.className }}</text>
		</view>

		<!--联系电话 -->
		<view class="form-item">
			<text class="label">联系电话：</text>
			<text class="uni-input">{{ stuInfo.phoneNumber }}</text>
		</view>

		<!--家长姓名 -->
		<view class="form-item">
			<text class="label">家长姓名：</text>
			<text class="uni-input">{{ stuInfo.fatherName }}</text>
		</view>

		<!--家长联系电话 -->
		<view class="form-item">
			<text class="label">家长联系电话：</text>
			<text class="uni-input">{{ stuInfo.fatherRelation }}</text>
		</view>
		<!-- 请假事由 -->
		<view class="form-item">
			<text class="label"> <text class="required">*</text> 请假事由：</text>
			<picker :range="politicalOptions" v-model="formData.selectedPoliticalIndex" @change="onPoliticalChange">
				<view class="select">{{ politicalOptions[formData.selectedPoliticalIndex] || '请选择请假事由' }}</view>
			</picker>
		</view>
		<!-- 请假事由说明 -->
		<view class="form-text">
			<text class="label"> <text class="required">*</text> 请假事由说明：</text>
			<view class="txt">
				<uni-forms-item>
					<uni-easyinput type="textarea" v-model="formData.deeds" maxlength="500" placeholder="输入请假事由说明" />
				</uni-forms-item>
			</view>
		</view>
		<!-- 请假时间 -->
		<view class="form-item">
			<text class="label"> <text class="required">*</text> 请假起始时间：</text>
			<view class="example-body">
				<uni-datetime-picker @change="changeDate('start',$event)" returnType="timestamp" v-model="formData.single" />

			</view>
		</view>
		<view class="form-item">
			<text class="label"> <text class="required">*</text> 请假结束时间：</text>
			<view class="example-body">
				<uni-datetime-picker @change="changeDate('end',$event)" returnType="timestamp" v-model="formData.endsingle" />
			</view>
		</view>
		<!--请假天数 -->
		<view class="form-item">
			<text class="label"> <text class="required">*</text> 请假天数：</text>
			<input v-model="formData.dataNum" class="uni-input" focus placeholder="请输入请假天数  " />
		</view>

		<!-- 目的地 -->
		<view class="form-item">
			<text class="label"> <text class="required">*</text> 目的地：</text>
			<input v-model="formData.endAddress" class="uni-input" focus placeholder="请输入目的地  " />
		</view>
		<!--详细地址 -->
		<view class="form-item">
			<text class="label"><text class="required">*</text> 详细地址：</text>
			<input v-model="formData.address" class="uni-input" focus placeholder="请输入详细地址 " />
		</view>
		<!-- 是否离桂 -->
		<view class="form-item">
			<text class="label">是否离桂:</text>
			<checkbox class="uni-input" :value="isLeaveGui!=null?isLeaveGui.toString():'0'" :checked="isLeaveGui==1?true:false"
				@click="toggleLG" />
		</view>
		<!-- 上传佐证 -->
		<view class="form-img">
			<text class="label">上传佐证：</text>
			<view class="example-body">
				<uni-file-picker @select="uploadEvidence" v-model="imgVals" @delete="onDelImg" :auto-upload="false"
					limit="9"></uni-file-picker>
			</view>
		</view>
		<!--协议 -->
		<view class="form-item">
			安全承诺书：
			<text class="labelsafe">《广西水利电力职业技术学院安全承诺书》
			</text>
			<label>
				<checkbox :value="checkboxValue.toString()" @click="toggleCheckbox" />
			</label>
		</view>
		<!-- 签名 -->
		<view class="form-canvas">
			<text class="label">手写签字：</text>
			<view class="sign-img" v-if="signImg!=''">
				<image :src="signImg" mode=""></image>
				<text @tap="signToggle">重新签名</text>
			</view>
			<view v-else class="sign" @tap="signToggle">
				点击签名
			</view>
		</view>
		<view class="form-item">
			<text class="label">备注：</text>
			<input v-model="remark" class="uni-input" placeholder="请输入备注" />
		</view>
		<!-- 按钮 -->
		<view class="btn" v-if="type!='task'">
			<button style="background-color: red;" @click="clean">清除</button>
			<button style="background-color: #fff; color: #4097FE;border: 1px solid #4097FE;" :disabled="isSubmitting" @click="save">保存</button>
			<button :disabled="isSubmitting" @click="applyLeave()">提交申请</button>
		</view>
		<view class="btn" v-else>
			<button style="width: 100%;" :disabled="isSubmitting" @tap="resubmitTask">重新提交</button>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" style="height: 35vh;">
				<liu-signature @change="uploadSign" bgColor="#e8e8e8" lineColor="#000" :width="700"></liu-signature>
			</view>
		</uni-popup>
		<uni-popup class="safety-popup" :is-mask-click="false" ref="safetyPopup" background-color="#fff">
			<view class="popup-content">
				<view class="title">
					请假承诺书
				</view>
				<view class="content">
					<scroll-view scroll-y="true" style="height:300px;">
						<view class="txt">
							为进一步加强学生的安全教育和管理，切实维护校园安全及校园秩序，结合我校实际，学生请假外出期间就以下安全事项作如下承诺:
							<view>
								1.严格遵守国家法律法规和公民道德行为规范，健康文明生活，不赌博、不打架、不从事非法传销活动、不参与宗教迷信宣传等；不造谣、不传谣、不信谣，不做任何违法违纪行为，自觉维护良好大学生形象。
							</view>
							<view>2.自觉遵守学校规章制度，在规定允许时间内出入校园，按时返校；离开宿舍时确认断电和锁好门窗，保管好自己的贵重物品。</view>
							<view>
								3.增强安全防范意识，不轻信陌生人，注意防骗、防盗、防抢、防踩踏等，保护人身换人财产安全；不携带易燃易爆等危险品进入公共场所、不在非吸烟区吸烟，不乱扔烟头、不私拉电线，防范消防安全隐患；不买、不吃“三无”食品和野味，确保饮食卫生安全。
							</view>
							<view>4.增强安全保护意识,遵守交通规则，乘坐合法正规营运车辆；不到不明水域游泳、戏水、垂钓等。</view>
							<view>5.增强个人健康安全意识，认真履行个人“健康第一责任人”责任，自觉做好健康监测，身体出现异常情况随时向辅导员和家长报告，及时就医。</view>
							<view>6.主动与家长、辅导员保持联系，随时保持通讯畅通，并如实告知自己的情况。</view>
							<view>7.本人承诺已经认真阅读并自愿遵守上述规定，离校期间个人安全将由本人自行负责。</view>
						</view>
					</scroll-view>
					<view class="time" v-if="safetime>0">
						请阅读{{safetime}}s承诺书
					</view>
				</view>
				<view class="safety-btn">
					<button :disabled="isDisabled" @tap="closeSafePopup">我知道了</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uploadFile from "@/plugins/upload.js";
	import {
		baseUrl
	} from "@/config.js";
	import {
		calculateDays,
		convertToTimestamp
	} from "@/utils/time-calculation.js"
	import {
		editApply,
		getStuInfo,
		commonUpload,
		leaveSave,
		leaveDetail,
		addApply
	} from "@/api/applyleave/applyleave.js";
	import {
		getLeaveApplicationByProcInsId,
		complete
	} from "@/api/task.js";
	export default {
		data() {
			return {
				isSubmitting: false, //表单提交标志位
				isDisabled: true,
				safetime: 5,
				// 用户信息
				stuInfo: {},
				studID: "",
				name: "",
				courtyard: "",
				sex: '',
				classroom: "",
				phone: "",
				parent: "",
				parentPhone: "",
				selectedOptionIndex: -1, // 当前选中的奖项索引
				politicalOptions: ['因病', '因事'], // 请假选项
				beginData: '',
				endData: "",
				remark: "",
				leave: ['是', '否'],
				leaveIndex: -1,
				url: "",
				urltwo: "",
				checkboxValue: 0,
				//附件
				attachmentFile: "",
				signImg: "",
				imgVals: [],
				isLeaveGui: 0, //是否离桂
				formData: {
					selectedPoliticalIndex: "", // 当前选中的请假索引
					deeds: "",
					endsingle: "",
					single: '',
					dataNum: "",
					endAddress: "",
					address: "",
					signFile: "",
				}
			};
		},
		created() {

		},
		onLoad(option) {
			this.procInsId = option.id;
			this.taskId = option.taskId
			this.type = option.type;
			if (option.type == 'task') {
				this.getTaskDetail();
			} else {
				this.getLeaveDetail();
			}
		},
		methods: {
			toggleLG() {
				this.isLeaveGui = this.isLeaveGui === 1 ? 0 : 1;
			},
			changeDate(type, e) {
				this.formData.single = convertToTimestamp(this.formData.single);
				this.formData.endsingle = convertToTimestamp(this.formData.endsingle);
				if (type == "end") {
					this.formData.endsingle = e;
					if (this.formData.endsingle < this.formData.single) {
						uni.showToast({
							title: "时间不能早于请假开始时间",
							icon: "none"
						})
					}
					this.formData.dataNum = calculateDays(this.formData.single, this.formData.endsingle);
				} else {
					this.single = e;
					if (this.formData.endsingle < this.formData.single) {
						uni.showToast({
							title: "起始时间不能晚于结束时间",
							icon: "none"
						})
					}
					this.formData.dataNum = calculateDays(this.formData.single, this.formData.endsingle);
				}
			},
			getLeaveDetail() {
				let sdata = this.procInsId;
				leaveDetail(sdata).then(res => {
					this.stuInfo = res.data;
					this.formData.selectedPoliticalIndex = res.data.leaveType;
					this.formData.deeds = res.data.reason;
					this.formData.single = res.data.startDate;
					this.formData.endsingle = res.data.endDate;
					this.formData.dataNum = res.data.leaveDays;
					this.formData.endAddress = res.data.destination;
					this.formData.address = res.data.destinationDetails;
					this.formData.signFile = res.data.applicantSignature;
					this.attachmentFile = res.data.attachment;
					this.signImg = baseUrl + res.data.applicantSignature;
					this.remark = res.data.remark;
					this.leaveApplicationId = res.data.leaveApplicationId;
					this.isLeaveGui = res.data.leavingGx;
					console.log(this.formData);
					if (res.data.attachment != "" && res.data.attachment != null) {
						let imgs = res.data.attachment.split(',');
						this.imgVals = imgs.map(img => {
							return {
								url: baseUrl + img
							};
						})
					}
				})
			},
			getTaskDetail() {
				getLeaveApplicationByProcInsId(this.procInsId).then(res => {
					this.stuInfo = res.data;
					this.formData.selectedPoliticalIndex = res.data.leaveType;
					this.formData.deeds = res.data.reason;
					this.formData.single = res.data.startDate;
					this.formData.endsingle = res.data.endDate;
					this.formData.dataNum = res.data.leaveDays;
					this.formData.endAddress = res.data.destination;
					this.formData.address = res.data.destinationDetails;
					this.attachmentFile = res.data.attachment;
					this.signImg = baseUrl + res.data.applicantSignature;
					this.formData.signFile = res.data.applicantSignature;
					this.remark = res.data.remark;
					this.leaveApplicationId = res.data.leaveApplicationId;
					this.isLeaveGui = res.data.leavingGx;
					if (res.data.attachment != "" && res.data.attachment != null) {
						let imgs = res.data.attachment.split(',');
						this.imgVals = imgs.map(img => {
							return {
								url: baseUrl + img
							};
						})
					}

				})
			},
			// 提交申请
			applyLeave() {
				if (this.checkboxValue == 0) {
					// 如果复选框未被选中，则不允许提交
					uni.showToast({
						title: "请勾选承诺书",
						icon: "error"
					});
					return; // 阻止表单提交
				}
				if (this.signFile == '') {
					// 如果复选框未被选中，则不允许提交
					uni.showToast({
						title: "请先进行签名",
						icon: "error"
					});
					return; // 阻止表单提交
				}
				if (this.endsingle < this.single) {
					uni.showToast({
						title: "起始时间不能晚于结束时间",
						icon: "none"
					})
					return; // 阻止表单提交
				}
				//表单非空校验
				const requiredFields = [
					'selectedPoliticalIndex',
					'deeds',
					'endsingle',
					'single',
					'dataNum',
					'endAddress',
					'address'
				];
				const emptyField = requiredFields.find(field => this.formData[field] === ""||this.formData[field] ==null);
				if (emptyField) {
					uni.showToast({
						title: `请填写完必填字段`,
						icon: "none"
					})
					return;
				}
				console.log(this.formData);
				uni.showLoading({
					title: "正在提交"
				})
				let data = {
					applicantSignature: this.formData.signFile,
					attachment: this.attachmentFile,
					destination: this.formData.endAddress,
					destinationDetails: this.formData.address,
					startDate: this.formData.single,
					endDate: this.formData.endsingle,
					leaveDays: this.formData.dataNum,
					leaveType: this.formData.selectedPoliticalIndex,
					reason: this.formData.deeds,
					remark: this.remark,
					safetyPromise: 1,
					leaveApplicationId: this.leaveApplicationId,
					leavingGx:this.isLeaveGui
				}
				this.isSubmitting = true; // 设置为正在提交
				if (this.type == "task") {
					editApply(data).then(res => {
						if (res.code == 200) {
							let sData = {
								taskId: this.taskId,
								comment: "",
							}
							complete(sData).then(res => {
								console.log(res);
								if (res.code == 200) {
									uni.hideLoading();
									this.isSubmitting = false;
									uni.navigateBack({
										success: () => {
											const pages = getCurrentPages();
											if (pages.length > 0) {
									const prevPage = pages[pages.length - 2] || pages[pages.length - 1]
									if (prevPage && typeof prevPage.handleChange === 'function') {
										prevPage.handleChange(2);
										console.log('刷新已办任务数据');
									} else if (prevPage && typeof prevPage.getLeaveList === 'function') {
										prevPage.getLeaveList();
									}
											}
										}
									})
								}
							})
						} else {
							uni.showToast({
								title: "提交失败,请先填写完整内容",
								icon: "none"
							});
						}
					});
				} else {
					addApply(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: "提交成功",
								icon: "success"
							});
							this.isSubmitting = false;
							uni.navigateBack({
								success: () => {
									const pages = getCurrentPages();
									if (pages.length > 0) {
									const prevPage = pages[pages.length - 2] || pages[pages.length - 1]
										if (prevPage && typeof prevPage.getLeaveList ===
											'function') {
											prevPage.getLeaveList();
										}
									}
								}
							})
						} else {
							uni.showToast({
								title: "提交失败,请先填写完整内容",
								icon: "none"
							});
						}
					});
				}

			},

			// 重新提交任务
			resubmitTask() {
				this.applyLeave();
			},
			//上传佐证
			uploadEvidence(e) {
				uploadFile('/common/upload', e.tempFilePaths[0]).then((res) => {
					console.log(this.attachmentFile);
					if (this.attachmentFile !== "") {
						this.attachmentFile = this.attachmentFile + "," + JSON.parse(res).fileName;
					} else {
						this.attachmentFile = JSON.parse(res).fileName;
					}
					console.log(this.attachmentFile);
				})
			},
			//删除已选图片
			onDelImg(e) {
				let newImgs = this.imgVals.filter(fileName => fileName.path !== e.tempFilePath);
				newImgs = newImgs.map(img => img.url.replace(baseUrl, ''))
				newImgs = newImgs.join(",");
				this.attachmentFile = newImgs;
			},
			//上传签名
			uploadSign(e) {
				const blob = this.base64ToBlob(e);
				const fileObj = new File([blob], 'signature', {
					type: 'image/png'
				});
				const formData = new FormData();
				formData.append("file", fileObj);
				const formDataObj = this.formDataToObject(formData);
				uploadFile('/common/upload', '', formDataObj).then((res) => {
					this.formData.signFile = JSON.parse(res).fileName;
					this.signImg = baseUrl + JSON.parse(res).fileName;
					this.$refs.popup.close('center')
				})
			},
			// onPickerChange(event) {
			// 	this.selectedOptionIndex = event.detail.value;
			// },
			onPoliticalChange(event) {
				this.formData.selectedPoliticalIndex = event.detail.value;
			},
			toggleCheckbox() {
				// 切换 checkboxValue 的值
				this.checkboxValue = this.checkboxValue === 1 ? 0 : 1;
				if (this.checkboxValue) {
					this.$refs.safetyPopup.open('center')
					if (this.safetime > 0) {
						const intervalId = setInterval(() => {
							this.safetime--;
							console.log(this.safetime);
							if (this.safetime === 0) {
								clearInterval(intervalId); // 停止倒计时
								this.isDisabled = false;
							}
						}, 1000);
					}
				}
			},
			// 清空表单
			clean() {
				this.studID = "";
				this.name = "";
				this.courtyard = "";
				this.formData.selectedOptionIndex = "";
				this.classroom = '';
				this.phone = '';
				this.parent = '';
				this.parentPhone = "";
				this.formData.selectedPoliticalIndex = ""
				this.beginData = "";
				this.endData = '';
				this.formData.dataNum = '';
				this.formData.deeds = '';
				this.leaveIndex = -1;
				this.formData.endAddress = '';
				this.formData.address = '';
				this.isChecked = false;
				this.$forceUpdate(); // 强制更新组件
				this.url = ''
				localStorage.removeItem('formData');
			},
			//保存假条信息
			save() {
				if (this.checkboxValue == 0) {
					// 如果复选框未被选中，则不允许提交
					uni.showToast({
						title: "请勾选承诺书",
						icon: "error"
					});
					return; // 阻止表单提交
				}
				if (this.formData.signFile == '' || this.formData.signFile == null) {
					// 如果复选框未被选中，则不允许提交
					uni.showToast({
						title: "请先进行签名",
						icon: "error"
					});
					return; // 阻止表单提交
				}
				if (this.formData.endsingle < this.formData.single) {
					uni.showToast({
						title: "起始时间不能晚于结束时间",
						icon: "none"
					})
					return; // 阻止表单提交
				}
				//表单非空校验
				const requiredFields = [
					'selectedPoliticalIndex',
					'deeds',
					'endsingle',
					'single',
					'dataNum',
					'endAddress',
					'address'
				];
				const emptyField = requiredFields.find(field => this.formData[field] === ""||this.formData[field] ==null);
				if (emptyField) {
					uni.showToast({
						title: `请填写完必填字段`,
						icon: "none"
					})
					return;
				}
				this.isSubmitting=true;
				let data = {
					applicantSignature: this.formData.signFile,
					attachment: this.attachmentFile,
					destination: this.formData.endAddress,
					destinationDetails: this.formData.address,
					endDate: this.formData.endsingle,
					leaveDays: this.formData.dataNum,
					leaveType: this.formData.selectedPoliticalIndex,
					reason: this.formData.deeds,
					remark: this.remark,
					safetyPromise: 1,
					startDate: this.formData.single,
					leaveApplicationId: this.procInsId,
					leavingGx:this.isLeaveGui
				}

				leaveSave(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "保存成功",
							icon: "success"
						});
						this.isSubmitting=false;
						uni.navigateBack({
							success: () => {
								const pages = getCurrentPages();
								if (pages.length > 0) {
									const prevPage = pages[pages.length - 2] || pages[pages.length - 1]
									if (prevPage && typeof prevPage.handleChange === 'function') {
										prevPage.handleChange(2);
									} else if (prevPage && typeof prevPage.getLeaveList ===
										'function') {
										prevPage.getLeaveList();
									}
								}
							}
						})
					} else {
						uni.showToast({
							title: "提交失败,请先填写完整内容",
							icon: "none"
						});
					}
				});
			},
			signToggle() {
				this.$refs.popup.open('center')
			},
			closeSafePopup() {
				this.$refs.safetyPopup.close('center')
				this.safetime = 5;
			},
			base64ToBlob(base64String) {
				const byteCharacters = atob(base64String.split(',')[1]);
				const byteNumbers = new Array(byteCharacters.length);
				for (let i = 0; i < byteCharacters.length; i++) {
					byteNumbers[i] = byteCharacters.charCodeAt(i);
				}

				const byteArray = new Uint8Array(byteNumbers);
				return new Blob([byteArray], {
					type: 'application/octet-stream'
				});
			},
			formDataToObject(formData) {
				const obj = {};
				formData.forEach((value, key) => {
					obj[key] = value;
				});
				return obj;
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx;

	}

	.form-item {
		width: 95%;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: space-between;

		checkbox {
			/deep/.uni-checkbox-input.uni-checkbox-input-checked {
				background: #007aff;
			}
		}

		.label {
			flex-shrink: 0;
		}

		text:last-child {
			text-wrap: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.form-text {
		width: 95%;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ededee;
	}

	.form-img {
		width: 95%;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ededee;
	}

	.example-body {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.txt {
		margin-top: 20rpx;
	}

	.label {
		text-align: right;
		margin-right: 20rpx;
	}

	.select {
		color: #888889;
		white-space: nowrap;
		/* 防止换行 */
		overflow: hidden;
		/* 隐藏溢出部分 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.uni-input {
		color: #888889;
		text-align: right;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		border-top: 1px solid #d6d6d6;
		background: #fff;
		padding: 10px;
		right: 0;
		
		button {
			width: 30%;
			background-color: #1890FF;
			color: white;
		}
	}


	.form-address {

		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.labelsafe {
		color: red;
		font-size: 24rpx;
	}

	.form-canvas {
		width: 95%;
		margin-bottom: 25px;

		.sign-img {
			position: relative;
			margin-top: 8px;

			image {
				width: 100%;
			}

			text {
				position: absolute;
				right: 9px;
				bottom: 10px;
				background: white;
				padding: 3px 5px;
				border-radius: 2px;
				color: #5c5c5c;
			}
		}

		.sign {
			margin-top: 8px;
			border: 1px solid #ebebeb;
			padding: 25px;
			color: #1e6fff;
			text-align: center;
			font-weight: bold;
		}
	}

	.tab-box {
		width: 80%;
		height: 100vh;
		background-color: #f0f0f0;

		.success-img {
			width: 90%;
			height: 300rpx;

		}
	}

	.safety-popup {
		scroll-view {
			::-webkit-scrollbar {
				display: none;
			}
		}

		.popup-content {
			width: 90vw;
			box-sizing: border-box;

			.title {
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				padding: 25px;
			}

			.content {
				color: #7e7e7e;
				padding: 0 25px 0 25px;
				line-height: 25px;

				.time {
					text-align: center;
					margin-top: 25px;
				}
			}

			.safety-btn {
				margin-top: 20px;
				border-top: 1px solid #b6b6b6;
				padding: 5px 0;

				button {
					&::after {
						border: none;
					}
				}
			}
		}
	}
</style>