<template>
	<view>
		<view v-if="notReApply" class="award">
			<!-- 学生信息 -->
			<view class="userinfo">
				<view class="left">
					<view v-for="(v,i) in score_list" :key="i" style="border-bottom: 1px dotted lightblue;">
						<text>学年：{{v.stuYearName}}</text><br />
						<text>平均学分绩班级排名：{{ v.stuClassRank + '/' + v.classCount}}</text><br />
						<text>综合素质测评班级排名：{{ v.cphClassRank + '/' + v.classCount}}</text>
					</view>
				</view>
				<view class="right">
					<button @click="tocarder">申请</button>
					<view class="eye" @click="openPopup">
						<image src="../../static/eye.png" mode=""></image>
						<text>申请条件</text>
					</view>
				</view>
			</view>
			<!-- 学生信息结束 -->
			<view class="awardList">
				<view @click="doClick(item)" class="List" v-for="(item,index) in awardList" :key="item.index">
					<view class="awardListleft">
						<text class="title"> 奖项:{{item.typeName}}</text>
						<text>学年:{{item.stuYearName}}</text>
						<text>时间:{{item.applyTime}}</text>
						<view style="color: red;" v-if="item.status == '10'">
							*点击重新提交
						</view>
						<view style="width: 350rpx;border-bottom: 1px dotted lightblue;"
							v-if="!isEmpty(item.fdyComment)">
							辅导员意见: <br />
							<text style="font-size: 12px;">{{item.fdyComment}}</text>
						</view>
						<view style="width: 350rpx;border-bottom: 1px dotted lightblue;"
							v-if="!isEmpty(item.deptComment)">
							学院意见:<br />
							<text style="font-size: 12px;">{{item.deptComment}}</text>
						</view>
						<view style="width: 350rpx;border-bottom: 1px dotted lightblue;"
							v-if="!isEmpty(item.finalComment)">
							学校意见:<br />
							<text style="font-size: 12px;">{{item.finalComment}}</text>
						</view>
					</view>
					<view class="awardListright">
						<uni-tag :inverted="true" :text="getStatus(item.status)" type="success" />
					</view>
				</view>
			</view>
		</view>


		<view v-else class="reApply">
			<view class="container">
				<!-- 政治面貌 -->
				<view class="form-item">
					<text class="label">政治面貌：</text>
					<input v-model="position" 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="cardID" class="uni-input" focus placeholder="请输入青年大学习学习率" />
				</view>
				<!-- 职务 -->
				<view class="form-item">
					<text class="label">职务：</text>
					<input v-model="bank" class="uni-input" focus placeholder="请输入职务" />
				</view>
				<!-- 获奖情况 -->
				<view class="form-text">
					<text class="label">获奖情况：</text>
					<view class="txt">
						<uni-forms-item>
							<uni-easyinput type="textarea" v-model="introduction" maxlength="500"
								placeholder="请输入获奖情况" />
						</uni-forms-item>
					</view>

				</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>

				<!-- 按钮 -->
				<button @click="showPopup">提交申请</button>
			</view>
		</view>


	</view>

</template>

