<template>
	<view class="content">
		<view style="display: flex;justify-content: center;align-items: center;margin: 10rpx;">
			<image  @error="error" :show-menu-by-longpress="true" :src="posterUrl" 
				style="margin: 10rpx;width: 100%;height: 1200rpx;" />
		</view>
		
		<view v-if="posterUrl" @click="$mpi.savePhoto(posterUrl)" class="center" style="margin-top: 50rpx;">
			<view class="cu-btn  flex  text-lg btn-bg-color radius" style="padding: 46rpx 0;width: 90%;">
				保存图片
			</view>
		</view>
		
		<r-canvas ref="rCanvas"></r-canvas>
		<view class="qrimg">
			<tki-qrcode :size="300" ref="qrcode" :val="val" :show="false"  :showLoading="false" @result="qrR" />
		</view>
	</view>
</template>

<script>
	import rCanvas from "@/pagesB/comps/r-canvas/r-canvas.vue"
	import tkiQrcode from "@/pagesB/comps/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode,
			rCanvas
		},
		data() {
			return {
				//背景图
				bgImg:'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/aa85f1da8bd84ad2944fe88dd4ef7045-hyRO9DPsxdFr399bc3fe4c0fb52273af5c8f694e1356.png',
				//二维码内容
				val: 'https://ldt.guosen-fumao.cn/wapp/qrcode?promotionCode=',
				//二维码地址
				qrUrl: '',
				//海报地址
				posterUrl:''
			}
		},
		onReady() {
			this.val=this.val + this.vuex_userId
			if (this.$cache.get('posterUrl')) {
				this.posterUrl=this.$cache.get('posterUrl')
			}else{
				this.$refs.qrcode._makeCode()
			}
		},
		methods: {
			error(){
				this.$refs.qrcode._makeCode()
			},
			qrR(res) {
				this.$dialog.showLoading('海报生成中')
				this.qrUrl = res
				this.drawPoster()
			},
			async drawPoster() {
				//获取用户信息
				let userInfo = (await this.$api.loginUser.detail({
					id: this.vuex_userId
				})).data
				
				let avatar= await this.$mpi.downloadFile(userInfo.avatar)
				
				this.$nextTick(async () => {
					const w=354
					const h=600
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						canvas_width:w,
						canvas_height:h,
						background_color:"#fff",
						hidden:true
					})
					// 画图
					await this.$refs.rCanvas.drawImage({
						url: this.bgImg,
						x: 0,
						y: 0,
						w,
						h: (h - 140),
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					//画二维码
					await this.$refs.rCanvas.drawImage({
						url: this.qrUrl,
						x: (w - 115),
						y: (h - 120),
						w: 100,
						h: 100
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					//画头像
					await this.$refs.rCanvas.drawImage({
						url: avatar,
						x: 26,
						y: (h - 120),
						w: 36,
						h: 36,
						border_radius:20
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					// 画文字
					await this.$refs.rCanvas.drawText({
						text: userInfo.nickName,
						x: 70,
						y: (h - 96),
						font_color: "#000",
						font_size: 16,
						font_weight:800,
						font_family:'PingFang-SC-Heavy'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					await this.$refs.rCanvas.drawText({
						text: "我是联兑通合伙人",
						max_width: 0,
						x: 30,
						y: (h -52),
						font_color: "#333333",
						font_size: 14,
						font_weight:300
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					
					await this.$refs.rCanvas.drawText({
						text: "欢迎加入联兑通",
						max_width: 0,
						x: 30,
						y: (h - 32),
						font_color: "#333333",
						font_size: 14,
						font_weight:300
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})

					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						this.posterUrl=res.tempFilePath
						this.$cache.put('posterUrl',this.posterUrl)
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>

<style>

</style>
