<!-- 
	打赏动画组件
	支持 SVGA (H5) 和 CSS 动画 (APP)
-->
<template>
	<!-- H5 端使用 SVGA -->
	<!-- #ifdef H5 -->
	<view class="hl88-lr-ga-wrap" v-if="show">
		<canvas 
			:id="canvasId" 
			class="hl88-lr-ga-canvas"
			:style="{ width: width + 'px', height: height + 'px' }"
		></canvas>
	</view>
	<!-- #endif -->
	
	<!-- APP 端使用 CSS 动画 (非 nvue) -->
	<!-- #ifdef APP-PLUS -->
	<!-- #ifndef APP-NVUE -->
	<view class="hl88-lr-ga-wrap" v-if="show">
		<view class="hl88-lr-ga-app" :class="giftClass">
			<image 
				:src="giftImage" 
				class="hl88-lr-ga-img"
				mode="aspectFit"
			></image>
			<view class="hl88-lr-ga-txt" v-if="giftText">{{ giftText }}</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #endif -->
	
	<!-- nvue 端使用动画 -->
	<!-- #ifdef APP-NVUE -->
	<view class="hl88-lr-ga-wrapNv" v-if="show">
		<view 
			class="hl88-lr-ga-boxNv" 
			:ref="'giftView'"
		>
			<image 
				:src="giftImage" 
				class="hl88-lr-ga-imgNv"
				mode="aspectFit"
				:ref="'giftImage'"
			></image>
			<text class="hl88-lr-ga-txtNv" v-if="giftText" :ref="'giftText'">{{ giftText }}</text>
		</view>
	</view>
	<!-- #endif -->
	
	<!-- 小程序端使用简单动画 -->
	<!-- #ifdef MP -->
	<view class="hl88-lr-ga-wrap" v-if="show">
		<view class="hl88-lr-ga-mp" :class="giftClass">
			<image 
				:src="giftImage" 
				class="hl88-lr-ga-img"
				mode="aspectFit"
			></image>
			<view class="hl88-lr-ga-txt" v-if="giftText">{{ giftText }}</view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
