<template>
	<view class="pages">
		<u-navbar title="订单投诉" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" height='44'></u-navbar>
        <image class="topbj" src="https://api.ccttiot.com/smartmeter/img/static/uxpj08dsLpZAnuQXy3md" mode=""></image>
		<view hover-class="app-tap-hover" class="tslb"  @click="btnts">
			投诉列表 〉
		</view>
		<!-- 投诉类型选择 -->
		<view class="complaint-section">
			<view class="section-title">
				选择投诉类型 <text class="required">✲</text>
			</view>
			<view class="complaint-tags">
				<view hover-class="app-tap-hover" 
					class="tag-item" 
					:class="{ active: selectedType === item.name }"
					v-for="item in complaintTypes" 
					:key="item.id"
					@click="selectComplaintType(item.name)"
				>
					{{ item.name }}
					<view class="check-icon" v-if="selectedType === item.name">✓</view>
				</view>
			</view>
		</view>
    
		<!-- 问题描述 -->
		<view class="problem-section">
			<view class="section-title">
				问题描述 <text class="required">✲</text>
			</view>
			<view class="input-container">
				<textarea 
					class="custom-textarea" 
					v-model="textValue" 
					placeholder="输入问题描述"
					:maxlength="500"
					@input="updateWordCount"
				></textarea>
				<text class="word-count">{{ currentCount }}/500</text>
			</view>
			
			<!-- 图片上传 -->
			<view class="upload-section">
				<view class="upload-grid">
					<view 
						class="upload-item" 
						v-for="(item, index) in imglist" 
						:key="index"
					>
						<image :src="item" mode="aspectFill" class="uploaded-img"></image>
						<view hover-class="app-tap-hover" class="delete-btn" @click="deleteImage(index)">×</view>
					</view>
					<view hover-class="app-tap-hover" 
						class="upload-btn" 
						v-if="imglist.length < 4"
						@click="chooseImage"
					>
					<image class="sc" src="https://api.ccttiot.com/smartmeter/img/static/udgL6KzisrZlMrk9AZb2" mode=""></image>
					</view>
				</view>
				<view class="upload-tip">最多上传4张,上传问题截图可以让问题快速解决哦!</view>
			</view>
		</view>

		<!-- 订单选择 -->
		<view class="order-section">
			<view class="section-title">选择要投诉的订单</view>
			<view hover-class="app-tap-hover" class="order-selector" @click="selectOrder">
				<view class="order-info-display" v-if="selectedOrder">
					<text class="order-no-display">{{ getOrderNo(selectedOrder) }}</text>
					<!-- <text class="order-amount-display">{{ getOrderAmount(selectedOrder) }}元</text> -->
				</view>
				<text class="order-text" v-else>请选择订单</text>
				<text class="arrow">〉</text>
			</view>
		</view>
		<!-- 退款选择 -->
		<view class="refund-section">
			<view class="refund-row">
				<view class="section-title">选择退款</view>
				<view class="radio-group">
					<view hover-class="app-tap-hover" 
						class="radio-item" 
						:class="{ active: refundChoice === 'yes' }"
						@click="refundChoice = 'yes'"
					>
						<view class="radio-circle">
							<view class="radio-dot" v-if="refundChoice === 'yes'"></view>
						</view>
						<text>是</text>
					</view>
					<view hover-class="app-tap-hover" 
						class="radio-item" 
						:class="{ active: refundChoice === 'no' }"
						@click="refundChoice = 'no'"
					>
						<view class="radio-circle">
							<view class="radio-dot" v-if="refundChoice === 'no'"></view>
						</view>
						<text>否</text>
					</view>
				</view>
			</view>
			
			<!-- 退款金额输入 -->
			<view class="refund-row" v-if="refundChoice === 'yes'">
				<view class="section-title">退款金额</view>
				<view class="refund-input-container">
					<input 
						type="text" 
						v-model="refundAmount" 
						placeholder="请输入数值"
						class="refund-input"
					/>
					<text class="currency-unit">元</text>
				</view>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-title">联系方式</view>
			<input 
				type="text" 
				v-model="contact" 
				placeholder="请输入手机号以便我们回复您"
				class="contact-input"
			/>
		</view>

		<!-- 提交按钮 -->
		<view hover-class="app-tap-hover" class="submit-btn" @click="sub()">确定提交</view>
		
		<!-- 订单选择弹窗 -->
		<view hover-class="app-tap-hover" class="order-modal" v-if="showOrderModal" @click="closeOrderModal">
			<view hover-class="app-tap-hover" class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">选择订单</text>
					<text hover-class="app-tap-hover" class="close-btn" @click="closeOrderModal">×</text>
				</view>
				<view class="order-list" @scroll="onOrderListScroll">
					<view hover-class="app-tap-hover" 
						class="order-item" 
						:class="{ selected: tempSelectedOrder && tempSelectedOrder.billId === order.billId }"
						v-for="order in orderList" 
						:key="order.billId"
						@click="selectOrderItem(order)"
					>
						<view class="order-info">
							<text class="order-no">订单号：{{ getOrderNo(order) }}</text>
							<!-- <text class="order-amount">金额：{{ getOrderAmount(order) }}元</text> -->
							<text class="order-time">{{ order.createTime }}</text>
						</view>
						<!-- <view class="order-status" :class="order.statusClass">
							{{ order.statusText }}
						</view> -->
					</view>
					
					<!-- 加载更多提示 -->
					<view class="load-more" v-if="orderList.length > 0">
						<view v-if="loading" class="loading-text">
							<text>加载中...</text>
						</view>
						<view v-else-if="!hasMore" class="no-more-text">
							<text>没有更多订单了</text>
						</view>
						<view hover-class="app-tap-hover" v-else class="load-more-btn" @click="loadMoreOrders">
							<text>点击加载更多</text>
						</view>
					</view>
					
					<!-- 空状态 -->
					<view class="empty-state" v-if="orderList.length === 0 && !loading">
						<text>暂无订单数据</text>
					</view>
				</view>
				<view class="modal-footer">
					<view hover-class="app-tap-hover" class="cancel-btn" @click="closeOrderModal">取消</view>
					<view hover-class="app-tap-hover" class="confirm-btn" @click="confirmOrderSelection">确定</view>
				</view>
			</view>
		</view>
		<qiniu-upload-progress />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " ",
				},
				textValue: '',
				currentCount: 0,
				imglist: [],
				contact: '',
				selectedType: '', // 选中的投诉类型（单选，存储文字）
				complaintTypes: [
					{ id: 1, name: '订单金额不对' },
					{ id: 2, name: '订单结束不了' },
					{ id: 3, name: '订单异常结束' }
				],
				selectedOrder: null,
				refundChoice: 'no', // yes 或 no
				refundAmount: '', // 退款金额
				orderobj: {},
				showOrderModal: false, // 是否显示订单选择弹窗
				orderList: [], // 订单列表
				tempSelectedOrder: null, // 临时选中的订单
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页显示数量
				totalPages: 1, // 总页数
				loading: false, // 是否正在加载
				hasMore: true, // 是否还有更多数据
				searchKeyword: '', // 搜索关键词
				searchTimer: null ,// 搜索防抖定时器
				token:'',
				flag:true
			}
		},
		onLoad(option) {
			if (option.obj) {
				console.log('传入的订单数据:', JSON.parse(option.obj));
				this.selectedOrder = JSON.parse(option.obj)
			}
			this.getqiniuyun()
		},
		methods: {
			// 获取订单号（兼容多种字段名）
			getOrderNo(order) {
				// 优先使用原始的 no 字段，如果没有再使用其他字段
				return order.no || order.billNo || order.orderNo || order.orderNumber || order.id || '未知订单号'
			},
			// 获取订单金额（兼容多种字段名）
			getOrderAmount(order) {
				return order.amount || order.money || order.totalAmount || '0.00'
			},
			// 获取订单ID（兼容多种字段名）
			getOrderId(order) {
				return order.billId || order.id || order.orderId || this.orderobj.billId || ''
			},
			// 点击跳转到投诉列表
			btnts(){
				uni.navigateTo({
					url:'/page_fenbao/tousu/yhlist'
				})
			},
			// 获取七牛云上传token
			getqiniuyun(){
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},
			// 选择投诉类型（单选）
			selectComplaintType(name) {
				this.selectedType = name
			},
			
			// 更新字数统计
			updateWordCount() {
				this.currentCount = this.textValue.length
			},
			
			// 选择图片
			chooseImage() {
				const math = 'static/' + this.$u.guid(20)
				uni.chooseImage({
					count: 4 - this.imglist.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const filePath = res.tempFilePaths[0]
						if (!this.token) {
							this.token = await this.$fetchQiniuToken()
						}
						if (!this.token) {
							uni.showToast({ title: '上传失败', icon: 'none' })
							return
						}
						try {
							const url = await this.$uploadQiniuFile({
								filePath,
								token: this.token,
								key: 'smartmeter/img/' + math,
								title: '上传投诉截图'
							})
							this.imglist.push(url)
						} catch (e) {
							uni.showToast({ title: '上传失败', icon: 'none' })
						}
					}
				})
			},
			
			// 删除图片
			deleteImage(index) {
				this.imglist.splice(index, 1)
			},
			
			// 选择订单
			selectOrder() {
				this.loadOrderList()
				this.showOrderModal = true
			},
			
			// 加载订单列表
			loadOrderList() {
				this.loading = true
				this.currentPage = 1
				
				// 调用真实API获取订单列表
				this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}).then((res) => {
					if (res.code == 200) {
						// 调试API返回的原始数据
						console.log('API返回数据:', res)
						
						// 处理订单数据
						this.orderList = this.formatOrderData(res.rows || [])
						this.totalPages = Math.ceil((res.total || 0) / this.pageSize)
						this.hasMore = this.currentPage < this.totalPages
						
						// 调试信息
						console.log('订单数据:', {
							总订单数: res.total,
							当前页: this.currentPage,
							每页数量: this.pageSize,
							总页数: this.totalPages,
							是否有更多: this.hasMore,
							当前订单数: this.orderList.length
						})
					} else {
						uni.showToast({
							title: res.msg || '获取订单失败',
							icon: 'none'
						})
					}
					this.loading = false
				}).catch((err) => {
					console.error('获取订单失败:', err)
					uni.showToast({
						title: '获取订单失败',
						icon: 'none'
					})
					this.loading = false
				})
			},
			
			// 加载更多订单
			loadMoreOrders() {
				if (this.loading || !this.hasMore) return
				
				this.loading = true
				this.currentPage++
				
				// 调用真实API获取更多订单
				this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
					pageNum: this.currentPage,
					pageSize: this.pageSize
				}).then((res) => {
					if (res.code == 200) {
						// 处理订单数据并追加到现有列表 
						const newOrders = this.formatOrderData(res.rows || [])
						this.orderList = [...this.orderList, ...newOrders]
						// 更新总页数（以防后端返回的数据有变化）
						this.totalPages = Math.ceil((res.total || 0) / this.pageSize)
						this.hasMore = this.currentPage < this.totalPages
						
						// 调试信息
						console.log('加载更多订单:', {
							总订单数: res.total,
							当前页: this.currentPage,
							每页数量: this.pageSize,
							总页数: this.totalPages,
							是否有更多: this.hasMore,
							新增订单数: newOrders.length,
							总订单数: this.orderList.length
						})
					} else {
						uni.showToast({
							title: res.msg || '获取更多订单失败',
							icon: 'none'
						})
					}
					this.loading = false
				}).catch((err) => {
					console.error('获取更多订单失败:', err)
					uni.showToast({
						title: '获取更多订单失败',
						icon: 'none'
					})
					this.loading = false
				})
			},
			
			// 格式化订单数据
			formatOrderData(orderList) {
				return orderList.map((order, index) => {
					const derived = this.computeStatus(order)
					return {
						billId: order.billId || order.id || (this.currentPage * this.pageSize + index),
						billNo: order.billNo || order.orderNo || order.orderNumber || order.no || `订单${order.id || index + 1}`,
						amount: order.amount || order.money || order.totalAmount || '0.00',
						createTime: order.createTime || order.createDate || order.orderTime || new Date().toLocaleString('zh-CN'),
						statusClass: derived.status,
						statusText: derived.statusText,
						// 保留原始字段，用于显示
						no: order.no,
						orderNo: order.orderNo,
						orderNumber: order.orderNumber
					}
				})
			},
			
			// 根据后端状态与是否完成计算前端展示状态
			computeStatus(order) {
				const status = String(order.status ?? order.orderStatus ?? '')
				const isFinished = !!(order.isFinished)
				// 规则：
				// 2 + !isFinished => 已支付
				// 2 + isFinished => 已完成
				// 1 => 未支付
				// 3 => 已退款
				// 4 => 已取消(用户)
				// 5 => 已取消(系统)
				// 6 => 支付中
				// 7 => 退款中
				if (status === '2') {
					return isFinished ? { statusClass: 'completed', statusText: '已完成' } : { statusClass: 'paid', statusText: '已支付' }
				}
				const map = {
					'1': { statusClass: 'unpaid', statusText: '未支付' },
					'3': { statusClass: 'refunded', statusText: '已退款' },
					'4': { statusClass: 'cancelled-user', statusText: '已取消(用户)' },
					'5': { statusClass: 'cancelled-system', statusText: '已取消(系统)' },
					'6': { statusClass: 'paying', statusText: '支付中' },
					'7': { statusClass: 'refunding', statusText: '退款中' }
				}
				return map[status] || { statusClass: 'processing', statusText: '处理中' }
			},
			
			// 选择订单项
			selectOrderItem(order) {
				this.tempSelectedOrder = order
			},
			
			// 确认订单选择
			confirmOrderSelection() {
				if (this.tempSelectedOrder) {
					this.selectedOrder = this.tempSelectedOrder
					console.log(this.selectedOrder);
					this.closeOrderModal()
					uni.showToast({
						title: '订单选择成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '请选择订单',
						icon: 'none'
					})
				}
			},
			
			// 关闭订单选择弹窗
			closeOrderModal() {
				this.showOrderModal = false
				this.tempSelectedOrder = null
				// 重置分页状态
				this.currentPage = 1
				this.orderList = []
				this.hasMore = true
				this.loading = false
				// 重置搜索状态
				this.searchKeyword = ''
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
					this.searchTimer = null
				}
			},
			
			// 获取订单状态文本
			getStatusText(status) {
				const statusMap = {
					'completed': '已完成',
					'processing': '处理中',
					'cancelled': '已取消'
				}
				return statusMap[status] || '未知状态'
			},
			
			// 订单列表滚动事件
			onOrderListScroll(e) {
				const { scrollTop, scrollHeight, clientHeight } = e.target
				// 当滚动到底部时自动加载更多
				if (scrollHeight - scrollTop - clientHeight < 50 && this.hasMore && !this.loading) {
					this.loadMoreOrders()
				}
			},
			
			// 搜索输入事件
			onSearchInput() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				// 设置防抖定时器
				this.searchTimer = setTimeout(() => {
					this.searchOrders()
				}, 500)
			},
			
			// 搜索订单
			searchOrders() {
				if (!this.searchKeyword.trim()) {
					// 如果搜索框为空，重新加载所有订单
					this.loadOrderList()
					return
				}
				
				this.loading = true
				this.currentPage = 1
				
				// 调用搜索API（如果您的API支持搜索参数）
				// 如果API不支持搜索，可以在前端过滤
				this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
					keyword: this.searchKeyword.trim() // 如果API支持搜索参数
				}).then((res) => {
					if (res.code == 200) {
						let orderList = this.formatOrderData(res.rows || [])
						
						// 如果API不支持搜索参数，在前端过滤
						if (!res.rows || res.rows.length === 0) {
							// 重新获取所有订单并在前端过滤
							this.$u.get("/app/order/mineList?pageNum=1&pageSize=10&suitType=1&status=&isAsc=desc&orderByColumn=createTime", {
								pageNum: 1,
								pageSize: 100 // 获取更多数据进行搜索
							}).then((allRes) => {
								if (allRes.code == 200) {
									const allOrders = this.formatOrderData(allRes.rows || [])
									orderList = allOrders.filter(order => 
										(order.billNo || order.orderNo || order.orderNumber || '').toLowerCase().includes(this.searchKeyword.toLowerCase())
									)
									this.orderList = orderList
									this.hasMore = false // 搜索时不分页
								}
								this.loading = false
							})
						} else {
							this.orderList = orderList
							this.hasMore = orderList.length === this.pageSize
							this.loading = false
						}
					} else {
						uni.showToast({
							title: res.msg || '搜索失败',
							icon: 'none'
						})
						this.loading = false
					}
				}).catch((err) => {
					console.error('搜索失败:', err)
					uni.showToast({
						title: '搜索失败',
						icon: 'none'
					})
					this.loading = false
				})
			},
			
			// 提交
			sub() {
				if (!this.selectedType || this.selectedType.trim() === '') {
					uni.showToast({
						title: '请选择投诉类型',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.selectedOrder) {
					uni.showToast({
						title: '请选择要投诉的订单',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				if (this.textValue.trim() === '') {
					uni.showToast({
						title: '请输入问题描述',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				if (this.contact.trim() === '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				// 验证退款金额
				if (this.refundChoice === 'yes' && (!this.refundAmount || this.refundAmount.trim() === '')) {
					uni.showToast({
						title: '请输入退款金额',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if(this.flag == true){
					this.flag = false
					let img = this.imglist.join(',')
					// 构建提交数据
					let data = {
						title: this.selectedType,
						content: this.textValue,
						contact: this.contact,
						needRefund: this.refundChoice == 'yes' ? true : false,
						needRefundAmount: this.refundChoice == 'yes' ? this.refundAmount : '',
						picture: img,
						orderId: this.getOrderId(this.selectedOrder)
					}
					// 提交请求
					this.$u.post("/app/complaint/add", data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								this.flag = true
								uni.navigateBack()
							}, 1500)
						} else {
							this.flag = true
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.topbj {
		width: 750rpx;
		height: 484rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		filter: hue-rotate(430deg);
	}
	.tslb{
		width: 100%;
		margin-top: 210rpx;
		text-align: right;
		color: #fff;
		font-size: 32rpx;
	}
	page {
		background: #F5F5F5;
	}
	
	.pages {
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-bottom: 300rpx;
		box-sizing: border-box;
	}
	
	// 通用样式
	.section-title {
		font-weight: 600;
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
		margin-bottom: 20rpx;
		
		.required {
			font-size: 32rpx;
			color: red;
			vertical-align: top;
			margin-left: 8rpx;
		}
	}
	
	// 投诉类型选择
	.complaint-section {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		margin-top: 20rpx;
		.complaint-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			
			.tag-item {
				position: relative;
				padding: 12rpx 20rpx;
				border: 1rpx solid #E0E0E0;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #666;
				transition: all 0.2s;
				background: #FAFAFA;
				cursor: pointer;
				
				&:hover {
					border-color: #4C97E7;
					background: #F8F8F8;
				}
				
				&.active {
					border-color: #4C97E7;
					color: #4C97E7;
					background: #F0F8F0;
					box-shadow: 0 2rpx 8rpx rgba(72, 137, 59, 0.2);
				}
				
				.check-icon {
					position: absolute;
					bottom: -1rpx;
					right: -1rpx;
					width: 24rpx;
					height: 24rpx;
					background: #4C97E7;
					color: white;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16rpx;
					font-weight: bold;
				}
			}
		}
	}
	
	// 问题描述
	.problem-section {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		
		.input-container {
			position: relative;
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			border: 1rpx solid #E0E0E0;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			
			.custom-textarea {
				width: 100%;
				height: 100%;
				padding: 16rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				line-height: 1.5;
				color: #333;
			}
			
			.word-count {
				position: absolute;
				right: 16rpx;
				bottom: 16rpx;
				font-size: 22rpx;
				color: #999;
			}
		}
		
		.upload-section {
			.upload-grid {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				margin-bottom: 12rpx;
				.sc{
					width: 142rpx;
					height: 142rpx;
				}
				.upload-item {
					position: relative;
					width: 144rpx;
					height: 144rpx;
					
					.uploaded-img {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
					
					.delete-btn {
						position: absolute;
						top: -6rpx;
						right: -6rpx;
						width: 28rpx;
						height: 28rpx;
						background: rgba(0,0,0,0.6);
						color: white;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 18rpx;
						font-weight: bold;
					}
				}
				
				.upload-btn {
					// width: 120rpx;
					// height: 120rpx;
					// border: 2rpx dashed #D0D0D0;
					// border-radius: 8rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// background: #FAFAFA;
					
					.upload-icon {
						font-size: 40rpx;
						color: #999;
					}
				}
			}
			
			.upload-tip {
				font-size: 22rpx;
				color: #999;
				line-height: 1.4;
			}
		}
	}
	
	// 订单选择
	.order-section {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		
		.order-selector {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #F0F0F0;
			
			.order-text {
				font-size: 26rpx;
				color: #333;
			}
			
			.order-info-display {
				display: flex;
				flex-direction: column;
				gap: 4rpx;
				
				.order-no-display {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}
				
				.order-amount-display {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.arrow {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	
	// 退款选择
	.refund-section {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		
		.refund-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #F0F0F0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.section-title {
				margin-bottom: 0;
				font-size: 28rpx;
				color: #666;
			}
		}
		
		.radio-group {
			display: flex;
			gap: 60rpx;
			
			.radio-item {
				display: flex;
				align-items: center;
				gap: 12rpx;
				
				.radio-circle {
					width: 32rpx;
					height: 32rpx;
					border: 2rpx solid #E0E0E0;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FFFFFF;
					
					.radio-dot {
						width: 18rpx;
						height: 18rpx;
						background: #4C97E7;
						border-radius: 50%;
					}
				}
				
				text {
					font-size: 26rpx;
					color: #333;
				}
				
				&.active .radio-circle {
					border-color: #4C97E7;
				}
			}
		}
		
		.refund-input-container {
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.refund-input {
				width: 200rpx;
				height: 60rpx;
				background: #FFFFFF;
				border: 1rpx solid #E0E0E0;
				border-radius: 8rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #333;
				text-align: center;
			}
			
			.currency-unit {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
	
	// 联系方式
	.contact-section {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		
		.contact-input {
			width: 100%;
			height: 68rpx;
			background: #FFFFFF;
			border: 1rpx solid #E0E0E0;
			border-radius: 12rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #333;
		}
	}
	
	// 提交按钮
	.submit-btn {
		width: 600rpx;
		height: 88rpx;
		background: #4C97E7;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		border-radius: 44rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 60rpx;
		box-shadow: 0 4rpx 16rpx rgba(72, 137, 59, 0.3);
		z-index: 999;
	}
	
	// 订单选择弹窗
	.order-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.modal-content {
			width: 90%;
			max-height: 80%;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;
			
			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx;
				border-bottom: 1rpx solid #F0F0F0;
				
				.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}
				
				.close-btn {
					font-size: 40rpx;
					color: #999;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background: #F5F5F5;
				}
			}
			
			.search-section {
				padding: 24rpx 32rpx;
				border-bottom: 1rpx solid #F0F0F0;
				
				.search-input-container {
					position: relative;
					
					.search-input {
						width: 100%;
						height: 72rpx;
						background: #F8F8F8;
						border: 1rpx solid #E0E0E0;
						border-radius: 36rpx;
						padding: 0 60rpx 0 24rpx;
						box-sizing: border-box;
						font-size: 26rpx;
						color: #333;
					}
					
					.search-icon {
						position: absolute;
						right: 24rpx;
						top: 50%;
						transform: translateY(-50%);
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			
			.order-list {
				max-height: 600rpx;
				overflow-y: auto;
				
				.load-more {
					padding: 32rpx 0;
					text-align: center;
					
					.loading-text {
						color: #999;
						font-size: 26rpx;
					}
					
					.no-more-text {
						color: #999;
						font-size: 26rpx;
					}
					
					.load-more-btn {
						display: inline-block;
						padding: 16rpx 32rpx;
						background: #F5F5F5;
						color: #666;
						border-radius: 20rpx;
						font-size: 26rpx;
						
						&:active {
							background: #E0E0E0;
						}
					}
				}
				
				.empty-state {
					padding: 80rpx 0;
					text-align: center;
					color: #999;
					font-size: 28rpx;
				}
				
				.order-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx;
					border-bottom: 1rpx solid #F0F0F0;
					cursor: pointer;
					transition: background-color 0.2s;
					
					&:hover {
						background: #F8F8F8;
					}
					
					&.selected {
						background: #F0F8F0;
					}
					
					&:last-child {
						border-bottom: none;
					}
					
					.order-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 8rpx;
						
						.order-no {
							font-size: 28rpx;
							color: #333;
							font-weight: 500;
						}
						
						.order-amount {
							font-size: 26rpx;
							color: #666;
						}
						
						.order-time {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					.order-status {
						padding: 8rpx 16rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						
						&.completed {
							background: #E8F5E8;
							color: #4C97E7;
						}
						
						&.paid {
							background: #E6F4FF;
							color: #1E88E5;
						}
						
						&.unpaid {
							background: #FFF3E0;
							color: #FB8C00;
						}
						
						&.refunded {
							background: #E3F2FD;
							color: #1976D2;
						}
						
						&.cancelled-user {
							background: #FCE4EC;
							color: #C2185B;
						}
						
						&.cancelled-system {
							background: #F3E5F5;
							color: #7B1FA2;
						}
						
						&.paying {
							background: #E0F2F1;
							color: #00796B;
						}
						
						&.refunding {
							background: #FFFDE7;
							color: #FBC02D;
						}
						
						&.processing {
							background: #FFF3E0;
							color: #FF9800;
						}
					}
				}
			}
			
			.modal-footer {
				display: flex;
				padding: 32rpx;
				gap: 20rpx;
				border-top: 1rpx solid #F0F0F0;
				
				.cancel-btn, .confirm-btn {
					flex: 1;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
				}
				
				.cancel-btn {
					background: #F5F5F5;
					color: #666;
				}
				
				.confirm-btn {
					background: #4C97E7;
					color: #FFFFFF;
				}
			}
		}
	}
</style>