<template>
	<view class="container">
		<view class="card">
			<view class="form-item">
				<view class="label">原手机号</view>
				<up-input placeholder="请输入原手机号" border="surround" v-model="form.oldPhone" />
			</view>

			<view class="form-item">
				<view class="label">验证码</view>
				<up-input placeholder="请输入原手机号验证码" border="surround" v-model="form.oldCode">
					<template #suffix>
						<up-button @tap="sendOldCode" :text="oldCodeText" type="success" size="small" :disabled="oldCooldown > 0"></up-button>
					</template>
				</up-input>
			</view>

			<view class="form-item">
				<view class="label">新手机号</view>
				<up-input placeholder="请输入新手机号" border="surround" v-model="form.newPhone" />
			</view>

			<view class="form-item">
				<view class="label">验证码</view>
				<up-input placeholder="请输入新手机号验证码" border="surround" v-model="form.newCode">
					<template #suffix>
						<up-button @tap="sendNewCode" :text="newCodeText" type="success" size="small" :disabled="newCooldown > 0"></up-button>
					</template>
				</up-input>
			</view>

			<view class="btn-wrapper">
				<up-button type="primary" @click="submit">确认更换</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { authApi } from '@/api/index.js';

	const form = reactive({
		oldPhone: '',
		oldCode: '',
		newPhone: '',
		newCode: ''
	});

	let oldCooldown = ref(0);
	let newCooldown = ref(0);
	let oldCodeText = ref('获取验证码');
	let newCodeText = ref('获取验证码');
	let oldTimer = null;
	let newTimer = null;

	const sendOldCode = async () => {
		if (oldCooldown.value > 0) return;
		if (!form.oldPhone) {
			uni.showToast({ title: '请输入原手机号', icon: 'none' });
			return;
		}

		try {
			const data = await authApi.sendCode(form.oldPhone, 'change_phone_old');
			oldCooldown.value = data.cooldown_seconds || 60;
			oldCodeText.value = `${oldCooldown.value}s`;

			oldTimer = setInterval(() => {
				oldCooldown.value--;
				if (oldCooldown.value <= 0) {
					clearInterval(oldTimer);
					oldCodeText.value = '获取验证码';
				} else {
					oldCodeText.value = `${oldCooldown.value}s`;
				}
			}, 1000);

			uni.showToast({ title: '验证码已发送', icon: 'success' });
		} catch (e) {
			console.error('发送验证码失败', e);
		}
	};

	const sendNewCode = async () => {
		if (newCooldown.value > 0) return;
		if (!form.newPhone) {
			uni.showToast({ title: '请输入新手机号', icon: 'none' });
			return;
		}

		try {
			const data = await authApi.sendCode(form.newPhone, 'change_phone_new');
			newCooldown.value = data.cooldown_seconds || 60;
			newCodeText.value = `${newCooldown.value}s`;

			newTimer = setInterval(() => {
				newCooldown.value--;
				if (newCooldown.value <= 0) {
					clearInterval(newTimer);
					newCodeText.value = '获取验证码';
				} else {
					newCodeText.value = `${newCooldown.value}s`;
				}
			}, 1000);

			uni.showToast({ title: '验证码已发送', icon: 'success' });
		} catch (e) {
			console.error('发送验证码失败', e);
		}
	};

	const submit = async () => {
		if (!form.oldPhone || !form.oldCode) {
			uni.showToast({ title: '请填写原手机号信息', icon: 'none' });
			return;
		}
		if (!form.newPhone || !form.newCode) {
			uni.showToast({ title: '请填写新手机号信息', icon: 'none' });
			return;
		}

		try {
			await authApi.changePhone(form.oldPhone, form.oldCode, form.newPhone, form.newCode);
			uni.showToast({ title: '更换成功', icon: 'success' });
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} catch (e) {
			console.error('更换手机号失败', e);
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		.card {
			.form-item {
				margin-bottom: var(--space-lg);
				.label {
					font-size: 28rpx;
					font-weight: 500;
					color: var(--text-primary);
					margin-bottom: var(--space-sm);
				}
			}
			.btn-wrapper {
				margin-top: var(--space-xl);
			}
		}
	}
</style>