<template>
	<view class="container" style="padding-bottom: 60px;">
		<uni-forms :modelValue="form" :rules="rules" ref="form">

			<!-- 姓名 -->
			<uni-forms-item label="姓名" name="stuName">
				<uni-easyinput type="text" v-model="form.stuName" placeholder="请输入姓名" />
			</uni-forms-item>

			<!-- 学号 -->
			<uni-forms-item label="学号" name="stuNo">
				<uni-easyinput type="text" v-model="form.stuNo" placeholder="请输入学号" />
			</uni-forms-item>
			<!-- 性别选择 -->
			<uni-forms-item label="性别" required name="gender">
				<uni-data-checkbox v-model="form.gender" :localdata="sexs" />
			</uni-forms-item>
			<!-- 			<uni-forms-item label="性别" name="gender">
				<picker :range="politicalOptions" v-model="form.gender" @change="onPoliticalChange">
					<view class="select">{{ politicalOptions[selectedPoliticalIndex] || '请选择性别' }}</view>
				</picker>
			</uni-forms-item> -->
			<!-- 系部 -->
			<uni-forms-item label="系部" name="departmentName">
				<uni-easyinput type="text" v-model="form.departmentName" placeholder="请输入系部" />
			</uni-forms-item>

			<!-- 年级 -->
			<uni-forms-item label="年级" name="gradeName">
				<uni-easyinput type="text" v-model="form.gradeName" placeholder="请输入年级" />
			</uni-forms-item>
			<!-- 班级 -->
			<uni-forms-item label="班级" name="className">
				<uni-easyinput type="text" v-model="form.className" placeholder="请输入班级" />
			</uni-forms-item>

			<!-- 民族 -->
			<uni-forms-item label="民族" name="mz">
				<uni-easyinput type="text" v-model="form.mz" placeholder="请输入民族" />
			</uni-forms-item>
			<!-- 出生日期 -->
			<uni-forms-item label="出生日期" name="birthday">
				<uni-easyinput type="text" v-model="form.birthday" placeholder="请输入出生日期" />
			</uni-forms-item>
			<!-- 籍贯 -->
			<uni-forms-item label="籍贯" name="jg">
				<uni-easyinput type="text" v-model="form.jg" placeholder="省/自治区/直辖市" />
			</uni-forms-item>

			<!-- 处分文号 -->
			<uni-forms-item label="处分文号" name="penaltyNumber">
				<uni-easyinput type="text" v-model="form.penaltyNumber" placeholder="请输入处分文号" @blur="handleBlurPenalty" />
			</uni-forms-item>

			<!-- 违纪时间 -->
			<uni-forms-item label="违纪时间" name="violationDate">
				<uni-easyinput type="text" v-model="form.violationDate" placeholder="请输入违纪时间" />
			</uni-forms-item>

			<!-- 处分等级 -->
			<uni-forms-item label="处分等级" name="penaltyType">
				<uni-data-select v-model="form.penaltyType" :localdata="penaltyTypeOptions" :disabled="true"></uni-data-select>
			</uni-forms-item>

			<!-- 处分建议 -->
			<uni-forms-item label="处分建议" name="penaltyRecommendation">
				<uni-easyinput type="textarea" v-model="form.penaltyRecommendation" maxlength="500" placeholder="请输入处分建议" />
			</uni-forms-item>

			<!-- 违纪条例 -->
			<uni-forms-item label="违纪条例" name="stuName">
				<uni-easyinput type="textarea" v-model="form.violationRegulations" maxlength="500" placeholder="请输入违纪条例" />
			</uni-forms-item>
			<!-- 按钮 -->
			<view class="btn">
				<button style="background-color: red;" @click="clean">清除</button>
				<button style="background-color: whitesmoke; color: black;" @click="save">保存</button>
				<button @click="submitForm">提交申请</button>
			</view>
		</uni-forms>
	</view>

