<template>
	<view class="">
		<!--pages/personal//stock_rightstwo/stock_rightstwo.wxml-->
		<view class="stock_rightstwo">

			<!-- tabend -->

			<view class="pagebody">
				


				<!-- 我的股票 -->
				<!-- amount_piao!=0 && amount_piao!='' && amount_piao!=null && amount_piao!='0.00' -->
				<view v-if="amount_piao!=null && amount_piao!=''" class="mystock_tab">
					<view class="stocktiit">恭喜您获得多思盈股票</view>
					<view class="sharesmain" :style="{backgroundImage:'url('+joinurl+'/images/stock/sharesbg.png)'}">
						<view class="sharestit">我的股票</view>
						<view class="stocknum">
							<text class="num">{{amount_piao?amount_piao:0}}</text>
							<text>元/港元</text>
						</view>
						<view class="mystockinfos">
							<view class="infositme">姓名:{{resdata.realname}}</view>
							<view class="infositme">身份证号：{{resdata.identity_card}}</view>
							<view class="infositme">签发日期：{{resdata.piao_sign_issue}}</view>
						</view>
					</view>
					<!-- 股权内容ned -->

					<view class="copyrightinfo">
						<image class="wechatqrcode" :src="joinurl+'/images/stock/wechatqrcode.png'"></image>
						<view class="copyrighttest">官方公众号</view>
						<view class="copyrighttest">全国服务热线：400-8073023</view>
					</view>
				</view>
				<!-- 我的股票 -->

				<!-- 空空如也 -->

				 <empty msgs="您没有获得多思盈股票" v-else ></empty>




				<!-- <view @tap="saveImage"    v-if="tabactive==1 && resdata.lmgu!=0 && resdata.lmgu!='' && resdata.lmgu!=null && poster.finalPath" class="preservationbtn flex ali-c">保存图片</view> -->
				<!-- <view @tap="saveImagetwo" v-if="tabactive==2 && resdata.lmgupiao!=0 && resdata.lmgupiao!='' && resdata.lmgupiao!=null && postertwo.finalPath" class="preservationbtn flex ali-c">保存图片</view> -->
				

			</view>


			<!-- 股票 -->
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="PosterCanvasIdtwo" :style="{width: (postertwo.width||10) + 'px', height: (postertwo.height||10) + 'px'}"></canvas>
			</view>
			


		</view>
	</view>
</template>

