<template>
	<view class="page">
		<u-navbar title="二维码" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='50' id="navbar">
		</u-navbar>
		<view class="tishi">
			<text>微信“扫一扫”使用小程序</text>
			<text>开启您的一天好心情</text>
		</view>
        <view class="img">
        	<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uo2AtaJDlN9q2PxlBEDx" mode=""></image>
			<image :src="pic" class="picpic" mode="widthFix"></image>
			<view class="picpic" v-if="storeId != ''" style="top: 87%;">
				店铺：{{obj.name}}
			</view>
			<view class="picpic" v-if="roomId != ''" style="top: 87%;">
				房间：{{obj.roomName}}
			</view>
			<view class="picpic" v-if="toiletId != ''" style="top: 87%;">
				房间：{{obj.name}}
			</view>
        </view>
		<!-- 用于合并图片的 Canvas -->
				<canvas canvas-id="combinedCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" style="position: absolute; left: -9999px;" />
				<!-- <button @click="mergeAndSaveImages">合并并保存图片</button> -->
		<!-- 展示二维码 -->
		<view class="imgewm">
			<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
			<!-- <view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
				店铺:{{obj.name}}
			</view> -->
		</view>
		<view class="anniu" @click="mergeAndSaveImages">
			保存二维码
		</view>
	</view>
</template>
<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#DEF1DA",
                },
				sn:'',
				roomId:'',
				https:'',
				pic:'',
				canvasWidth: 300, // Canvas 宽度
				canvasHeight: 400, // Canvas 高度
				obj:{},
				toiletId:'',
				storeId:''
			}
		},
		onLoad(option) {
		    if(option.roomId){ //房间and大厅
			   this.roomId = option.roomId
			   this.https = 'https://testcha.chuangtewl.com?f=' + this.roomId
			}else if(option.storeId){ //大门-店铺
				this.storeId = option.storeId
				this.https = 'https://testcha.chuangtewl.com?d=' + this.storeId
			}else if(option.toiletId){ //厕所
				this.toiletId = option.toiletId
				this.https = 'https://testcha.chuangtewl.com?w=' + this.toiletId
			}
		   console.log(option,JSON.parse(option.obj))
		   this.obj = JSON.parse(option.obj)
           this.qrFun()
		},
		mounted() {
			this.drawCanvas()
		},
		methods: {
			mergeAndSaveImages() {
				const ctx = uni.createCanvasContext('combinedCanvas', this);
				// 绘制第一张图片
				uni.getImageInfo({
					src: 'https://api.ccttiot.com/smartmeter/img/static/uo2AtaJDlN9q2PxlBEDx',
					success: (res1) => {
						// 绘制第一张图片到 Canvas
						ctx.drawImage(res1.path, 0, 0, this.canvasWidth, this.canvasHeight);
						// 绘制第二张图片
						uni.getImageInfo({
							src: this.pic,
							success: (res2) => {
								// 绘制第二张图片到 Canvas
								// ctx.drawImage(res2.path, 75, 172, 152, this.canvasHeight / 2)
			                    ctx.drawImage(res2.path,  76, this.canvasHeight / 2.39, this.canvasWidth / 2, this.canvasHeight / 2)
								// 强制渲染 Canvas
								ctx.draw(true, () => {
									// 将 Canvas 内容导出为临时图片文件
									uni.canvasToTempFilePath({
										canvasId: 'combinedCanvas',
										success: (tempRes) => {
											// 保存图片到相册
											uni.saveImageToPhotosAlbum({
												filePath: tempRes.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功',
														icon: 'success'
													})
												},
												fail: (err) => {
													console.error('保存失败:', err)
													uni.showToast({
														title: '保存失败，请重试',
														icon: 'none'
													})
												}
											})
										},
										fail: (err) => {
											console.error('导出图片失败:', err)
											uni.showToast({
												title: '导出图片失败',
												icon: 'none'
											})
										}
									})
								})
							},
							fail: (err) => {
								console.error('获取第二张图片失败:', err)
								uni.showToast({
									title: '获取第二张图片失败',
									icon: 'none'
								})
							}
						})
					},
					fail: (err) => {
						console.error('获取第一张图片失败:', err)
						uni.showToast({
							title: '获取第一张图片失败',
							icon: 'none'
						})
					}
				})
			},
			drawCanvas() {
				const ctx = uni.createCanvasContext('qrcode', this)
				ctx.setFillStyle('#fff')
				ctx.fillRect(10, 10, 250, 250)
				ctx.draw()
			},
			// 保存二维码
			saveCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'qrcode',
					success: (res) => {
						console.log(res.tempFilePath) // 打印图片路径  
						this.pic = res.tempFilePath
						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	success: function() {
						// 		uni.showToast({
						// 			title: '保存成功',
						// 			icon: 'success'
						// 		})
						// 	}
						// })
					},
					fail: (err) => {
						console.error(err)
					}
				})
			},
			//**生成二维码**//
			qrFun: function() {
				this.wemflag = true
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.https,
					size: 300,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
				setTimeout(()=>{
					this.saveCanvas()
				},1000)
			},
		}
	}
</script>
<style lang="scss">
	/deep/ .u-iconfont,
	/deep/ .u-title{
		padding-bottom: 20rpx;
	}
	.imgewm {
		width: 700rpx;
		height:700rpx;
		margin: auto;
		margin-top: 54rpx;
		position: absolute;
		top: 0;
		left: -200%;
		z-index: 2;
	}
	.tishi{
		width: 620rpx;
		height: 180rpx;
		background: #F8FFF6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		text-align: center;
		padding-top: 20rpx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 54rpx;
		text{
			margin-top: 16rpx;
			display: block;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
	page {
		width: 750rpx;
		height: 1624rpx;
		background: #DEF1DA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.name{
		width: 100%;
		text-align: center;
		font-size: 36rpx;
	}
	.img{
		width: 666rpx;
		height: 800rpx;
		padding: 0 30rpx;
		margin: auto;
		box-sizing: border-box;
		margin-top: 30rpx;
		position: relative;
		.picpic{
			position: absolute;
			top: 46%;
			left: 50%;
			transform: translateX(-50%);
			width: 270rpx;
			height: 340rpx;
		}
	}
    .anniu{
		width: 546rpx;
		height: 88rpx;
		background: #48893B;
		border-radius: 59rpx 59rpx 59rpx 59rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
	}
</style>