<template>
	<view class="commonPage commonPageBox">
		<public-module></public-module>
		<z-nav-bar title="数据迁移" bgColor="#258feb" fontColor="#fff"></z-nav-bar>
		<view class="migrate-tips">迁移后不可恢复，请谨慎操作！</view>
		
		<view class="code-wrap">
			<view class="account">账号：{{ userInfo.tel || userInfo.email}}</view>
			<view v-if="code" class="code-box">
				<view class="code-number">{{ code }}</view>
				<view><text>{{ remaining }}</text>有效<text class="uni-link" @click="handleRefresh">（刷新）</text></view>
			</view>
		</view>
		
		<view class="migrate-intro">
			<view class="migrate-intro-title">迁移说明</view>
			<view>1. 请在吴门国际APP中完成数据迁移，操作方式【我的】-【数据迁移】-【输入账号和移验证码】。</view>
			<view>2. 数据迁移完成后，本账号数据将被清空，已购买的天医币、积分、课程、VIP等数据将转移到新账号。</view>
			<view>3. 迁移过程可能需要几分钟时间，请耐心等待。</view>
			<view>4. 如遇到问题，请联系客服获取帮助。</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/config/requestConfig.js";
	import { mapState } from "vuex";
	export default {
		data() {
			return {
				code: '',
				remaining: '',
				timer: null,
				lastRefreshTime: 0, // 上次刷新时间戳
				refreshCooldown: 10000 // 节流时间，3秒内只能刷新一次
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		created() {
			this.countDown()
		},
		beforeDestroy() {
			// 组件销毁前清除定时器
			if (this.timer) clearInterval(this.timer);
		},
		methods: {
			getCode() {
				this.$http
	        .post("common/user/getMigrationCode")
	        .then((res) => {
	          if (res.code == 0) {
	            this.code = res.migrationCode;
	          }
	        })
	        .catch((e) => {
	          console.log(e);
	        });
			},
			async countDown() {
				// 清除已有的定时器
				if (this.timer) clearInterval(this.timer);
				
				await this.getCode() // 获取验证码
				
				// 初始化倒计时时间（3分钟 = 180秒）
				let totalSeconds = 175;
				
				// 立即更新第一次显示
				this.updateRemainingTime(totalSeconds);
				
				// 设置每秒执行的定时器
				this.timer = setInterval(() => {
						totalSeconds--;
						if (totalSeconds <= 0) {
								this.countDown()
								return;
						}
						this.updateRemainingTime(totalSeconds);
				}, 1000);
			},
			updateRemainingTime(totalSeconds) {
				const minutes = Math.floor(totalSeconds / 60);
				const seconds = totalSeconds % 60;
				this.remaining = `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
			},
			// 带节流的刷新方法
			handleRefresh() {
				const now = Date.now();
				// 如果距离上次刷新时间小于节流时间，不执行刷新
				if (now - this.lastRefreshTime < this.refreshCooldown) {
					uni.showToast({
						title: `操作太频繁，请${Math.ceil((this.refreshCooldown - (now - this.lastRefreshTime)) / 1000)}秒后再试`,
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				// 更新上次刷新时间
				this.lastRefreshTime = now;
				
				// 执行刷新
				this.countDown();
				
				// 给用户反馈
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.migrate-tips {
	color: #ff0000;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	padding: 10px 0;
}

.code-wrap {
	margin: 0 20px;
	padding: 10px 15px;
	background-color: #f0f0f0;
	border-radius: 8px;
	font-size: 16px;
	.code-box {
		display: flex;
		align-items: baseline;
		padding-top: 10px;
		
		.code-number {
			font-weight: bold;
			font-size: 28px;
			color: #000;
			margin-right: 10px;
		}
	}
}
.migrate-intro {
	margin: 20px;
	.migrate-intro-title {
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 5px;
	}
}
</style>