<template>
	<view class="hishonour">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="see-cert" v-if="showCert" :class="showCert && delayHide ? 'bg-in' : 'bg-out'" @tap="hide">
			<view class="cert-dialog" :class="showCert && delayHide ? 'dialog-in' : 'dialog-out'" @tap.stop="">
				<canvas id="certcanvas" canvas-id="certcanvas" :style="{ width: certCanvasWidth + 'px', height: certCanvasHeight + 'px'}"></canvas>
				<button open-type="share">
					<text class="cuIcon-forwardfill"></text>
				</button>
				<text class="cuIcon-down" @tap="saveImg"></text>
			</view>
		</view>
		
		<view class="content">
			<canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
			<scroll-view v-if="list.length" class="connect-scroll" scroll-y :style="{ height: scrollViewHeight + 'px' }">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="left" @tap="previewImage(index, item.deg)">
						<image v-if="item.deg == 6" src="../../static/icon/deg2.png" mode="scaleToFill"></image>
						<image v-else-if="item.deg == 5" src="../../static/icon/deg4.png" mode="scaleToFill"></image>
						<image v-else src="../../static/icon/deg3.png" mode="scaleToFill"></image>
						<text class="grade absolute">{{ item.deg | deg }}</text>
						<text class="name absolute">{{ name }}</text>
						<text class="season absolute">{{ item.season | numToZh }}</text>
						<text class="year absolute">{{ item.timestamp | getYear }}</text>
						<text class="month absolute">{{ item.timestamp | getMonth }}</text>
						<text class="day absolute">{{ item.timestamp | getDate }}</text>
					</view>
					<view class="right">
						<view class="season">大卫博士商学院争霸赛第{{ item.season | numToZh }}季</view>
						<view class="score row">
							<text>总计学分</text>
							<text style="color: #999999;">{{ item.score }}分</text>
						</view>
						<view class="line"></view>
						<view class="rank row">
							<text>赛季排名</text>
							<text style="color: #999999;">第{{ item.rank }}名</text>
						</view>
						<view class="line"></view>
						<view class="grade row">
							<text>{{ item.deg | deg }}</text>
							<text @tap="seeCert(index, item.deg)" style="color: #FA6342;">查看证书<text style="margin-left: 8px;" class="cuIcon-right"></text></text>
						</view>
					</view>
				</view>
			</scroll-view>
			<text v-else>您没有参赛记录</text>
		</view>
	</view>
</template>

