<template>
	<view class="honour" :class="fromIndex ? '' : 'share'">
		<custom-nav :title="pageTitle" v-if="fromIndex"></custom-nav>
		<custom-toast ref='toast'></custom-toast>
		<view class="content">
			<view class="top" @tap="previewImage" :class="fromIndex ? '' : 'share'">
				<canvas id="canvas" canvas-id="canvas" :class="fromIndex ? '' : 'share'" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
				<image class="bg" src="../../static/icon/honour-flower.png" mode=""></image>
				<view class="all" v-if="fromIndex" @tap.stop="tohishonour">全部证书<text class="cuIcon-right"></text></view>
			</view>
			<view class="bot">
				<view class="title">
					<image src="../../static/icon/honour-icon.png" style="transform: rotateY(180deg);" mode="scaleToFill"></image>
					<text>大卫博士学位争霸赛</text>
					<image src="../../static/icon/honour-icon.png" mode="scaleToFill"></image>
				</view>
				<view class="text">要想赢，就一定不能怕输。不怕输，结果未必能赢。但是怕输，结果则一定是输。</view>
				<view class="share-save" v-if="fromIndex">
					<button open-type="share" class="button">
						<text class="cuIcon cuIcon-share"></text>
						<text>分享给好友</text>
					</button>
					<view class="button" @tap="saveImg">
						<text class="cuIcon cuIcon-down"></text>
						<text>保存到相册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getHonourInfo } from '../../api.js'
	export default {
		onShareAppMessage: function (res) {  //分享荣誉证书
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			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: '荣耀殿堂',  //页面名
				canvasWidth: 0,  //canvas 宽
				canvasHeight: 0,  //canvas 高
				name: '',  //名字
				season: '',
				grade: '',  //学位
				year: '',  //年
				month: '',  //月
				day: '',  //日
				fromIndex: true  //是否非分享页面
			};
		},
		computed: {
			userServerInfo () {
				return this.$store.state.userServerInfo
			}
		},
		methods: {
			saveImg () {  //保存证书到本地
				uni.canvasToTempFilePath({  //首先将 canvas 转化为一个图片
					canvasId: 'canvas'
				}).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('保存成功')
					}
				})
			},
			previewImage () {  //点击 canvas 预览图片
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				uni.canvasToTempFilePath({  //首先将 canvas 转化为一个图片
					canvasId: 'canvas'
				}).then(([ , res]) => {  //获得图片的临时路径
					uni.hideLoading()  //app hide 时隐藏loading
					uni.previewImage({
						urls: [res.tempFilePath],
					})
				})
			},
			tohishonour () {  //点击历史荣誉
				uni.navigateTo({
					url: '../hishonour/hishonour'
				})
			}
		},
		async onLoad(opt) {  //当进入页面之后判断是否带带有参数
			if (opt.name) {  //如果带有参数，就说明用户是从分享出去的页面点进来的
				uni.hideLoading()  //停止 loading
				this.canvasWidth = uni.upx2px(550)
				this.canvasHeight = uni.upx2px(760)
				this.fromIndex = false  //当前页面为分享页面
				this.name = opt.name  //姓名
				this.season = opt.season // 赛季季数
				this.grade = opt.grade  //学位
				this.year = opt.year  //年
				this.month = opt.month  //月
				this.day = opt.day  //日
				const ctx = uni.createCanvasContext('canvas')
				if (this.grade === '未获得学位资格' || this.grade === '初中资格' || this.grade === '高中资格' || this.grade === '大学资格') {  //绘制证书
					ctx.drawImage('../../static/icon/deg1.png', 0, 0, this.canvasWidth, this.canvasHeight)
				} else if (this.grade === '学霸') {
					ctx.drawImage('../../static/icon/deg4.png', 0, 0, this.canvasWidth, this.canvasHeight)
				} else if (this.grade === '结业') {
					ctx.drawImage('../../static/icon/deg2.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(32), (this.grade === '学霸' || this.grade === '结业') ? '' : this.grade, uni.upx2px(275), uni.upx2px(338)],
					[uni.upx2px(32), this.name, uni.upx2px(275), uni.upx2px(406)],
					[uni.upx2px(14), this.season,uni.upx2px(230), uni.upx2px(468)],
					[uni.upx2px(16), this.year, uni.upx2px(174), uni.upx2px(639)],
					[uni.upx2px(16), this.month, uni.upx2px(264), uni.upx2px(639)],
					[uni.upx2px(16), this.day, uni.upx2px(345), uni.upx2px(639)]
				])
			} else {  //如果没有参数，就说明用户是从个人主页点进来的
				uni.showLoading({ title: '加载中', mask: true })  //显示loading
				this.canvasWidth = uni.upx2px(396)  //canvas 宽高适当小一点
				this.canvasHeight = uni.upx2px(549)  //canvas 宽高适当小一点
				this.$ajax.get(`${api_getHonourInfo}?season=${this.userServerInfo.season}`).then(([ , { data: res }]) => {  //获取荣誉信息
					this.$hideLoading()  //异步操作结束，停止 loading
					if (res.code === 200) {
						const filters = this.$options.filters
						this.name = this.userServerInfo.name  //一定要把用户名引进来，后端传过来额数据里没有名字
						this.season = filters.numToZh(this.userServerInfo.season) // 赛季同上
						this.grade = filters.deg(+res.data.deg, +res.data.type)  //学位
						this.year = filters.getYear(+res.data.timestamp)  //年
						this.month = filters.getMonth(+res.data.timestamp)  //月
						this.day = filters.getDate(+res.data.timestamp)  //日
						const ctx = uni.createCanvasContext('canvas')
						if (+res.data.deg) {  //绘制证书
							if (+res.data.deg === 6) {
								ctx.drawImage('../../static/icon/deg2.png', 0, 0, this.canvasWidth, this.canvasHeight)
							} else if (+res.data.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)
							}
						} else {
							ctx.drawImage('../../static/icon/deg1.png', 0, 0, this.canvasWidth, this.canvasHeight)
						}
						this.$drawHonour(ctx, [
							[uni.upx2px(26), (this.grade === '学霸' || this.grade === '结业') ? '' : this.grade, uni.upx2px(198), uni.upx2px(250)], 
							[uni.upx2px(20), this.name, uni.upx2px(198), uni.upx2px(292)], 
							[uni.upx2px(12), this.season,uni.upx2px(170), uni.upx2px(338)], 
							[uni.upx2px(12), this.year, uni.upx2px(130), uni.upx2px(460)], 
							[uni.upx2px(12), this.month, uni.upx2px(194), uni.upx2px(460)], 
							[uni.upx2px(12), this.day, uni.upx2px(254), uni.upx2px(460)]
						])
						return  //不要不小心删掉了
					}
					const ctx = uni.createCanvasContext('canvas')
					ctx.drawImage('../../static/icon/honour.png', 0, 0, this.canvasWidth, this.canvasHeight)
					ctx.draw()
				})
			}
		}
	}
