<template>
	<view class="campusAdd white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('campus.add.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="campusAdd_form">
				<view class="cell">
					<view class="cell_th">
						<view class="title">完善校友身份</view>
						<view class="subtitle">仅用于审核</view>
					</view>
					<view class="cell_group">
						<view class="item">
							<view class="title">姓名</view>
							<view class="content">
								<input class="uni-input" v-model.trim="form.userName" :maxlength="16" />
							</view>
						</view>
						<view class="item">
							<view class="title">学校</view>
							<view class="content">
								<view class="uni-input arrow" @click="schoolChange">{{ options.school.fullName || '请选择' }}</view>
							</view>
						</view>
						<view class="item">
							<view class="title">学历</view>
							<view class="content">
								<view class="uni-input arrow" @click="educationVisible = true">{{ dict['education'][form.eduBackground] || '请选择' }}</view>
							</view>
						</view>
						<view class="item">
							<view class="title">入学年份</view>
							<view class="content">
								<view class="uni-input arrow" @click="entranceVisible = true">{{ form.enrollmentYear ? `${form.enrollmentYear}年` : '请选择' }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="cell_th">
						<view class="title">确认校友身份</view>
					</view>
					<view class="cell_group">
						<view class="option" :class="{active: form.authType === 2 }" @click="typeChange(2)">
							<view class="name">方式一：材料认证（人工审核）</view>
							<view class="text">上传本人学生证/学生卡/毕业证/录取通知书</view>
						</view>
						<view class="option" :class="{active: form.authType === 1 }" @click="typeChange(1)">
							<view class="name">方式二：校友确认</view>
							<view class="text">邀请一名已认证校友帮忙确认</view>
						</view>
					</view>
				</view>
				<view class="btn" @click="saveBefore" :class="{active: options.checked}">下一步</view>
				<view class="explain">为营造真实可信的校园环境，感谢理解</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
		<!-- 学历 -->
		<van-dialog
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			:showCancelButton="false"
			:width="dialogWdith"
		  :show="educationVisible"
		  show-cancel-button
			@close="educationClose"
		  use-slot>
			<view class="education_dialog">
				<view class="item"
					v-for="(item, key) in dict['education']"
					:key="key"
					@click="educationSelect(item, key)"
					:class="{active: form.eduBackground === key }">
					<view class="name omit">{{ item }}</view>
					<view class="ico">
						<i class="iconfont icon-duihao"></i>
					</view>
				</view>
			</view>
		</van-dialog>
		<!-- 入学年份 -->
		<van-dialog
			:closeOnClickOverlay="true"
			:showConfirmButton="false"
			:showCancelButton="false"
			:width="dialogWdith"
		  :show="entranceVisible"
		  show-cancel-button
			@close="entranceClose"
		  use-slot>
			<view class="education_dialog">
				<view class="item"
					v-for="(item, key) in options.dates"
					:key="key"
					@click="entranceSelect(item, key)"
					:class="{active: form.enrollmentYear === item }">
					<view class="name omit">{{ item }}年</view>
					<view class="ico">
						<i class="iconfont icon-duihao"></i>
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'
	import dayjs from 'dayjs'

	export default {
		mixins: [mixins],
		data() {
			return {
				educationVisible: false, // 学历
				entranceVisible: false, // 入学年份
				options: {
					school: {},
					dates: [],
					checked: false
				},
				form: {
					userName: '', // 姓名
					authType: 2, // 1校友认证，2材料认证
					eduBackground: '', // 学历
					schoolCode: '', // 学校识别码
					userUid: uni.getStorageSync('uid'),
					enrollmentYear: '' // 入学年份
				},
				dict: {
					education: this.API.dict['education']
				},
				rules: [
					{ name: 'userName', errorMsg: '请输入姓名' },
					{ name: 'schoolCode', errorMsg: '请选择学校' },
					{ name: 'eduBackground', errorMsg: '请选择学历' },
					{ name: 'enrollmentYear', errorMsg: '请选择入学年份' }
				]
			}
		},
		watch: {
			form: {
				handler() {
					if (this.form.userName && this.form.schoolCode && this.form.eduBackground && this.form.enrollmentYear) {
						this.options.checked = true
					} else {
						this.options.checked = false
					}
				},
				deep: true
			}
		},
		created() {
			uni.$on('schoolSelect', data => {
				this.form.schoolCode = data.idenCode
				this.options.school = data
			})
			this.dateInit()
		},
		computed: {
			dialogWdith () {
				return this.System.screenWidth - 26;
			}
		},
		onUnload() {
			uni.$off('schoolSelect')
		},
		methods: {
			// 输入框处理
			getInput (e, value) {
				if (this.form[e].length >= value) {
					return this.form[e].slice(0, value)
				}
			},
			// 日期初始化
			dateInit () {
				const year = dayjs().year()
				for (let i = 2000; i <= year; i++) {
					this.options.dates.unshift(i)
				}
			},
			// 学校
			schoolChange () {
				uni.navigateTo({
					url: `/pages/index/schoolSelect${ this.form.schoolCode ? `?schoolCode=${this.form.schoolCode}&schoolName=${this.options.school.fullName}` : '' }`
				})
			},
			// 认证方式
			typeChange (e) {
				this.form.authType = e
			},
			// 学历 关闭
			educationClose () {
				this.educationVisible = false
			},
			// 学历 选择
			educationSelect (item, key) {
				this.educationClose()
				this.form.eduBackground = key
			},
			// 入学年份 关闭
			entranceClose () {
				this.entranceVisible = false
			},
			// 入学年份 关闭
			entranceSelect (item, key) {
				this.entranceClose()
				this.form.enrollmentYear = this.options.dates[key]
			},
			// 保存前
			saveBefore () {
				this.$base.FORM_VERIFICATIONS(this.rules, this.form, () => {
					this.save()
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.post(this.API.saveUserSchool, this.form)
				this.loading = false
				if (result) {
					let path = `/pages/campus/${ this.form.authType === 1 ? 'attestationAlumna' : 'attestationMakings' }?id=${result}`
					this.link(path)
				}
			},
			// 跳转
			link (path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.campusAdd {
		min-height: calc(100vh);

		.body_scroll {
			.campusAdd_form {
				padding: 60rpx 26rpx 96rpx 26rpx;
				.cell {
					background-color: $white;
					border-radius: 18rpx;
					padding: 40rpx;
					& + .cell {
						margin-top: 70rpx;
					}
					.cell_th {
						margin-bottom: 32rpx;
						text-align: center;
						.title {
							font-size: 34rpx;
							font-weight: 600;
							line-height: 1;
							color: $bg-0;
						}
						.subtitle {
							margin-top: 12rpx;
							font-size: 30rpx;
							font-weight: 400;
							line-height: 1;
							color: $bg-0;
						}
					}
					.cell_group {
						.item {
							display: flex;
							align-items: center;
							line-height: 48rpx;
							padding: 15rpx 0;
							& + .item {
								margin-top: 30rpx;
							}
							.title {
								min-width: 160rpx;
								font-size: 32rpx;
								font-weight: 400;
								width: 100rpx;
								color: $bg-0;
							}
							.content {
								position: relative;
								font-size: 32rpx;
								font-weight: 400;
								color: $J49494;
								flex: 1;
								&::before {
									content: '';
									position: absolute;
									bottom: -10rpx;
									right: 0;
									left: 0;
									height: 2rpx;
									background-color: $ECECEC;
								}
							}
						}
						.option {
							border: 2rpx dashed $ECECEC;
							padding: 32rpx 28rpx;
							border-radius: 18rpx;
							line-height: 42rpx;
							font-size: 30rpx;
							font-weight: 400;
							& + .option {
								margin-top: 30rpx;
							}
							&.active {
								border: 2rpx solid $L7C160;
							}
							.name {
								color: $bg-0;
							}
							.text {
								color: $B18181;
							}
						}
					}
				}
			}
			.btn {
				background-color: $white;
				margin: 60rpx auto 0 auto;
				width: 368rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: $B18181;
				&.active {
					color: $L7C160;
				}
			}
			.explain {
				text-align: center;
				line-height: 30rpx;
				margin-top: 48rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: $B18181;
			}
		}
	
		// 学历/入学时间
		.education_dialog {
			-webkit-overflow-scrolling: touch;
			max-height: calc(100vh - 300px);
			overflow-y: auto;
			.item {
				padding: 32rpx 40rpx;
				position: relative;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				& + .item::before {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					left: 40rpx;
					height: 2rpx;
					background-color: $ECECEC;
				}
				&.active {
					.ico {
						color: $L7C160;
					}
				}
				.name {
					padding-right: 20rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: $bg-0;
					flex: 1;
				}
				.ico {
					text-align: center;
					min-width: 48rpx;
					font-size: 40rpx;
					color: $white;
					height: 48rpx;
					width: 48rpx;
				}
			}
		}
	}
</style>