<script>
	import { api_getHistoryHonourList } from '../../api.js'
	let filters = null
	export default {
		onShareAppMessage: function (res) {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			console.log(this.name, this.season, this.grade, this.year, this.month, this.day)
			if (res.from === 'button') {
				return {
					title: '我的学位证书',
					path: `/pages/honour/honour?name=${this.name}&season=${this.season}&grade=${this.grade}&year=${this.year}&month=${this.month}&day=${this.day}`
				}
			}
			return {
				title: '大卫博士商学院卖货争霸',
				path: '/pages/index/index'
			}
		},
		data() {
			return {
				pageTitle: '历史荣誉',  //页面名
				scrollViewHeight: 0,  //scroll view 高
				canvasWidth: 0,  //视口外的 canvas 宽 （用来点击列表内的证书预览）
				canvasHeight: 0,  //视口外的 canvas 高 （用来点击列表内的证书预览）
				certCanvasWidth: 0,  //点击查看证书弹出的 canvas 宽
				certCanvasHeight: 0,  //点击查看证书弹出的 canvas 高
				list: [],  //历史荣誉列表
				delayPreviewImage: true,  //首次点击预览延迟
				sawCert: {},  //点击查看证书后被查看的证书的信息
				showCert: false,  //是否弹出查看证书弹窗
				delayHide: true,  //延迟淡出
				name: '',
				season: '',
				grade: '',
				year: '',
				month: '',
				day: ''
			};
		},
		methods: {
			seeCert (index, deg) {  //点击查看证书
				this.showCert = true
				this.sawCert = this.list[index]
				this.season = filters.numToZh(this.sawCert.season) // 赛季同上
				this.grade = filters.deg(this.sawCert.deg)
				this.year = filters.getYear(this.sawCert.timestamp)
				this.month = filters.getMonth(this.sawCert.timestamp)
				this.day = filters.getDate(this.sawCert.timestamp)
				setTimeout(() => {
					const ctx = uni.createCanvasContext('certcanvas')
					if (deg === 6) {
						ctx.drawImage('../../static/icon/deg2.png', 0, 0, this.certCanvasWidth, this.certCanvasHeight)
					} else if (deg === 5) {
						ctx.drawImage('../../static/icon/deg4.png', 0, 0, this.certCanvasWidth, this.certCanvasHeight)
					} else {
						ctx.drawImage('../../static/icon/deg3.png', 0, 0, this.certCanvasWidth, this.certCanvasHeight)
					}
					this.$drawHonour(ctx, [
						[uni.upx2px(40), this.grade, uni.upx2px(310), uni.upx2px(400)], 
						[uni.upx2px(22), this.name, uni.upx2px(310), uni.upx2px(460)], 
						[uni.upx2px(16), this.season, uni.upx2px(256), uni.upx2px(530)], 
						[uni.upx2px(16), this.year, uni.upx2px(220), uni.upx2px(720)], 
						[uni.upx2px(16), this.month, uni.upx2px(300), uni.upx2px(720)], 
						[uni.upx2px(16), this.day, uni.upx2px(390), uni.upx2px(720)]
					])
				}, 123)  //此处一定要延时执行，否则非首次点击查看证书后不显示
			},
			previewImage (index, deg) {  //点击 canvas 预览图片
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				const item = this.list[index]
				this.season = filters.numToZh(item.season)
				const ctx = uni.createCanvasContext('canvas')
				if (deg === 6) {
					ctx.drawImage('../../static/icon/deg2.png', 0, 0, this.canvasWidth, this.canvasHeight)
				} else if (deg === 5) {
					ctx.drawImage('../../static/icon/deg4.png', 0, 0, this.canvasWidth, this.canvasHeight)
				} else {
					ctx.drawImage('../../static/icon/deg3.png', 0, 0, this.canvasWidth, this.canvasHeight)
				}
				this.$drawHonour(ctx, [
					[uni.upx2px(50), filters.deg(item.deg), uni.upx2px(375), uni.upx2px(480)], 
					[uni.upx2px(30), this.name, uni.upx2px(375), uni.upx2px(570)], 
					[uni.upx2px(20), this.season, uni.upx2px(310), uni.upx2px(650)], 
					[uni.upx2px(20), filters.getYear(item.timestamp), uni.upx2px(260), uni.upx2px(886)], 
					[uni.upx2px(20), filters.getMonth(item.timestamp), uni.upx2px(370), uni.upx2px(886)], 
					[uni.upx2px(20), filters.getDate(item.timestamp), uni.upx2px(480), uni.upx2px(886)]
				])
				setTimeout(() => {
					uni.canvasToTempFilePath({  //首先将 canvas 转化为一个图片
						canvasId: 'canvas'
					}).then(([ , res]) => {  //获得图片的临时路径
						uni.hideLoading()  //app hide 时隐藏loading
						uni.previewImage({
							urls: [res.tempFilePath],
						})
					})
				}, this.delayPreviewImage ? 123 : 0)  //此处一定要延时执行，否则首次预览时黑屏
			},
			saveImg () {
				uni.canvasToTempFilePath({  //首先将 canvas 转化为一个图片
					canvasId: 'certcanvas'
				}, this).then(([ , res]) => {  //获得图片的临时路径
					return uni.saveImageToPhotosAlbum({  //将图片保存到系统相册
						filePath: res.tempFilePath
					})
				}).then(([err, res]) => {
					if (err && (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny")) {  //如果用户拒绝授权保存图片到相册
						const that = this
					    uni.showModal({
					        title: '"大卫博士学位争霸赛"需要保存图片或视频到你的相册',
					        content: '',
					        success (res) {
					            if (res.confirm) {
									wx.openSetting({
									  success (res) {
									    that.saveImg()
										return
									  }
									})
					            } 
					        }
					    })
					}
					if (res.errMsg === 'saveImageToPhotosAlbum:ok') {
						this.$refs.toast.hover('保存成功')
					}
				})
			},
			hide () {  //隐藏查看证书弹窗
				this.delayHide = false
				setTimeout(e => {
					this.showCert = false
					this.delayHide = true
				}, 100)
			},
		},
		created() {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			filters = this.$options.filters  //将全局过滤器里的方法放在 filters 里
			this.name = this.$store.state.userServerInfo.name  //一定要把用户名引进来，后端传过来的数据里没有名字
			this.canvasWidth = uni.upx2px(750)  //视口外的 canvas 宽 （用来点击列表内的证书预览）
			this.canvasHeight = uni.upx2px(1058)  //视口外的 canvas 高 （用来点击列表内的证书预览）
			this.certCanvasWidth = uni.upx2px(620)  //点击查看证书弹出的 canvas 宽
			this.certCanvasHeight = uni.upx2px(860)  //点击查看证书弹出的 canvas 高
			this.$scrollViewHeight('.content')  //设置页面内 scroll view 的高度
			this.$ajax.get(api_getHistoryHonourList).then(([ , { data: res }]) => {  //获取用户荣誉列表
				if (res.code === 200) {
					this.$hideLoading()
					this.list = res.data.list
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.hishonour {
		@include page();
		.see-cert {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .4);
			z-index: 1;
			.cert-dialog {
				width: 656rpx;
				height: 962rpx;
				background: #FA6342;
				box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(127,127,127,0.2);
				border-radius: 20rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -481rpx;
				margin-left: -328rpx;
				#certcanvas {
					position: absolute;
					top: 18rpx;
					left: 50%;
					transform: translateX(-50%);
					border-radius: 20rpx;
				}
				button {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -46rpx;
					font-size: 40rpx;
					border: 10rpx solid #FFFFFF;
					border-radius: 50%;
					color: #FFFFFF;
					box-sizing: border-box;
					width: 92rpx;
					height: 92rpx;
					text-align: center;
					line-height: 72rpx;
					background: #FA6342;
					padding: 0;
				}
				.cuIcon-down {
					position: absolute;
					right: 25rpx;
					bottom: 25rpx;
					font-size: 40rpx;
					color: #FFFFFF;
				}
			}
		}
		.content {
			display: flex;
			align-items: center;
			justify-content: center;
			#canvas {
				position: fixed;
				top: 0;
				left: 0;
				z-index: -999;
				transform: translate(-100%, -100%);
			}
			scroll-view {
				width: 100%;
				background: #EEEEEE;
			}
			.item {
				height: 300rpx;
				margin-top: 10rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				.left {
					width: 170rpx;
					height: 100%;
					position: relative;
					image {
						width: 100%;
						height: 100%;
					}
					.absolute {
						position: absolute;
					}
					.grade {
						font-size: 12rpx;
						left: 50%;
						top: 100rpx;
						transform: translateX(-50%);
					}
					.name {
						font-size: 8rpx;
						left: 50%;
						top: 120rpx;
						transform: translateX(-50%);
					}
					.season {
						font-size: 6rpx;
						left: 70rpx;
						top: 144rpx;
					}
					.year {
						font-size: 6rpx;
						left: 50rpx;
						top: 199rpx;
					}
					.month {
						font-size: 6rpx;
						left: 78rpx;
						top: 199rpx;
					}
					.day {
						font-size: 6rpx;
						left: 110rpx;
						top: 199rpx;
					}
				}
				.right {
					flex: 1;
					height: 100%;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;
					.season {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						color: #2A2A2A;
					}
					.row {
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
					}
					.line {
						height: 1rpx;
						background: #EEEEEE;
					}
				}
			}
		}
	}
	@keyframes dialog-in {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes dialog-out {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes bg-in {
		0% {
			background: rgba(0, 0, 0, 0)
		}
		100% {
			background: rgba(0, 0, 0, .4)
		}
	}
	@keyframes bg-out {
		0% {
			background: rgba(0, 0, 0, .4)
		}
		100% {
			background: rgba(0, 0, 0, 0)
		}
	}
	.bg-in {
		animation: bg-in .2s;
	}
	.bg-out {
		animation: bg-out .1s;
	}
	.dialog-in {
		animation: dialog-in .2s;
	}
	.dialog-out {
		animation: dialog-out .1s;
	}
</style>
