<template>
	<view class="add">
		<view class="form-item">
			<label>学号</label>
			<input type="number" placeholder="请输入" @blur="stduIDOnBlur" v-model="valiFormData.stuNo" />
		</view>
		<view class="form-item">
			<label>姓名</label>
			<input type="text" v-model="valiFormData.studentName" placeholder="请输入" />
		</view>
		<view class="form-item">
			<label>性别</label>
			<radio-group data-group-name="punishment">
				<label>
					<radio value="男" :checked="valiFormData.gender === '男'" active-background-color="#2a8f08"
						style="transform:scale(0.7)" />男
				</label>
				<label>
					<radio value="女" :checked="valiFormData.gender === '女'" active-background-color="#2a8f08"
						style="transform:scale(0.7)" />女
				</label>
			</radio-group>
		</view>
		<view class="form-item" v-for="(item,index) in inputArray" :key="index">
			<label>{{item.text}}</label>
			<input type="text" v-model="valiFormData[item.val]" placeholder="请输入" />
		</view>
		<view class="form-item">
			<label>处分等级</label>
			<picker range-key="class_name" v-model="valiFormData.penaltyType" :range="options" @change="onPickerChange">
				<view class="uni-input">
					<text class="val">{{ options[valiFormData.penaltyType] || '请选择处分等级' }}</text>
					<uni-icons type="down" size="16" color="#202020"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="form-item">
			<label>处分建议</label>
			<input type="text" v-model="valiFormData.penaltyRecommendation" placeholder="请输入" />
		</view>
		<view class="form-item">
			<label>违纪条例</label>
			<input type="text" v-model="valiFormData.violationRegulations" placeholder="请输入" />
		</view>
		<view class="form-item">
			<label>违纪材料</label>
			<view class="tip">
				请上传违纪询问记录，违纪申辩记录，学生检讨书等扫描件。
			</view>
			<uni-file-picker :auto-upload="false" @select="uploadImg" @delete="deleteImg"></uni-file-picker>
		</view>
		<view class="btns">
			<button @click="onSave" :disabled="isSubmitting">保存</button>
			<button @click="onSubmit" :disabled="isSubmitting">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getStuInfoByStuNo,
		submitPunishment,
		savePunishment,
		deleteImg
	} from "@/api/applyrelieve/applyrelieve.js";
	import uploadFile from "@/plugins/upload.js";
	export default {
		data() {
			return {
				isSubmitting: false, //表单提交标志位
				inputArray: [{
						text: "班级",
						val: "className",
					},
					{
						text: "学院",
						val: "departmentName",
					},
					{
						text: "年级",
						val: "gradeName",
					},
					{
						text: "民族",
						val: "mz",
					},
					{
						text: "出生日期",
						val: "birthday",
					},
					{
						text: "籍贯",
						val: "jg",
					},
				],
				// 校验表单数据
				valiFormData: {
					stuNo: '',
					studentName: '',
					gender: '',
					className: '',
					departmentName: '',
					gradeName: '',
					mz: '',
					birthday: '',
					penaltyType: '',
					jg: '',
					penaltyRecommendation: '',
					violationRegulations: ''
				},
				
				options: ['警告', '严重警告', '记过', '留校察看', '开除学籍'], // 处分等级
				selectedOptionIndex: -1, // 当前选中的处分等级索引
				stuname: "", // 
				stduID: "",
				system: "",
				grade: "",
				studclass: "",
				gender: "",
				nation: "",
				birth: "",
				suggest: "",
				imageIds: [],
				affixId: ""
			}
		},
		onLoad() {},
		methods: {
			stduIDOnBlur() {
				getStuInfoByStuNo(this.valiFormData.stuNo).then(res => {
					console.log(res.data);
					if (this.valiFormData.stuNo !== '') {
						if (res.data) {
							this.valiFormData.studentName = res.data.studentName;
							this.valiFormData.gender = res.data.gender;
							this.valiFormData.className = res.data.className;
							this.valiFormData.departmentName = res.data.departmentName;
							this.valiFormData.gradeName = res.data.gradeName;
							console.log(this.valiFormData)
						} else {
							uni.showToast({
								title: "学号不存在",
								icon: "error"
							})
						}
					}

				})
			},
			onPickerChange(event) {
				this.valiFormData.penaltyType = event.detail.value;
			},
			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'
				});
			},
			// 上传图片
			uploadImg(e) {
				if (this.affixId == "") {
					this.affixId = e.tempFiles[0].uuid;
				}
				let formDataObj = { // 使用一个普通的对象来存储表单数据  
					affixId: this.affixId
				};
				console.log(this.affixId);
				uploadFile('/affix/upload', e.tempFilePaths[0], formDataObj).then((res) => {
					let result = JSON.parse(res);
					const imageId = result.id;
					this.imageIds.push(imageId)
					if (res.code == 200) {
						uni.showToast({
							title: "上传成功",
							icon: "none"
						})
					}
				})
			},
			deleteImg(e) {
				let imgId = this.imageIds[e.index];
				this.imageIds.splice(e.index, 1);
				deleteImg({
					id: imgId
				}).then(res => {
					console.log(res);
				})
			},
			onSave(ref) {
				this.valiFormData.evidenceUpload = this.affixId;
				const requiredFields = [
					'stuNo',
					'studentName',
					'gender',
					'className',
					'departmentName',
					'gradeName',
					'mz',
					'birthday',
					'penaltyType',
					'jg',
					'penaltyRecommendation',
					'violationRegulations',
					'evidenceUpload'
				];
				const emptyField = requiredFields.find(field => this.valiFormData[field] === "");
				if (emptyField) {
					uni.showToast({
						title: `请填写完整内容`,
						icon: "none"
					})
					return;
				}
				this.isSubmitting = true; // 设置为正在提交
				uni.showLoading({
					title: "正在保存",
					success: () => {
						savePunishment(this.valiFormData).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: "保存成功"
								})
								this.isSubmitting = false; 
								uni.navigateBack();
							}
						})
					}
				})
			},
			onSubmit() {
				this.valiFormData.evidenceUpload = this.affixId;
				const requiredFields = [
					'stuNo',
					'studentName',
					'gender',
					'className',
					'departmentName',
					'gradeName',
					'mz',
					'birthday',
					'penaltyType',
					'jg',
					'penaltyRecommendation',
					'violationRegulations',
					'evidenceUpload'
				];
				const emptyField = requiredFields.find(field => this.valiFormData[field] === "");
				if (emptyField) {
					uni.showToast({
						title: `请填写完整内容`,
						icon: "none"
					})
					return;
				}
				this.isSubmitting = true; // 设置为正在提交
				uni.showLoading({
					title: "正在提交",
					success: () => {
						submitPunishment(this.valiFormData).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: "提交成功"
								})
								this.isSubmitting = false; 
								uni.navigateBack();
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		background-color: #F5F5F7;
		padding: 10px;
		padding-bottom: 80px;

		.form-item {
			display: flex;
			flex-direction: column;
			padding: 22rpx 40rpx;
			background-color: white;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

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

			label {
				margin-bottom: 20rpx;
				display: inline-block;
			}

			input {
				border: 1px solid #E1E1E1;
				border-radius: 10rpx;
				height: 70rpx;
				padding-left: 30rpx;

				.input-placeholder {
					color: #b6b6b6;
				}
			}

			picker {
				border: 1px solid #E1E1E1;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 30rpx;

				.uni-input {
					display: flex;
					color: #797979;

					.val {
						flex: 1;
					}
				}
			}

			.upload-img {
				border: 1px solid #E1E1E1;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

				.tip {
					margin-top: 15rpx;
					color: #7a7a7a;
					font-size: 24rpx;
				}
			}

			.img-list {
				border: 1px solid #D8D8D8;
				border-radius: 20rpx;

				.imgs {
					padding: 22rpx;
					display: flex;
					flex-wrap: wrap;

					.img {
						position: relative;
						width: 160rpx;
						height: 170rpx;
						margin-bottom: 15rpx;
						margin-right: 15rpx;

						image {
							width: 100%;
							height: 100%;
						}

						.remove {
							position: absolute;
							right: 0;
							top: 0;
							color: white;
							background-color: rgba(0, 0, 0, 0.4);
							width: 52rpx;
							height: 52rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;

						}
					}

				}

				.btn {
					border-top: 1px solid #D8D8D8;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}

		.btns {
			padding: 10px;
			display: flex;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 999;

			button {
				flex: 1;
				background-color: #1890FF;
				color: white;

				&:first-child {
					margin-right: 10px;
					background-color: white;
					border: 1px solid #1890FF;
					color: #1890FF;
				}
			}

		}
	}
</style>