<template>
	<view class="container">
		<!-- 学年 -->
		<view class="form-item">
			<label><text>*</text> 学年</label>
			<picker :range="options" v-model="selectedOptionIndex" @change="onPickerChange">
				<view class="select">{{ options[selectedOptionIndex] || '请选择学年' }} </view>
			</picker>
		</view>
		<!-- 奖项 -->
		<view class="form-item">
			<label><text>*</text> 奖项</label>
			<picker :range="politicalOptions" v-model="selectedPoliticalIndex" @change="onPoliticalChange">
				<view class="select">{{ politicalOptions[selectedPoliticalIndex] || '请选择奖项' }} </view>
			</picker>
		</view>
		<!-- 政治面貌 -->
		<view class="form-item">
			<label><text>*</text> 政治面貌</label>
			<input v-model="face" class="uni-input" focus placeholder="请输入政治面貌" />
		</view>
		<!-- 职务 -->
		<view class="form-item">
			<label><text>*</text> 职务</label>
			<input v-model="position" class="uni-input" focus placeholder="请输入职务(没有填无)" />
		</view>
		<!-- 中国农业银行银行卡号 -->
		<view class="form-item">
			<label><text>*</text> 银行卡号</label>
			<input v-model="cardID" class="uni-input" focus placeholder="请输入中国农业银行银行卡号" />
		</view>
		<!-- 开户行 -->
		<view class="form-item">
			<label><text>*</text> 开户行</label>
			<input v-model="bank" class="uni-input" focus placeholder="请输入开户行" />
		</view>
		<!-- 获奖情况 -->
		<view class="form-item">
			<label><text>*</text> 获奖情况</label>
			<textarea type="text" placeholder="请输入获奖情况" maxlength="500" v-model="introduction" />
		</view>
		<!-- 主要事迹 -->
		<view class="form-item">
			<label><text>*</text> 主要事迹</label>
			<textarea type="text" placeholder="请输入主要事迹" maxlength="500" v-model="deeds" />
		</view>
		<view class="btns">
			<button @click="doApply" :disabled="isSubmitting">提交申请</button>
		</view>
		<!-- 按钮 -->
	</view>
</template>

<script>
	import {
		listEnableYear
	} from "@/api/cqScore/cqscore.js";
	import {
		applyLake
	} from "@/api/lake/apply.js";
	import {
		listOneHundred
	} from "@/api/lake/type.js";
	import {
		alipayVali
	} from "@/api/helpFunc/bank.js";
	import {
		isEmpty
	} from "@/api/helpFunc";
	export default {
		data() {
			return {
				isSubmitting: false,
				options: [], // 学年
				selectedOptionIndex: -1, // 当前选中的奖项索引
				politicalOptions: [], // 政治面貌选项
				selectedPoliticalIndex: -1, // 当前选中的政治面貌索引
				position: '', // 职务，
				cardID: "", // 银行卡号，
				bank: '',
				face: "",
				introduction: "",
				deeds: "",

				choose_star: "",
				apply_type_list: [],
				year_list: [],


			};
		},
		async onShow() {
			uni.showLoading();
			await this.listOneHundred();
			await this.listEnableYear();

			uni.hideLoading();
		},
		methods: {
			async listOneHundred() {
				let res = await listOneHundred();
				if (res.code == 200) {
					this.apply_type_list = [...res.data];

					this.politicalOptions = this.apply_type_list.map(x => x.typeName);
				}
			},
			// 当选择发生变化时触发
			onPickerChange(event) {
				this.selectedOptionIndex = event.detail.value;
				this.choose_year = this.year_list[this.selectedOptionIndex].id; //学年
			},
			// 
			onPoliticalChange(event) {
				this.selectedPoliticalIndex = event.detail.value;
				this.choose_star = this.politicalOptions[this.selectedPoliticalIndex];
			},
			async listEnableYear() {
				let res = await listEnableYear();
				if (res.code == 200) {
					let data = [...res.rows];
					this.year_list = [...data];
					this.options = data.map(x => x.stuYearName)
				}
			},
			async doApply() {
				if (isEmpty(this.choose_year)) {
					uni.showToast({
						title: "请选择学年",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.choose_star)) {
					uni.showToast({
						title: "请选择奖项",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.face)) {
					uni.showToast({
						title: "请填写政治面貌",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.position)) {
					uni.showToast({
						title: "请填写职务",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.cardID)) {
					uni.showToast({
						title: "请填写中国农业银行银行卡号",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.bank)) {
					uni.showToast({
						title: "请填写开户行",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.introduction)) {
					uni.showToast({
						title: "请填写获奖记录",
						icon: "error"
					});
					return;
				}
				if (isEmpty(this.deeds)) {
					uni.showToast({
						title: "请填写主要事迹",
						icon: "error"
					});
					return;
				}
				if (this.deeds.length < 100) {
					uni.showToast({
						title: "主要事迹字数需要100字以上",
						icon: "error"
					});
					return;
				}

				let card = this.cardID;
				let boolCard = await alipayVali(card);
				// let boolCard = {
				// 	"cardType": "DC",
				// 	"bank": "ICBC",
				// 	"key": "6228480838971576379",
				// 	"messages": [],
				// 	"validated": true,
				// 	"stat": "ok"
				// }
				if (boolCard.validated == false) {
					uni.showToast({
						title: "请输入正确的银行卡号",
						icon: "error"
					});
					return;
				}
				if (boolCard.bank != "ABC") {
					uni.showToast({
						title: "请输入正确的中国农业银行银行卡号",
						icon: "error"
					});
					return;
				}


				let sdata = {
					stuYearId: this.choose_year,
					typeCode: this.apply_type_list[this.selectedPoliticalIndex].typeCode,
					zzmm: this.face,
					classPost: this.position,
					bankCard: this.cardID,
					bankAddr: this.bank,
					goodHis: this.introduction,
					mainHis: this.deeds
				}

				uni.showLoading({
					title: '加载中'
				});
				let res = await applyLake(sdata);
				uni.hideLoading();
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: "success"
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					});
				}
			}
		}
	};
</script>

<style>
	.container {
		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;

			text {
				color: red;
			}
		}

		textarea {
			height: 200rpx;
			border: 1px solid #E1E1E1;
			padding: 20rpx;
			width: 100%;
		}

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

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

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

				.val {
					flex: 1;
				}
			}
		}
	}

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

	}
</style>