<template>
	<view class="device-detail">
		<!-- 自定义导航栏 -->
		<view class="tabback">
			<view class="rtjt" @click="btnback">←</view>
			<view class="name">{{ $t('editAccount') }}</view>
			<view style="width: 36rpx;"></view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 头像上传区域 -->
			<view class="avatar-section">
				<view class="avatar-container">
					<view class="avatar-placeholder" v-if="userInfo.avatar" @click="btnimgava">
						<image style="border-radius: 50%;" :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="avatar-placeholder" v-else @click="btnimgava">
						<image style="border-radius: 50%;" src="https://api.ccttiot.com/smartmeter/img/static/ugALV02cU3TX6aSoprJ8"
							mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<!-- 用户信息表单 -->
			<view class="form-section">
				<!-- 用户名 -->
				<view class="form-item">
					<text class="label">{{ $t('username') }}</text>
					<view class="input-container">
						<input class="input-field" :value="userInfo.nickName" disabled />
						<view class="edit-icon" @click="editUsername">
							<image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31"
								mode="aspectFill"></image>️
						</view>
					</view>
				</view>

				<!-- 电子邮件 -->
				<view class="form-item">
					<text class="label">{{ $t('email') }}</text>
					<view class="input-container">
						<input class="input-field" :value="userInfo.email" disabled />
						<!-- <view class="edit-icon" @click="editEmail"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image>️</view> -->
					</view>
				</view>

				<!-- 密码 -->
				<!-- <view class="form-item">
					<text class="label">{{ $t('password') }}</text>
					<view class="input-container">
						<input 
							class="input-field" 
							type="password" 
							value="........" 
							disabled
						/>
						<view class="edit-icon" @click="editPassword"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image>️</view>
					</view>
				</view> -->

				<!-- 手机号 -->
				<!-- <view class="form-item">
					<text class="label">{{ $t('phoneNumber') }}</text>
					<view class="input-container">
						<input 
							class="input-field" 
							:value="userInfo.phone" 
							disabled
						/>
						<view class="edit-icon" @click="editPhone"><image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31" mode="aspectFill"></image></view>
					</view>
				</view> -->

				<!-- PIN码 -->
				<view class="form-item">
					<text class="label">{{ $t('pin') }}</text>
					<view class="pin-container">
						<view class="pin-switch-container">
							<text class="pin-switch-desc">{{ enablePin ? $t('pinEnabled') : $t('pinDisabled') }}</text>
							<switch 
								:checked="enablePin" 
								@change="onPinSwitchChange"
								color="#333"
								class="pin-switch"
							/>
						</view>
						<!-- 修改pin -->
						<!-- <view class="pin-edit-container">
							<input class="pin-display-field" value="••••" disabled />
							<view class="edit-icon" @click="editPin">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uDKe99jkjV2fPYGODK31"
									mode="aspectFill"></image>
							</view>
						</view> -->
					</view>
				</view>
			</view>

			<!-- 删除账户按钮 -->
			<!-- <view class="delete-section">
				<button class="delete-btn" @click="deleteAccount">{{ $t('deleteAccount') }}</button>
			</view> -->

			<!-- 自定义底部选择弹窗 -->
			<view class="action-sheet" v-if="showActionSheet" @click="hideActionSheet">
				<view class="action-sheet-content" @click.stop>
					<view class="action-sheet-item" @click="takePhoto">
						<text class="action-sheet-text">{{ $i18n.t('takePhoto') }}</text>
					</view>
					<view class="action-sheet-item" @click="chooseFromAlbum">
						<text class="action-sheet-text">{{ $i18n.t('chooseFromAlbum') }}</text>
					</view>
					<view class="action-sheet-cancel" @click="hideActionSheet">
						<text class="action-sheet-text">{{ $i18n.t('actionSheetCancel') }}</text>
					</view>
				</view>
			</view>

			<!-- PIN修改弹窗 -->
			<view class="pin-modal" v-if="showPinModal" @click="hidePinModal">
				<view class="pin-modal-content" @click.stop>
					<view class="pin-modal-header">
						<text class="pin-modal-title">{{ $t('editPinTitle') }}</text>
						<view class="pin-modal-close" @click="hidePinModal">×</view>
					</view>
					<view class="pin-modal-body">
						<!-- 旧PIN输入 -->
						<view class="pin-input-group">
							<text class="pin-input-label">{{ $t('oldPin') }}</text>
							<input 
								class="pin-input" 
								type="password" 
								:placeholder="$t('oldPinPlaceholder')"
								v-model="pinForm.oldPin"
								maxlength="4"
							/>
						</view>
						<!-- 新PIN输入 -->
						<view class="pin-input-group">
							<text class="pin-input-label">{{ $t('newPin') }}</text>
							<input 
								class="pin-input" 
								type="password" 
								:placeholder="$t('newPinPlaceholder')"
								v-model="pinForm.newPin"
								maxlength="4"
							/>
						</view>
						<!-- 确认新PIN输入 -->
						<view class="pin-input-group">
							<text class="pin-input-label">{{ $t('confirmNewPin') }}</text>
							<input 
								class="pin-input" 
								type="password" 
								:placeholder="$t('confirmNewPinPlaceholder')"
								v-model="pinForm.confirmNewPin"
								maxlength="4"
							/>
						</view>
					</view>
					<view class="pin-modal-footer">
						<button class="pin-btn pin-btn-cancel" @click="hidePinModal">{{ $t('modalCancel') }}</button>
						<button class="pin-btn pin-btn-confirm" @click="confirmPinChange">{{ $t('modalConfirm') }}</button>
					</view>
				</view>
			</view>

			<!-- PIN验证弹窗 -->
			<view class="pin-modal" v-if="showPinVerifyModal" @click="hidePinVerifyModal">
				<view class="pin-modal-content" @click.stop>
					<view class="pin-modal-header">
						<text class="pin-modal-title">{{ $t('verifyPin') }}</text>
						<view class="pin-modal-close" @click="hidePinVerifyModal">×</view>
					</view>
					<view class="pin-modal-body">
						<view class="pin-verify-tip">
							<text class="pin-verify-tip-text">{{ pendingSwitchAction === 'enable' ? $t('verifyPinToEnable') : $t('verifyPinToDisable') }}</text>
						</view>
						<!-- PIN验证输入 -->
						<view class="pin-input-group">
							<text class="pin-input-label">{{ $t('pin') }}</text>
							<input 
								class="pin-input" 
								type="password" 
								:placeholder="$t('verifyPinPlaceholder')"
								v-model="pinVerifyForm.pin"
								maxlength="4"
								@confirm="confirmPinVerification"
							/>
						</view>
					</view>
					<view class="pin-modal-footer">
						<button class="pin-btn pin-btn-cancel" @click="hidePinVerifyModal">{{ $t('modalCancel') }}</button>
						<button class="pin-btn pin-btn-confirm" @click="confirmPinVerification">{{ $t('modalConfirm') }}</button>
					</view>
				</view>
			</view>

			<!-- 用户名编辑弹窗 -->
			<view class="pin-modal" v-if="showUsernameModal" @click="hideUsernameModal">
				<view class="pin-modal-content" @click.stop>
					<view class="pin-modal-header">
						<text class="pin-modal-title">{{ $t('editUsernameTitle') }}</text>
						<view class="pin-modal-close" @click="hideUsernameModal">×</view>
					</view>
					<view class="pin-modal-body">
						<view class="pin-input-group">
							<text class="pin-input-label">{{ $t('username') }}</text>
							<input 
								class="pin-input" 
								type="text" 
								:placeholder="$t('pleaseEnterUsername')"
								v-model="usernameForm.nickName"
								maxlength="20"
								@confirm="confirmUsernameChange"
							/>
						</view>
					</view>
					<view class="pin-modal-footer">
						<button class="pin-btn pin-btn-cancel" @click="hideUsernameModal">{{ $t('modalCancel') }}</button>
						<button class="pin-btn pin-btn-confirm" @click="confirmUsernameChange">{{ $t('modalConfirm') }}</button>
					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import i18n from '@/common/i18n/index.js'

	export default {
		data() {
			return {
				userInfo: {},
				showActionSheet: false,
				userImgs: 'https://api.ccttiot.com/smartmeter/img/static/uKFO4XdQVUgGYJHt4gwn',
				cropImageSrc: '',
				kjid: '',
				token: '',
				showPinModal: false, // 显示PIN修改弹窗
				pinForm: { // PIN表单数据
					oldPin: '',
					newPin: '',
					confirmNewPin: ''
				},
				enablePin: false,
				showPinVerifyModal: false, // 显示PIN验证弹窗
				pinVerifyForm: { // PIN验证表单数据
					pin: ''
				},
				pendingSwitchAction: null, // 待执行的开关操作
				showUsernameModal: false, // 显示用户名编辑弹窗
				usernameForm: { // 用户名表单数据
					nickName: ''
				}
			}
		},
		onLoad() {
			this.getinfo()
			this.getQiniuToken()
		},
		onShow() {
			// 每次页面显示时重新加载安全设置，确保状态同步
		},
		methods: {
			// 点击上传图片
			btnimgava() {
				this.showActionSheet = true
			},
			// 隐藏弹窗
			hideActionSheet() {
				this.showActionSheet = false
			},
			// 拍照
			takePhoto() {
				this.hideActionSheet()
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: (imgRes) => {
						this.cropImageSrc = imgRes.tempFilePaths[0]
						let _this = this
						let math = 'static/' + _this.generateGuid(20)
						// 上传裁剪后的图片到七牛云
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: _this.cropImageSrc,
							formData: {
								token: this.token, // 后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								uni.hideLoading()
								let str = JSON.parse(res.data)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								_this.userInfo.avatar = 'https://api.ccttiot.com/' + str.key
								_this.getxiugaiinfo()
								console.log('最终图片路径:', _this.userImgs)
								uni.showToast({
									title: _this.$i18n.t('imageSelectedSuccess'),
									icon: 'success',
									duration: 3000
								})

							},
							fail: function(err) {
								uni.hideLoading()
								console.error('上传失败:', err)
								uni.showToast({
									title: _this.$i18n.t('uploadFailed'),
									icon: 'none',
								})
							}
						})
					},
					fail: (err) => {
						console.error('拍照失败:', err)
						uni.showToast({
							title: this.$i18n.t('imageOperationCancelled'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 从相册选择
			chooseFromAlbum() {
				this.hideActionSheet()
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (imgRes) => {
						this.cropImageSrc = imgRes.tempFilePaths[0]
						let _this = this
						let math = 'static/' + _this.generateGuid(20)
						// 上传裁剪后的图片到七牛云
						uni.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: _this.cropImageSrc,
							formData: {
								token: this.token, // 后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								uni.hideLoading()
								let str = JSON.parse(res.data)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								_this.userInfo.avatar = 'https://api.ccttiot.com/' + str.key
								_this.getxiugaiinfo()
								console.log('最终图片路径:', _this.userImgs)
								uni.showToast({
									title: _this.$i18n.t('imageSelectedSuccess'),
									icon: 'success'
								})
							},
							fail: function(err) {
								uni.hideLoading()
								console.error('上传失败:', err)
								uni.showToast({
									title: _this.$i18n.t('uploadFailed'),
									icon: 'none'
								})
							}
						})
					},
					fail: (err) => {
						console.error('选择图片失败:', err)
						uni.showToast({
							title: this.$i18n.t('imageOperationCancelled'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 生成随机字符串（替代$u.guid方法）
			generateGuid(length) {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let result = ''
				for (let i = 0; i < length; i++) {
					result += chars.charAt(Math.floor(Math.random() * chars.length))
				}
				return result
			},
			// 获取上传七牛云token
			getQiniuToken() {
				this.$http.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},

			// 上传图片接口
			getxiugaiinfo() {
				let data = {
					avatar: this.userImgs
				}
				this.$http.put(`/system/user/profile`, data).then(resp => {
					if (resp.code == 200) {
						uni.showToast({
							title: resp.msg,
							icon: 'success',
							duration: 3000
						})
					} else {
						uni.showToast({
							title: resp.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},

			// 获取个人信息
			getinfo() {
				this.$http.get('/getInfo').then(res => {
					if (res.code == 200) {
						this.userInfo = res.user
						this.enablePin = res.user.enablePin
						uni.setStorageSync('user', res.user)
					}
				})
			},
			// 多语言翻译方法
			$t(key) {
				return i18n.t(key)
			},

			// 点击返回上一级
			btnback() {
				uni.navigateBack()
			},

			// 编辑用户名
			editUsername() {
				// 设置表单数据
				this.usernameForm = {
					nickName: this.userInfo.nickName || ''
				}
				// 显示自定义弹窗
				this.showUsernameModal = true
			},

			// 隐藏用户名编辑弹窗
			hideUsernameModal() {
				this.showUsernameModal = false
				// 重置表单数据
				this.usernameForm = {
					nickName: ''
				}
			},

			// 确认用户名修改
			confirmUsernameChange() {
				// 验证用户名是否输入
				if (!this.usernameForm.nickName.trim()) {
					uni.showToast({
						title: this.$t('pleaseEnterUsername'),
						icon: 'none'
					})
					return
				}

				// 验证用户名长度
				if (this.usernameForm.nickName.trim().length < 2) {
					uni.showToast({
						title: this.$t('usernameTooShort'),
						icon: 'none'
					})
					return
				}

				// 如果用户名没有变化，直接关闭弹窗
				if (this.usernameForm.nickName.trim() === this.userInfo.nickName) {
					this.hideUsernameModal()
					return
				}

				// 调用API更新用户名
				this.updateUsername()
			},

			// 更新用户名
			updateUsername() {
				// 显示加载中
				uni.showLoading({
					title: this.$t('updating')
				})
				const data = {
					nickName: this.usernameForm.nickName.trim()
				}
				this.$http.put('/system/user/profile', data).then(resp => {
					uni.hideLoading()
					if (resp.code == 200) {
						// 更新本地用户信息
						this.userInfo.nickName = data.nickName
						uni.setStorageSync('user', this.userInfo)
						uni.showToast({
							title: this.$t('usernameUpdateSuccess'),
							icon: 'success',
							duration: 3000
						})
						// 关闭弹窗
						this.hideUsernameModal()
					} else {
						uni.showToast({
							title: resp.msg || this.$t('usernameUpdateFailed'),
							icon: 'none',
							duration: 3000
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('更新用户名失败:', error)
					uni.showToast({
						title: this.$t('usernameUpdateFailed'),
						icon: 'none',
						duration: 3000
					})
				})
			},

			// 编辑邮箱
			// editEmail() {
			// 	uni.showModal({
			// 		title: this.$t('editEmailTitle'),
			// 		content: this.userInfo.email,
			// 		editable: true,
			// 		placeholderText: this.userInfo.email,
			// 		cancelText: this.$t('modalCancel'),
			// 		confirmText: this.$t('modalConfirm'),
			// 		success: (res) => {
			// 			if (res.confirm && res.content) {
			// 				this.userInfo.email = res.content
			// 				uni.showToast({
			// 					title: this.$t('emailUpdateSuccess'),
			// 					icon: 'success'
			// 				})
			// 			}
			// 		}
			// 	})
			// },

			// 编辑密码
			// editPassword() {
			// 	uni.showModal({
			// 		title: this.$t('editPasswordTitle'),
			// 		content: '',
			// 		editable: true,
			// 		placeholderText: this.$t('editPasswordContent'),
			// 		cancelText: this.$t('modalCancel'),
			// 		confirmText: this.$t('modalConfirm'),
			// 		success: (res) => {
			// 			if (res.confirm && res.content) {
			// 				// 这里应该调用修改密码的API
			// 				uni.showToast({
			// 					title: this.$t('passwordUpdateSuccess'),
			// 					icon: 'success'
			// 				})
			// 			}
			// 		}
			// 	})
			// },

			// 编辑手机号
			// editPhone() {
			// 	uni.showModal({
			// 		title: this.$t('editPhoneTitle'),
			// 		content: this.userInfo.phone,
			// 		editable: true,
			// 		placeholderText: this.userInfo.phone,
			// 		cancelText: this.$t('modalCancel'),
			// 		confirmText: this.$t('modalConfirm'),
			// 		success: (res) => {
			// 			if (res.confirm && res.content) {
			// 				this.userInfo.phone = res.content
			// 				uni.showToast({
			// 					title: this.$t('phoneUpdateSuccess'),
			// 					icon: 'success'
			// 				})
			// 			}
			// 		}
			// 	})
			// },

			// 删除账户
			deleteAccount() {
				uni.showModal({
					title: this.$t('deleteAccountTitle'),
					content: this.$t('deleteAccountContent'),
					confirmColor: '#ff4444',
					cancelText: this.$t('modalCancel'),
					confirmText: this.$t('modalConfirm'),
					success: (res) => {
						if (res.confirm) {
							// 这里应该调用删除账户的API
							uni.showToast({
								title: this.$t('deleteAccountSuccess'),
								icon: 'success'
							})
							// 删除成功后返回登录页面
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 1500)
						}
					}
				})
			},
			// 编辑PIN码
			editPin() {
				// 重置表单数据
				this.pinForm = {
					oldPin: '',
					newPin: '',
					confirmNewPin: ''
				}
				this.showPinModal = true
			},

			// 隐藏PIN修改弹窗
			hidePinModal() {
				this.showPinModal = false
				console.log(2222);
				// 重置表单数据
				this.pinForm = {
					oldPin: '',
					newPin: '',
					confirmNewPin: ''
				}
			},

			// 确认修改PIN
			confirmPinChange() {
				// 验证旧PIN是否输入
				if (!this.pinForm.oldPin) {
					uni.showToast({
						title: this.$t('pleaseEnterOldPin'),
						icon: 'none'
					})
					return
				}
				// 验证新PIN是否输入
				if (!this.pinForm.newPin) {
					uni.showToast({
						title: this.$t('pleaseEnterNewPin'),
						icon: 'none'
					})
					return
				}
				// 验证确认PIN是否输入
				if (!this.pinForm.confirmNewPin) {
					uni.showToast({
						title: this.$t('pleaseConfirmNewPin'),
						icon: 'none'
					})
					return
				}
				// 验证PIN长度
				if (this.pinForm.oldPin.length !== 4 || this.pinForm.newPin.length !== 4 || this.pinForm.confirmNewPin.length !== 4) {
					uni.showToast({
						title: this.$t('pinMustBe4Digits'),
						icon: 'none'
					})
					return
				}
				// 验证新PIN是否一致
				if (this.pinForm.newPin !== this.pinForm.confirmNewPin) {
					uni.showToast({
						title: this.$t('newPinsNotMatch'),
						icon: 'none'
					})
					return
				}
				// 验证新PIN不能与旧PIN相同
				if (this.pinForm.oldPin === this.pinForm.newPin) {
					uni.showToast({
						title: this.$t('newPinCannotBeSame'),
						icon: 'none'
					})
					return
				}
				// 调用修改PIN的API
				this.updatePin()
			},

			// 调用修改PIN的API
			updatePin() {
				// 显示加载中
				uni.showLoading({
					title: this.$t('updating')
				})
				// 这里需要根据实际API接口进行调用
				// 假设API接口为 /system/user/updatePin
				this.$http.put(`/system/user/profile/updatePin?oldPin=${this.pinForm.oldPin}&newPin=${this.pinForm.newPin}&enablePin=${this.enablePin}`).then(resp => {
					uni.hideLoading()
					if (resp.code == 200) {
						uni.showToast({
							title: this.$t('pinUpdateSuccess'),
							icon: 'success',
							duration: 3000
						})
						this.hidePinModal()
					} else {
						uni.showToast({
							title: resp.msg || this.$t('pinUpdateFailed'),
							icon: 'none',
							duration: 3000
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('修改PIN失败:', error)
					uni.showToast({
						title: this.$t('pinUpdateFailed'),
						icon: 'none',
						duration: 3000
					})
				})
			},

			// PIN开关变化处理
			onPinSwitchChange(e) {
				const enabled = e.detail.value
				this.enablePin = enabled
				console.log('PIN开关变化:', enabled)
				// 记录待执行的操作
				this.pendingSwitchAction = enabled ? 'enable' : 'disable'
				// 重置PIN验证表单
				this.pinVerifyForm = {
					pin: ''
				}
				// 显示PIN验证弹窗
				this.showPinVerifyModal = true
			},

			// 隐藏PIN验证弹窗
			hidePinVerifyModal() {
				this.showPinVerifyModal = false
				this.enablePin = this.userInfo.enablePin
				// 重置表单数据
				this.pinVerifyForm = {
					pin: ''
				}
				this.pendingSwitchAction = null
			},
			// 确认PIN验证
			confirmPinVerification() {
				// 验证PIN是否输入
				if (!this.pinVerifyForm.pin) {
					uni.showToast({
						title: this.$t('pleaseEnterOldPin'),
						icon: 'none'
					})
					return
				}
				// 验证PIN长度
				if (this.pinVerifyForm.pin.length !== 4) {
					uni.showToast({
						title: this.$t('pinMustBe4Digits'),
						icon: 'none'
					})
					return
				}
				// 调用PIN验证API
				this.verifyPin()
			},

			// 验证PIN码
			verifyPin() {
				// 显示加载中
				uni.showLoading({
					title: this.$t('verifying')
				})
				// 调用PIN验证API
				this.$http.put(`/system/user/profile/updatePin?pin=${this.pinVerifyForm.pin}&enablePin=${this.enablePin}`).then(resp => {
					uni.hideLoading()
					if (resp.code == 200) {
						// PIN验证成功，执行开关操作
						uni.showToast({
							title: this.$t('pinVerificationSuccess'),
							icon: 'success',
							duration: 1500
						})
						
						// 关闭验证弹窗
						this.hidePinVerifyModal()
					    this.getinfo()
					} else {
						uni.showToast({
							title: resp.msg || this.$t('pinVerificationFailed'),
							icon: 'none',
							duration: 3000
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('PIN验证失败:', error)
					uni.showToast({
						title: this.$t('pinVerificationFailed'),
						icon: 'none',
						duration: 3000
					})
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 160rpx;
		padding: 0 20rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999 !important;
		background-color: #fff;

		.rtjt {
			font-size: 36rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 500;
		}
	}

	.device-detail {
		padding-top: 150rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.content {
		/* padding: 40rpx 30rpx; */
	}

	// 头像区域
	.avatar-section {
		display: flex;
		justify-content: center;
		margin-bottom: 104rpx;
		margin-top: 104rpx;

		.avatar-container {
			position: relative;

			.avatar-placeholder {
				width: 250rpx;
				height: 250rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f8f8f8;

				image {
					width: 250rpx;
					height: 250rpx;
				}

				.avatar-icon {
					font-size: 80rpx;
					color: #999;
				}
			}

			.upload-btn {
				position: absolute;
				bottom: 0;
				right: -24rpx;
				width: 110rpx;
				height: 68rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 110rpx;
					height: 68rpx;
				}

				.upload-icon {
					color: #fff;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
	}

	.action-sheet {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.action-sheet-content {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 40rpx;
		animation: slideUp 0.3s ease-out;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.action-sheet-item {
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		text-align: center;
	}

	.action-sheet-item:active {
		background-color: #f5f5f5;
	}

	.action-sheet-cancel {
		padding: 30rpx 40rpx;
		text-align: center;
		margin-top: 20rpx;
		background-color: #f8f8f8;
	}

	.action-sheet-cancel:active {
		background-color: #e8e8e8;
	}

	.action-sheet-text {
		font-size: 32rpx;
		color: #333;
	}

	.action-sheet-cancel .action-sheet-text {
		color: #666;
	}

	// 表单区域
	.form-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.form-item {
			margin-bottom: 40rpx;

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

			.label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
			}

			.input-container {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;

				.input-field {
					flex: 1;
					font-size: 30rpx;
					color: #333;

					&::placeholder {
						color: #999;
					}

					&:disabled {
						color: #666;
					}
				}

				.edit-icon {
					width: 52rpx;
					height: 52rpx;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					margin-left: 20rpx;
				}
			}
		}
	}

	// 安全开关样式
	.switch-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;

		.switch-desc {
			flex: 1;
			font-size: 28rpx;
			color: #666;
			line-height: 1.4;
		}

		.security-switch {
			margin-left: 20rpx;
		}
	}

	.debug-info {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.debug-text {
			font-size: 24rpx;
			color: #333;
		}

		.debug-btn {
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			background-color: #333;
			color: white;
			border: none;
			border-radius: 4rpx;
		}
	}

	// 删除账户按钮
	.delete-section {
		display: flex;
		justify-content: center;

		.delete-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			border: none;
			border-radius: 16rpx;
			color: #ff4444;
			font-size: 32rpx;
			font-weight: 500;

			&:active {
				background-color: #f8f8f8;
			}
		}
	}

	// PIN容器样式
	.pin-container {
		.pin-switch-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 1rpx solid #eee;
			// padding-bottom: 20rpx;
			// margin-bottom: 20rpx;

			.pin-switch-desc {
				flex: 1;
				font-size: 28rpx;
				color: #666;
				line-height: 1.4;
			}

			.pin-switch {
				margin-left: 20rpx;
			}
		}

		.pin-edit-container {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;

			.pin-display-field {
				flex: 1;
				font-size: 30rpx;
				color: #666;

				&:disabled {
					color: #666;
				}
			}

			.edit-icon {
				width: 52rpx;
				height: 52rpx;
				margin-left: 20rpx;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}
	}

	// PIN修改弹窗样式
	.pin-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;

		.pin-modal-content {
			width: 100%;
			max-width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			animation: modalSlideIn 0.3s ease-out;

			.pin-modal-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 40rpx 20rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.pin-modal-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
				}

				.pin-modal-close {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 48rpx;
					color: #999;
					cursor: pointer;

					&:active {
						background-color: #f5f5f5;
						border-radius: 50%;
					}
				}
			}

			.pin-modal-body {
				padding: 40rpx;

				.pin-verify-tip {
					background-color: #f8f9fa;
					border-radius: 12rpx;
					padding: 24rpx;
					margin-bottom: 32rpx;
					border-left: 4rpx solid #333;

					.pin-verify-tip-text {
						font-size: 28rpx;
						color: #666;
						line-height: 1.5;
					}
				}

				.pin-input-group {
					margin-bottom: 40rpx;

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

					.pin-input-label {
						display: block;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 20rpx;
						font-weight: 500;
					}

					.pin-input {
						width: 100%;
						height: 88rpx;
						padding: 0 24rpx;
						border: 2rpx solid #e0e0e0;
						border-radius: 12rpx;
						font-size: 32rpx;
						color: #333;
						background-color: #fff;
						box-sizing: border-box;

						&:focus {
							border-color: #333;
							outline: none;
						}

						&::placeholder {
							color: #999;
						}
					}
				}
			}

			.pin-modal-footer {
				display: flex;
				padding: 20rpx 40rpx 40rpx;
				gap: 20rpx;

				.pin-btn {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					border: none;
					border-radius: 12rpx;
					font-size: 32rpx;
					font-weight: 500;
					cursor: pointer;
					transition: all 0.2s ease;

					&.pin-btn-cancel {
						background-color: #f5f5f5;
						color: #666;

						&:active {
							background-color: #e8e8e8;
						}
					}

					&.pin-btn-confirm {
						background-color: #333;
						color: #fff;

						&:active {
							background-color: #0056b3;
						}
					}
				}
			}
		}
	}

	@keyframes modalSlideIn {
		from {
			opacity: 0;
			transform: scale(0.9) translateY(-50rpx);
		}

		to {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}
</style>