<template>
	<!-- 商家二维码 -->
	<!-- 商家码 -->
	<view class="content yocode">
		<view class="submitbtn active" @tap="shareQrcode" v-if="!qrShow">生成</view>
		<!-- <view class="submitbtn active" @tap="shareFc" v-if="!qrShow">生成</view> -->
		<!-- @tap=" saveImage()" -->
		<view class="flex_row_c_c modalView" v-if="qrShow" :class="qrShow?'show':''" >
			<view class="flex_column">
				<!-- backgroundColor-white -->
				<view class=" padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
					
					<image class="bctpbtns" src="/static/bctp.png" mode="" @tap.prevent.stop="saveImage()"></image>
					<image class="fxhbbtns" src="/static/fxhb.png" mode="" @tap.prevent.stop="share()"></image>
					
				</view>
				<view class="flex_row marginTop2vh">
					<!-- <button type="primary" class="buttons" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button type="primary" class="buttons" size="mini" @tap.prevent.stop="hideQr()">关闭</button> -->
					<!-- <button type="primary" class="buttons" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- <button type="primary" class="buttons mt-40 ml-20 mr-20" @tap="shareFc()">生成店铺二维码</button> -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" 
			canvas-id="default_PosterCanvasId"
			:style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/utils/QS-SharePoster/app.js';
	import getSharePoster from '@/utils/QS-SharePoster/QS-SharePoster.js';
	// import {usersEquity} from "@/utils/api/partner_center.js";
	// import {shareQrcode} from "@/utils/api/user.js"
	
	import {createQrcode  as shareQrcode} from "@/utils/api/api.js";
	export default {
		data() {
			return {
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				type:"1",
				url:"",
				shopInfo:{},
				shop_name:"",
				shop_id:0,//url传过来的
			}
		},
		     
		onLoad(opdata) {
			this.type = opdata.type;
			this.shop_id = opdata.shop_id;
			
			//this.shareFc();//自动生成
			
			this.shopInfo = uni.getStorageSync('userInfo');
			this.shop_name = this.shopInfo.shop_name;

			this.shareQrcode();
		},
		methods: {
			//生成二维码
			async shareQrcode(){
				// uni.showLoading({
				//     title: '加载中'
				// });
				
				let res =  await shareQrcode({
					type: 3,//固定的
					//shareid: app.globalData.storeInfo.shop_id
					shareid: this.$store.state.userInfo.shop_id,//店铺id
				})
				
				if(res.code==0){
					
					
					this.url = res.data.file;
					// let  qrcodeurl = window.location.port=="8080"?this.staticUrl1+this.url:this.staticUrl+this.url;
					// let  qrcodeurl = window.location.port=="8080"?this.staticUrl1+this.url:this.staticUrl1+this.url;
					
					// let  qrcodeurl = this.staticUrl1+this.url;
					let  qrcodeurl = this.staticUrl1+this.url;
					this.url = qrcodeurl;
					
					// https://zxluma.jxdsy.cn/attachs/
					
					
					// uni.showLoading({
					//     title: '生成成功'
					// });
					
					this.shareFc();
					
				}else{
					
					uni.showLoading({
					    title: '生成失败'
					});
					this.$api.msg(res.msg);
				}
				
				setTimeout(function () {
				    uni.hideLoading();
				}, 2000);
				
				
			},
			//生成海报
			async shareFc() {
				//debugger
				try {
					if (!this.poster.finalPath) {
						let backgroundImage;
						let rqcodeobj = {}
						// 二维码
						
						rqcodeobj = {
							text: '开发测试',
							size: 150,//bgObj.width*0.2
							dx: 380,//bgObj.width*0.05
							dy: 765//bgObj.height - bgObj.width*0.25
						}
						
						//计算名称的x轴
						
						let len = this.shop_name.length;
						let cha = 0;//差值
						let dxsss = 0;//xy 坐标
						if(len<=10){
							//小于
							cha = 10-len;
							dxsss = 160 + cha*12;
						}else{
							//大于
							cha = len-10;
							dxsss = 160 - cha*12;
						}
						
						
						
						const d = await getSharePoster({
							// backgroundImage:"/static/news/sjrwm.png",
							
							
							backgroundImage:this.statictowUrl+"static/applet5/images/uts/sjrwm.png",
							
							//暂时使用这个
							// backgroundImage:"http://q37tb0wtc.bkt.clouddn.com/sjrwm.png",
							
							
							// backgroundImage:"https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super",
							 // backgroundImage:"https://kazuma.jxdsy.cn/attachs/2019/07/29/thumb_5d3ecaa81b681.jpg",
							
							type: 'testShareType',
							posterCanvasId: this.canvasId,
							// qrCodeArray: ({bgObj, type, bgScale}) => {
							// 	return [rqcodeobj]
							// },
							imagesArray: ({bgObj, type, bgScale}) => { //接收的第一个参数为背景图片的信息, 第二个参数是自定义标识（感觉这里用不到）, 图片为示例图片
								const dx = bgObj.width*0.3; 
								return [
									//二维码
									//二维码放进去
									{
										url: this.url,// //"https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?qua=high&where=super",//
										dx: 155,//bgObj.width*0.05
										dy: 350,//bgObj.height - bgObj.width*0.25
										dWidth: 250,	// 因为设置了圆形图片 所以要乘以2
										dHeight: 250
									},
								]
							},
							textArray: ({bgObj, type, bgScale}) => {
								const fontSize = bgObj.width*0.045;
								const lineHeight = bgObj.height*0.04;
								return [
									/**
									 * 商家名称居中  10个字 160/640 刚刚好
									 * 11个字
									 * 
									 * 10个以后 每多加一个字 大概要 160- 多出来的个数- 12
									 * 
									 * 
									 * 10个以下 每少一个字 大概要 160 + 12
									 * 
									 * ***/
									
									
									// 文字 先干了
									{
										text: this.shop_name,//，`测试商家名称测试商家是遭`,//10个字正好
										fontWeight: 'bold',
										size: 24,
										color: '#ffffff',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											//dx 160是侧面对齐
											return {
												dx: dxsss,//136,//bgObj.width - textLength - fontSize
												dy:635 //bgObj.height - lineHeight*2
											}
										}
									},
									
									
									
									
								
								]
							},
							setCanvasWH: ({bgObj, type, bgScale}) => { // 为动态设置画布宽高的方法，
								this.poster = bgObj;
							},
							setDraw: ({Context, bgObj, type, bgScale}) => {
								// Context.setFillStyle('black');
								// Context.setGlobalAlpha(0.3);
								// Context.fillRect(0, bgObj.height - bgObj.height*0.2, bgObj.width, bgObj.height*0.2);
							},
							
						});
						
						

						
						
						this.poster.finalPath = d.poster.tempFilePath;

					}
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
				
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
		}
	}
</script>



<style lang="scss">
	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		// position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(3);
		perspective: 2500upx;
		// background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
		

		position: relative;
		
		
		.bctpbtns{
			position: absolute;
			z-index:10000;
			right: 0;
			bottom:200px;
			
			width: 57upx;
			height: 189upx;
		}
		.fxhbbtns{
			
			
			position: absolute;
			z-index:10000;
			right: 0;
			bottom:100px;
			
			width: 57upx;
			height: 189upx;
		}
	}

	.padding1vh {
		/* padding: 1vh; */
	}

	.posterImage {
		/* width: 60vw; */
		width: 100vw;
		height: 100vh;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}
	
	.buttons{
		background: #ff6900!important;
		line-height: 40px !important;
	}
</style>
