<template>
	<view>
		<view class="wanl-poster" @tap="close">
			<canvas v-if="!tempFilePath" :canvas-id="canvasID" class="wanl-poster__canvas"
				:style="{ width: canvasW + 'px', height: canvasH + 'px', top: '-' + 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;
	import {mapState} from 'vuex';
	export default {
		name: 'wanl-poster',
		props: {
			canvasID: {
				Type: String,
				default: 'PosterCanvas'
			},
			img: {
				Type: String,
				default: ''
			},
			price: {
				Type: String,
				default: ''
			},
			marketPrice: {
				Type: String,
				default: ''
			},
			title: {
				Type: String,
				default: 'WANLSHOP'
			},
			page: {
				Type: String,
				default: ''
			},
			scene: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				config: {},
				loading: false,
				lineType: true,
				mpQrcodeUrl: '',
				tempFilePath: '',
				canvasW: 0,
				canvasH: 0,
				ctx: null
			};
		},
		computed: {
			...mapState(['user', 'common'])
		},
		created() {
			uni.showLoading({
				title: '海报生成中...'
			});
			that = this;
			that.OnCanvas();
		},
		methods: {
			async OnCanvas() {
				that.loading = true;
				that.ctx = uni.createCanvasContext(that.canvasID, this);
				const canvasWidth = uni.upx2px(that.common.appConfig.poster_width),
					//canvas Paddng 间距
					margin = uni.upx2px(25),
					//二维码或太阳码宽高
					qrcodeWidth = uni.upx2px(150);
				//文本宽度
				let _strlineW = 0;
				//网络主图
				let _imgInfo = await that.getImageInfo({
					img: that.img ? that.$wanlshop.oss(that.img, 400, 0) : that.$wanlshop.oss(that.common.appConfig.poster_image, 400, 0)
				});
				
				let r = [_imgInfo.width, _imgInfo.height];
				let imgW = canvasWidth - margin * 2;
				if (r[0] != imgW) {
					r[1] = Math.floor((imgW / r[0]) * r[1]);
					r[0] = imgW;
				}
				that.canvasW = canvasWidth;

				// 是否存在价格行
				// #ifdef MP
				if (that.price != '') {
					that.canvasH = r[1] + qrcodeWidth + 120;
				} else {
					that.canvasH = r[1] + qrcodeWidth + 85;
				}
				// #endif
				// #ifndef MP
				if (that.price != '') {
					that.canvasH = r[1] + qrcodeWidth + 114;
				} else {
					that.canvasH = r[1] + qrcodeWidth + 80;
				}
				// #endif
				

				//canvas背景颜色
				that.ctx.setFillStyle(that.common.appConfig.poster_background);
				//canvas画布大小
				that.ctx.fillRect(0, 0, that.canvasW, that.canvasH);


				//添加图片展示
				that.ctx.drawImage(_imgInfo.path, margin, margin, r[0], r[1]);
				//添加图片展示 end


				//设置文本
				that.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
				that.ctx.setFillStyle(that.common.appConfig.poster_title_color); //设置标题文本颜色
				let _strLastIndex = 0; //每次开始截取的字符串的索引
				let _strHeight = r[1] + margin * 2 + 15; //绘制字体距离canvas顶部的初始高度
				let _num = 1;
				let title = that.title ? that.title : that.common.appConfig.poster_title;
				for (let i = 0; i < title.length; i++) {
					_strlineW += that.ctx.measureText(title[i]).width;
					if (_strlineW > r[0]) {
						if (_num == 2 && that.lineType) {
							//文字换行数量大于二进行省略号处理
							that.ctx.fillText(title.substring(_strLastIndex, i - 2) + '...', margin, _strHeight);
							_strlineW = 0;
							_strLastIndex = i;
							_num++;
							break;
						} else {
							that.ctx.fillText(title.substring(_strLastIndex, i), margin, _strHeight);
							_strlineW = 0;
							_strHeight += 20;
							_strLastIndex = i;
							_num++;
						}
					} else if (i == title.length - 1) {
						that.ctx.fillText(title.substring(_strLastIndex, i + 1), margin, _strHeight);
						_strlineW = 0;
					}
				}
				//设置文本 end


				//设置价格
				if (that.price != '') {
					_strlineW = margin;

					_strHeight += uni.upx2px(60);

					if (_num == 1) {
						_strHeight += 20; //单行标题时占位符
					}
					if (that.price != '') {
						//判断是否有销售价格
						that.ctx.setFillStyle(that.common.appConfig.poster_price_color);
						that.ctx.setFontSize(uni.upx2px(38));
						that.ctx.fillText('￥' + that.price, _strlineW, _strHeight); //商品价格
						_strlineW += that.ctx.measureText('￥' + that.price).width + uni.upx2px(10);
					}
					//商品原价
					that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
					that.ctx.setFontSize(uni.upx2px(24));
					that.ctx.fillText(that.marketPrice, _strlineW, _strHeight); 
					// 删除线
					that.ctx.strokeStyle = that.common.appConfig.poster_original_color;
					that.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
					that.ctx.lineTo(_strlineW + that.ctx.measureText(that.marketPrice).width, _strHeight - uni.upx2px(10)); //终点
					that.ctx.stroke();
				}
				//设置价格 end
				
				
				
				//添加二维码 drawImage(图片, 左边距, 上边距, 宽度, 高度);
				let _qrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/qrcode?width=${qrcodeWidth}&page=${encodeURIComponent(that.page + '?' + that.$wanlshop.parseParams(JSON.parse(JSON.stringify(that.scene).replace('"i"','"id"'))))}`});
				_strHeight += uni.upx2px(20);
				// #ifdef APP || H5 || MP-WEIXIN
				// 微信二维码
				// 展示全部二维码
				if (that.common.appConfig.poster_qrcode == '0') {
					that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
					let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
						page:that.page,
						scene: that.scene,
						width: qrcodeWidth,
						env: that.common.appConfig.poster_env
					}))}`});
					that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth - qrcodeWidth, _strHeight, qrcodeWidth,qrcodeWidth);
					// 展示小程序码
				} else if (that.common.appConfig.poster_qrcode == '1') {
					let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
						page:that.page,
						scene: that.scene,
						width: qrcodeWidth,
						env: that.common.appConfig.poster_env
					}))}`});
					that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
					// 展示普通二维码
				} else if (that.common.appConfig.poster_qrcode == '2') {
					// 生成二维码
					that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
				}else{
					let _mpQrcodeImg = await that.getImageInfo({img: `${that.$wanlshop.config('appurl')}/wanlshop/common/mpQrcode?data=${encodeURIComponent(JSON.stringify({
						page:that.page,
						scene: that.scene,
						width: qrcodeWidth,
						env: that.common.appConfig.poster_env
					}))}`});
					that.ctx.drawImage(_mpQrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
				}
				// #endif
				
				// #ifndef APP || H5 || MP-WEIXIN
				// 生成二维码
				that.ctx.drawImage(_qrcodeImg.path, r[0] - qrcodeWidth + margin, _strHeight, qrcodeWidth,qrcodeWidth);
				// #endif
				//添加二维码 end



				//添加推荐人与描述
				let username = that.user.isLogin ? '@' + that.user.nickname : that.common.appConfig.poster_user;
				that.ctx.setFillStyle(that.common.appConfig.poster_title_color);
				that.ctx.setFontSize(uni.upx2px(30));
				that.ctx.fillText(username, margin, _strHeight + qrcodeWidth / 2);
				that.ctx.setFillStyle(that.common.appConfig.poster_original_color);
				that.ctx.setFontSize(uni.upx2px(24));
				that.ctx.fillText(that.common.appConfig.poster_viewDetails, margin, _strHeight + qrcodeWidth / 2 + 20);
				//添加推荐人与描述 end


				//延迟后渲染至canvas上
				setTimeout(function() {
					that.ctx.draw(true, ret => {
						uni.hideLoading();
						that.getNewImage();
					});
				}, 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>