<template>
	<view class="change-phone-page">
		<view class="change-phone-container">
			<view class="change-phone-header">
				<text class="page-title">修改手机号</text>
				<text class="page-subtitle">请输入新的手机号码进行绑定</text>
			</view>

			<view class="change-phone-form">
				<view class="input-item">
					<up-icon name="phone" size="20" color="#999"></up-icon>
					<input v-model="phoneForm.phone" class="input-field" type="number" maxlength="11"
						placeholder="请输入新手机号" />
				</view>

				<view class="input-item">
					<up-icon name="error-circle" size="20" color="#999"></up-icon>
					<input v-model="phoneForm.code" class="input-field code-input" type="number" maxlength="6"
						placeholder="请输入验证码" />
					<button class="code-btn" :disabled="counting" @click="getCode">
						{{ counting ? `${countdown}s` : '获取验证码' }}
					</button>
				</view>

				<button class="confirm-btn" @click="confirmBind">
					确认绑定
				</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { Service } from '@/Service/Service';
	import { onLoad } from '@dcloudio/uni-app';
	import { LoginService } from "@/Service/api/LoginService"
	import { UserService } from "@/Service/api/UserService"

	const counting = ref(false);
	const countdown = ref(60);

	const phoneForm = ref({
		phone: '',
		code: ''
	});

	onLoad(() => {

	});

	const getCode = () => {
		if (!phoneForm.value.phone) {
			Service.Msg('请输入手机号');
			return;
		}

		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(phoneForm.value.phone)) {
			Service.Msg('请输入正确的手机号');
			return;
		}

		counting.value = true;
		LoginService.SendSms(phoneForm.value.phone, 'UpdatePhone').then(res => {
			if (res.code == 0) {
				Service.Msg('验证码已发送!');
			} else {
				Service.Msg(res.msg);
			}
		});

		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(timer);
				counting.value = false;
				countdown.value = 60;
			}
		}, 1000);
	};

	const confirmBind = () => {
		if (!phoneForm.value.phone) {
			Service.Msg('请输入手机号');
			return;
		}

		const phoneReg = /^1[3-9]\d{9}$/;
		if (!phoneReg.test(phoneForm.value.phone)) {
			Service.Msg('请输入正确的手机号');
			return;
		}

		if (!phoneForm.value.code) {
			Service.Msg('请输入验证码');
			return;
		}

		Service.LoadIng('绑定中...');
		
		UserService.UpdateUserPhone(phoneForm.value.phone,phoneForm.value.code).then(res=>{
			if(res.code==0){
				Service.LoadClose();
				Service.Msg('手机号修改成功');
				Service.GoPageBack();
			}else{
				Service.Msg(res.msg);
			}
		})
		

	};
</script>

<style scoped lang="scss">
	.change-phone-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
		padding: 40rpx;
	}

	.change-phone-container {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 32rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.1);
	}

	.change-phone-header {
		margin-bottom: 50rpx;
	}

	.page-title {
		display: block;
		font-size: 44rpx;
		font-weight: bold;
		color: #1F2937;
		margin-bottom: 10rpx;
	}

	.page-subtitle {
		font-size: 28rpx;
		color: #6B7280;
	}

	.change-phone-form {
		margin-bottom: 30rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		background-color: #F9FAFB;
		border-radius: 16rpx;
		padding: 24rpx 30rpx;
		margin-bottom: 28rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s;

		&:focus-within {
			border-color: #F97316;
			background-color: #FFF;
		}
	}

	.input-field {
		flex: 1;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #1F2937;
	}

	.code-input {
		flex: 1;
	}

	.code-btn {
		margin-left: 20rpx;
		padding: 16rpx 24rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 12rpx;
		border: none;
		line-height: 1;
		white-space: nowrap;

		&:disabled {
			opacity: 0.6;
			background-color: #fff;
		}
	}

	.confirm-btn {
		width: 100%;
		padding: 0 30rpx;
		background: linear-gradient(135deg, #F97316, #FB923C);
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 600;
		border: none;
		border-radius: 16rpx;
		margin-top: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.3);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.2);
		}
	}
</style>
