<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">收款方式</text>
			<text class="page-subtitle">设置您的主收款码和副收款码</text>
		</view>

		<!-- 主收款码 -->
		<view class="payment-section">
			<view class="section-header">
				<text class="section-title">主收款码</text>
				<text class="section-subtitle">优先使用的收款二维码</text>
			</view>
			<view class="qr-upload-container">
				<view class="qr-preview" @tap="uploadMainQr">
					<image v-if="paymentInfo.main_payment_qr_image" 
						   :src="getFullImageUrl(paymentInfo.main_payment_qr_image)" 
						   class="qr-image" 
						   mode="aspectFit">
					</image>
					<view v-else class="qr-placeholder">
						<uni-icons type="camera" size="40" color="#ccc"></uni-icons>
						<text class="placeholder-text">点击上传主收款码</text>
					</view>
				</view>
				<view class="upload-tips">
					<text class="tip-text">建议上传四大行收款码</text>
				</view>
			</view>
		</view>

		<!-- 副收款码 -->
		<view class="payment-section">
			<view class="section-header">
				<text class="section-title">副收款码</text>
				<text class="section-subtitle">备用收款二维码</text>
			</view>
			<view class="qr-upload-container">
				<view class="qr-preview" @tap="uploadSubQr">
					<image v-if="paymentInfo.sub_payment_qr_image" 
						   :src="getFullImageUrl(paymentInfo.sub_payment_qr_image)" 
						   class="qr-image" 
						   mode="aspectFit">
					</image>
					<view v-else class="qr-placeholder">
						<uni-icons type="camera" size="40" color="#ccc"></uni-icons>
						<text class="placeholder-text">点击上传副收款码</text>
					</view>
				</view>
				<view class="upload-tips">
					<text class="tip-text">可选，作为备用收款方式</text>
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-section">
			<button class="save-btn" @tap="savePaymentInfo" :disabled="saving">
				<text v-if="saving">保存中...</text>
				<text v-else>保存收款方式</text>
			</button>
		</view>

		<!-- 使用说明 -->
		<view class="help-section">
			<view class="help-header">
				<uni-icons type="help" size="20" color="#999"></uni-icons>
				<text class="help-title">使用说明</text>
			</view>
			<view class="help-content">
				<text class="help-text">1. 主收款码会优先显示给买家</text>
				<text class="help-text">2. 副收款码作为备用收款方式</text>
				<text class="help-text">3. 建议上传清晰的收款二维码图片</text>
				<text class="help-text">4. 支持所有银行及三方等收款码</text>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				paymentInfo: {
					main_payment_qr_image: '',
					sub_payment_qr_image: '',
					
				},
				saving: false,
				loading: false,
				ismain:false,
				issub:false,
			}
		},
		onLoad() {
			// 检查登录状态
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			this.loadPaymentInfo()
		},
		methods: {
			// 获取完整的图片URL
			getFullImageUrl(url) {
				return request.getImageUrl(url)
			},

			// 加载收款方式信息
			async loadPaymentInfo() {
				this.loading = true
				try {
					const res = await request.get('/back/user/payment/info')
					if (res.success) {
						this.paymentInfo = res.data
						if(this.paymentInfo.main_payment_qr_image){
							this.ismain=true
						}
						if(this.paymentInfo.sub_payment_qr_image){
							this.issub=true
						}
					}
				} catch (error) {
					console.error('加载收款方式失败：', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 上传主收款码
			uploadMainQr() {
				if(this.ismain){
					uni.showToast({
						title:"已上传"
					})
					return
				}
				this.chooseAndUploadImage('main')
			},

			// 上传副收款码
			uploadSubQr() {
				if(this.issub){
					uni.showToast({
						title:"已上传"
					})
					return
				}
				this.chooseAndUploadImage('sub')
			},

			// 选择并上传图片
			chooseAndUploadImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success: async (res) => {
						const filePath = res.tempFilePaths[0]
						await this.uploadImage(filePath, type)
					},
					fail: (err) => {
						console.error('选择图片失败：', err)
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			},

			// 上传图片
			async uploadImage(filePath, type) {
				try {
					uni.showLoading({
						title: '上传中...',
						mask: true
					})

					const token = uni.getStorageSync('token')
					const res = await request.upload('/back/upload', filePath, {
						token: token,
						name: 'file'
					})

					if (res.success) {
						// 更新对应的收款码
						if (type === 'main') {
							this.paymentInfo.main_payment_qr_image = res.data.url
						} else {
							this.paymentInfo.sub_payment_qr_image = res.data.url
						}

						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					} else {
						throw new Error(res.message || '上传失败')
					}
				} catch (error) {
					console.error('上传图片失败：', error)
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 保存收款方式信息
			async savePaymentInfo() {
				if (!this.paymentInfo.main_payment_qr_image && !this.paymentInfo.sub_payment_qr_image) {
					uni.showToast({
						title: '请至少上传一个收款码',
						icon: 'none'
					})
					return
				}

				this.saving = true
				try {
					const res = await request.put('/back/user/payment/info', this.paymentInfo)
					if (res.success) {
						this.paymentInfo = res.data
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						
						this.loadPaymentInfo()
					} else {
						throw new Error(res.message || '保存失败')
					}
				} catch (error) {
					console.error('保存收款方式失败：', error)
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				} finally {
					this.saving = false
				}
			}
		}
	}
</script>

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

	.page-header {
		background: white;
		padding: 40rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

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

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

	.payment-section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-header {
		margin-bottom: 30rpx;
	}

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

	.section-subtitle {
		font-size: 26rpx;
		color: #666;
	}

	.qr-upload-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-preview {
		width: 400rpx;
		height: 400rpx;
		border: 2rpx dashed #ddd;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.qr-image {
		width: 100%;
		height: 100%;
	}

	.qr-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ccc;
	}

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

	.upload-tips {
		text-align: center;
	}

	.tip-text {
		font-size: 24rpx;
		color: #999;
	}

	.save-section {
		margin: 40rpx 0;
	}

	.save-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
		border: none;
		border-radius: 45rpx;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.save-btn:disabled {
		background: #ccc;
	}

	.help-section {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}

	.help-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.help-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-left: 10rpx;
	}

	.help-content {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.help-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
</style>