<template >
	<view :style="{height:windowHeight+'px',background:show?'#EC6919':''}">
		<!-- 只要他得高度 -->
		<image  :src="avaterSrc" class="w1005 posf" style="left: -1000px;" mode="widthFix" @load='imgH'></image>
	
		
		<view class="w1005">
			<canvas :style="{height:bgHeight+'px',width:'100%'}" class="bgf" canvas-id="myCanvas"></canvas>
		</view>
		
		
		
		<image class="bctpbtns" v-if='show' 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} from "@/utils/api/api.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				show:false,//是否显示隐藏
				qrcode_url:'',//二维码路径
				avaterSrc:'',//本地背景图片
				qrcodeurl:'',//生成的二维码
				bgHeight:667,//背景图的高度
				windowHeight:0,//可视区域高度
				windowWidth:375,//屏幕宽度
				imgUrl:'',//生成的canvas图片
				popupShow:false,//底部弹窗
				rpx:0,
				shopname:''
			}
		},
		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(opdata) {
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			this.rpx=uni.getSystemInfoSync().windowWidth/375;
			this.shop_id = opdata.shop_id;
			this.shop_name  =  uni.getStorageSync('userInfo').shop_name //店铺名称
			this.createGoodsQrcode();
		},
		methods: {
			filePath(type,wxType){
				if(this.imgUrl==''){ //没保存
					uni.showLoading({title:'正在保图片...'});
					uni.canvasToTempFilePath({ //保存canvas
						canvasId:'myCanvas',
						success:(res)=>{
							uni.hideLoading();
							this.imgUrl=res.tempFilePath;
							
							//#ifdef APP-PLUS
							uni.showLoading({title:'请稍后...',mask:true});
							uni.share({ //分享给朋友圈
								provider: 'weixin',
								scene: wxType, //WXSceneSession聊天界面    WXSenceTimeline朋友圈
								type: 2,
								imageUrl: res.tempFilePath,
								success: ret => {
									uni.hideLoading();
								},
								fail:err=>{
									console.log(err)
								}
							});
							//#endif
						},
						fail:(err)=>{
							uni.hideLoading();
							this.$api.msg('图片保存失败');
						},
					},this)
				}else{ //保存过了
					//#ifdef APP-PLUS
					uni.showLoading({title:'请稍后...',mask:true});
					uni.share({ //分享给朋友圈
						provider: 'weixin',
						scene: wxType, //WXSceneSession聊天界面    WXSenceTimeline朋友圈
						type: 2,
						imageUrl: this.imgUrl,
						success: ret => {
							uni.hideLoading();
						},
						fail:err=>{
							if(err.errCode==-100){
								this.$api.msg('系统繁忙，请稍后再试');
							}
						}
					});
					//#endif
				}
				
			},
			shareToFriend(type){
				let wxType='';
				if(type==3){//收藏
					wxType='WXSceneFavorite';
				}else{ //1聊天界面 2朋友圈
					if(type==1){
						wxType='WXSceneSession';
					}else{
						wxType='WXSenceTimeline';
					}
				}
				
				this.filePath(type,wxType);
				
			},
			change(e) {
				if (!e.show) {
					this.popupShow = false
				}
			},
			share() { //分享到
				this.popupShow=true;
			},
			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('图片保存失败');
						}
					})
				}
				
			},
			
			imgH(e){
				this.bgHeight=e.detail.height/2; //得到背景图高度
			},
			createGoodsQrcode(){//生成二维码
				uni.showLoading({title:'二维码生成中...',mask:true});
				shareQrcode({
					type:3, //店铺二维码
					shareid: this.shop_id,//店铺id
				}).then(res=>{
					uni.hideLoading();
				  if(res.code==0){
						uni.downloadFile({ //下载二维码
							url:this.staticUrl1+res.data.file,
							success:res=>{
								uni.hideLoading();
								if(res.statusCode==200){ //下载成功
									this.qrcodeurl=res.tempFilePath;
									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){  //主图下载
				uni.showLoading({title:'图片下载中...',mask:true});
				uni.downloadFile({ //下载图片到本地
					url:this.statictowUrl+"static/applet5/images/uts/shop_background.png",//背景主图片, //主图
					success:res=>{
						uni.hideLoading();
						if(res.statusCode==200){ //下载成功
							this.avaterSrc=res.tempFilePath;
							this.drawPosters(qrcodeurl,this.avaterSrc)
						}else{
							this.avaterSrc='';
							this.drawPosters(qrcodeurl,this.avaterSrc)
						}
					},
					fail:err=>{
						uni.hideLoading();
						this.avaterSrc='';
						this.drawPosters(qrcodeurl,this.avaterSrc);
						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.fillRect(0,0,this.windowWidth,this.bgHeight);
				console.log(qrcodeurl,avaterSrc)
				if(avaterSrc){//主图
					ctx.drawImage(avaterSrc,0,0,this.windowWidth,this.bgHeight);
					
					// ctx.setFontSize( 11.94)
					// ctx.setFillStyle("#FFFFFF")
					// ctx.fillText(this.shop_name, 184+34.5, 97.5 +  11.94,)
					
				}	
				if(qrcodeurl){//二维码
					ctx.drawImage(qrcodeurl, (this.windowWidth-210*rpx)/2, 220, 210*rpx, 220*rpx);
				}
				if(this.shop_name){//店铺名字
					ctx.setTextAlign('center')
					ctx.setFillStyle('#ffffff');
					ctx.setFontSize((22*rpx).toFixed(0));
					ctx.fillText(this.shop_name,(this.windowWidth-ctx.measureText(this.shopname).width)/2,470);
				}
				uni.hideLoading();
				ctx.draw();	
				this.show=true;
			},
		}
	
	}
</script>


<style>
	.bgf{
		background: #fff;
	}
	.lh90{
		line-height: 90upx;
	}
	.posf{
		position: fixed;
	}
	.bctpbtns{
		position: absolute;
		z-index:10000;
		right: 0;
		bottom:240px;
		width: 57upx;
		height: 189upx;
	}
	.fxhbbtns{
		position: absolute;
		z-index:10000;
		right: 0;
		bottom:130px;
		width: 57upx;
		height: 189upx;
	}
	.br-b{
		border-bottom: 1px solid #BCBCBC;
	}
	
</style>
