<template>
	<view class="container">
		<view class="header">
			<view class="nav-bar">
				
				<text class="nav-title">编辑个人信息</text>
				<view class="nav-right" @click="saveProfile">
					<text class="save-btn">保存</text>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 头像上传 -->
			<view class="form-item">
				<text class="label">头像</text>
				<view class="avatar-upload" @click="chooseAvatar">
					<image v-if="userForm.avatar" class="avatar-preview" :src="getFullImageUrl(userForm.avatar)" mode="aspectFill"></image>
					<view v-else class="avatar-placeholder">
						<uni-icons type="camera" size="40" color="#999"></uni-icons>
						
					</view>
				</view>
			</view>

			<!-- 手机号 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input class="input" v-model="userForm.phone" placeholder="请输入手机号" maxlength="11" />
			</view>

			<!-- 客户姓名 -->
			<view class="form-item">
				<text class="label">客户姓名</text>
				<input class="input" v-model="userForm.customer_name" placeholder="请输入客户姓名" />
			</view>

			<!-- 真实姓名 -->
			<view class="form-item">
				<text class="label">真实姓名</text>
				<input class="input" v-model="userForm.real_name" placeholder="请输入真实姓名" />
			</view>

			<!-- 公司名称 -->
			<view class="form-item">
				<text class="label">公司名称</text>
				<input class="input" v-model="userForm.company_name" placeholder="请输入公司名称" />
			</view>

			<!-- 个人介绍 -->
			<view class="form-item">
				<text class="label">个人介绍</text>
				<textarea class="textarea" v-model="userForm.personal_intro" placeholder="请输入个人介绍" maxlength="200"></textarea>
			</view>

			<!-- 修改密码 -->
			<view class="password-section">
				<text class="section-title">修改密码</text>
				
				<view class="form-item">
					<text class="label">当前密码</text>
					<input class="input" v-model="passwordForm.current_password" type="password" placeholder="请输入当前密码" />
				</view>

				<view class="form-item">
					<text class="label">新密码</text>
					<input class="input" v-model="passwordForm.new_password" type="password" placeholder="请输入新密码" />
				</view>

				<view class="form-item">
					<text class="label">确认新密码</text>
					<input class="input" v-model="passwordForm.confirm_password" type="password" placeholder="请再次输入新密码" />
				</view>

				<view class="password-actions">
					<button class="password-btn" @click="changePassword" :disabled="passwordLoading">
						{{ passwordLoading ? '修改中...' : '修改密码' }}
					</button>
				</view>
			</view>

			<!-- 证件照片上传区域 -->
			<!-- <view class="upload-section">
				<text class="section-title">证件照片</text>
				
			
				<view class="upload-item">
					<text class="upload-label">营业执照</text>
					<view class="image-upload" @click="chooseBusinessLicense">
						<image v-if="userForm.business_license" class="upload-preview" :src="getFullImageUrl(userForm.business_license)" mode="aspectFill"></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传营业执照</text>
						</view>
					</view>
				</view>

				<view class="upload-item">
					<text class="upload-label">身份证正面</text>
					<view class="image-upload" @click="chooseIDCardFront">
						<image v-if="userForm.id_card_front" class="upload-preview" :src="getFullImageUrl(userForm.id_card_front)" mode="aspectFill"></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传身份证正面</text>
						</view>
					</view>
				</view>

			
				<view class="upload-item">
					<text class="upload-label">身份证反面</text>
					<view class="image-upload" @click="chooseIDCardBack">
						<image v-if="userForm.id_card_back" class="upload-preview" :src="getFullImageUrl(userForm.id_card_back)" mode="aspectFill"></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传身份证反面</text>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 收款码上传区域 -->
			<!-- <view class="upload-section">
				<text class="section-title">收款二维码</text>
				
				
				<view class="upload-item">
					<text class="upload-label">主收款码</text>
					<view class="image-upload" @click="chooseMainPayment">
						<image v-if="userForm.main_payment_qr_image" class="upload-preview" :src="getFullImageUrl(userForm.main_payment_qr_image)" mode="aspectFill"></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传主收款码</text>
						</view>
					</view>
				</view>

				 
				<view class="upload-item">
					<text class="upload-label">副收款码</text>
					<view class="image-upload" @click="chooseSubPayment">
						<image v-if="userForm.sub_payment_qr_image" class="upload-preview" :src="getFullImageUrl(userForm.sub_payment_qr_image)" mode="aspectFill"></image>
						<view v-else class="upload-placeholder">
							<uni-icons type="camera" size="30" color="#999"></uni-icons>
							<text class="upload-text">上传副收款码</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				userForm: {
					phone: '',
					customer_name: '',
					real_name: '',
					avatar: '',
					company_name: '',
					personal_intro: '',
					business_license: '',
					id_card_front: '',
					id_card_back: '',
					main_payment_qr_image: '',
					sub_payment_qr_image: ''
				},
				passwordForm: {
					current_password: '',
					new_password: '',
					confirm_password: ''
				},
				loading: false,
				passwordLoading: false
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		methods: {
			// 获取完整的图片URL
			getFullImageUrl(url) {
				return request.getImageUrl(url)
			},

			// 加载用户信息
			async loadUserInfo() {
				try {
					const res = await request.get('/back/current-user')
					if (res.success) {
						const user = res.data
						this.userForm = {
							phone: user.phone || '',
							customer_name: user.customer_name || '',
							real_name: user.real_name || '',
							avatar: user.avatar || '',
							company_name: user.company_name || '',
							personal_intro: user.personal_intro || '',
							business_license: user.business_license_image || '',
							id_card_front: user.id_card_front_image || '',
							id_card_back: user.id_card_back_image || '',
							main_payment_qr_image: user.main_payment_qr_image || '',
							sub_payment_qr_image: user.sub_payment_qr_image || ''
						}
					}
				} catch (error) {
					console.error('获取用户信息失败：', error)
					uni.showToast({
						title: '加载用户信息失败',
						icon: 'none'
					})
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 保存个人信息
			async saveProfile() {
				// 表单验证
				if (!this.userForm.customer_name) {
					uni.showToast({
						title: '请输入客户姓名',
						icon: 'none'
					})
					return
				}

				if (!this.userForm.real_name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})
					return
				}

				if (!this.userForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}

				// 手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/
				if (!phoneRegex.test(this.userForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				this.loading = true
				try {
					const updateData = {
						phone: this.userForm.phone,
						customer_name: this.userForm.customer_name,
						real_name: this.userForm.real_name,
						avatar: this.userForm.avatar,
						company_name: this.userForm.company_name,
						personal_intro: this.userForm.personal_intro,
						business_license: this.userForm.business_license,
						id_card_front: this.userForm.id_card_front,
						id_card_back: this.userForm.id_card_back,
						main_payment_code: this.userForm.main_payment_qr_image,
						backup_payment_code: this.userForm.sub_payment_qr_image
					}

					const res = await request.put('/back/update-profile', updateData)
					if (res.success) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						
						// 更新本地存储中的用户信息
						uni.setStorageSync('userInfo', res.data)
						
						// 延迟返回，让用户看到成功提示
						setTimeout(() => {
							uni.switchTab({
								url:"/pages/profile/profile"
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.message || '保存失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('保存个人信息失败：', error)
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 上传图片的通用方法
			async uploadImage(tempFilePath) {
				try {
					const uploadRes = await request.upload('/back/upload', tempFilePath)
					if (uploadRes.success) {
						return uploadRes.data.url
					} else {
						throw new Error(uploadRes.message || '上传失败')
					}
				} catch (error) {
					console.error('上传图片失败：', error)
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
					return null
				}
			},

			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.avatar = url
						}
					}
				})
			},

			// 选择营业执照
			chooseBusinessLicense() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.business_license = url
						}
					}
				})
			},

			// 选择身份证正面
			chooseIDCardFront() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.id_card_front = url
						}
					}
				})
			},

			// 选择身份证反面
			chooseIDCardBack() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.id_card_back = url
						}
					}
				})
			},

			// 选择主收款码
			chooseMainPayment() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.main_payment_qr_image = url
						}
					}
				})
			},

			// 选择副收款码
			chooseSubPayment() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						const url = await this.uploadImage(tempFilePath)
						if (url) {
							this.userForm.sub_payment_qr_image = url
						}
					}
				})
			},

			// 修改密码
			async changePassword() {
				// 表单验证
				if (!this.passwordForm.current_password) {
					uni.showToast({
						title: '请输入当前密码',
						icon: 'none'
					})
					return
				}

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

				if (this.passwordForm.new_password.length < 6) {
					uni.showToast({
						title: '新密码至少6位',
						icon: 'none'
					})
					return
				}

				if (this.passwordForm.new_password !== this.passwordForm.confirm_password) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return
				}

				if (this.passwordForm.current_password === this.passwordForm.new_password) {
					uni.showToast({
						title: '新密码不能与当前密码相同',
						icon: 'none'
					})
					return
				}

				this.passwordLoading = true
				try {
					const passwordData = {
						current_password: this.passwordForm.current_password,
						new_password: this.passwordForm.new_password
					}

					const res = await request.put('/back/change-password', passwordData)
					if (res.success) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						})
						
						// 清空密码表单
						this.passwordForm = {
							current_password: '',
							new_password: '',
							confirm_password: ''
						}
					} else {
						uni.showToast({
							title: res.message || '密码修改失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('修改密码失败：', error)
					uni.showToast({
						title: '密码修改失败',
						icon: 'none'
					})
				} finally {
					this.passwordLoading = false
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 100;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.nav-left {
		width: 80rpx;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
		text-align: right;
	}

	.save-btn {
		color: #FF4444;
		font-size: 32rpx;
	}

	.content {
		padding: 0 30rpx;
	}

	.form-item {
		background-color: #fff;
		margin: 20rpx 0;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
	}

	.label {
		font-size: 32rpx;
		color: #333;
		width: 200rpx;
		flex-shrink: 0;
	}

	.input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		padding: 0 20rpx;
	}

	.textarea {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		padding: 20rpx;
		min-height: 120rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
	}

	.avatar-upload {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.avatar-preview {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.avatar-placeholder {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 2rpx dashed #ddd;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.placeholder-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.upload-section {
		background-color: #fff;
		margin: 40rpx 0;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}

	.upload-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.upload-item:last-child {
		margin-bottom: 0;
	}

	.upload-label {
		font-size: 32rpx;
		color: #333;
		width: 200rpx;
		flex-shrink: 0;
	}

	.image-upload {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}

	.upload-preview {
		width: 200rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}

	.upload-placeholder {
		width: 200rpx;
		height: 150rpx;
		border: 2rpx dashed #ddd;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.password-section {
		background-color: #fff;
		margin: 40rpx 0;
		padding: 30rpx;
		border-radius: 16rpx;
	}

	.password-actions {
		margin-top: 30rpx;
		text-align: center;
	}

	.password-btn {
		background-color: #FF4444;
		color: white;
		border: none;
		
		border-radius: 50rpx;
		font-size: 32rpx;
		min-width: 200rpx;
	}

	.password-btn:disabled {
		background-color: #ccc;
		color: #999;
	}
</style>