<template>
	<view class="page">
		<canvas type="2d" :id="'canvas_'+ pageId"
			style="width: 320px;height: 560px;position: fixed;left:8888px"></canvas>
		<!-- <canvas v-if="templateInfo.templateType == 2" type="2d" id="myCanvas2" style="width: 800px;height: 360px;position: fixed;left:8888px"></canvas> -->
		<view id="img-box" style="width: 100%;height: calc(100vh - 200rpx);overflow: hidden;border-radius: 12rpx;">
			<image :src="url" mode="widthFix" style="width: 100%;" show-menu-by-longpress="true"></image>
		</view>
		<view class="flex justify-around margin-tb">
			<view class="btn" @click="savePic">
				<image src="@/static/download.png" style="width: 48rpx;height: 48rpx"></image>
				<text>存为图片</text>
			</view>
			<view class="btn" @click="share"><text class="cuIcon-weixin" style="color:#39E5B1;font-size: 48rpx;"></text>
				<text>微信好友</text>
			</view>
			<!-- <button class="btn" open-type="share" id="pyq" @click="shareFile">朋友圈</button> -->
		</view>
	</view>
</template>

<script>
	import {
		getTemplateDetail,
		saveExportRecord,
		getBeerInfo
	} from "@/api/bar.js"
	import {
		base_url
	} from '@/api/config.js'
	export default {
		data() {
			return {
				pageId: Math.random().toString(36).substr(2),
				templateId: '',
				templateInfo: {},
				els: {},
				url: '',
				userInfo: {},
				barInfo: {},
				beer: {}
			};
		},
		onLoad(options) {
			this.templateId = options.templateId
			this.form = {
				amount: options.amount,
				amount1: options.amount1,
				specs: options.specs,
				specs1: options.specs1,
				no: options.no,
				beerStyles: options.beerStyles,
				brandName: options.brandName,
				beerId: options.beerId
			}
			this.userInfo = uni.getStorageSync('userInfo')
			this.barInfo = uni.getStorageSync('barInfo')
		},
		// onShareTimeline(res) {
		// 	console.log('pyq',res)
		// },
		// onShareAppMessage(res) {
		// 	if(res.form == 'menu') {
		// 		console.log('分享按钮',res.target.id)
		// 		return {
		// 			imageUrl: this.url,
		// 		}
		// 	}

		// },
		onReady() {
			this.getTemplateInfo()
		},
		methods: {
			getBeerInfoFun() {
				getBeerInfo(this.form.beerId).then(res => {
					this.beer = res.data
					this.els.brandName && (this.els.brandName.value = this.beer.brandName || '')
					this.els.ABV && (this.els.ABV.value = this.beer.beerAbv || '')
					this.els.cover && (this.els.cover.url = this.beer.cover)
					this.els.beerName && (this.els.beerName.value = this.beer.beerName || '')
					this.els.beerStyle && (this.els.beerStyle.value = this.beer.beerStyles || '')
					this.createPic()
				})
			},
			getTemplateInfo() {
				getTemplateDetail(this.templateId).then(res => {
					console.log(res)
					this.templateInfo = res.data
					this.els = JSON.parse(res.data.elements)
					this.els.address && (this.els.address.value = this.barInfo.address || '')
					this.els.barName && (this.els.barName.value = this.barInfo.barName || '')
					this.els.phone && (this.els.phone.value = this.barInfo.barContactPhone || '')
					this.els.no && (this.els.no.value = this.form.no || '')
					this.els.amount && (this.els.amount.value = this.form.amount || '')
					this.els.amount1 && (this.els.amount1.value = this.form.amount1 || '')
					this.els.specs && (this.els.specs.value = this.form.specs || '')
					this.els.specs1 && (this.els.specs1.value = this.form.specs1 || '')
					this.getBeerInfoFun()
				})
			},
			share() {
				uni.showShareImageMenu({
					path: this.url,
				})
			},
			// 保存到相册
			savePic() {

				uni.getSetting({
					success: (res) => {
						console.log(res)
						// 判断是否拥有此权限进行拉起授权  和 重新授权功能
						if (!res.authSetting['scope.writePhotosAlbum']) {
							// 未授权此项权限 拉起授界面
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									// 授权成功后 就可以执行 需要权限的  操作函数了
									uni.saveImageToPhotosAlbum({
										filePath: this.url,
										success: (res) => {
											uni.showToast({
												title: '保存成功',
												icon: 'success',
											})
										},
										fail: (err) => {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
											})
										},

									})
								},
								fail: (err) => {
									/*
									 第一次拒绝授权后必须在 uni.authorize的fail中使用
									 uni.openSetting 才能进入设置界面打开授权按钮
									 */

									// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
									uni.showModal({
										title: '是否重新授权相册功能',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success() {
														console.log('开启权限成功');
													},
													fail() {
														console.log('开启权限失败');
													}
												});
											} else if (res.cancel) {
												console.log('拒绝开启开启权限');
											}
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: this.url,
								success: (res) => {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
									})
								},
								fail: (err) => {
									uni.showToast({
										title: '保存失败',
										icon: 'none',
									})
								},

							})
						}
					}
				});
			},

			createPic() {
				uni.showLoading({
					title: '加载中'
				})
				let _this = this

				// 获取的画布
				uni.createSelectorQuery().select('#canvas_' + _this.pageId).fields({
					node: true,
					size: true
				}).exec((res) => {
					const ctx = res[0].node.getContext('2d')
					const canvas = res[0].node
					const dpr = uni.getWindowInfo().pixelRatio

					// 设置画布的宽高
					canvas.width = res[0].width * dpr
					canvas.height = res[0].height * dpr
					ctx.scale(dpr, dpr)
					ctx.clearRect(0, 0, canvas.width, canvas.height)
					// 绘制背景
					// let imageBg = canvas.createImage()
					// let imageCover = canvas.createImage()
					// imageBg.src = this.els.background
					// imageCover.src = this.els.cover.url
					// imageBg.onload = () => {
					// 	ctx.drawImage(imageBg, 0, 0, 360, 600)
					let imgArr = []
					if (this.els.background) {
						imgArr.push(this.els.background)
					} else if (this.els.cover && this.els.cover.url) {
						imgArr.push(this.els.cover.url)
					}

					this.downfile(imgArr, canvas).then(res => {
						if (this.els.background) {
							ctx.drawImage(res[0], 0, 0, 320, 560)
						} else if (this.els.cover && this.els.cover.url) {
							ctx.drawImage(res[1], this.els.cover.x, this.els.cover.y, this.els.cover
								.w, this.els.cover.h * 0.9)
						}


						for (let key in this.els) {
							if (key == "background" || key == "cover") {
								continue;
							} else {
								// console.log(key);
								if (this.els.hasOwnProperty(key)) {
									let item = this.els[key];
									if (key == 'specs' || key == 'specs1') {
										item.value += 'ML'
									}
									if (key == 'amount' || key == 'amount1') {
										item.value = '¥' + item.value
									}
									ctx.font = `${item.fontWeight} ${item.fontSize}px Arial`
									ctx.fillStyle = item.color
									// 内容居右对齐
									if (key == 'no') {
										ctx.textAlign = 'center'
									} else {
										ctx.textAlign = 'left'
									}
									ctx.fillText(item.value, item.x, item.y)
								}
							}
						}
						uni.canvasToTempFilePath({
							canvas: canvas,
							success: (res) => {
								_this.url = res.tempFilePath
								uni.hideLoading()
							},
							fail: (err) => {
								uni.hideLoading()
							},
						})
					})



				})
			},
			downfile(imgUrls, canvas) { //下载网络图片的promise对象

				var _load = function(imgUrl) {
					//创建img标签
					var img = canvas.createImage();
					img.src = imgUrl;
					//跨域选项
					// img.setAttribute("crossOrigin", 'Anonymous');
					return new Promise((resolve, reject) => {
						//文件加载完毕
						img.onload = function() {
							resolve(img);
						};
					});

				}
				var _loadAll = function(imgUrls) {
					var loadedImageUrls = [];
					for (var i = 0, len = imgUrls.length; i < len; i++) {
						loadedImageUrls.push(_load(imgUrls[i]));
					}
					return loadedImageUrls;
				}
				return Promise.all(_loadAll(imgUrls))
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		padding: 24rpx;
		background: #F2F2F2;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.btn {
			width: 130rpx;
			height: 130rpx;
			border-radius: 12rpx;
			background: #FFFFFF;
			font-family: Roboto;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #0B0E26;
		}

		.h-img {
			transform: rotate(90deg);
		}
	}
</style>