<template>
	<view class="process" v-if="status==1">
		<view class="process-header">
			<view class="process-header-text">
				<view class="process-header-text-neishi" @click="topgi">
					<view class="process-header-text-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="process-header-text-title">
					聚合码
				</view>
			</view>
		</view>
		<view class="activite-nav">
			<view class="activite-card">
				<image class="activite-card-logo"
					src="https://cdn.bjtdba.com/vod/image/2024-04-18/20240418171035764.png" mode=""></image>
				<view class="activite-cardImg">
					<image :src="qrcode_src" mode="widthFix"></image>
				</view>
				<view class="activite-cardText">{{code_id}}</view>
				<view class="activite-cardBtn">
					扫码即得养老金
				</view>
				<view class="activite-cardPrompt">
					<view class="activite-prompt">
						<view class="activite-prompt-left"></view>
						<view class="activite-prompt-title">支持以下付款</view>
						<view class="activite-prompt-right"></view>
					</view>
					<view class="activite-prompt-img">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-23/20220823141611538.png" mode=""></image>
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-23/20220823141556288.png" mode=""></image>
					</view>
				</view>

			</view>

			<view class="downLoadButton" @click="clickGeneratePicture">
				<image class="downLoad-image" src="../../static/saveImage.png" mode=""></image>
				<view class="downLoad-text">
					保存图片
				</view>
			</view>

		</view>


		<!-- ************************* 海报画板 **********************-->
		<view style="position: absolute; bottom:10%; left: 0%;" v-show="flag">
			<l-painter :board="poster" css="width: 750rpx;" isCanvasToTempFilePath @success="handleSuccess($event)"
				@fail="handleError($event)" @progress="handleProgress($event)" ref="poster">
			</l-painter>
		</view>
		<!-- ************************* 海报画板 **********************-->
	</view>
</template>

