<template>
	<view class="sign_code">
		<view class="title">请扫码签到</view>
		<image :src="imgUrl"></image>
		<canvas id="canvas" canvas-id="canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" @longpress="saveImage()" style="opacity: 0;" />
		<view class="save">（长按二维码保存）</view>
	</view>
</template>

<script>
import { signCode } from '../../api/sign_in.js';
export default {
	data() {
		return {
			imgUrl: '',
			canvasWidth: 0, //canvas 宽
			canvasHeight: 0 //canvas 高
		};
	},
	onShow() {
		// wx.getSystemInfo({
		// 	success: res => {
		// 		this.canvasHeight = res.windowHeight;
		// 	}
		// });
		this.getCode();
		this.canvasWidth = uni.upx2px(400);
		this.canvasHeight = uni.upx2px(400);
	},
	methods: {
		getCode() {
			signCode().then(res => {
				console.log(res);
				if (res.code == 200) {
					this.imgUrl = res.data.url;
				} else {
					uni.showModal({
						content: res.msg || '获取数据失败',
						showCancel: false
					});
				}
			});
		},
		saveImage() {
			let that = this;
			console.log(that.imgUrl);
			uni.getImageInfo({
				src: that.imgUrl,
				success: res => {
					that.getCanvas(res.path);
				}
			});
		},
		getCanvas(bgImg) {
			let ctx = uni.createCanvasContext('canvas');
			ctx.fillStyle = '#FFFFFF';
			ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
			ctx.drawImage(bgImg, 0, 0, this.canvasWidth, this.canvasHeight);
			ctx.draw(
				false,
				setTimeout(function() {
					uni.canvasToTempFilePath({
						width: uni.upx2px(400),
						height: uni.upx2px(400),
						canvasId: 'canvas',
						success: function(res) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: res => {
									uni.showModal({
										content: '保存签到码成功',
										showCancel: false
									});
								},
								fail: err => {
									if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
										uni.showModal({
											title: '提示',
											content: '您好,请先授权，再保存此图片。',
											showCancel: false,
											success: res => {
												if (res.confirm) {
													uni.openSetting({
														success(settingdata) {
															console.log(settingdata);
															if (settingdata.authSetting['scope.writePhotosAlbum']) {
																uni.showModal({
																	content: '请重新长按保存图片',
																	showCancel: false
																});
															} else {
																uni.showModal({
																	content: '您拒绝了保存到相册权限',
																	showCancel: false
																});
															}
														},
														fail: err => {
															uni.showModal({
																content: '手动打开相册权限失败',
																showCancel: false
															});
														}
													});
												}
											}
										});
									}
								},
								complete() {
									uni.hideLoading();
								}
							});
						}
					});
				}, 300)
			);
		}
	}
};
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background-color: #fff;
}
</style>
<style lang="scss">
.sign_code {
	text-align: center;
	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin: 80rpx 0 80rpx;
	}
	image {
		height: 400rpx;
		width: 400rpx;
	}
	#canvas {
		position: absolute;
		top: 209rpx;
		left: 177rpx;
		background: #ff000022;
	}
	.save {
		text-align: center;
		font-size: 28rpx;
		margin-top: 50rpx;
	}
}
</style>
