<template>
	<view class="share-popup">
		<!-- 弹窗 -->
		<uni-popup ref="sharePopup" type="bottom" @change="popupChange">
			<view class="popup-content">
				<view class="title" v-if="title" v-text="title"></view>
				<view class="content">
					<view class="row">
						<button class="share item" open-type="share" @click="close">
							<view class="icon-image"><image :src="staticUrl + 'icon-share-wechat.png'"></image></view>
							<text class="label">微信</text>
						</button>
						<view class="poster item" @click="createPoster" v-if="!posterUrl">
							<view class="icon-image"><image :src="staticUrl + 'icon-poster.png'"></image></view>
							<text class="label">生成海报</text>
						</view>
						<view class="poster item" @click="savePoster" v-else>
							<view class="icon-image"><image :src="staticUrl + 'icon-download.png'"></image></view>
							<text class="label">保存相册</text>
						</view>
					</view>
					<tui-divider :height="64"></tui-divider>
					<view class="cancel" @click="close">取消</view>
				</view>
			</view>
		</uni-popup>

		<canvas canvas-id="poster" id="poster" class="canvas"></canvas>

		<!-- 海报 -->
		<view class="poster-container" v-show="visiable">
			<!-- 画布 -->
			<image :src="posterUrl" class="poster-image"></image>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/common/auth.js'
