<template>
	<view>
		<view class="wanl-poster" @tap="close" :style="{paddingTop: topNum + 'px'}">
			<canvas v-if="!tempFilePath" :canvas-id="canvasID" class="wanl-poster__canvas"
				:style="{ width: canvasW + 'px', height: canvasH + 'px'}" />
			<view v-else class="wanl-poster__main">
				<view @tap.stop="">
					<image lazy-load class="image" :src="tempFilePath" mode="widthFix" @longpress="toSave(tempFilePath)"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		name: 'wanl-poster',
		props: {
			canvasID: {
				Type: String,
				default: 'PosterCanvas'
			},
			img: {
				Type: String,
				default: ''
			}
		},
		data() {
			return {
				loading: false,
				tempFilePath: '',
				canvasW: 0,
				canvasH: 0,
				ctx: null,
				topNum: 0
			};
		},
		computed: {
		},
		created() {
			uni.showLoading({
				title: '海报生成中...'
			});
			that = this;
			that.OnCanvas();
		},
		methods: {
			async OnCanvas() {
				that.loading = true;
				that.ctx = uni.createCanvasContext(that.canvasID, this);
				let imgurl = 'https://admin.dbcdq.cn/assets/img/icon/bg3.png'
				// let imgurl = 'https://admin.dbcdq.cn/assets/img/icon/bg2.png'
				//网络主图
				let _imgInfo = await that.getImageInfo({
					img: imgurl
				});
				that.canvasW = (uni.getSystemInfoSync().windowWidth/750)*520
				that.canvasH = (uni.getSystemInfoSync().windowWidth/750)*764
				that.topNum = 60
				//canvas背景颜色
				that.ctx.setFillStyle('transparent');
				//canvas画布大小
				that.ctx.fillRect(0, 0, that.canvasW, that.canvasH);
				//添加图片展示
				that.ctx.drawImage(_imgInfo.path, 0, 0, that.canvasW, that.canvasH);

				let _qrcodeImg = await that.getImageInfo({img: 'https://admin.dbcdq.cn/assets/img/icon/bg1.png'});

				this.$api.qrcode({},res=>{
					if(res.code == '1'){
						
					}
				})
				let h = that.canvasW/100*48
				
				let left = that.canvasW/100*28.2
				let top = that.canvasH/100*48.5
				that.ctx.drawImage(_qrcodeImg.path, left, top, h, h);
				// that.ctx.drawImage(_qrcodeImg.path, that.canvasW - 214, that.canvasH - 225, h, h);
				//延迟后渲染至canvas上
				setTimeout(function() {
					console.log('14')
					that.ctx.draw(true, ret => {
						uni.hideLoading();
						console.log('16')
						that.getNewImage();
						console.log('17')
					});
					console.log('15')
				}, 500);
			},
			async getImageInfo({
				img
			}) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: img,
						success: function(image) {
							resolve(image);
						},
						fail(err) {
							errs(err);
							uni.showToast({
								title: '海报生成失败',
								mask: false,
								duration: 2000,
								icon: "none"
							});
							uni.hideLoading()
						}
					});
				});
			},
			getNewImage() {
				uni.canvasToTempFilePath({
						canvasId: that.canvasID,
						quality: 1,
						complete: res => {
							that.tempFilePath = res.tempFilePath;
							that.loading = false;
							that.$emit('success', res);
							uni.hideLoading();
						}
					},
					this
				);
			},
			close() {
				// this.$emit('close');
			},
			// 手动保存
			toSave(url) {
				//#ifndef H5
				uni.getImageInfo({
					src: url,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
				//#endif
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wanl-poster {
		&__canvas {
			margin: 0 auto;
		}

		&__main {
			position: relative;
			margin: 0 auto;
			width: 75%;
			padding-bottom: 60rpx;

			.image {
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				will-change: transform;
			}

			.close {
				position: absolute;
				top: 6rpx;
				right: 4rpx;

				.wlIcon {
					font-size: 46rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}

	}
</style>