<template>
	<view style="background-color: rgb(246, 247, 250); height: 100%">
		<u-navbar title="教育经历认证"></u-navbar>
		<view class="content">
			<view class="form">
				<view class="flex-col group">
					<view class="flex-col section_2">
						<view class="flex-col group_5">
							<view class="flex-row group_6">
								<text class="text_15">真实姓名</text>
								<u-input class="input" v-model="user.name" :custom-style="inputStyle" :type="'text'"
									:border="false" placeholder="请输入" inputAlign="right" />
							</view>
						</view>
					</view>
				</view>
			</view>
	
			<view class="file">
				<view class="flex-col section_4">
					<view class="title-tips">
								<view class="title">上传证明</view>
								<view class="tips"><text class="red-tips">*</text>上传学生证、毕业证、录取通知书、校园卡，所有上传信息仅供校友身份的认证</view>
							</view>
					<view class="flex-row equal-division" style="margin-top: 0">
						<view class="flex-col equal-division-item">
							<!-- <view class="flex-row">
								<text :class="user.imgType==0?'text_11':'text_12'" @click="handleSelect(0)">学生证</text>
								<text :class="user.imgType==1?'text_11':'text_12'" @click="handleSelect(1)">毕业证</text>
								<text :class="user.imgType==2?'text_11':'text_12'" @click="handleSelect(2)">录取通知书</text>
								<text :class="user.imgType==3?'text_11':'text_12'" @click="handleSelect(3)">校园卡</text>
							</view> -->
							
							<view class="flex-col section_5">
								<u-upload :header='header' :action="$u.http.config.baseUrl+action" @on-success="onSuccess"
									:max-size="5 * 1024 * 1024" @on-change='onChange' @on-error='onError' upload-text='' max-count="1"
									ref="uUpload" :auto-upload="true" width="640"
             					 height="396">
									<template #addBtn>
										<image :src="StudentCard" mode="widthFix"></image>
									</template>
								</u-upload>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="flex-col group_9">
					<u-button class="button" type="primary" :disabled="!state" :plain="!state" @click="commitAuth"
						:throttle-time='1000'>{{state?'提交认证':'提交中'}}</u-button>
				</view>


		<!-- 提示 -->
		<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import uUpload from '../../../uview-ui/components/u-upload/u-upload.vue';
	import StudentCard from '@/static/common/img/StudentCard.png'
	export default {
		components: {
			uUpload
		},
		data() {
			return {
				// input 样式
				inputStyle: {
					lineHeight: "0.5rem",
					height: "0.5rem",
					width: "1.5rem",
				},
				action: '/app/User/File',
				user: {
					name: '',
					imageFile: '',
					imgType: 0,
					educationId: '',
					userId: '',
				},
				header: {
					Authorization: ""
				},
				state: true,
				StudentCard:StudentCard
			};
		},
		onLoad(e) {
			if (!e.educationId) {
				this.$u.route({
					url: "pages/my/ShoolList/ShoolList"
				})
			}
			this.user.educationId = e.educationId
			this.user.name = this.vuex_user.name ? this.vuex_user.name : ''

		},
		onShow() {
			if (!this.user.educationId || !this.user.name) {
				this.$u.route({
					url: "pages/my/ShoolList/ShoolList"
				})
			}
		},
		created() {
			this.header.Authorization = "Bearer " + this.vuex_token
		},
		methods: {
			commitAuth() {
				if (!this.user.educationId) {
					/* uni.showToast({
						title: "提交错误",
						duration: 2000,
					}); */
					this.$refs.uToast.show({
						title: "提交错误",
						type: "error",
					});
					setTimeout(() => {
						this.$u.route({
							url: "pages/my/ShoolList/ShoolList"
						})
					}, 1000)
					return;
				}

				if (!this.state) {
					this.tips("请勿重复提交", "error");
					return;
				}
				// console.log(file)
				let _this = this
				if (!this.user.name) {
					this.tips("请输入真实姓名", "error");
					return;
				}
				var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");
				if (!reg.test(this.user.name)) {
					// this.$tips("请输入正确的真实姓名", "error");
					this.$refs.uToast.show({
						title: '请输入正确的真实姓名!',
						type: "error",
					});
					
					return;
				}
				
				if (!this.user.imageFile ) {
					this.tips("请上传文件", "error");
					return
				}

				this.state = false;
				// uni.showLoading({
				// 	title: '提交中...'
				// })
				// setTimeout(() => {
				// 	this.state = true;
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		title: "提交失败",
				// 		duration: 2000,
				// 	});
				// }, 10000)
				this.user.userId = this.vuex_user.id
				this.$u.apiList.SubmitAttestationXY(this.user).then((res) => {
					this.state = true;
					uni.hideLoading()
					/* uni.showToast({
						title: "已提交",
						duration: 2000,
					}); */
					this.$refs.uToast.show({
						title: "已提交",
						type: "success",
					});
					setTimeout(() => {
						this.$u.route({
							url: "pages/my/ShoolList/ShoolList"
						})
					}, 1000)
					this.user.name = "";
					this.$refs.uUpload.clear()
				})
			},
			handleSelect(i) {
				this.user.imgType = i;
			},
			// 提示
			tips(title, type, time) {
				this.$refs.uToast.show({
					title: title ? title : "",
					type: type ? type : "success",
					duration: time ? time + "" : "1000",
				});
			},
			onSuccess(res) {
				this.user.imageFile = res.data
			},
			onChange(res){
				if(res.errMsg.indexOf('fail')>=0){
					this.user.imageFile=''
				}
			},
			onError() {
				this.tips("文件上传错误", "error");
			},
			//返回上一级
			router() {
				this.$u.route({
					url: 'pages/my/ShoolList/ShoolList'
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.file {
		

		.section_4 {
			margin-top: 0.06rem;
			// padding: 0.17rem 0.17rem 0.07rem 0.23rem;
			background-color: rgb(255, 255, 255);

			.text_11 {
				color: #fff;
				font-size: 0.15rem;
				white-space: nowrap;
				padding: 0.05rem 0.05rem;
				background-color: #2e9bff;
				border-radius: 0.05rem;
				margin-right: 0.1rem;
				border: 1px solid #fff;
			}

			.text_12 {
				color: #2e9bff;
				font-size: 0.15rem;
				white-space: nowrap;
				padding: 0.05rem 0.05rem;
				background-color: #fff;
				border-radius: 0.05rem;
				margin-right: 0.1rem;
				border: 1px solid #2e9bff;
			}

			.equal-division {
				margin-top: 0.13rem;
				color: rgb(46, 155, 255);
				font-size: 0.12rem;
				line-height: 0.16rem;
				white-space: nowrap;

				.equal-division-item {
					flex: 1 1 1.6rem;
					max-width: 100%;

					.section_5 {
						// border-radius: 0.05rem;
						// border: 1px dotted #66b5ff;
						margin-top: 0.1rem;

						::v-deep .u-upload>view {
							width: 100% !important;

						}

						::v-deep.u-list-item {
							width: 100% !important;
							margin: 0;
						}
					}

					.text_16 {
						margin-top: 0.055rem;
						align-self: center;
					}
				}

				.equal-division-item_1 {
					max-width: 48.5%;
					margin-left: 0.14rem;
					flex: 1 1 1.6rem;

					.text_11 {
						margin-bottom: 0.13rem;
					}

					.section_6 {
						padding: 0.17rem 0.27rem 0.14rem 0.29rem;
						border-radius: 0.05rem;
						border: 1px dotted #66b5ff;
					}

					.text_19 {
						margin-top: 0.05rem;
						align-self: center;
					}
				}

				.top-section {
					padding: 0.12rem 0 0.1rem;
					border-radius: 0.05rem;
					background: #eff7ff;

					.image_6 {
						width: 0.22rem;
						height: 0.17rem;
					}

					.text_12 {
						margin-left: 0.075rem;
						margin-top: 0.015rem;
					}
				}

				.bottom-section {
					margin-top: 0.1rem;
					padding: 0.09rem 0.17rem 0.13rem;
					border-radius: 0.05rem;
					background: #eff7ff;

					.image_8 {
						margin-right: 0.08rem;
						width: 0.23rem;
						height: 0.17rem;
					}

					.text_14 {
						margin-top: 0.015rem;
					}
				}
			}
		}
	}
	.group_6{
		display: flex;
		justify-content: space-between;
	}

	.form {
		.headerImg {
			padding-bottom: 0.05rem;
		}

		.section_2>view>view {
			// margin-left: 0.21rem;
			padding: 0 !important;
			border-bottom: 0.01rem solid #edeeef;
			position: relative;
		}

		.section_2>view>view .input,
		.section_2>view>view text {
			line-height: 0.5rem;
		}

		.section_2>view>view .input {
			// padding-right: 0.2rem !important;
		}

		.section_2>view>view text {
			margin-right: 0.1rem;
			min-width: 0.91rem;
			white-space: nowrap;
		}

		.section_2>view>view image {
			position: absolute;
			top: 50%;
			right: 0.14rem;
			transform: translateY(-50%);
		}

		.image_3 {
			width: 0.075rem;
			height: 0.13rem;
		}

		.group {
			flex: 1 1 auto;
			overflow-y: auto;
		}

		.section_2 {
			padding: 0.055rem 0 0 0;
			background-color: rgb(255, 255, 255);
		}

		.group_16 {
			margin-top: 0.21rem;
			padding: 0 0.02rem;
		}

		.button_1,
		.button {
			padding: 0.13rem 0;
			color: rgb(255, 255, 255);
			font-size: 0.15rem;
			line-height: 0.14rem;
			letter-spacing: 0.03rem;
			white-space: nowrap;
			background-color: rgb(46, 155, 255);
			border-radius: 0.1rem;
			width: 3.1rem;
			margin: 0 auto;
		}

		.button_1 {
			margin-top: 0.1rem;
			color: rgb(55, 59, 72);
			background-color: rgb(255, 255, 255);
			border: solid 0.01rem rgba(160, 162, 172, 0.33);
			margin-bottom: 0.2rem;
		}

		.view_1 {
			margin-left: 0.02rem;
		}

		.text_15 {
			color: rgb(55, 59, 72);
			font-size: 0.15rem;
			line-height: 0.16rem;
			white-space: nowrap;
		}

		.image_2 {
			width: 0.6rem;
			height: 0.6rem;
			border-radius: 50%;
			overflow: hidden;
		}

		.image_4 {
			margin-right: 0.15rem;
			margin-top: 0.28rem;
		}
	}
	.group_9 {
			background-color: rgb(246, 247, 250);
			padding-bottom: 0.2rem;
			position: fixed;
			bottom: 180rpx;
			left: 0;
			right: 0;

			.button {
				width: 700rpx;
				margin: 0 auto;
				padding: 0.12rem 0;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				line-height: 0.16rem;
				letter-spacing: 0.03rem;
				white-space: nowrap;
				// background-color: rgb(60, 181, 251);
				border-radius: 50rpx;
				
			}
		}
	.content {
		width: calc(100% - 60rpx);
		margin: 24rpx auto;
		padding: 24rpx 32rpx;
		background: #fff;
		border-radius: 32rpx;
	}
	.title{
		font-weight: bold;
		font-size: 32rpx;
		color: rgba(0,0,0,0.9);
	}
	.tips{
		font-size: 24rpx;
		color: #7f7f7f;
		margin-top: 20rpx;
	}
	.red-tips{
		color: #EF3920;
	}
	::v-deep .u-add-wrap {
		display: none !important;
		}
</style>
