<template>
	<view :style="{height:windowHeight+'px',background:'#eee'}">
		<!-- 只要他得高度 -->
		<!-- <image :src="avaterSrc" class="w1005 posf" style="left: -1000px;top: -1000px;" mode="widthFix" @load='imgH'></image> -->


		<view class="w1005">
			<canvas :style="{height:windowHeight+'px',width:'100%'}" class="bgf" canvas-id="myCanvas"></canvas>
		</view>



		<image class="bctpbtns" src="/static/bctp.png" @tap.prevent.stop="saveImage()"></image>
		<!-- <image class="fxhbbtns" v-if='show' src="/static/fxhb.png" @tap.prevent.stop="share()"></image> -->


		<!-- <uni-popup type='bottom' :show='popupShow' @change="change" style="z-index: 999999999 !important;">
			<view class="bgf mb-10" style="border-radius: 20upx;z-index: 999999999 !important;">
				<view class="tc s30 lh90 br-b" @tap.stop="shareToFriend(1)">微信好友</view>
				<view class="tc s30 lh90 br-b" @tap.stop="shareToFriend(2)">微信朋友圈</view>
				<view class="tc s30 lh90" @tap.stop="shareToFriend(3)">微信收藏</view>
			</view>
		</uni-popup> -->

	</view>
</template>

