<template>
	<view class="attestationMakings white_style">
		<Nav className="nav_F6" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('campus.attestationMakings.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<view class="attestationMakings_form">
				<view class="upload_photo">
					<view class="title">学生证/学生卡/毕业证/录取通知书（多选一）</view>
					<view class="list upload_core clearfix">
						<view class="range">
							<view class="package" v-for="(item, key) in photos" :key="key">
								<view class="packageBlock">
									<view class="item" :style="photoHeight">
										<image class="close" src="https://daifeiclub.com/image/pics/close.png" mode="aspectFill" @click="uploadClose(key)"></image>
										<image class="pic" mode="aspectFill" :src="item" :style="photoHeight"></image>
									</view>
								</view>
							</view>
							<view class="package upload" v-if="photos.length < 3">
								<view class="packageBlock">
									<view class="item" :style="photoHeight" @click="upload">
										<view>
											<i class="iconfont icon-jiahao"></i>
											<text class="text">拍摄照片</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="tips">请确保姓名、学校、学历、入学年份与所填信息一致</view>
					<view class="copyright">
						<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright.png"></image>
					</view>
				</view>
				<view class="btn" @click="saveBefore" :class="{active: options.checked}">提交</view>
			</view>
			<!-- 材料提交 -->
			<view class="result" v-if="resultVisible">
				<view class="result_content">
					<view class="ico">
						<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/success.png"></image>
					</view>
					<view class="text">材料已提交</view>
					<view class="copyright">
						<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/copyright.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

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

	export default {
		mixins: [mixins],
		data() {
			return {
				options: {
					checked: false
				},
				photos: [], // 照片
				resultVisible: false
			}
		},
		watch: {
			photos: {
				handler() {
					if (this.photos.length) {
						this.options.checked = true
					} else {
						this.options.checked = false
					}
				},
				deep: true
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
				this.getDeatil()
			}
		},
		computed: {
			photoHeight () {
				let height = (this.System.screenWidth - 66) / 3
				return `width: ${height}px; height: ${height}px;`;
			}
		},
		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
				}
			},
			// 上传 chooseImage
			upload () {
				if (this.photos.length === 3) {
					return this.$base.Tips('最多上传3张认证材料')
				}
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 相机
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.photos.push(res.tempFilePaths[i])
						}
					}
				})
			},
			// 上传 删除图
			uploadClose (key) {
				this.photos.splice(key, 1)
			},
			// 保存前
			saveBefore () {
				if (!this.photos.length) {
					return this.$base.Tips('请上传认证材料')
				}
				this.save()
			},
			// 保存
			save () {
				this.loading = true
				for (let i = 0; i < this.photos.length; i++) {
					uni.uploadFile({
						url: `${this.API.domain}${this.API.schoolUpload}`,
						filePath: this.photos[i],
						name: 'file',
						formData: {
							'userUid': uni.getStorageSync('uid')
						},
						header: {
							token: uni.getStorageSync('token'),
							uid: uni.getStorageSync('uid')
						},
						success: res => {
							this.loading = false
							const { data } = res
							const result = JSON.parse(data)
							if (result && result.code === this.API.apiCode.success) {
								this.resultVisible = true
							} else {
								this.$base.Tips(result.message || '上传图片失败')
							}
						},
						fail: err => {
							this.loading = false
							this.$base.Tips(err.errMsg ? err.errMsg : '上传图片失败')
						}
					})
				}
				this.setSubscribe()
			},
			// 订阅消息
			setSubscribe () {
				uni.requestSubscribeMessage({
					tmplIds: ['kxK0DHH-DpCYg4B9daB0rRzg67NJhh_8HnotEh4_i0k'],
					success: res => {
						if (res['kxK0DHH-DpCYg4B9daB0rRzg67NJhh_8HnotEh4_i0k'] === 'accept') {
							const offiAcctOpenid = uni.getStorageSync('offiAcctOpenid')
							offiAcctOpenid && this.pushSubscribeMessage(offiAcctOpenid)
						}
					}
				})
			},
			// 推送公众号一次性订阅消息
			async pushSubscribeMessage (offiAcctOpenid) {
				await this.$axios.post(this.API.pushSubscribeMessage, {
					pagePath: `/pages/share/authSchool?id=${this.form.id}`,
					title: '认证审核通知',
					detail: this.form.schoolFullname,
					openId: offiAcctOpenid
				})
			}
		}
	}
</script>

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

		.body_scroll {
			.attestationMakings_form {
				padding: 60rpx 13px 96rpx 13px;
				.upload_photo {
					padding: 68rpx 10px 10rpx 10px;
					border: 2rpx solid $FDFDFD;
					background-color: $white;
					border-radius: 18rpx;
					.title {
						line-height: 30rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: $bg-0;
					}
					.upload_core {
						padding: 64rpx 0;
						.item {
							border: 2rpx dashed $E8E8E8;
							background-color: $E8E8E8;
							border-radius: 22rpx;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
							.close {
								position: absolute;
								top: -20rpx;
								right: -20rpx;
								height: 50rpx;
								width: 50rpx;
								z-index: 1;
							}
							.pic {
								border-radius: 22rpx;
								overflow: hidden;
							}
						}
						.upload {
							.item {
								background-color: transparent;
								border: 2rpx dashed $E8E8E8;
								text-align: center;
								color: $ccc;
								.iconfont {
									font-size: 56rpx;
								}
								.text {
									margin-top: 10rpx;
									font-size: 28rpx;
									line-height: 1;
								}
							}
						}
					}
					.tips {
						text-align: justify;
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: $B18181;
					}
				}
				.btn {
					background-color: $white;
					margin: 60% 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;
					}
				}
			}
			.result {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 2;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $F6;
				.result_content {
					.ico {
						height: 170rpx;
						width: 170rpx;
					}
					.text {
						line-height: 48rpx;
						margin-top: 68rpx;
						font-size: 34rpx;
						font-weight: 500;
						color: $bg-0;
					}
					.copyright {
						position: fixed;
						right: 0;
						bottom: 76rpx;
						left: 0;
					}
				}
			}
		}
	}
</style>
