<template>
	<view class="container">
		<view class="card flex-col-g20">
			<view class="flex-row-g20">
				<label for="">手机号:</label>
				<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.phone" />
			</view>

			<view class="flex-row-g20">
				<label for="">验证码:</label>
				<up-input placeholder="验证码" v-model="bind.code">
					<template #suffix>
						<up-button @tap="getCode" :text="codeText" type="success" :disabled="cooldown > 0"></up-button>
					</template>
				</up-input>
			</view>

			<view class="btn">
				<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
			</view>
		</view>
	</view>
</template>

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

	let bind = reactive({
		phone: '',
		code: ''
	});

	let cooldown = ref(0);
	let codeText = ref('获取验证码');
let timer = null;

	const getCode = async () => {
		if (!bind.phone) {
			uni.showToast({ title: '请输入手机号', icon: 'none' });
			return;
		}

		if (!/^1[3-9]\d{9}$/.test(bind.phone)) {
			uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
			return;
		}

		try {
			const data = await authApi.sendCode(bind.phone, 'bind_phone');
			cooldown.value = data.cooldown_seconds || 60;
			codeText.value = `${cooldown.value}s`;

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

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

	const bindPhone = async () => {
		if (!bind.phone || !bind.code) {
			uni.showToast({ title: '手机号和验证码都不能为空', icon: 'none' });
			return;
		}

		try {
			await authApi.bindPhone(bind.phone, bind.code);
			uni.showToast({ title: '绑定成功', icon: 'success' });
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} catch (e) {
			console.error('绑定手机号失败', e);
		}
	};
</script>

<style>
</style>