export default {
	name: 'LiveRoomGiftAnimation',
	props: {
		// 礼物类型
		giftType: {
			type: String,
			default: 'default'
		},
		// 礼物图片
		giftImage: {
			type: String,
			default: ''
		},
		// 礼物文字
		giftText: {
			type: String,
			default: ''
		},
		// 动画宽度
		width: {
			type: Number,
			default: 300
		},
		// 动画高度
		height: {
			type: Number,
			default: 300
		}
	},
	data() {
		return {
			show: false,
			canvasId: 'hl88-lr-ga-canvas-' + Date.now(),
			giftClass: '',
			// #ifdef H5
			parser: null,
			player: null,
			// #endif
			// #ifdef APP-NVUE
			animationType: 'zoomIn', // 动画类型: 从远到近
			animationTimer: null
			// #endif
		}
	},
	mounted() {
		// #ifdef H5
		// 只在 H5 环境下初始化 SVGA
		if (typeof window !== 'undefined' && typeof document !== 'undefined') {
			this.initSVGA()
		}
		// #endif
	},
	beforeDestroy() {
		// #ifdef H5
		this.destroySVGA()
		// #endif
	},
	methods: {
		// #ifdef H5
		async initSVGA() {
			// 只在 H5 环境下执行
			if (typeof window === 'undefined' || typeof document === 'undefined') {
				return
			}
			try {
				// 动态加载 H5 专用模块
				const h5Module = await import('./gift-animation-h5.js')
				const result = await h5Module.initSVGA(this.canvasId, this.giftType, () => {
					this.hide()
				})
				if (result) {
					this.parser = result.parser
					this.player = result.player
				}
			} catch (error) {
				console.warn('SVGA module not available:', error)
				// 如果 SVGA 模块不可用，使用简单的显示方式
				setTimeout(() => {
					this.hide()
				}, 2000)
			}
		},
		
		destroySVGA() {
			if (this.parser || this.player) {
				try {
					// 动态加载销毁函数
					import('./gift-animation-h5.js').then(h5Module => {
						h5Module.destroySVGA(this.parser, this.player)
					}).catch(() => {
						// 如果模块不可用，直接清理引用
						if (this.player) {
							this.player = null
						}
						if (this.parser) {
							this.parser = null
						}
					})
				} catch (error) {
					// 直接清理引用
					this.parser = null
					this.player = null
				}
			}
		},
		// #endif
		
		// 显示动画
		play() {
			this.show = true
			this.giftClass = 'hl88-lr-ga-play'
			
			// #ifdef H5
			if (this.player) {
				this.player.start()
			}
			// #endif
			
			// #ifndef H5
			// APP 和小程序端，动画结束后自动隐藏
			// #ifdef APP-NVUE
			// nvue 端使用 animation 模块实现动画
			this.$nextTick(() => {
				this.playNvueAnimation()
			})
			// #endif
			// #ifndef APP-NVUE
			// 非 nvue 的 APP 端可以使用 CSS 动画
			setTimeout(() => {
				this.hide()
			}, 3000)
			// #endif
			// #endif
	},
		
		// 隐藏动画
		hide() {
			// #ifdef APP-NVUE
			// 清理动画定时器
			if (this.animationTimer) {
				clearTimeout(this.animationTimer)
				this.animationTimer = null
			}
			// #endif
			this.show = false
			this.giftClass = ''
			this.$emit('end')
		},
		
		// #ifdef APP-NVUE
		// nvue 端动画实现 - 使用从远到近的3D透视效果
		playNvueAnimation() {
			// 清理之前的动画定时器
			if (this.animationTimer) {
				clearTimeout(this.animationTimer)
			}
			
			// 获取 animation 模块
			let animation = null
			try {
				animation = uni.requireNativePlugin('animation')
			} catch (e) {
				// 兼容旧版本
				try {
					animation = weex.requireModule('animation')
				} catch (e2) {
					console.warn('Animation module not available')
				}
			}
			
			const giftView = this.$refs.giftView
			if (!animation || !giftView) {
				// 降级方案：使用简单的延时
				this.animationTimer = setTimeout(() => {
					this.hide()
				}, 2500)
				return
			}
			
			// 使用从远到近的3D透视动画
			this.playZoomInAnimation(animation, giftView)
		},
		
		// 从远到近的3D透视动画
		playZoomInAnimation(animation, giftView) {
			// nvue 中需要获取真实的 ref
			let ref = giftView
			if (giftView && giftView.ref) {
				ref = giftView.ref
			} else if (this.$refs.giftView && this.$refs.giftView.ref) {
				ref = this.$refs.giftView.ref
			}
			
			// 阶段1：初始状态 - 在远处（很小、透明、稍微偏上）
			animation.transition(ref, {
				styles: {
					opacity: 0,
					transform: 'scale(0.1) translateY(0px)',
					transformOrigin: 'center center'
				},
				duration: 0,
				timingFunction: 'ease-out',
				delay: 0
			})
			
			// 阶段2：快速靠近并淡入（0.6秒）- 从远处快速放大
			setTimeout(() => {
				animation.transition(ref, {
					styles: {
						opacity: 1,
						transform: 'scale(1.15) translateY(-20px)',
						transformOrigin: 'center center'
					},
					duration: 600,
					timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
					delay: 0
				})
			}, 30)
			
			// 阶段3：轻微回弹到正常大小（0.25秒）- 模拟惯性
			setTimeout(() => {
				animation.transition(ref, {
					styles: {
						opacity: 1,
						transform: 'scale(0.98) translateY(-10px)',
						transformOrigin: 'center center'
					},
					duration: 250,
					timingFunction: 'ease-out',
					delay: 0
				})
			}, 630)
			
			// 阶段4：稳定到正常大小并上浮（0.15秒）
			setTimeout(() => {
				animation.transition(ref, {
					styles: {
						opacity: 1,
						transform: 'scale(1) translateY(-30px)',
						transformOrigin: 'center center'
					},
					duration: 150,
					timingFunction: 'ease-out',
					delay: 0
				})
			}, 880)
			
			// 阶段5：保持并轻微波动（1.2秒）- 营造生动感
			setTimeout(() => {
				animation.transition(ref, {
					styles: {
						opacity: 1,
						transform: 'scale(1.05) translateY(-35px)',
						transformOrigin: 'center center'
					},
					duration: 600,
					timingFunction: 'ease-in-out',
					delay: 0
				}, () => {
					// 回调：再次波动
					setTimeout(() => {
						animation.transition(ref, {
							styles: {
								opacity: 1,
								transform: 'scale(1) translateY(-30px)',
								transformOrigin: 'center center'
							},
							duration: 600,
							timingFunction: 'ease-in-out',
							delay: 0
						})
					}, 50)
				})
			}, 1030)
			
			// 阶段6：淡出并继续缩小远去（0.6秒）
			setTimeout(() => {
				animation.transition(ref, {
					styles: {
						opacity: 0,
						transform: 'scale(0.7) translateY(-60px)',
						transformOrigin: 'center center'
					},
					duration: 600,
					timingFunction: 'ease-in',
					delay: 0
				}, () => {
					this.hide()
				})
			}, 2280)
		},
		
		
		// #endif
	}
}
</script>

