<template>
	<view class="authSchool white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('share.authSchool.title') }}</block>
		</Nav>
		<view :style="{paddingTop: `${CustomBar}px`}">
			<scroll-view
				class="body_scroll clearfix"
				:scroll-y="true"
				:style="scrollHeight"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore">
				<view class="authSchool_form">
					<view class="user_info">
						<view class="head_portrait">
							<image class="pic" mode="aspectFill" :src="form.user.avatarUrl"></image>
						</view>
						<view class="tips">请帮忙确认我的校友身份，谢谢</view>
						<view class="user_info__contenter">
							<view class="item">
								<view class="title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
								<view class="content">{{ form.userName | across }}</view>
							</view>
							<view class="item">
								<view class="title">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;校：</view>
								<view class="content">{{ form.schoolFullname | across }}</view>
							</view>
							<view class="item">
								<view class="title">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</view>
								<view class="content">{{ dict['education'][form.eduBackground] | across }}</view>
							</view>
							<view class="item">
								<view class="title">入学年份：</view>
								<view class="content">{{ form.enrollmentYear | across }}年</view>
							</view>
						</view>
						<view class="copyright">
							<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright.png"></image>
						</view>
					</view>
					<!-- 本人 -->
					<template v-if="form.userUid === options.uid">
						<view class="explain">已获确认（{{ form.confirmNum || 0}}/1）</view>
						<button class="btn active" open-type="share" v-if="form.authStatus === '0'">邀请校友确认</button>
						<view class="btn" v-else>已确认身份</view>
					</template>
					<!-- 非本人 -->
					<template v-if="form.userUid !== options.uid">
						<template v-if="form.authStatus === '0'">
							<view class="select" @click="checkedChange">
								<view class="checkbox">
									<view class="icomoon icon-Unchecked" v-if="!options.checked"></view>
									<view class="icomoon icon-checked" v-else></view>
								</view>
								<view class="txt">为营造真实可信的校园环境，请确保对方校友身份属实，虚假确认将被封号处理</view>
							</view>
							<view class="btn" :class="{active: options.checked}" @click="save">确认</view>
						</template>
						<view class="btn" v-else>已确认</view>
					</template>
				</view>
			</scroll-view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				dict: {
					education: this.API.dict['education']
				},
				options: {
					checked: true,
					uid: uni.getStorageSync('uid')
				}
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.getDeatil()
			}
		},
		methods: {
			// 获取详情
			async getDeatil () {
				this.loading = true
				const result = await this.$axios.get(this.API.getAuthPage, {
					params: {
						schoolmateAuthId: this.options.id
					}
				})
				this.loading = false
				this.triggered = false
				if (result) {
					this.form = result
				}
			},
			// 选中
			checkedChange () {
				this.options.checked = !this.options.checked
			},
			// 保存
			async save () {
				if (!this.options.checked) {
					return
				}
				this.loading = true
				const result = await this.$axios.put(this.API.confirmIdentity, {
					confirmor: uni.getStorageSync('uid'),
					schoolUserId: parseInt(this.options.id)
				})
				this.loading = false
				if (result) {
					this.getDeatil()
				} 
			},
			// 自定义下拉刷新被触发
			onRefresh () {
				this.triggered = true
				this.getDeatil()
			},
			// 自定义下拉刷新被复位
			onRestore () {
				this.triggered = false
			}
		},
		// 分享
		onShareAppMessage (e) {
			return {
				title: `帮忙确认下我的校友身份呗`, // 分享标题
				path: `/pages/share/authSchool?id=${this.options.id}`, // 页面 path
				imageUrl: 'https://daifeiclub.com/image/pics/team_share.png'
			}
		}
	}
</script>

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

		.body_scroll {
			.authSchool_form {
				padding: 124rpx 13px 96rpx 13px;
				.user_info {
					box-shadow: -4rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.08);
					padding: 0 10px 10rpx 10px;
					border: 2rpx solid $FDFDFD;
					background-color: $white;
					border-radius: 18rpx;
					margin-bottom: 23%;
					.head_portrait {
						margin: -65rpx auto 44rpx auto;
						height: 130rpx;
						width: 130rpx;
						.pic {
							border-radius: 50%;
						}
					}
					.tips {
						text-align: center;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $B18181;
					}
					.user_info__contenter {
						padding: 44rpx 16%;
						.item {
							display: flex;
							align-items: center;
							line-height: 30rpx;
							font-size: 34rpx;
							font-weight: 500;
							padding: 30rpx 0;
							color: $bg-0;
							.title {
								min-width: 170rpx;
								width: 170rpx;
							}
							.content {
								position: relative;
								text-align: center;
								line-height: 44rpx;
								flex: 1;
								&::before {
									content: '';
									position: absolute;
									right: 0;
									bottom: -14rpx;
									left: 0;
									height: 2rpx;
									background-color: $ECECEC;
								}
							}
						}
					}
				}
				.explain {
					text-align: center;
					line-height: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: $B18181;
				}
				.select {
					justify-content: center;
					padding: 0 40rpx;
					display: flex;
					.checkbox {
						margin: 8rpx 18rpx 0 0;
						font-size: 32rpx;
					}
					.txt {
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $bg-0;
					}
				}
				
				.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;
					}
					&::after {
						border-color: transparent;
					}
				}
			}
		}
	}
</style>