</script>

<style lang="scss">
	.honour {
		@include page();
		&.share {
			border-top-color: #493225;
		}
		.content {
			display: flex;
			flex-direction: column;
			.top {
				width: 100%;
				height: 680rpx;
				background: #493225;
				border-bottom-right-radius: 375rpx 123rpx;
				border-bottom-left-radius: 375rpx 123rpx;
				position: relative;
				&.share {
					height: 890rpx;
				}
				#canvas {
					position: absolute;
					top: 56rpx;
					left: 50%;
					transform: translateX(-50%);
					&.share {
						top: 0;
					}
				}
				.bg {
					position: absolute;
					width: 566rpx;
					height: 464rpx;
					top: 35rpx;
					left: 50%;
					z-index: 1;
					transform: translateX(-50%);
				}
				.all {
					position: absolute;
					right: 32rpx;
					bottom: -13rpx;
					font-size: 26rpx;
					color: #FA6342;
				}
			}
			.bot {
				flex: 1;
				box-sizing: border-box;
				padding: 100rpx;
				.title {
					text-align: center;
					height: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					color: #FA6342;
					text {
						margin: 0 40rpx;
					}
					image {
						width: 48rpx;
						height: 45rpx;
					}
				}
				.text {
					margin-top: 80rpx;
					font-size: 30rpx;
					color: #666666;
				}
				.share-save {
					height: 60rpx;
					margin-top: 80rpx;
					display: flex;
					justify-content: space-between;
					.button {
						height: 100%;
						width: 240rpx;
						box-sizing: border-box;
						border: 2rpx solid #FA6342;
						border-radius: 30rpx;
						line-height: 56rpx;
						text-align: center;
						color: #FA6342;
						background: #FFFFFF;
						padding: 0;
						font-size: 24rpx;
						text {
							margin: 0 6rpx;
							vertical-align: middle;
							&.cuIcon {
								font-size: 36rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