<script>
	import {
		getLmguPiao,
	} from "@/utils/api/api.js";
	import empty from "@/components/empty/empty.vue";
	
	//生成海报
	import _app from '@/utils/QS-SharePoster/app.js';
	import { getSharePoster } from '@/utils/QS-SharePoster/QS-SharePoster.js';
	
	export default {
		data() {
			return {
				resdata: {},
				tabactive: 1,
				
				poster: {},
				avaterSrc:'',//下载下来得背景图片
				canvasId: 'default_PosterCanvasId',
				
				postertwo:{},
				avaterSrctwo:"",
				canvasIdtwo:"PosterCanvasIdtwo",
				amount_piao:0,
				
			};
		},
		computed:{
			joinurl(){
				return this.$store.state.joinurl;
			},
			statictowUrl(){
				return this.$store.state.statictowUrl;
			}
		},
		components:{
			
		},
		onLoad() {
			this.usersEquity();
		},
		//过滤器
		filters:{
			//需求的要给一段字符串里面 单独给数据加粗
			getlmgu_msg(value){
				var reg = /[0-9]+(\.?[0-9]+)?\%?/g;
				let  str = value;//'恭喜您再获得3999上市股票';
				str = str.replace(reg,"<span style='font-size: 48upx;font-weight: bold;'> $& </span>");
				return str;
			}
		},
		methods:{
			//获取我的股权信息
			async usersEquity(){
				let res = await getLmguPiao({});
				//res.data.lmgu_code
				if(res.code==0){
					this.resdata = res.data.user;
					this.amount_piao = res.data.amount_piao;
					if ( !res.data.user.lmgu && !res.data.user.lmgupiao) {
						uni.showToast({
							title: '股权信息不完整',
							icon: 'loading',
							duration: 1000
						});
						uni.navigateBack({
							
						})
					}
					
					let resdata = res.data.user;
					if((resdata.lmgu==0 || resdata.lmgu=='' || resdata.lmgu==null) && (resdata.lmgupiao!=0 && resdata.lmgupiao!='' && resdata.lmgupiao!=null)){
						this.tabactive=2;
						// this.shareFctwo();//先生成
					}else{
						// this.shareFc();//先生成
					}
					
				}else{
					this.$api.msg("没有查询到您的股权信息");
					setTimeout(()=>{
						// uni.navigateBack({});
					},1000)
				}
			},
			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
			},
			// 生成海报
			// -------------------------------------------股票的生产海报end-------------------------------------
			
			// -------------------------------------------股票的海报------------------------------------
			async shareFctwo() {
				if(this.postertwo.finalPath){
					// this.saveImagetwo();//自动保存
					return false;
				}
				// uni.showLoading({
				// 	title:"请稍后.."
				// })
				
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						backgroundImage:this.joinurl +"/images/percenter/s0U829.png",
						type: 'testShareType',
						posterCanvasId: this.canvasIdtwo,	//canvasId
						delayTimeScale: 20, //延时系数
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'text',//标题
										text: "恭喜您获得多思盈股权",
										size: 40,
										color: '#F64F15',
										alpha: 1,
										textAlign: 'center',
										fontWeight: 'bold',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dy:  90,
												dx: bgObj.width/2,
											}
										}
									},
									//股权的背景
									{
										type: 'image',
										url: this.joinurl + "/images/stock/sharesbg.png",
										textAlign: 'center',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										fontWeight: "bold",
										dWidth: bgObj.width,
										dHeight: 534,//500,
										infoCallBack(textLength) {
											return {
												dx: 0,
												dy: 150
											}
										}
									},
									
									//`持股姓名：网二###身份证号：340825199408052369###成立时间：2015年05月13日###公司地址：江西省南昌市青云谱区解放西路明珠广场B座2411室`
									
									{
										type: 'text', //文字
										text: `我的股票`,
										size: 30,
										color: '#FFFFFF',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width/2,
												dy: 250
											}
										}
									},
									{
										type: 'text', //文字
										text: `${this.resdata.lmgupiao} 元/港元`,
										size: 60,
										color: '#FFFFFF',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width/2,
												dy: 350
											}
										}
									},
									
									{
										type: 'text', //文字
										text: `姓名:${this.resdata.realname}`,
										size: 30,
										color: '#FFFFFF',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx:40,
												dy: 450
											}
										}
									},
									{
										type: 'text', //文字
										text: `身份证号：${this.resdata.identity_card}`,
										size: 30,
										color: '#FFFFFF',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx:40,
												dy: 450+45*1
											}
										}
									},
									{
										type: 'text', //文字
										text: `签发日期：${this.resdata.piao_sign_issue}`,
										size: 30,
										color: '#FFFFFF',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx:40,
												dy: 450+45*2
											}
										}
									},
									
									
									//底部二维码
									{
										type: 'image',
										url: this.joinurl + "/images/stock/wechatqrcode.png",
										textAlign: 'center',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										fontWeight: "bold",
										dWidth: 200,
										dHeight: 200,
										infoCallBack(textLength) {
											return {
												dx: bgObj.width/2-100,
												dy: 700
											}
										}
									},
									//二维码下面的文字
									{
										type: 'text', //日期
										text: "官方公众号",
										size: 24,
										color: '#000000',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width/2,
												dy: 715+200
											}
										}
									},
									//二维码下面的文字
									{
										type: 'text', //日期
										text: "全国服务热线：400-8073023",
										size: 24,
										color: '#000000',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width/2,
												dy: 710+200+40
											}
										}
									},
									
									
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.postertwo = bgObj;
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ')
					_app.log(d.poster.tempFilePath)
					this.$set(this.postertwo,'finalPath',d.poster.tempFilePath)
					uni.hideLoading()
					//this.saveImagetwo();//自动保存
				} catch (e) {
					uni.hideLoading()
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
				}
			},
			saveImagetwo() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.postertwo.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			sharetwo() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.postertwo.finalPath, false, false);
				// #endif
			
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			
		},
		
	}
</script>

<style lang="scss">
	@import "./myStockRight.scss";
</style>
