<template>
	<view class="container" style="padding-bottom: 60px;">
		<!--学号 -->
		<view class="form-item">
			<text class="label">学号：</text>
			<input v-model="studID" class="uni-input" focus placeholder="请输入学号" />
		</view>
		<!--姓名 -->
		<view class="form-item">
			<text class="label">姓名：</text>
			<input v-model="name" class="uni-input" focus placeholder="请输入姓名" />
		</view>
		<!-- 性别 -->
		<view class="form-item">
			<text class="label">性别</text>
			<picker :range="options" v-model="selectedOptionIndex" @change="onPickerChange">
				<view class="select">{{ options[selectedOptionIndex] || '性别' }} </view>
			</picker>
		</view>
		<!--院部 -->
		<view class="form-item">
			<text class="label">院部：</text>
			<input v-model="courtyard" class="uni-input" focus placeholder="请输入院部" />
		</view>
		<!--班级 -->
		<view class="form-item">
			<text class="label">班级 ：</text>
			<input v-model="classroom" class="uni-input" focus placeholder="请输入班级 " />
		</view>
		<!--联系电话 -->
		<view class="form-item">
			<text class="label">联系电话 ：</text>
			<input v-model="phone" class="uni-input" focus placeholder="请输入联系电话 " />
		</view>
		<!--家长姓名 -->
		<view class="form-item">
			<text class="label">家长姓名：</text>
			<input v-model="parent" class="uni-input" focus placeholder="请输入家长姓名 " />
		</view>
		<!--家长联系电话 -->
		<view class="form-item">
			<text class="label">联系电话：</text>
			<input v-model="parentPhone" class="uni-input" focus placeholder="请输入联系电话  " />
		</view>
		<!-- 请假事由 -->
		<view class="form-item">
			<text class="label">请假事由：</text>
			<picker :range="politicalOptions" v-model="selectedPoliticalIndex" @change="onPoliticalChange">
				<view class="select">{{ politicalOptions[selectedPoliticalIndex] || '请选择请假事由' }}</view>
			</picker>
		</view>
		<!-- 请假事由说明 -->
		<view class="form-text">
			<text class="label">请假事由说明：</text>
			<view class="txt">
				<uni-forms-item>
					<uni-easyinput type="textarea" v-model="deeds" maxlength="500" placeholder="输入请假事由说明" />
				</uni-forms-item>
			</view>
		</view>
		<!-- 请假时间 -->
		<view class="form-item"> <!-- 根据选择的申请类型来决定是否显示 -->
			<text class="label">请假起始时间：</text>

			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="beginData" @maskClick="maskClick"
					:border="false" />
			</view>
		</view>
		<view class="form-item"> <!-- 根据选择的申请类型来决定是否显示 -->
			<text class="label">请假截至时间：</text>
			<view class="example-body">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="endData" @maskClick="maskClick"
					:border="false" />
			</view>
		</view>
		<!--请假天数 -->
		<view class="form-item">
			<text class="label">请假天数：</text>
			<input v-model="dataNum" class="uni-input" focus placeholder="请输入请假天数  " />
		</view>
		<!-- 上传佐证 -->
		<view class="form-img">
			<text class="label">上传佐证：</text>
			<view class="example-body">
				<uni-file-picker limit="9" title=""></uni-file-picker>
			</view>
		</view>
		<!-- 是否离桂 -->
		<view class="form-item">
			<text class="label">是否离桂（广西）：</text>
			<picker :range="leave" v-model="leaveIndex" @change="onleaveChange">
				<view class="select">{{ leave[leaveIndex] || '请选择是否离桂' }}</view>
			</picker>
		</view>
		<!-- 目的地 -->
		<!-- <view class="form-address">
		
			<view class="example-body">
				<complex-picker-region label="目的地址" clear-icon="false" @confirm='confirm' />
			</view>
		</view> -->
		<!--详细地址 -->
			<view class="form-item">
			<text class="label">详细地址：</text>
			<input v-model="address" class="uni-input" focus placeholder="请输入详细地址 " />
		</view>
		<!--协议 -->
		<view class="form-item">
			<text class="labelsafe">《广西水利电力职业技术学院安全承诺书》
			</text>
			<label>
				<checkbox :value="isChecked.toString()" @click="toggleCheckbox" />
			</label>
		</view>
		<!-- 签名 -->
		<view class="form-canvas">
			<text class="label">签名：</text>
			<!-- <liu-signature @change="change" bgColor="#e8e8e8" lineColor="#000" :width="700"></liu-signature>
			<image class="success-img" :src="url" @click="previewImg(url)"></image> -->
			<liu-signature @change="change" bgColor="#e8e8e8" lineColor="#000" :width="700"></liu-signature>
			<image class="success-img" :src="url" @click="previewImg(url)"></image>
		</view>
		<!-- 按钮 -->
		<view class="btn">
			<button style="background-color: red;" @click="clean">清除</button>
			<button style="background-color: whitesmoke; color: black;" @click="save">保存</button>
			<button>提交申请</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				studID: "",
				name: "",
				courtyard: "",
				options: ['男', '女'],
				classroom: "",
				phone: "",
				parent: "",
				parentPhone: "",
				selectedOptionIndex: -1, // 当前选中的奖项索引
				politicalOptions: ['因病', '因事'], // 请假选项
				selectedPoliticalIndex: -1, // 当前选中的请假索引
				beginData: '',
				endData: "",
				dataNum: "",
				deeds: "",
				leave: ['是', '否'],
				leaveIndex: -1,
				address: "",
				url: "",
				isChecked: false,
				// 签名

			};
		},

		mounted() {
			// 在组件挂载时尝试从本地存储中加载已保存的数据
			this.loadFormData();


		},
		methods: {
			change(e) {
				console.log('生成的图片:', e)
				this.url = e
			},
			//预览图片
			previewImg(url) {
				if (!url) return
				let list = [url]
				uni.previewImage({
					urls: list
				})
			},
			onPickerChange(event) {
				this.selectedOptionIndex = event.detail.value;
			},
			// 
			onPoliticalChange(event) {
				this.selectedPoliticalIndex = event.detail.value;
			},
			// 是否离桂

			onleaveChange(event) {
				this.leaveIndex = event.detail.value;
			},
			confirm(selectData) {
				console.log('selectData', selectData);
			},
			toggleCheckbox() {
				this.isChecked = !this.isChecked; // 切换选中状态
			},
			// 清空表单
			clean() {
				this.studID = "";
				this.name = "";
				this.courtyard = "";
				this.selectedOptionIndex = -1;
				this.classroom = '';
				this.phone = '';
				this.parent = '';
				this.parentPhone = "";
				this.selectedPoliticalIndex = -1
				this.beginData = "";
				this.endData = '';
				this.dataNum = '';
				this.deeds = '';
				this.leaveIndex = -1;
				this.address = '';
				this.isChecked = false;
				this.$forceUpdate(); // 强制更新组件
				this.url = ''
				localStorage.removeItem('formData');
			},
			save() {
				// 构造数据对象
				const formData = {
					studID: this.studID,
					name: this.name,
					courtyard: this.courtyard,
					classroom: this.classroom,
					phone: this.phone,
					parent: this.parent,
					parentPhone: this.parentPhone,
					beginData: this.beginData,
					endData: this.endData,
					beginData: this.beginData,
					dataNum: this.dataNum,
					deeds: this.deeds,
					address: this.address,
					url: this.url,
					because: this.politicalOptions[this.selectedPoliticalIndex],
					gender: this.options[this.selectedOptionIndex], // 获取选中的性别
					leave: this.leave[this.leaveIndex]
					// 其他表单项...
				};

				// 将表单数据保存到本地存储
				localStorage.setItem('formData', JSON.stringify(formData));

				console.log("保存的表单数据：", formData);
			},
			loadFormData() {
				// 尝试从本地存储中加载已保存的表单数据
				const savedData = localStorage.getItem('formData');
				if (savedData) {
					const formData = JSON.parse(savedData);
					// 将加载的数据填充到表单中
					this.studID = formData.studID;
					this.name = formData.name;
					this.courtyard = formData.courtyard;
					this.classroom = formData.classroom;
					this.phone = formData.phone;
					this.parent = formData.parent;
					this.parentPhone = formData.parentPhone;
					this.beginDatabeginData = formData.beginData;
					this.dataNum = formData.dataNum;
					this.deeds = formData.deeds;
					this.url = formData.url;
					// 如果性别存在于选项中，则设置其索引
					this.selectedOptionIndex = this.options.indexOf(formData.gender);
					this.selectedPoliticalIndex = this.politicalOptions.indexOf(formData.because);
					this.leaveIndex = this.leave.indexOf(formData.leave);
					// 其他表单项...
				}
			}

		},

	};
</script>

<style scoped>
	.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;
		border-bottom: 1px solid #ededee;
	}

	.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 {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;

		position: fixed;
		bottom: 20px;
		left: 0;
		margin: 0 auto;
	}

	button {
		width: 30%;
		background-color: #87CEFA;
		color: white;
	}

	.form-address {

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

	.labelsafe {
		color: red;
	}

	.form-canvas {
		width: 95%;
		height: 700rpx;
	}

	.tab-box {
		width: 80%;
		height: 100vh;
		background-color: #f0f0f0;
	}
	.success-img {
		width: 90%;
		height: 300rpx;
	
	}
</style>