<template>
	<!-- 遮罩层 -->
	<view v-if="show" class="loading-mask">
		<!-- 内容区 -->
		<view class="loading-content">
			<!-- Img 动画 -->
			<image :src="imgPath" mode="aspectFit" class="loading-img rotating" :style="{ 
          width: imgWidth, 
          height: imgHeight,
          transform: `rotate(${rotationAngle}deg)`,
          transition: 'transform 0.3s linear'
        }" />
			<!-- 左对齐逐字显示的加载文字 -->
			<view class="text-container">
				<text class="loading-text">{{ displayedText }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
		onUnmounted
	} from 'vue';

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}, // 控制显示
		text: {
			type: String,
			default: '加载中...'
		}, // 提示文字
		imgPath: { // Img路径
			type: String,
			default: '/static/loading.png' // 默认放在static目录
		},
		imgWidth: {
			type: String,
			default: '200rpx'
		}, // Img宽度
		imgHeight: {
			type: String,
			default: '200rpx'
		}, // Img高度
		rotationStep: {
			type: Number,
			default: 72
		}, // 每次旋转角度
		rotationInterval: {
			type: Number,
			default: 1000
		}, // 旋转间隔(毫秒)
		typeSpeed: {
			type: Number,
			default: 140
		} // 打字速度(毫秒)
	});

	const displayedText = ref('');
	let rotationAngle = ref(0);
	let typeInterval = null;
	let rotationItl = null;
	let currentIndex = 0;
	let rotationOut = null;

	// 执行单次旋转
	const doRotation = () => {
		rotationAngle.value += props.rotationStep;
	};

	// 文字逐字显示效果（左对齐）
	const startTyping = () => {
		clearInterval(typeInterval);
		displayedText.value = '';
		currentIndex = 0;

		typeInterval = setInterval(() => {
			if (currentIndex < props.text.length) {
				displayedText.value += props.text[currentIndex];
				currentIndex++;
			} else {
				displayedText.value = '';
				currentIndex = 0;
			}
		}, props.typeSpeed);
	};

	// 启动所有动画
	const startAnimations = () => {
		rotationOut = setTimeout(doRotation,200); // 立即执行第一次旋转
		rotationItl = setInterval(doRotation, props.rotationInterval);
		startTyping();
	};

	// 清除所有动画
	const clearAnimations = () => {
		clearInterval(typeInterval);
		clearInterval(rotationItl);
		clearTimeout(rotationOut);
	};

	// 监听show变化
	watch(() => props.show, (newVal) => {
		if (newVal) {
			startAnimations();
		} else {
			clearAnimations();
		}
	}, {
		immediate: true
	});

	// 组件卸载时清除定时器
	onUnmounted(() => {
		clearAnimations();
	});
</script>

<style scoped>
	/* 遮罩层 */
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-color: rgba(0, 0, 0, 0.5); */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	/* 内容区 */
	.loading-content {
		/* background-color: #fff; */
		border-radius: 12px;
		padding: 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
	}


	/* 图片基础样式 */
	.loading-img {
		margin-bottom: 24rpx;
		transform-origin: center center;
	}

	/* 文字容器 */
	.text-container {
		margin-left: 10rpx;
		width: 200rpx;
		text-align: left;
		padding-left: 80rpx;
		/* border-left: 2rpx solid #1890ff; */
		min-height: 40rpx;
		display: flex;
		align-items: center;
	}

	/* 文字样式 */
	.loading-text {
		color: #b27c1e;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 1rpx;
	}
</style>