<script>
	import {
		listApplyXgb,
		verifyApplyYXGB,
		reApplyYXG
	} from "@/api/good/yxbg.js";

	import {
		listOwnScoreClassRank
	} from "@/api/good/index.js";

	import {
		getDict,
		isEmpty
	} from "@/api/helpFunc/index.js";

	export default {
		data() {
			return {
				isEmpty,
				credit: "1",
				ranking: "1",
				thought: "2",
				awardList: [],

				score_list: [],
				status_list: [],

				notReApply: true,


				options: ['合格', '不合格'], // 学年
				selectedOptionIndex: 0, // 当前选中的奖项索引

				position: '', // 职务，
				cardID: "", // 银行卡号，
				bank: '',
				introduction: "",
				deeds: "",
				applyForm: {
					applyId: null,
					typeCode: null
				}
			}
		},
		async onShow() {
			uni.showLoading();

			await this.getDictStatus();
			await this.listOwnScoreClassRank();
			await this.listApplyXgb();

			uni.hideLoading();
		},
		methods: {
			async showPopup() {

				let sdata = {
					applyId: this.applyForm.applyId,
					typeCode: this.applyForm.typeCode,
					zzmm: this.position,
					classPost: this.bank,
					goodHis: this.introduction,
					mainHis: this.deeds,
					youthPercent: this.cardID,
					classtwoSure: this.options[this.selectedOptionIndex]
				};

				if (isEmpty(sdata.zzmm)) {
					uni.showToast({
						title: "请填写政治面貌",
						icon: "none"
					});
					return;
				}
				if (isEmpty(sdata.classPost)) {
					uni.showToast({
						title: "请填写职务",
						icon: "none"
					});
					return;
				}
				if (isEmpty(sdata.youthPercent)) {
					uni.showToast({
						title: "请填写青年大学习学习率",
						icon: "none"
					});
					return;
				}
				if (isEmpty(sdata.classtwoSure)) {
					uni.showToast({
						title: "请填写第二课堂学分认定",
						icon: "none"
					});
					return;
				}

				if (isEmpty(sdata.goodHis)) {
					uni.showToast({
						title: "请填写获奖记录",
						icon: "none"
					});
					return;
				}
				if (isEmpty(sdata.mainHis)) {
					uni.showToast({
						title: "请填写主要事迹",
						icon: "none"
					});
					return;
				}
				if (sdata.mainHis.length < 100) {
					uni.showToast({
						title: "主要事迹字数需要100字以上",
						icon: "none"
					});
					return;
				}

				uni.showLoading();

				let res = await reApplyYXG(sdata);

				uni.hideLoading();

				if (res.code == 200) {
					uni.showToast({
						title: '申请成功',
						icon: 'success',
						duration: 2000, // 弹窗持续时间，单位为毫秒
						success: () => {
							setTimeout(() => {
								this.listApplyXgb();
								this.notReApply = true;
							}, 1000); // 等待2秒后执行页面跳转，确保用户能看到弹窗内容
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					});
				}
			},
			onPickerChange(event) {
				this.selectedOptionIndex = event.detail.value;
			},
			doClick(item) {
				if (item.status == "10") {
					this.applyForm.applyId = item.id;
					this.applyForm.typeCode = item.typeCode;
					this.notReApply = false;
					this.position = item.zzmm;
					this.bank = item.classPost;
					this.introduction = item.goodHis;
					this.deeds = item.mainHis;
					this.cardID = item.youthPercent;

				}
			},
			getStatus(status) {
				let data = this.status_list.filter(x => x.dictValue == status.toString());
				if (data != null && data.length != 0) {
					return data[0].dictLabel;
				} else {
					return "无";
				}
			},
			async getDictStatus() {
				let res = await getDict("audius_detail_type");
				if (res.code == 200) {
					this.status_list = [...res.data];
				}
			},

			async listOwnScoreClassRank() {
				let res = await listOwnScoreClassRank();
				if (res.code == 200) {
					this.score_list = [...res.data];
				}
			},

			async listApplyXgb() {
				let res = await listApplyXgb();
				if (res.code == 200) {
					console.log(res);
					this.awardList = [...res.data];
				}
			},

			async tocarder() {
				uni.showLoading();
				let res = await verifyApplyYXGB();
				uni.hideLoading();
				if (res.code == 200) {
					uni.navigateTo({
						url: "/pages/aplycadre/aplycadre"
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			openPopup() {
				const popupContent = [{
						title: '申请条件',
						content: [
							'关心集体，吃苦在前，以身作则，能起到模范带头作用',
							'具有较强的工作能力和组织能力，工作认真负责，责任心强，团结同学，热心为同学服务，工作效果好。社会实践工作取得较好成绩，在学生中有较高威信。',
							'积极参加学校开展的第二课堂活动，第二课堂成绩单学分认定为优秀。在各级各类活动（竞赛）中成绩突出。',
							'积极参加体育锻炼及其他文体活动，身体健康，体能考核成绩为良好及以上。',
							'参评学年各科平均学分绩为70分以上（含70分），平均学分绩班级排名前40%，学年综合素质测评班级排名前50%，学年青年大学习学习率达100%。',
							'服务之星:积极主动为师生服务。在团委、学生会、易班、社团、协会、班级等组织中担任主要学生干部，认真履行职责，且获得过校级及以上优秀学生干部称号；',
						].join('\n\n'), // Add line breaks between each point
					},
					// Add more sections here if needed
				];

				wx.showModal({
					title: popupContent[0].title, // First section's title
					content: popupContent[0].content, // Use the joined content
					showCancel: false,
					confirmText: '关闭',
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.reApply {
		.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;
		}

		button {
			width: 90%;
			background-color: #3388CC;
			color: white;
		}
	}



	.award {

		width: 100%;
		min-height: 100vh;
		background-color: #F5F7FB;

		.userinfo {
			width: 100%;
			display: flex;
			background-color: #3388CC;
			justify-content: space-between;
			align-items: center;

			.left {
				padding: 10rpx 40rpx;

				display: flex;
				flex-direction: column;
				color: white;

				text {
					/* 强制文本内部换行 */
					white-space: pre-wrap;
					margin-bottom: 10rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				margin-right: 15rpx;
				align-items: center;

				button {
					width: 180rpx;
					background-color: #E3F4FF;
					border: 1px solid #009DFF;
					color: #009DFF;
				}

				.eye {
					margin-top: 10rpx;
					display: flex;
					align-items: center;
					color: #FF7979;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.awardList {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;

			.List {
				// align-items: center;
				display: flex;
				justify-content: space-between;
				width: 90%;
				background-color: white;
				border-radius: 10rpx;
				padding: 40rpx 30rpx 30rpx 30rpx;
				margin-bottom: 30rpx;

				.awardListleft {
					display: flex;
					flex-direction: column;

					.title {
						font-size: 40rpx;

						color: black;
						width: 500rpx;
						margin-bottom: 10rpx;
					}

					text {
						width: 500rpx;
						padding-bottom: 20rpx;
						color: #9C9C9C;
					}
				}
			}
		}


	}
</style>