</template>
<script>
	import {
		getMyStuInfo,
		getPenaltyNumber,
		save,
		addRelieve
	} from "@/api/applyleave/applyleave.js";
	// import {
	// 	getDicts
	// } from "@/api/system/dict/data";
	export default {
		data() {
			return {
				options: ['一等', '二等', '三等'], // 处分等级
				selectedOptionIndex: -1, // 当前选中的奖项索引
				politicalOptions: ['男', '女'], // 政治面貌选项
				selectedPoliticalIndex: -1, // 当前选中的政治面貌索引
				stuname: "", // 
				stduID: "",
				system: "",
				introduction: "",
				deeds: "",
				grade: "",
				studclass: "",
				nation: "",
				birth: "",
				Hometown: "",
				city: "",
				number: "",
				thought: "",
				time: "",
				form: {
					stuNo: '',
					stuName: '',
					gender: '',
					departmentName: '',
					gradeName: '',
					className: '',
					mz: '',
					birthday: '',
					jg: "",
					penaltyNumber: '',
					violationDate: '',
					penaltyType: '',
					penaltyRecommendation: '',
					violationRegulations: ''
				},
				penaltyTypeOptions: null,
				// 表单校验
				rules: {
					stuNo: {
						rules: [{
							required: true,
							message: '学号不能为空',
							trigger: 'blur'
						}]
					},
					stuName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					departmentName: {
						rules: [{
							required: true,
							errorMessage: '请输入院部',
						}]
					},
					gradeName: {
						rules: [{
							required: true,
							errorMessage: '请输入年级',
						}]
					},
					className: {
						rules: [{
							required: true,
							errorMessage: '请输入班级',
						}]
					},
					mz: {
						rules: [{
							required: true,
							errorMessage: '请输入民族',
						}]
					},
					birthday: {
						rules: [{
							required: true,
							errorMessage: '请输入出生日期',
						}]
					},
					jg: {
						rules: [{
							required: true,
							errorMessage: '请选择籍贯',
						}]
					},
					penaltyNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入处分文号',
						}]
					},
					violationDate: {
						rules: [{
							required: true,
							errorMessage: '违纪时间不能为空',
						}]
					},
					penaltyType: {
						rules: [{
							required: true,
							errorMessage: '处分等级不能为空',
						}]
					},
					penaltyRecommendation: {
						rules: [{
							required: true,
							errorMessage: '请输入处分建议',
						}]
					},
					violationRegulations: {
						rules: [{
							required: true,
							errorMessage: '请输入违纪条例',
						}]
					},
				},
				sexs: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
			};
		},
		onLoad() {
			this.loadMyStuInfo()
			getDicts("rt_penalty_type").then(response => {
				this.penaltyTypeOptions = response.data.map((item) => ({
					value: item.dictValue, // 根据实际情况映射 value
					text: item.dictLabel, // 如果 dictValue 和 value 相同，否则映射 dictValue
				}));
			});
		},
		mounted() {
			// 在组件挂载时尝试从本地存储中加载已保存的数据
			this.loadFormData();
		},
		methods: {
			loadMyStuInfo() {
				getMyStuInfo().then(res => {
					this.form.stuNo = res.data.stuNo
					this.form.stuName = res.data.studentName
					this.form.gender = res.data.gender
					this.form.departmentName = res.data.departmentName
					this.form.gradeName = res.data.gradeName
					this.form.className = res.data.className
					this.form.mz = res.data.mz
					this.form.birthday = res.data.birthday
					this.form.jg = res.data.jg
				})
			},
			handleBlurPenalty() {
				if (this.form.penaltyNumber) {
					getPenaltyNumber(this.form.penaltyNumber).then((res) => {
						if (res.code == 500) {
							return
						}
						if (res.data) {
							this.form.penaltyNumber = res.data.penaltyNumber
							this.form.violationDate = res.data.violationDate
							this.form.penaltyType = res.data.penaltyType.toString()
							this.form.penaltyRecommendation = res.data.penaltyRecommendation
							this.form.violationRegulations = res.data.violationRegulations
						} else {
							this.$message.error('未找到相关处分文号')
						}
					})
				}
			},
			onPickerChange(event) {
				this.selectedOptionIndex = event.detail.value;
			},
			// 
			onPoliticalChange(event) {
				this.selectedPoliticalIndex = event.detail.value;
			},
			// 清空表单
			clean() {
				this.form = null
			},
			save() {
				this.$refs.form.validate().then(res => {
					uni.showModal({
						confirmText: "确定",
						cancelText: "放弃",
						confirmColor: "#aa0000",
						title: "确定提交保存吗?",
						success: res => {
							if (res.confirm) {

								save(this.form).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '保存成功',
											duration: 2000,
											success: res => {
												// 跳转会主页
											}
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									}
								})
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			submitForm() {
				this.$refs.form.validate().then(res => {
					uni.showModal({
						confirmText: "确定",
						cancelText: "放弃",
						confirmColor: "#aa0000",
						title: "确定提交申请吗?",
						success: res => {
							if (res.confirm) {

								addRelieve(this.form).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '提交成功',
											duration: 2000,
											success: res => {
												// 跳转会主页
											}
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										});
									}
								})
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			
			loadFormData() {
				// 尝试从本地存储中加载已保存的表单数据
				const savedData = localStorage.getItem('formData');
				if (savedData) {
					const formData = JSON.parse(savedData);
					this.stduID = formData.stduID;
					this.stuname = formData.stuname;
					this.system = formData.system;
					this.studclass = formData.studclass;
					this.deeds = formData.deeds;
					this.introduction = formData.introduction;
					this.grade = formData.grade;
					this.birth = formData.birth;
					this.nation = formData.nation;
					this.deeds = formData.deeds;
					this.Hometown = formData.Hometown;
					this.city = formData.city;
					this.number = formData.number;
					this.thought = formData.thought;
					this.time = formData.time;

					// 如果性别存在于选项中，则设置其索引
					this.selectedOptionIndex = this.options.indexOf(formData.gender);
					this.selectedPoliticalIndex = this.politicalOptions.indexOf(formData.because);
				}
			}

		}
	};
</script>

<style>
	.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;
	}

	.txt {
		margin-top: 20rpx;
	}


	.label {

		text-align: right;
		margin-right: 20rpx;
	}

	.select {
		color: #888889;
	}

	.uni-input {
		/*      width: 23%; */
		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;
	}
</style>