<template>
	<view class="content">
		<view class="qrimg">
			<tki-qrcode :cid="cid" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background"
				:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconSize" :lv="lv" :onval="onval"
				:showLoading="showLoading" :loadMake="loadMake" :usingComponents="usingComponents" @result="qrR" />
				<canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvas" id="myCanvas"
					class="hb"></canvas>
		</view>
		<view class="" style="height: 40rpx;">
			
		</view>
		<view class="myj-wrap" v-if="shareQrcodeUrl">
			<view class="ewm-wrap">
				<!-- <canvas :style="{ width:cw + 'rpx', height: ch+'rpx',}" canvas-id="myCanvas" id="myCanvas"
					class="hb"></canvas> -->
				<image :src="shareQrcodeUrl" mode="" :style="{ width:cw + 'rpx', height: ch+'rpx',}"></image>
			</view>
			<view class="bcewm" @click="saveShareQrcode('shareQrcodeUrl')">
				保存二维码
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rentFree,
	} from '@/api/index.js'
	export default {
		data() {
			return {
				ratio: '',
				ewmw: 300, //二维码相对宽度
				cw: 702, //画布相对宽度
				ch: 600, //画布相对高度
				shareQrcodeUrl: '', //画布生成的地址
				dkQrcodeUrl: '',
				canvasW: '', //画布宽度
				canvasH: '', //画布高度
				ewmImg: '', //二维码图片信息
				erweimasrc: '', //生成的二维码图片
				dkerweima: '',
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				ciddk: 'dk-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 300, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				// show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				valdk: '',
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
			}
		},
		onLoad() {
			this.sqmy()
		},
		methods: {
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			},
			qrR(res) {
				this.erweimasrc = res
				this.createPoster('shareQrcodeUrl', this.erweimasrc, 'myCanvas', '完成免押服务')
			},
			sqmy() {
				let that = this
				rentFree().then( res => {
					that.val = res.data.result.link
				})
			},
			async createPoster(imgname, ewmimg, cavid, tit = '') {
				let that = this
				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
				that.SystemInfo = await that.getSystemInfo();
			
				that.ewmImg = await that.getImageInfo(ewmimg);
				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
				that.ratio = that.SystemInfo.windowWidth / 750;
				that.canvasW = that.cw * that.ratio;
				this.canvasH = that.ch * that.ratio;
				that.ewmW = that.ewmw * that.ratio;
			
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if (that.ewmImg.errMsg == 'getImageInfo:ok' && that.SystemInfo.errMsg == 'getSystemInfo:ok') {
					console.log('二维码和屏幕信息加载完成')
					setTimeout(() => {
						var ctx = uni.createCanvasContext(cavid, that);
						// 填充背景色，白色
						ctx.setFillStyle('#fff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
						// drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2), 100 * that.ratio,
							this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
						// 3、绘制商品标题，多余文字自动换行
						ctx.setFontSize(16); // setFontSize() 设置字体字号
						ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
						ctx.setTextAlign('center')
						ctx.fillText('请使用支付宝扫描上方二维码', this.canvasW / 2, 200 * that.ratio + that.ewmW)
						ctx.fillText(tit, this.canvasW / 2, 260 * that.ratio + that.ewmW)
						console.log('----------------',cavid);
						try{
							ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
								that.fina = true
								uni.canvasToTempFilePath({ // 保存canvas为图片
									canvasId: cavid,
									quality: 1,
									fileType: 'jpg',
									success() {
										console.log('ok');
									},
									fail(err) {
										console.log(err);
									},
									complete: function(res) {
										// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
										console.log(res,'wancheng')
										// that.canvasShow = false
										that[imgname] = res.tempFilePath
										that.$forceUpdate()
										uni.hideLoading()
										
										// setTimeout(function() {
										// 	console.log(that.shareQrcodeUrl, that
										// 		.canvasShow)
										// }, 2000)
									},
								})
							});
						}catch(e){
							//TODO handle the exception
							console.log(e,'err');
						}
						
					}, 1500)
				} else {
					console.log('err')
				}
			},
			//保存图片
			saveShareQrcode(img) {
				uni.saveImageToPhotosAlbum({
					filePath: this[img],
					success: (res) => {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "成功保存到相册",
						});
					},
					fail: (err) => {
						//重新提示用户打开保存图片的授权
						if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting[
														'scope.writePhotosAlbum']) {
													uni.showModal({
														title: '提示',
														content: '获取权限成功,再次保存图片即可成功',
														showCancel: false,
													})
												} else {
													uni.showModal({
														title: '提示',
														content: '获取权限失败，无法保存到相册',
														showCancel: false
													})
												}
											}
										})
									}
								}
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myj-wrap {
		width: 702rpx;
		margin: auto;
	
	}
	.ewm-wrap {
		border-radius: 20rpx;
		overflow: hidden;
	}
	.bcewm {
		background-color: $base-color;
		color: #fff;
		text-align: center;
		height: 80rpx;
		width: 702rpx;
		border-radius: 40rpx;
		margin: auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-left: 75rpx;
	}
	.qrimg {
		position: absolute;
		left: -9999rpx;
		top: -9999rpx;
	}
</style>