<style scoped>
/* #ifndef APP-NVUE */
.hl88-lr-ga-wrap {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	pointer-events: none;
}
/* #endif */

/* nvue 端样式 */
/* #ifdef APP-NVUE */
.hl88-lr-ga-wrapNv {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	justify-content: center;
	align-items: center;
}

.hl88-lr-ga-boxNv {
	width: 300px;
	height: 300px;
	justify-content: center;
	align-items: center;
}

.hl88-lr-ga-imgNv {
	width: 200px;
	height: 200px;
}

.hl88-lr-ga-txtNv {
	position: absolute;
	bottom: 20px;
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}
/* #endif */

/* H5 SVGA Canvas */
/* #ifdef H5 */
.hl88-lr-ga-canvas {
	display: block;
}
/* #endif */

/* APP 端 CSS 动画 (非 nvue) */
/* #ifdef APP-PLUS */
.hl88-lr-ga-app {
	position: relative;
	width: 300px;
	height: 300px;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transform: scale(0.3);
}

.hl88-lr-ga-app.hl88-lr-ga-play {
	animation: hl88-lr-ga-zoomIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
	           hl88-lr-ga-float 1.6s ease-in-out 0.8s infinite,
	           hl88-lr-ga-fadeOut 0.6s ease-in 2.4s forwards;
}

.hl88-lr-ga-img {
	width: 200px;
	height: 200px;
}

.hl88-lr-ga-txt {
	position: absolute;
	bottom: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes hl88-lr-ga-zoomIn {
	0% {
		opacity: 0;
		transform: scale(0.1) translateY(0px);
	}
	60% {
		opacity: 1;
		transform: scale(1.15) translateY(-20px);
	}
	75% {
		opacity: 1;
		transform: scale(0.98) translateY(-10px);
	}
	85% {
		opacity: 1;
		transform: scale(1) translateY(-15px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(-30px);
	}
}

@keyframes hl88-lr-ga-float {
	0%, 100% {
		transform: translateY(0) scale(1) rotate(0deg);
	}
	25% {
		transform: translateY(-20px) scale(1.05) rotate(2deg);
	}
	50% {
		transform: translateY(-30px) scale(1.1) rotate(0deg);
	}
	75% {
		transform: translateY(-20px) scale(1.05) rotate(-2deg);
	}
}

@keyframes hl88-lr-ga-fadeOut {
	0% {
		opacity: 1;
		transform: translateY(-30px) scale(1.1) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translateY(-80px) scale(0.7) rotate(-5deg);
	}
}
/* #endif */

/* 小程序端动画 */
/* #ifdef MP */
.hl88-lr-ga-mp {
	position: relative;
	width: 300rpx;
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transform: scale(0.3);
}

.hl88-lr-ga-mp.hl88-lr-ga-play {
	animation: hl88-lr-ga-zoomInMp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
	           hl88-lr-ga-floatMp 1.6s ease-in-out 0.8s infinite,
	           hl88-lr-ga-fadeOutMp 0.6s ease-in 2.4s forwards;
}

.hl88-lr-ga-img {
	width: 200rpx;
	height: 200rpx;
}

.hl88-lr-ga-txt {
	position: absolute;
	bottom: 20rpx;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

@keyframes hl88-lr-ga-zoomInMp {
	0% {
		opacity: 0;
		transform: scale(0.1) translateY(0rpx);
	}
	60% {
		opacity: 1;
		transform: scale(1.15) translateY(-20rpx);
	}
	75% {
		opacity: 1;
		transform: scale(0.98) translateY(-10rpx);
	}
	85% {
		opacity: 1;
		transform: scale(1) translateY(-15rpx);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(-30rpx);
	}
}

@keyframes hl88-lr-ga-floatMp {
	0%, 100% {
		transform: translateY(0) scale(1) rotate(0deg);
	}
	25% {
		transform: translateY(-20rpx) scale(1.05) rotate(2deg);
	}
	50% {
		transform: translateY(-30rpx) scale(1.1) rotate(0deg);
	}
	75% {
		transform: translateY(-20rpx) scale(1.05) rotate(-2deg);
	}
}

@keyframes hl88-lr-ga-fadeOutMp {
	0% {
		opacity: 1;
		transform: translateY(-30rpx) scale(1.1) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translateY(-80rpx) scale(0.7) rotate(-5deg);
	}
}
/* #endif */
</style>

