<!-- payPage.vue -->

<template>
	<view>
		<view class="player-container">
			<div id="player-container"></div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props:{
			skelUrl:{
				type:String,
				default:''
			},
			atlasUrl:{
				type:String,
				default:''
			},
			width:{
				type:String,
				default:'100px'
			},
			height:{
				type:String,
				default:'100px'
			},
			zIndex:{
				type:String,
				default:'100'
			},
		},
		mounted() {
			this.loadSpinePlayer();
		},
		methods: {
			loadSpinePlayer() {
				// 动态加载 CSS
				const link = document.createElement('link');
				link.rel = 'stylesheet';
				link.href = '/static/spine-player.min.css';
				document.head.appendChild(link);
				// 
				// 动态加载 JS
				const script = document.createElement('script');
				script.src = '/static/spine-player.js';
				script.onload = this.initializeSpinePlayer.bind(this);
				document.body.appendChild(script);
			},
			initializeSpinePlayer() {
			let spine1 = new spine.SpinePlayer("player-container", {
					skelUrl: this.skelUrl,
					atlasUrl: this.atlasUrl,
					// skelUrl: "/static/spine/guan_yu/guan_yu.skel",
					// atlasUrl: "/static/spine/guan_yu/guan_yu.atlas",
					animation: 'stand',
					premultipliedAlpha: false,
					backgroundColor: "#00000000",
					// viewport: {
					// 	debugRender: true,
					// },
					// showControls: true,
					alpha: true, // 可选：是否透明
				});
				spine1.canvas.style.width = this.width
				spine1.canvas.style.height = this.height
				spine1.canvas.style.zIndex = this.zIndex
				// spine1.canvas.style.transform = 'scale(0.8)';
				spine1.playerControls.style.display = 'none'
				// $0.removeEventListener('mousedown',getEventListeners($0).mousedown[0].listener,true)
				console.log("spine:",spine1)
			},



		},
		onHide() {
			this.logOutvisible = true
		},
		onUnload() {
			// 在页面离开时清除定时器
			clearInterval(this.timer);
		}
	};
</script>
<style lang="scss" scoped>
	.player-container {
		// width: 100rpx;
		// height: 100rpx;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// background-image: url('@/static/new/bg.png');
		// background-size: 100%;
		// background-repeat: no-repeat;
		// border: 1px solid palegoldenrod;
		// display: inline-block;
	}

	#player-container {
		// width: 100rpx;height: 100rpx;
	}
	
</style>
<style>
	
</style>