<template>
	<view class="Box">
		<view class="Box_item" v-show="qrodeshow == 0">
			<view id="Box">
				<view class="Box_item_content flex-colum">
					<view class="Box_item_content_T flex-center" style="padding: 16rpx;">
						<view style="width:242px; height:242px;"><canvas style="width:100%; height:100%;" id="qrcode"
								ref="qrcode" canvas-id="qrcode"></canvas></view>
					</view>
					<view class="Box_item_content_f flex-center" @click="savealbum">保存二维码</view>
					<view class="Box_item_content_fs flex-center">{{datares.string1}}</view>
				</view>
			</view>
			<view class="classvie">
				<view class="classvie_item flex-start">
					<text class="classvie_itemone">发票金额：</text>
					<text class="classvie_itemtow" style="color: #FF6565;">￥{{datares.price}}</text>
				</view>
				<view class="classvie_item flex-start">
					<text class="classvie_itemone">发票名称：</text>
					<text class="classvie_itemtow">{{datares.title}}</text>
				</view>
				<view class="classvie_item flex-start">
					<text class="classvie_itemone">发票类型：</text>
					<text class="classvie_itemtow">{{datares.type}}</text>
				</view>
			</view>
		</view>
		<view class="box_class" @click="box_class">
			已完成
		</view>
		<view class="" v-show="qrodeshow == 1"></view>
		<u-modal :show="modalshow.show" :showCancelButton="true" :title="modalshow.title"
			:content="modalshow.content"></u-modal>
		<u-popup :show="imgShow" @close="imgShow = false">
			<view class="img-box">
				<view class="tips">
					<view class="close" @click="imgShow = false"><u-icon name="close" size="16" color="#fff"></u-icon>
					</view>
				</view>
				<image :show-menu-by-longpress="true" class="img-box-img" :src="img" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// #ifdef H5
	import dayjs from 'dayjs';
	import html2canvas from 'html2canvas';
	// #endif
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js'; // npm install uqrcodejs
	export default {
		data() {
			return {
				text: 'uQRCode',
				qrodeshow: 0,
				modalshow: {
					show: false,
					title: '温馨提示',
					content: '微信支付认证未审核，该收款码，暂不支持微信支付'
				},
				userApp: uni.cache.get('userApp'),
				size: 242,
				data: {},
				fowxAuditInfo: {},
				imgShow: false,
				img: ''
			};
		},
		onLoad(e) {
			console.log(e)
			this.datares = e
		},
		onReady() {
			this.merchantStoreshowMerchantStoreReceipt();
		},
		computed: {},
		methods: {
			box_class() {
				uni.navigateBack();
			},
			savealbum(e) {
				// #ifdef APP
				uni.showLoading({
					//加载框
					title: '保存中...',
					mask: true
				});
				uni.canvasToTempFilePath({
					canvasId: "qrcode",
					complete(res) {
						// 在 app 中， 图片地址直接返回的值 临时地址  png 或 jpg，直接使用uni的方法
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									title: "保存成功",
									icon: "success"
								});
							},
							fail() {
								uni.showToast({
									title: "保存失败",
									icon: "error"
								})
							}
						})
					}
				})
				// #endif
				// #ifdef H5
				// let query = uni.createSelectorQuery().in(this);
				// console.log(document.querySelector('#Box'));
				// return;
				if (this.img) {
					this.imgShow = true;
				} else {
					uni.showLoading({
						//加载框
						title: '保存中...',
						mask: true
					});
					html2canvas(document.querySelector('#Box'), {
							backgroundColor: 'transparent',
							useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
						})
						.then(canvas => {
							uni.hideLoading();
							// const dataURL = canvas.toDataURL('image/png');
							const dataURL = canvas.toDataURL('image/png');
							const creatDom = document.createElement('a');
							document.body.appendChild(creatDom);
							creatDom.href = dataURL;
							console.log(creatDom.href)
							creatDom.download = dayjs().valueOf();
							creatDom.click();
							// creatDom.remove(); // 下载之后把创建的元素删除
						})
						.catch(err => {
							console.log(err);
						});
				}
				// #endif
			},

			async merchantStoreshowMerchantStoreReceipt(lane) {
				// 获取uQRCode实例
				var qr = new uQRCode();
				// 设置二维码内容
				console.log(lane)
				qr.data = this.datares.url;
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = this.size;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			requestlang() {
				uni.request({
					url: uni.conf.baseUrl + 'wap/merchant/authPay',
					// url:'http://192.168.1.117:8084/wap/merchant/authPay',
					data: {
						//参数
						userAppId: 2,
						channel: 1,
						qrNo: 1,
						view: 1
					},
					header: {
						'user-agent': 'micromessenger' //自定义请求头信息
					},
					method: 'GET', //请求方式，必须为大写
					success: res => {
						console.log('接口返回------', res);
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.img-box {
		padding: 0 28upx 28upx;

		.img-box-img {
			width: 100%;
			height: 100%;
		}

		.tips {
			display: flex;
			justify-content: center;
			padding: 28upx 0;
			font-size: 32upx;
			font-weight: bold;
			color: #000;
			position: relative;

			.close {
				width: 40upx;
				height: 40upx;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -20upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.Box {
		.box_nav {
			// background: #318afe;
			padding: 100rpx 28rpx 0 28rpx;

			.box_navT {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.box_navO {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				// background: #e5e5e5;
				border-radius: 2rpx;

				text {
					padding: 8rpx 16rpx;
				}

				.box_navO_text_O {
					color: #333333;
					// background: #ffffff;
					border-radius: 0 5rpx;
				}
			}
		}

		.Box_item {
			padding: 28rpx;

			.Box_item_content {
				position: relative;
				margin-top: 48rpx;
				width: 100%;
				background: #318AFE;
				border-radius: 35rpx;

				.Box_item_content_T {
					margin-top: 62rpx;
					background: #ffffff;
					border-radius: 18rpx;
				}

				.Box_item_content_E {
					margin-top: 24rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}

				.Box_item_content_f {
					margin-top: 32rpx;
					width: 282rpx;
					height: 72rpx;
					line-height: 72rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(41, 112, 204, 0.99);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 36rpx;
					color: #318AFE;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.Box_item_content_fs {
					margin-bottom: 36rpx;
					margin-top: 30rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 0rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.classvie {
				padding: 16rpx 32rpx 32rpx 56rpx;
				background: #fff;
				border-radius: 0rpx 0rpx 12rpx 12rpx;

				.classvie_item {
					margin-top: 16rpx;

					.classvie_itemone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 28rpx;
						color: #666666;
						font-style: normal;
						text-transform: none;
					}

					.classvie_itemtow {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.Box_item_content_botton_text {
				margin-top: 48rpx;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
			}

			.Box_item_content_botton_bouut {
				margin-top: 48rpx;
				width: 100%;

				view {
					padding: 8rpx 0;
					width: 558rpx;
					background: #288efb;
					border-radius: 50rpx;
					font-size: 36rpx;
					text-align: center;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.Box_item_content_botton_bouuts {
				margin-top: 22rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}

		.box_class {
			margin: 100rpx auto;
			width: 558rpx;
			height: 84rpx;
			background: #288EFB;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}
</style>