<template>
	<view class="page">
		<view class="padding bg-white margin-top">
			<!-- 旧密码 -->
			<view class="form-item solid-bottom">
				<view class="form-label">旧密码</view>
				<view class="form-input-wrap">
					<input 
						class="form-input" 
						v-model="formData.oldPassword" 
						:type="showOldPwd ? 'text' : 'password'" 
						placeholder="请输入旧密码"
					/>
					<view class="pwd-toggle" @click="showOldPwd = !showOldPwd">
						<text :class="showOldPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
					</view>
				</view>
			</view>
			
			<!-- 新密码 -->
			<view class="form-item solid-bottom">
				<view class="form-label">新密码</view>
				<view class="form-input-wrap">
					<input 
						class="form-input" 
						v-model="formData.newPassword" 
						:type="showNewPwd ? 'text' : 'password'" 
						placeholder="请输入新密码"
					/>
					<view class="pwd-toggle" @click="showNewPwd = !showNewPwd">
						<text :class="showNewPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
					</view>
				</view>
			</view>
			
			<!-- 确认密码 -->
			<view class="form-item">
				<view class="form-label">确认密码</view>
				<view class="form-input-wrap">
					<input 
						class="form-input" 
						v-model="formData.confirmPassword" 
						:type="showConfirmPwd ? 'text' : 'password'" 
						placeholder="请再次输入新密码"
					/>
					<view class="pwd-toggle" @click="showConfirmPwd = !showConfirmPwd">
						<text :class="showConfirmPwd ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提示信息 -->
		<view class="tips">
			<text class="text-gray text-sm">密码长度至少6位，建议包含字母和数字</text>
		</view>
		
		<!-- 保存按钮 -->
		<view class="padding">
			<button class="bg-blue round" @click="handleSave" :loading="saving">保存</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { updatePassword } from '@/request/three_one_api/info.js';

const saving = ref(false);
const showOldPwd = ref(false);
const showNewPwd = ref(false);
const showConfirmPwd = ref(false);

const formData = reactive({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
});

// 保存
const handleSave = async () => {
	// 表单验证
	if (!formData.oldPassword) {
		uni.showToast({ title: '请输入旧密码', icon: 'none' });
		return;
	}
	if (!formData.newPassword) {
		uni.showToast({ title: '请输入新密码', icon: 'none' });
		return;
	}
	if (formData.newPassword.length < 6) {
		uni.showToast({ title: '新密码长度至少6位', icon: 'none' });
		return;
	}
	if (!formData.confirmPassword) {
		uni.showToast({ title: '请确认新密码', icon: 'none' });
		return;
	}
	if (formData.newPassword !== formData.confirmPassword) {
		uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
		return;
	}
	if (formData.oldPassword === formData.newPassword) {
		uni.showToast({ title: '新密码不能与旧密码相同', icon: 'none' });
		return;
	}
	
	saving.value = true;
	try {
		const params = {
			oldPassword: formData.oldPassword,
			newPassword: formData.newPassword,
			confirmPassword: formData.confirmPassword
		};
		
		const res = await updatePassword(params);
		if (res.code === 0) {
			uni.showToast({ title: '密码修改成功', icon: 'success' });
			// 清空表单
			formData.oldPassword = '';
			formData.newPassword = '';
			formData.confirmPassword = '';
			// 延迟返回
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} else {
			uni.showToast({ title: res.msg || '修改失败', icon: 'none' });
		}
	} catch (err) {
		console.error('修改密码失败:', err);
		uni.showToast({ title: '修改失败', icon: 'none' });
	} finally {
		saving.value = false;
	}
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #EBF2FC;
}

.form-item {
	padding: 30rpx 0;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.form-input-wrap {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 0 20rpx;
}

.form-input {
	flex: 1;
	height: 80rpx;
	font-size: 28rpx;
}

.pwd-toggle {
	padding: 10rpx;
	font-size: 36rpx;
	color: #999;
}

.tips {
	padding: 20rpx 30rpx;
}
</style>
