<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="修改密码"
		:show-back="true"
		:show-tab-bar="false"
		:nav-bar-right-text="loading ? '保存中...' : '保存'"
		@nav-bar-right-click="handleSave"
	>
		<view class="password-container">
			<!-- 表单区域 -->
			<view class="form-section">
				<view class="form-item">
					<text class="form-label">当前密码</text>
					<input
						class="form-input"
						:type="showOldPassword ? 'text' : 'password'"
						v-model="formData.oldPassword"
						placeholder="请输入当前密码"
					/>
					<uni-icons
						:type="showOldPassword ? 'eye-slash' : 'eye'"
						size="20"
						color="#999"
						@tap="toggleOldPassword"
					></uni-icons>
				</view>

				<view class="form-item">
					<text class="form-label">新密码</text>
					<input
						class="form-input"
						:type="showNewPassword ? 'text' : 'password'"
						v-model="formData.newPassword"
						placeholder="请输入新密码（6-20位）"
						maxlength="20"
					/>
					<uni-icons
						:type="showNewPassword ? 'eye-slash' : 'eye'"
						size="20"
						color="#999"
						@tap="toggleNewPassword"
					></uni-icons>
				</view>

				<view class="form-item">
					<text class="form-label">确认密码</text>
					<input
						class="form-input"
						:type="showConfirmPassword ? 'text' : 'password'"
						v-model="formData.confirmPassword"
						placeholder="请再次输入新密码"
						maxlength="20"
					/>
					<uni-icons
						:type="showConfirmPassword ? 'eye-slash' : 'eye'"
						size="20"
						color="#999"
						@tap="toggleConfirmPassword"
					></uni-icons>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips-section">
				<view class="tip-item">
					<uni-icons type="info" size="16" color="#666"></uni-icons>
					<text class="tip-text">密码长度为6-20个字符</text>
				</view>
				<view class="tip-item">
					<uni-icons type="info" size="16" color="#666"></uni-icons>
					<text class="tip-text">建议使用字母、数字和符号的组合</text>
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @tap="handleSave" :disabled="loading">保存</button>
			</view>
		</view>
	</un-pages>
</template>

<script>
import memberApi from '@/api/modules/member'

export default {
	data() {
		return {
			loading: false,
			formData: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			showOldPassword: false,
			showNewPassword: false,
			showConfirmPassword: false
		}
	},

	methods: {
		// 切换当前密码显示/隐藏
		toggleOldPassword() {
			this.showOldPassword = !this.showOldPassword
		},

		// 切换新密码显示/隐藏
		toggleNewPassword() {
			this.showNewPassword = !this.showNewPassword
		},

		// 切换确认密码显示/隐藏
		toggleConfirmPassword() {
			this.showConfirmPassword = !this.showConfirmPassword
		},

		// 保存修改
		async handleSave() {
			// 表单验证
			if (!this.validateForm()) {
				return
			}

			try {
				this.loading = true
				uni.showLoading({
					title: '保存中...'
				})

				// 调用修改密码接口
				const result = await memberApi.editpasswd.put({
					old_password: this.formData.oldPassword,
					new_password: this.formData.newPassword
				})

				uni.hideLoading()

				if (result && result.code === 1) {
					uni.showToast({
						title: '密码修改成功，请重新登录',
						icon: 'success',
						duration: 2000
					})

					// 延迟退出登录，跳转到登录页
					setTimeout(() => {
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
						this.$store.commit('setUserLogout')
						uni.reLaunch({
							url: '/pages/ucenter/login/index'
						})
					}, 2000)
				} else {
					uni.showToast({
						title: result.message || '密码修改失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('修改密码失败:', error)
				uni.showToast({
					title: '修改失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 表单验证
		validateForm() {
			const { oldPassword, newPassword, confirmPassword } = this.formData

			if (!oldPassword) {
				uni.showToast({
					title: '请输入当前密码',
					icon: 'none'
				})
				return false
			}

			if (!newPassword) {
				uni.showToast({
					title: '请输入新密码',
					icon: 'none'
				})
				return false
			}

			if (newPassword.length < 6 || newPassword.length > 20) {
				uni.showToast({
					title: '密码长度为6-20个字符',
					icon: 'none'
				})
				return false
			}

			if (!confirmPassword) {
				uni.showToast({
					title: '请再次输入新密码',
					icon: 'none'
				})
				return false
			}

			if (newPassword !== confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				return false
			}

			if (oldPassword === newPassword) {
				uni.showToast({
					title: '新密码不能与当前密码相同',
					icon: 'none'
				})
				return false
			}

			return true
		},

	}
}
</script>

<style lang="scss" scoped>
.form-section {
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 24rpx;
	padding: 0 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.form-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.form-label {
			width: 140rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
		}

		.form-input {
			flex: 1;
			font-size: 30rpx;
			color: #333;
			height: 44rpx;
			line-height: 44rpx;
			padding-right: 20rpx;
		}
	}
}

.tips-section {
	margin: 20rpx 30rpx;
	background: #fff;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.tip-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.tip-text {
			font-size: 26rpx;
			color: #666;
			margin-left: 12rpx;
			line-height: 1.5;
		}
	}
}

.submit-section {
	margin: 40rpx 30rpx;

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
		border: none;
		padding: 0;
		margin: 0;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.25);
		}

		&[disabled] {
			opacity: 0.6;
		}
	}
}
</style>