<script>
	import {
		queryByKey
	} from '@/commit/shop.js'
	import lPainter from "@/uni_modules/lime-painter/components/l-painter/l-painter.vue"
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				isShowType: false,
				qrcode_src: '',
				code_id: '',
				status: '',
				imageUrl: '',
				picture: '',
				isHide: true,
				poster: {},
				image: "",
				flag:false,
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.queryByKey()
			this.qrcode_src = e.qrcode_src
			this.code_id = e.code_id
		},
		methods: {
			
			queryByKey() {
				queryByKey({
					key: "merchant_xiaochengxu_shenhe"
				}).then(res => {
					if (res.data.status == 200) {
						this.status = res.data.data.status
						uni.hideLoading();

						this.drawPoster();
					}
				}, fail => {
					console.log(fail)
					uni.hideLoading();
				})
			},

			// 绘制图片
			drawPoster() { //获取数据后，开始绘画
				this.poster = {
					width: '750rpx',
					height: '1448rpx',
					background: '#1F7CFF', //画布背景色
					// radius: '20rpx',//画布的圆角

					views: [{ //绘制图片，白色圆角背景
						type: 'image', //绘画的类型，具体官网查看
						src: 'https://cdn.bjtdba.com/vod/image/2022-08-23/20220823134038776.png', //图片路径
						mode: 'scaleToFill',
						css: { //css需要使用驼峰命名
							marginLeft: '31rpx',
							marginTop: '154rpx',
							width: '688rpx',
							height: '1053rpx'
						},
						views: [{ //绘制图片，logo
								type: 'image', //绘画的类型，具体官网查看
								src: 'https://cdn.bjtdba.com/vod/image/2022-08-23/20220823134835742.png', //图片路径
								css: { //css需要使用驼峰命名
									marginLeft: '271rpx',
									marginTop: '-52rpx',
									width: '144rpx',
									height: '144rpx'
								}
							},
							{ //绘制图片，二维码
								type: 'image', //绘画的类型，具体官网查看
								src: this.qrcode_src, //图片路径
								css: { //css需要使用驼峰命名
									marginLeft: '164rpx',
									marginTop: '52rpx',
									width: '360rpx',
									height: '360rpx',
								}
							},
							{ //绘制图片，扫码即得养老金 提示背景
								type: 'image', //绘画的类型，具体官网查看
								src: 'https://cdn.bjtdba.com/vod/image/2022-08-23/20220823140132620.png', //图片路径
								css: { //css需要使用驼峰命名
									marginLeft: '71rpx',
									marginTop: '111rpx',
									width: '546rpx',
									height: '94rpx'
								},
								views: [{ //绘制图片，扫码即得养老金 提示
									type: 'text', //绘画的类型，具体官网查看
									text: '扫码即得养老金',
									css: { //css需要使用驼峰命名
										marginLeft: '10rpx',
										marginTop: '18rpx',
										width: '526rpx',
										height: '50rpx',
										fontSize: '36rpx',
										color: '#ffffff',
										textAlign: "center",
									}
								}, ]
							},
							{ //绘制图片，支付类型选择背景
								type: 'view',
								css: {
									marginLeft: '82rpx',
									marginTop: '24rpx',
									width: '526rpx',
									height: '206rpx',
									background: '#DFEAFD',
									radius: '30rpx 30rpx 30rpx 30rpx',
								},
								views: [{ //绘制图片，支持以下付款 提示
										type: 'text', //绘画的类型，具体官网查看
										text: '支持以下付款', //图片路径
										css: { //css需要使用驼峰命名
											marginLeft: '10rpx',
											marginTop: '32rpx',
											width: '506rpx',
											height: '40rpx',
											fontSize: '28rpx',
											color: '#333333',
											textAlign: "center",
										}
									},
									{ //绘制图片，支付宝logo
										type: 'image', //绘画的类型，具体官网查看
										src: 'https://cdn.bjtdba.com/vod/image/2022-08-23/20220823141611538.png', //图片路径
										css: { //css需要使用驼峰命名
											marginLeft: '176rpx',
											marginTop: '32rpx',
											width: '70rpx',
											height: '70rpx'
										}
									},
									{ //绘制图片，微信logo
										type: 'image', //绘画的类型，具体官网查看
										src: 'https://cdn.bjtdba.com/vod/image/2022-08-23/20220823141556288.png', //图片路径
										css: { //css需要使用驼峰命名
											marginLeft: '32rpx',
											marginTop: '32rpx',
											width: '70rpx',
											height: '70rpx'
										}
									},

								]
							},

						]
					}, ]
				}
			},

			topgi() { // 返回按钮事件
				uni.switchTab({
					url: '/pages/cashier/index'
				});
			},
			change(e) {
				console.log("e:", e);
			},

			// 海报  l-painter回调函数
			handleSuccess(path) {
				uni.hideLoading();
				console.log('完成图片绘制')
			},
			handleProgress(number) {
				this.progressNum = number
			},
			handleError(error) {
				uni.hideLoading();
			},

			// 点击保存图片 - 1.base64字符串转成url地址
			clickGeneratePicture() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					pathType: 'url',
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture = res.tempFilePath
						// 2.保存
						this.saveImage()
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},

			// 保存图片
			saveImage() {
				let that = this
				if (that.picture !== "") {
					uni.hideLoading();

					uni.getSetting({
						success(res) {
							if (res.authSetting['scope.writePhotosAlbum']) {
								that.saveImageToAlbum();
							} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
								uni.authorize({
									scope: 'scope.writePhotosAlbum',
									success() {
										uni.showModal({
											title: "保存成功",
											content: "图片已成功保存到相册，快去分享到您的圈子吧",
											showCancel: false,
										})
									},
									fail() {
										that.authConfirm()
									}
								})
							} else {
								that.authConfirm()
							}
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: "生成海报失败,请重试",
						showCancel: false,
					})
				}
			},
			
			// 未授权相册功能 重新弹窗
			authConfirm() {
				let that = this
				wx.showModal({
					content: '检测到您没打开保存图片权限，是否去设置打开？',
					confirmText: "确认",
					cancelText: "取消",
					success: function(res) {
						if (res.confirm) {
							wx.openSetting({
								success(res) {
									if (res.authSetting['scope.writePhotosAlbum']) {
										that.saveImg();
									} else {
										uni.showModal({
											title: '保存失败',
											content: "您没有授权，无法保存到相册",
											showCancel: false
										})
									}
								}
							})
						} else {
							uni.showModal({
								title: '保存失败',
								content: "您没有授权，无法保存到相册",
								showCancel: false
							})
						}
					}
				});
			},

			// 保存到相册
			saveImageToAlbum() {
				uni.saveImageToPhotosAlbum({
					filePath: this.picture,
					success: () => {
						uni.showModal({
							title: "保存成功",
							content: "图片已成功保存到相册，快去分享到您的圈子吧",
							showCancel: false,
						})
					}
				});
			}
		},

	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.process {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.process-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			width: 100%;
			height: 176rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;

			.process-header-text {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				margin-top: 107rpx;
				align-items: center;

				.process-header-text-neishi {
					width: 45rpx;
					height: 45rpx;
					margin-right: 17rpx;

					.process-header-text-icon {
						width: 36rpx;
						height: 36rpx;
						margin-top: 2rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.activite-nav {
			width: 100%;
			height: 100%;
			margin-top: 176rpx;
			background-color: red;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: url('https://cdn.bjtdba.com/vod/image/2022-08-23/20220823132549341.png') no-repeat;
			background-size: 100%;
			padding-bottom: 242rpx;

			.activite-card {
				width: 688rpx;
				margin-top: 154rpx;
				height: 1053rpx;
				background: url('https://cdn.bjtdba.com/vod/image/2022-08-23/20220823134038776.png') no-repeat;
				background-size: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.activite-card-logo {
					width: 144rpx;
					height: 144rpx;
					position: absolute;
					top: -52rpx;
					left: 50%;
					transform: translate(-50%, 0);
				}

				.activite-cardImg {
					width: 360rpx;
					height: 360rpx;
					background: #D8D8D8;
					margin: 144rpx auto 52rpx auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.activite-cardText {
					line-height: 45rpx;
					font-size: 32rpx;
				}

				.activite-cardBtn {
					width: 546rpx;
					height: 94rpx;
					background: url('https://cdn.bjtdba.com/vod/image/2022-08-23/20220823140132620.png') no-repeat;
					background-size: 100%;
					color: #FFFFFF;
					font-size: 36rpx;
					text-align: center;
					padding: 20rpx 0 24rpx;
				}

				.activite-cardPrompt {
					width: 526rpx;
					// height: 206rpx;
					background: #DFEAFD;
					border-radius: 30rpx;
					padding: 32rpx 0;

					.activite-prompt {
						display: flex;
						align-items: center;
						justify-content: center;

						.activite-prompt-left {
							width: 50rpx;
							height: 2rpx;
							background: linear-gradient(90deg, rgba(223, 234, 253, 0) 0%, #1F7CFF 100%);
							border-radius: 1rpx;
						}

						.activite-prompt-title {
							font-size: 28rpx;
							margin: 0 16rpx;
						}

						.activite-prompt-right {
							width: 50rpx;
							height: 2rpx;
							background: linear-gradient(270deg, rgba(223, 234, 253, 0) 0%, #1F7CFF 100%)
						}
					}

					.activite-prompt-img {
						margin-top: 32rpx;
						text-align: center;

						image {
							width: 70rpx;
							height: 70rpx;
						}

						:first-child {
							margin-right: 32rpx;
						}
					}
				}
			}

			.downLoadButton {
				width: 128rpx;
				height: 165rpx;
				margin-top: 9rpx;
				// background-color: red;
				display: flex;
				flex-direction: column;
				align-items: center;

				.downLoad-image {
					width: 128rpx;
					height: 128rpx;
					position: absolute;
				}

				.downLoad-text {
					margin-top: 128rpx;
					color: #FFFFFF;
					font-size: 26rpx;
					text-align: center;
				}
			}

		}
	}
</style>