<template>
	<view class="add">
		<view class="top">
			<view class="title">
				添加学生处分申请
			</view>
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="学号" required name="stuNo">
					<uni-easyinput :clearable="false" @blur="stduIDOnBlur" v-model="valiFormData.stuNo"
						placeholder="请输入学号" />
				</uni-forms-item>
				<uni-forms-item label="姓名" required name="studentName">
					<uni-easyinput :clearable="false" v-model="valiFormData.studentName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别" required name="gender">
					<radio-group name="">
						<label class="nan">
							<radio value="男" :checked="valiFormData.gender === '男'" color="#2A8F08"
								style="transform:scale(0.7)" />
							<text>男</text>
						</label>
						<label>
							<radio value="女" :checked="valiFormData.gender === '女'" color="#2A8F08"
								style="transform:scale(0.7)" />
							<text>女</text>
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item label="班级" required name="className">
					<uni-easyinput :clearable="false" v-model="valiFormData.className" placeholder="请输入班级" />
				</uni-forms-item>
				<uni-forms-item label="学院" required name="departmentName">
					<uni-easyinput :clearable="false" v-model="valiFormData.departmentName" placeholder="请输入学院" />
				</uni-forms-item>
				<uni-forms-item label="年级" required name="gradeName">
					<uni-easyinput :clearable="false" v-model="valiFormData.gradeName" placeholder="请输入年级" />
				</uni-forms-item>
				<uni-forms-item label="民族" required name="mz">
					<uni-easyinput :clearable="false" v-model="valiFormData.mz" placeholder="请输入民族" />
				</uni-forms-item>
				<uni-forms-item label="出生日期" required name="birthday">
					<uni-easyinput :clearable="false" v-model="valiFormData.birthday" placeholder="请输入出生日期" />
				</uni-forms-item>
				<uni-forms-item label="籍贯" required name="jg">
					<uni-easyinput :clearable="false" v-model="valiFormData.jg" placeholder="请输入籍贯" />
				</uni-forms-item>
				<uni-forms-item label="处分等级" required name="penaltyType">
					<picker :range="options" v-model="valiFormData.penaltyType" @change="onPickerChange">
						<view class="select">{{ options[valiFormData.penaltyType] || '请选择处分等级' }} </view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="处分建议" required name="penaltyRecommendation">
					<uni-easyinput :clearable="false" v-model="valiFormData.penaltyRecommendation"
						placeholder="请输入处分建议" />
				</uni-forms-item>
				<uni-forms-item label="违纪条例" required name="violationRegulations">
					<uni-easyinput :clearable="false" v-model="valiFormData.violationRegulations"
						placeholder="请输入违纪条例" />
				</uni-forms-item>
				<uni-forms-item class="materials" label="违纪材料" required name="materials">
					<view class="tip">
						请上传违纪询问记录，违纪申辩记录，学生检讨书等扫描件。
					</view>
					<view class="upImage">
						<uni-file-picker :auto-upload="false" @select="uploadImg" @delete="deleteImg"></uni-file-picker>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btns">
			<button @click="onSave('valiForm')">保存</button>
			<button @click="onSubmit('valiForm')">提交</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 {
				// 校验表单数据
				valiFormData: {
					stuNo: '',
					studentName: '',
					gender: '',
					className: '',
					departmentName: '',
					gradeName: '',
					mz: '',
					birthday: '',
					penaltyType: '',
					jg: '',
					penaltyRecommendation: '',
					violationRegulations: ''

				},
				// 校验规则
				rules: {
					stuNo: {
						rules: [{
							required: true,
							errorMessage: '学号不能为空'
						}]
					},
					studentName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					},
					className: {
						rules: [{
							required: true,
							errorMessage: '请输入班级'
						}]
					},
					departmentName: {
						rules: [{
							required: true,
							errorMessage: '请输入院系'
						}]
					},
					gradeName: {
						rules: [{
							required: true,
							errorMessage: '请输入年级'
						}]
					},
					mz: {
						rules: [{
							required: true,
							errorMessage: '请输入民族'
						}]
					},
					birthday: {
						rules: [{
							required: true,
							errorMessage: '请输入出生日期'
						}]
					},
					jg: {
						rules: [{
							required: true,
							errorMessage: '请选择籍贯'
						}]
					},
					penaltyType: {
						rules: [{
							required: true,
							errorMessage: '请选择处分等级'
						}]
					},
					penaltyRecommendation: {
						rules: [{
							required: true,
							errorMessage: '请输入违纪建议'
						}]
					},
					violationRegulations: {
						rules: [{
							required: true,
							errorMessage: '请输入违纪条例'
						}]
					},
				},
				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;
						} 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.valiFormData.affixId;
				this.$refs[ref].validate().then(res => {
					uni.showLoading({
						title: "正在保存",
						success: () => {
							savePunishment(this.valiFormData).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: "保存成功"
									})
									uni.navigateBack();
								}
							})
						}
					})
			
				}).catch(err => {
					console.log('err', err);
				})
			},
			onSubmit(ref) {
				this.valiFormData.evidenceUpload =this.valiFormData.affixId;
				this.$refs[ref].validate().then(res => {
					uni.showLoading({
						title: "正在提交",
						success: () => {
							submitPunishment(this.valiFormData).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: "提交成功"
									})
									uni.navigateBack();
								}
							})
						}
					})

				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

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

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20px;
			}

			.uni-forms {
				.uni-forms-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					&.materials {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

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

						.upImage {
							margin-top: 8px;
						}
					}

					/deep/ .uni-easyinput__content {
						border: none;
					}
				}

				/deep/ .uni-forms-item__label {
					width: 100px !important;
				}
			}
		}

		.btns {
			padding: 10px;
			display: flex;
			background: white;
			position: fixed;
			bottom: 0;
			left: 0;
			right:0;
			button {
				flex: 1;
				background-color: #1890FF;
				color: white;
				&:first-child{
					margin-right: 10px;
					background-color: white;
					border: 1px solid #1890FF;
					color: #1890FF;
				}
			}

		}
	}
</style>