<script>
	import {
		createQrcode as shareQrcode,
		eleTable
	} from "@/utils/api/api.js";
	export default {
		data() {
			//225 
			return {
				windowWidth: 0,
				windowHeight: 0,
				bgHeight: 0,
				qrcodeurl: '',
				avaterSrc: '',
				imageMultiple: 1, //图片缩放倍数
				tablenumber: '',
				codeurl: '',
				imgUrl: '', //生成的canvas图片
				shop_name:''
			}
		},
		computed: {
			staticUrl() { //静态资源地址 正式
				return this.$store.state.staticUrl;
			},
			staticUrl1() { //静态资源地址 测试
				return this.$store.state.staticUrl1;
			},
			statictowUrl() {
				return this.$store.state.statictowUrl;
			},
			userInfo() {
				return this.$store.state.userInfo;
			},
			uploadurl() {
				return this.$store.state.uploadurl;
			}
		},
		onLoad(options) {
			
			this.shop_name  =  uni.getStorageSync('userInfo').shop_name
			console.log(options)
			this.codeurl = options.codeurl
			this.tablenumber = options.name

			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;

			this.createGoodsQrcode();


		},
		methods: {
			saveImage() { //保存图片
				uni.showLoading({
					title: '正在保存图片...',
					mask: true
				});
				if (this.imgUrl == '') {
					uni.canvasToTempFilePath({ //保存canvas
						canvasId: 'myCanvas',
						success: (res) => {
							uni.hideLoading();
							this.imgUrl = res.tempFilePath;
							console.log(this.imgUrl)
							uni.saveImageToPhotosAlbum({ //保存到相册
								filePath: res.tempFilePath,
								success: (res) => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									});
								},
								fail: function(err) {
									console.log(err)
									this.$api.msg('图片保存失败');
								}
							})
						},
						fail: (err) => {
							uni.hideLoading();
							this.$api.msg('图片保存失败');
						},
					}, this)
				} else {
					uni.saveImageToPhotosAlbum({ //保存到相册
						filePath: this.imgUrl,
						success: (res) => {
							uni.hideLoading();
							uni.showToast({
								title: '图片保存成功',
								icon: 'none',
								duration: 2000
							});
						},
						fail: function(res) {
							uni.hideLoading();
							this.$api.msg('图片保存失败');
						}
					})
				}

			},

			drawPosters(qrcodeurl, avaterSrc) {
				let rpx = this.rpx;
				uni.showLoading({
					title: '正在绘制海报...',
					mask: true
				});
				const ctx = uni.createCanvasContext('myCanvas', this); //创建画布/
				ctx.setFillStyle('#FFFFFF');

				ctx.translate(this.windowWidth, 0) //改变原点坐标

				ctx.rotate(90 * Math.PI / 180) //旋转90度

				// width：255px  height:141.5px
				//        510           283  
				ctx.fillRect(0, 0, this.windowWidth, this.windowHeight);
				// console.log(avaterSrc,'dasdadadadsadadad');
				if (avaterSrc) { //主图
					// 65.5  17.5
					ctx.drawImage(avaterSrc, 0, 0, this.windowHeight, this.windowWidth);

					ctx.drawImage('/static/table_code/tableCodeTitle.png', this.imageMultiple * 32, this.imageMultiple * 13.5, this.imageMultiple *
						65.5, this.imageMultiple * 17.5);

					//45.5  99.5
					// ctx.rect( this.imageMultiple*15,  this.imageMultiple*47.5, this.imageMultiple*99.5, this.imageMultiple*45.5);
					// ctx.setFillStyle('red')
					ctx.setFontSize(this.imageMultiple * 22.91)
					ctx.setFillStyle('#f64f15');

					// console.log(this.imageMultiple*47.5,'hello')
					//字体加粗
					ctx.fillText('扫码点餐', this.imageMultiple * 20, this.imageMultiple * 47.5 + this.imageMultiple * 22.91 - 1)
					ctx.fillText('扫码点餐', this.imageMultiple * 20 - 1, this.imageMultiple * 47.5 + this.imageMultiple * 22.91)

					ctx.fillText('便捷实惠', this.imageMultiple * 20, this.imageMultiple * 47.5 + this.imageMultiple * 22.91 * 2 - 1)
					ctx.fillText('便捷实惠', this.imageMultiple * 20 - 1, this.imageMultiple * 47.5 + this.imageMultiple * 22.91 * 2)
						
					let shuhuifontwidth = ctx.measureText('便捷实惠').width  //  width:201.719970703125

					ctx.setFontSize(this.imageMultiple * 9.98)
					ctx.setFillStyle('#424242');
					ctx.fillText('桌号', this.imageMultiple * 29.5, this.imageMultiple * 117.5 + this.imageMultiple * 9.98)
					
					let width = this.imageMultiple * 29.5 - this.imageMultiple * 20 //缩颈距离
					
					const zouhaofontwidth = ctx.measureText('桌号').width  //width:43.939971923828125
					
					
					let shijiwidth = (shuhuifontwidth - (width*2 + zouhaofontwidth))/2
					
					console.log(shuhuifontwidth,'桌号;');
					console.log(width,'桌号;');
					console.log(shijiwidth,'桌号;');
					// console.log(shijiwidth,'桌号;');
					
					ctx.setFontSize(this.imageMultiple * 28.98)
				
					ctx.setTextAlign('center')
					ctx.setFillStyle('#000000');
					ctx.fillText(this.tablenumber, this.imageMultiple * (29.5+shijiwidth-width/2), this.imageMultiple * 117.5 + this.imageMultiple * 9.98 - 1)
					ctx.fillText(this.tablenumber,  this.imageMultiple * (29.5+shijiwidth-1-width/2), this.imageMultiple * 117.5 + this.imageMultiple * 9.98)
					console.log(width)
					
					
					ctx.setTextAlign('center')
					ctx.setFontSize(this.imageMultiple * 11.94)
					ctx.setFillStyle("#FFFFFF")
					ctx.fillText(this.shop_name, this.imageMultiple * (184+34.5), this.imageMultiple * 97.5 + this.imageMultiple * 11.94,)
					ctx.fillText('祝您用餐愉快', this.imageMultiple * (184+34.5), this.imageMultiple * 117.5 + this.imageMultiple * 11.94)
					ctx.fill()

				}
				if (qrcodeurl) { //二维码
					// console.log(qrcodeurl, '爱上飞机喀什复活节卡双发飞机')
					// drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
					// ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
					// ctx.drawImage(qrcodeurl, (this.windowWidth-210*rpx)/2, 220, 210*rpx, 220*rpx);
					// ctx.drawImage(qrcodeurl, 59*rpx, 59*rpx, 59*rpx, 59*rpx);
					// console.log(this.imageMultiple*172)
					console.log(this.imageMultiple * 29)
					ctx.drawImage(qrcodeurl, this.imageMultiple * 188.5, this.imageMultiple * 25.5, this.imageMultiple * 59, this.imageMultiple *
						59);
					// ctx.drawImage(qrcodeurl, 0, 0, this.imageMultiple * 59, this.imageMultiple * 59);
				}
				if (this.shopname) { //店铺名字

					ctx.setFillStyle('#ffffff');
					ctx.setFontSize((18 * rpx).toFixed(0));
					ctx.fillText(this.shopname, (this.windowWidth - ctx.measureText(this.shopname).width) / 2, 470);
				}
				uni.hideLoading();
				ctx.draw();
				this.show = true;
			},

			createGoodsQrcode() { //生成二维码
				uni.showLoading({
					title: '二维码生成中...',
					mask: true
				});
				// shareQrcode({
				// 	type: 3, //店铺二维码
				// 	shareid: 5695, //店铺id
				// }).then(res => {
				console.log(this.statictowUrl + this.codeurl)
				// if (res.code == 0) {
				uni.downloadFile({ //下载二维码
					// url:this.staticUrl1+res.data.file,

					url: this.statictowUrl + '/attachs/' + this.codeurl,
					success: res => {
						uni.hideLoading();
						if (res.statusCode == 200) { //下载成功
							this.qrcodeurl = res.tempFilePath;
							// this.drawPosters(this.qrcodeurl,this.avaterSrc)
							this.avater(this.qrcodeurl);
						} else {
							this.qrcodeurl = '';
							this.avater(this.qrcodeurl);
						}
					},
					fail: err => {
						this.qrcodeurl = '';
						this.avater(this.qrcodeurl);
						this.$api.msg("图片下载失败");
					}
				})

				// } else {
				// 	this.qrcodeurl = '';
				// 	this.$api.msg("生成二维码失败");
				// 	this.avater(this.qrcodeurl);
				// }

				// })
			},


			avater(qrcodeurl) { //主图下载
				let that = this;
				uni.showLoading({
					title: '图片下载中...',
					mask: true
				});
				uni.downloadFile({ //下载图片到本地
					url: that.statictowUrl + "static/applet5/images/table_code/background.png", //背景主图片, //主图
					success: res => {
						// console.log(res,'主图');
						uni.hideLoading();
						uni.getImageInfo({
							src: res.tempFilePath,
							success: function(image) {

								// console.log(Number(that.windowHeight)/Number(image.height))
								// this.windowWidth
								// console.log(that.windowHeight)
								console.log(image.width);
								console.log(image.height);
								that.imageMultiple = Number(that.windowHeight) / Number(image.height)
								console.log(that.imageMultiple * image.height)
								console.log(that.imageMultiple)
								if (res.statusCode == 200) { //下载成功
									console.log(res)
									that.avaterSrc = res.tempFilePath;
									that.drawPosters(qrcodeurl, that.avaterSrc)
								} else {
									that.avaterSrc = '';
									that.drawPosters(qrcodeurl, that.avaterSrc)
								}
							}
						});
					},
					fail: err => {
						uni.hideLoading();
						that.avaterSrc = '';
						that.drawPosters(qrcodeurl, that.avaterSrc);
						that.$api.msg("图片下载失败");
					}
				})
			},
		}
	}
</script>

<style>
	.bctpbtns {
		position: absolute;
		z-index: 10000;
		right: 0;
		bottom: 240px;
		width: 57upx;
		height: 189upx;
	}
</style>