export default {
	props: {
		title: {
			type: String,
			default: ''
		},
		data: {
			type: Object,
			default: () => {}
		},
		type: {
			type: String,
			default: 'normal'
		}
	},
	data() {
		return {
			visiable: false,
			imageList: [],
			posterUrl: '',
			// 海报数据信息
			posterData: {
				avatar: '',
				username: '',
				porductName: '',
				productPrice: '',
				productOriginPrice: '',
				productImage: '',
				qrCodeImage: ''
			}
		}
	},
	computed: {
		...mapGetters(['systemInfo'])
	},
	methods: {
		// 绘制海报  初始化
		initDrawPoster() {
			this.downLoadImageTask()
		},

		// 下载图片任务
		async downLoadImageTask() {
			const { avatar, productImage, qrCodeImage } = this.posterData
			// 图片资源链接
			const bgImageUrl = this.staticUrl + 'bg-share-01.png'
			const avatarUrl = avatar || this.staticUrl + 'icon-join-us.png'
			let coverUrl = productImage || this.staticUrl + 'icon-share.png'
			let ewmUrl = qrCodeImage || this.staticUrl + 'icon-ewm-hehe.jpg'
			if (this.type === 'normal') {
				coverUrl = this.staticUrl + 'icon-share.png'
				ewmUrl = this.staticUrl + 'icon-ewm-hehe.jpg'
			}

			// 下载图片任务
			const taskList = [this.downloadImage(bgImageUrl), this.downloadImage(avatarUrl), this.downloadImage(coverUrl), this.downloadImage(ewmUrl)]

			// 执行下载图片
			try {
				this.imageList = await Promise.all(taskList)
				this.drawPoster()
			} catch (e) {
				console.log(e)
			}
		},

		// 绘制海报
		drawPoster() {
			const windowWidth = this.systemInfo.windowWidth
			// const scale = this.systemInfo.windowWidth / 750
			const scale = 1
			var ctx = uni.createCanvasContext('poster', this)
			// 绘制背景
			ctx.drawImage(this.imageList[0].tempFilePath, 0, 0, 540 * scale, 878 * scale)
			ctx.save()

			// 绘制用户信息
			this.drawPosterHead(ctx, scale)

			// 绘制白色矩形区域
			ctx.beginPath()
			ctx.rect(20 * scale, 154 * scale, 500 * scale, 704 * scale)
			ctx.setFillStyle('#FFFFFF')
			ctx.fill()
			ctx.clip()

			const type = this.type
			// 绘制底部内容
			if (!type || type === 'normal') {
				this.drawPosterFoot(ctx, scale)
			} else {
				this.drawGoodsInfo(ctx, scale)
			}

			ctx.restore()
			ctx.draw(true, () => {
				uni.canvasToTempFilePath(
					{
						canvasId: 'poster',
						success: res => {
							this.posterUrl = res.tempFilePath
							this.visiable = true
						},
						complete: () => {
							uni.hideLoading()
						}
					},
					this
				)
			})
		},

		// 绘制海报头部
		drawPosterHead(ctx, scale) {
			const { username } = this.posterData
			// 绘制头像
			ctx.beginPath()
			ctx.arc(40 * scale + (90 * scale) / 2, 32 * scale + (90 * scale) / 2, (90 * scale) / 2, 0, 2 * Math.PI)
			ctx.setFillStyle('#fff')
			ctx.fill()
			ctx.clip()
			ctx.drawImage(this.imageList[1].tempFilePath, 40 * scale, 32 * scale, 90 * scale, 90 * scale)
			ctx.restore()
			ctx.save()
			// 绘制用户名和推荐语
			ctx.setFillStyle('#FFFFFF')
			ctx.font = 'bold 10px sans-serif'
			ctx.setFontSize(30 * scale)
			ctx.fillText(username, 146 * scale, (30 + 34) * scale, 350 * scale)
			ctx.font = 'normal 10px sans-serif'
			ctx.setFontSize(24 * scale)
			let txt = '强烈为你推荐该商城'
			if (this.type === 'product') {
				txt = '强烈为你推荐该商品'
			}
			ctx.fillText(txt, 146 * scale, (87 + 24) * scale, 350 * scale)
		},

		// 绘制海报底部
		drawPosterFoot(ctx, scale) {
			// 绘制中心图片
			ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
			// 绘制底部
			ctx.setFontSize(24 * scale)
			ctx.setFillStyle('#333')
			ctx.fillText('护肤上颜选，正品', 60 * scale, (710 + 24) * scale)
			ctx.fillText('有好货', 60 * scale, (710 + 24 + 40) * scale)
			// 绘制二维码
			ctx.drawImage(this.imageList[3].tempFilePath, 364 * scale, 690 * scale, 116 * scale, 116 * scale)
		},

		// 绘制商品信息
		drawGoodsInfo(ctx, scale) {
			// 参数处理
			let { porductName, productPrice, productOriginPrice } = this.posterData
			productPrice = productPrice.toFixed(2)
			if (productOriginPrice) {
				productOriginPrice = '￥' + productOriginPrice.toFixed(2)
			}
			const porductNames = this.getProductNames(porductName)

			// 绘制中心图片
			ctx.drawImage(this.imageList[2].tempFilePath, 40 * scale, 174 * scale, 460 * scale, 460 * scale)
			// 绘制价格符号
			ctx.setFillStyle('#FF457B')
			ctx.setFontSize(24 * scale)
			ctx.fillText('￥', 40 * scale, (680 + 24) * scale)
			// 绘制购买价格
			ctx.setFontSize(40 * scale)
			ctx.fillText(productPrice, 62 * scale, (665 + 40) * scale)
			// 绘制原价
			if (productOriginPrice) {
				ctx.setFillStyle('#999')
				ctx.setFontSize(24 * scale)
				ctx.fillText(productOriginPrice, 200 * scale, (680 + 24) * scale)
				let m = ctx.measureText(productOriginPrice)
				ctx.fillRect(200 * scale, (680 + 16) * scale, parseInt(m.width), 1)
			}
			// 绘制商品标题
			ctx.setFillStyle('#333')
			ctx.setFontSize(26 * scale)

			porductNames.forEach((text, index) => {
				text = index === 1 ? text.slice(0, text.length - 1) + '...' : text
				ctx.fillText(text, 40 * scale, (732 + 26 + 40 * index) * scale)
			})
			// 绘制商品二维码
			ctx.drawImage(this.imageList[3].tempFilePath, 384 * scale, 702 * scale, 116 * scale, 116 * scale)
		},

		// 处理产品名称
		getProductNames(porductName) {
			const list = []
			if (porductName.length > 12) {
				for (let i = 0; i < porductName.length; i += 12) {
					if (list.length < 2) {
						list.push(porductName.slice(i, i + 12))
					}
				}
			}
			return list
		},

		// 下载图片
		downloadImage(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: url,
					success(data) {
						resolve(data)
					},
					fail(err) {
						reject(err)
					}
				})
			})
		},

		open() {
			this.$refs.sharePopup.open()
			this.$emit('open')
		},
		close() {
			this.$refs.sharePopup.close()
			this.$emit('close')
			this.visiable = false
		},
		popupChange(e) {
			if (!e.show) {
				this.visiable = false
				this.posterUrl = ''
			}
			this.$emit('change', e)
		},
		async createPoster() {
			// 合并海报数据
			this.posterData = { ...this.posterData, ...this.data }
			try {
				// 从本地缓存中获取微信用户基本信息
				let userProfile = this.$getStorage('USER_PROFILE')
				if (!userProfile) {
					userProfile = await getUserProfile()
					this.$setStorage('USER_PROFILE', userProfile)
				}
				this.posterData.avatar = userProfile.avatarUrl
				this.posterData.username = userProfile.nickName
				uni.showLoading({
					mask: true,
					title: '正在为您生成海报'
				})
				// 绘制海报
				this.initDrawPoster()
			} catch (e) {
				//TODO handle the exception
				uni.hideLoading()
			}
		},
		savePoster() {
			console.log('保存图片到本地')
			uni.saveImageToPhotosAlbum({
				filePath: this.posterUrl,
				success: res => {
					this.close()
					this.$emit('saveSuccess', this.posterUrl)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.canvas {
	position: fixed;
	left: -600px;
	top: 0;
	width: 540px;
	height: 878px;
	opacity: 0;
}

.poster-container {
	z-index: 100;
	position: fixed;
	top: 80rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 540rpx;
	height: 878rpx;
	background-color: #fff;
	overflow: hidden;

	.poster-image {
		display: block;
		width: 540rpx;
		height: 878rpx;
	}
}

.popup-content {
	position: relative;
	padding: 40rpx;
	padding-bottom: 0;
	border-radius: 16rpx 16rpx 0 0;
	background-color: #fff;

	&::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 80rpx;
		bottom: -80rpx;
		left: 0;
		background-color: #fff;
	}

	.title {
		font-size: 34rpx;
		color: #666;
		text-align: center;
		padding-bottom: 28rpx;
	}

	.content {
		.row {
			@extend .cm-flex-around;
		}

		.item {
			@extend .cm-flex-center;
			flex-direction: column;

			.label {
				color: #333;
				font-size: 26rpx;
				margin-top: 16rpx;
			}

			.icon-image {
				@extend .cm-flex-center;
				width: 100rpx;
				height: 100rpx;
				background-color: #f7f7f7;

				image {
					width: 64rpx;
					height: 64rpx;
					display: block;
				}
			}

			&.share {
				line-height: inherit;
				padding: 0;
				margin: 0;
				border: 0;
				background: transparent;
				&::after {
					border: 0;
				}
			}
		}
		.cancel {
			font-size: 28rpx;
			color: #666;
			font-weight: bold;
			text-align: center;
			padding-bottom: 32rpx;
		}
	}
}
</style>
