<template>
	<view class="container">
		<!-- 详情卡片 -->
		<view class="detail-card">
			<view class="card-header">开单详情</view>
			<view class="detail-content">
				<!-- 加载状态 -->
				<view v-if="loading" class="loading">正在加载详情...</view>
				
				<!-- 错误状态 -->
				<view v-else-if="error" class="error-state">
					<view>{{ error }}</view>
					<u-button class="retry-btn" @click="retryLoad" type="primary" size="small">重试</u-button>
				</view>
				
				<!-- 详情内容 -->
				<view v-else-if="lxData" class="info-sections">
					<!-- 基本信息 -->
					<view class="info-section">
						<view class="section-title">基本信息</view>
						<view class="info-grid">
							<view class="info-item" v-if="lxData.activityName">
								<text class="info-label">开单活动</text>
								<text class="info-value">{{ lxData.activityName}}</text>
							</view>
							<view class="info-item">
								<text class="info-label">开单会员</text>
								<text class="info-value">{{ lxData.kdhyc || lxData.kdhy || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">客户类型</text>
								<text class="info-value">{{ lxData.gjlx || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">手机号</text>
								<text class="info-value">{{ lxData.kdhysjh || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">开单时间</text>
								<text class="info-value">{{ formatTime(lxData.kdrq) }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">是否首开订单</text>
								<view class="status-badge" :class="lxData.sfskdd === '是' ? 'yes' : 'no'">
									{{ lxData.sfskdd || '无' }}
								</view>
							</view>
							<view class="info-item">
								<text class="info-label">是否作废</text>
								<view class="status-badge" :class="lxData.isEffective == '1' ? 'yes' : 'no'">
									{{ lxData.isEffective == '1'?'正常':'作废' }}
								</view>
							</view>
							<view class="info-item" v-if="lxData.appointmentId">
								<text class="info-label">关联预约号</text>
								<text class="info-value" style="color: #43a047;" @click.stop="goToAppointment(lxData.appointmentId)">{{ lxData.appointmentId || '无' }}</text>
							</view>
						</view>
					</view>
					
					<!-- 业绩信息 -->
					<view class="info-section">
						<view class="section-title">业绩信息</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">整单业绩</text>
								<text class="info-value amount">¥{{ lxData.zdyj || 0 }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">实付业绩</text>
								<text class="info-value amount">¥{{ lxData.sfyj || 0 }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">欠款</text>
								<text class="info-value" :class="qkcomputed(lxData) > 0 ? 'debt' : 'normal'">
									¥{{qkcomputed(lxData)}}
								</text>
							</view>
							<view class="info-item">
								<text class="info-label">付款方式</text>
								<text class="info-value">{{ lxData.fkfs || '无' }}</text>
							</view>
							<view class="info-item" v-if="lxData.hgjg">
								<text class="info-label">合作机构</text>
								<text class="info-value">{{ lxData.hgjg || '无' }}</text>
							</view>
							<view class="info-item" v-if="lxData.fkyy">
								<text class="info-label">结算机构</text>
								<text class="info-value">{{ lxData.fkyy || '无' }}</text>
							</view>
						</view>
					</view>
					
					<!-- 储扣信息 -->
					<view class="info-section" v-if="lxData.lqKdDeductList && lxData.lqKdDeductList.length > 0">
						<view class="section-title">储扣信息</view>
						<view class="deduct-list">
							<view v-for="(deduct, index) in lxData.lqKdDeductList" :key="index" class="deduct-item">
								<view class="deduct-header">
									<text class="deduct-name">{{ deduct.itemName || '未知品项' }}</text>
									<text class="deduct-type">{{ deduct.deductType || '品项' }}</text>
								</view>
								<view class="deduct-details">
									<view class="deduct-detail-item">
										<text class="deduct-label">数量:</text>
										<text class="deduct-value">{{ deduct.projectNumber || 1 }}</text>
									</view>
									<view class="deduct-detail-item">
										<text class="deduct-label">单价:</text>
										<text class="deduct-value">¥{{ deduct.unitPrice || 0 }}</text>
									</view>
									<view class="deduct-detail-item">
										<text class="deduct-label">总价:</text>
										<text class="deduct-value amount">¥{{ deduct.amount || 0 }}</text>
									</view>
								</view>
								<view class="deduct-info" v-if="deduct.RemainingCount">
									<view class="deduct-info-item">
										<text class="deduct-info-label">剩余数量:</text>
										<text class="deduct-info-value">{{ deduct.RemainingCount }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 品项明细 -->
					<view class="info-section" v-if="lxData.lqKdPxmxList && lxData.lqKdPxmxList.length > 0">
						<view class="section-title">品项明细</view>
						<view class="px-list">
							<view v-for="(px, index) in lxData.lqKdPxmxList" :key="index" class="px-item">
								<view class="px-header">
									<text class="px-name">{{ px.pxmc || '未知品项' }}</text>
									<text class="px-type">{{ px.sourceType || '购买' }}</text>
								</view>
								<view class="px-details">
									<view class="px-detail-item">
										<text class="px-label">数量:</text>
										<text class="px-value">{{ px.projectNumber || 1 }}</text>
									</view>
									<view class="px-detail-item">
										<text class="px-label">总价:</text>
										<text class="px-value amount">¥{{ px.actualPrice || 0 }}</text>
									</view>
									<view class="px-detail-item">
										<text class="px-label">单价:</text>
										<text class="px-value">¥{{ px.pxjg || 0 }}</text>
									</view>
								</view>
								<view >
									<view class="px-label">备注:</view>
									<view class="px-value" style="padding: 10rpx 20rpx;">{{ px.remark || '无' }}</view>
								</view>
								
								<!-- 健康师业绩 -->
								<view class="staff-section" v-if="px.lqKdJksyjList && px.lqKdJksyjList.length > 0">
									<view class="staff-title">健康师业绩</view>
									<view class="staff-list">
										<view v-for="(jks, jksIndex) in px.lqKdJksyjList" :key="jksIndex" class="staff-item">
											<text class="staff-name">{{ jks.jksxm || '未知' }}</text>
											<text class="staff-amount">¥{{ jks.jksyj || 0 }}</text>
										</view>
									</view>
								</view>
								
								<!-- 科技部业绩 -->
								<view class="staff-section" v-if="px.lqKdKjbsyjList && px.lqKdKjbsyjList.length > 0">
									<view class="staff-title">科技部业绩</view>
									<view class="staff-list">
										<view v-for="(kjb, kjbIndex) in px.lqKdKjbsyjList" :key="kjbIndex" class="staff-item">
											<text class="staff-name">{{ kjb.kjblsxm || '未知' }}</text>
											<text class="staff-amount">¥{{ kjb.kjblsyj || 0 }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 文件信息 -->
					<view class="info-section" v-if="hasFiles">
						<view class="section-title">附件信息</view>
						<view class="file-section" v-if="lxData.scwj && lxData.scwj.length > 0">
							<view class="file-title">收据文件</view>
							<view class="file-list">
								<view @click="previewSignature(lxData.scwj,index)" v-for="(file, index) in lxData.scwj" :key="index" class="file-item">
									<text class="file-icon">🖼️</text>
									<text class="file-name">{{ file.name || '未知文件' }}</text>
								</view>
							</view>
						</view>
						<view class="file-section" v-if="lxData.f_FileUrl && lxData.f_FileUrl.length > 0">
							<view class="file-title">其他文件</view>
							<view class="file-list">
								<view @click="previewSignature(lxData.f_FileUrl,index)" v-for="(file, index) in lxData.f_FileUrl" :key="index" class="file-item">
									<text class="file-icon">🖼️</text>
									<text class="file-name">{{ file.name || '未知文件' }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="info-section" v-if="lxData && lxData.hyqz && lxData.hyqz.length > 0">
						<view class="section-title">会员签字</view>
						<view class="file-section">
							<view class="file-list">
								<view @click="previewSignature(lxData.hyqz,0)" class="file-item">
									<image :src="baseUrl+lxData.hyqz[0].url" style="width: 100%;" mode="widthFix" />
								</view>
							</view>
						</view>
					</view>
					
					<!-- 备注信息 -->
					<view class="info-section">
						<view class="section-title">备注信息</view>
						<view class="info-item full-width">
							<text class="info-label">简介</text>
							<text class="info-value">{{ lxData.jj || '无' }}</text>
						</view>
						<view class="info-item full-width" style="margin-top: 30rpx;">
							<text class="info-label">备注</text>
							<text class="info-value">{{ lxData.bz || '无' }}</text>
						</view>
						<view class="info-item full-width" style="margin-top: 30rpx;" v-if="lxData.isEffective != '1'">
								<text class="info-label">作废备注</text>
								<text class="info-value">{{ lxData.cancelRefRemarks || '无' }}</text>
						</view>
				
					</view>
				</view>
				
				<!-- 操作按钮区域 -->
				<view class="action-buttons" v-if="lxData&&lxData.isEffective == '1'&&isCurrentMonth && newuserInfo.gw != '科技老师'">
					<button 
						class="action-btn cancel-btn" 
						@click="handleCancel" 
						type="error" 
						size="large"
						:loading="cancelLoading"
					>
						作废
					</button>
					<button 
						class="action-btn reopen-btn" 
						@click="handleReopen" 
						type="primary" 
						size="large"
						:loading="reopenLoading"
					>
						修改
					</button>
					
				</view>
			</view>
		</view>
		
		<!-- 作废备注对话框 -->
		<view v-if="showCancelDialog" class="dialog-overlay" @click="cancelCancelDialog">
			<view class="cancel-dialog" @click.stop>
				<view class="dialog-header">
					<text class="dialog-title">作废开单</text>
				</view>
				<view class="dialog-content">
					<text class="dialog-tip">确定要作废这个开单吗？此操作不可撤销。</text>
					<view class="remark-section">
						<text class="remark-label">作废原因：</text>
						<textarea 
							v-model="cancelRemark" 
							class="remark-input" 
							placeholder="请输入作废原因..."
							maxlength="200"
							:show-count="true"
						></textarea>
					</view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-dialog-btn" @click="cancelCancelDialog">取消</button>
					<button 
						class="dialog-btn confirm-dialog-btn" 
						@click="confirmCancel"
						:disabled="!cancelRemark.trim()"
						:loading="cancelLoading"
					>
						确认作废
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lxApi from '@/apis/modules/lx.js'
	import config from '@/common/config.js'

	export default {
		data() {
			return {
				newuserInfo: uni.getStorageSync('newuserInfo'),
				baseUrl:config.getImgBaseUrl(),
				loading: false,
				error: '',
				lxId: null,
				lxData: null,
				cancelLoading: false,
				reopenLoading: false,
				cancelRemark: '', // 作废备注
				showCancelDialog: false // 显示作废对话框
			}
		},

		computed: {
			// 是否有文件
			hasFiles() {
				return (this.lxData && this.lxData.scwj && this.lxData.scwj.length > 0) ||
					   (this.lxData && this.lxData.f_FileUrl && this.lxData.f_FileUrl.length > 0)
			},
			// 判断开单日期是否在本月
			isCurrentMonth() {
				return true
				if (!this.lxData || !this.lxData.kdrq) return false
				
				const orderDate = new Date(this.lxData.kdrq)
				const currentDate = new Date()
				
				return orderDate.getFullYear() === currentDate.getFullYear() &&
					   orderDate.getMonth() === currentDate.getMonth()
			}
		},

		// API引用
		API: lxApi,

		onLoad(options) {
			this.lxId = options.id
			this.initializePage(options)
		},
		onShow() {
			this.loadLxDetail()
		},

		methods: {
			goToAppointment(appointmentId) {
				uni.navigateTo({
					url: '/pages/appointment-detail/appointment-detail?id='+appointmentId
				})
			},
			qkcomputed(e){
				let qk = 0
				qk = Number(e.qk) - Number(e.paidDebt)
				return qk
			},
			previewSignature(listfile,index){
				let listfilenew = listfile.map(item=>this.baseUrl+item.url)
				uni.previewImage({
					urls: listfilenew,
					current: index
				});
			},
			// 初始化页面
			async initializePage(options) {
				try {
					// 检查登录状态
					await this.checkLoginStatus()
					
					// 获取URL参数中的ID
					// this.lxId = options.id
					
					if (!this.lxId) {
						this.error = '缺少开单ID参数'
						return
					}
					
					// 加载开单详情
					// await this.loadLxDetail()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.error = '页面初始化失败，请刷新重试'
				}
			},

			// 检查登录状态
			async checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
			},

			// 加载开单详情
			async loadLxDetail() {
				try {
					this.loading = true
					this.error = ''
					
					const res = await this.API.getLxDetail(this.lxId)
					
					if (res.code === 200) {
						this.lxData = res.data
						if(res.data.fileUrl){
							console.error(res.data.fileUrl)
							this.lxData.f_FileUrl = JSON.parse(res.data.fileUrl)
						} else{
							this.lxData.f_FileUrl = []
						}
					} else {
						throw new Error(res.msg || '获取详情失败')
					}
					
				} catch (error) {
					console.error('加载开单详情失败:', error)
					this.error = '加载详情失败，请重试'
				} finally {
					this.loading = false
				}
			},

			// 重试加载
			async retryLoad() {
				await this.loadLxDetail()
			},

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

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			},

			// 作废开单
			handleCancel() {
				this.cancelRemark = ''
				this.showCancelDialog = true
			},

			// 取消作废对话框
			cancelCancelDialog() {
				this.showCancelDialog = false
				this.cancelRemark = ''
			},

			// 确认作废
			async confirmCancel() {
				if (!this.cancelRemark.trim()) {
					uni.showToast({
						title: '请输入作废原因',
						icon: 'none'
					})
					return
				}

				try {
					this.cancelLoading = true
					
					const res = await this.API.cancelLx(this.lxId, this.cancelRemark.trim())
					
					if (res.code === 200) {
						uni.showToast({
							title: '作废成功',
							icon: 'success'
						})
						// 关闭对话框
						this.showCancelDialog = false
						this.cancelRemark = ''
						// 重新加载详情
						await this.loadLxDetail()
					} else {
				
						uni.showToast({
							title: res.msg || '作废失败，请重试',
							icon: 'none'
						})
					}
					
				} catch (error) {
					console.error(error)
					
					uni.showToast({
						title: error.msg || '作废失败，请重试',
						icon: 'none'
					})
				} finally {
					this.cancelLoading = false
				}
			},

			// 重开订单
			async handleReopen() {
				uni.navigateTo({
					url:'/pages/lx/lx?id='+this.lxId
				})
			},

			// 显示确认对话框
			showConfirmDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title: title,
						content: content,
						success: (res) => {
							resolve(res.confirm)
						},
						fail: () => {
							resolve(false)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.back-btn {
		background: #fff;
		border: none;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		color: #388e3c;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
		transition: all 0.2s ease;
	}

	.header-title {
		text-align: center;
		color: #388e3c;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
		flex: 1;
	}

	.detail-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
	}

	.card-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		font-size: 32rpx;
	}

	.detail-content {
		padding: 40rpx;
	}

	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
	}

	.error-state {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #c62828;
	}

	.retry-btn {
		margin-top: 24rpx;
		background: #43a047;
		color: #fff;
		border-radius: 16rpx;
		padding: 16rpx 32rpx;
		font-size: 28rpx;
	}


	.info-section {
		margin-bottom: 48rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2e7d32;
		margin-bottom: 32rpx;
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid #e8f5e9;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-item.full-width {
		grid-column: 1 / -1;
	}

	.info-label {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 8rpx;
		font-weight: 500;
	}

	.info-value {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		padding: 16rpx 24rpx;
		background: #f8fff8;
		border-radius: 16rpx;
		border: 2rpx solid #e8f5e9;
	}

	.info-value.amount {
		color: #43a047;
		font-weight: 600;
	}

	.info-value.debt {
		color: #ef6c00;
		background: #fff3e0;
		border-color: #ffe0b2;
	}

	.info-value.normal {
		color: #2e7d32;
	}

	.status-badge {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
	}

	.status-badge.yes {
		background: #e8f5e9;
		color: #2e7d32;
		border: 2rpx solid #c8e6c9;
	}

	.status-badge.no {
		background: #ffebee;
		color: #c62828;
		border: 2rpx solid #ffcdd2;
	}

	/* 储扣信息样式 */
	.deduct-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.deduct-item {
		background: #fff3e0;
		border: 2rpx solid #ffe0b2;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.deduct-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.deduct-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #ef6c00;
	}

	.deduct-type {
		font-size: 24rpx;
		color: #ff9800;
		background: #fff3e0;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		border: 1rpx solid #ffe0b2;
	}

	.deduct-details {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.deduct-detail-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.deduct-label {
		font-size: 22rpx;
		color: #ff9800;
		margin-bottom: 4rpx;
	}

	.deduct-value {
		font-size: 26rpx;
		color: #ef6c00;
		font-weight: 500;
	}

	.deduct-value.amount {
		color: #e65100;
		font-weight: 600;
	}

	.deduct-info {
		background: #fff8e1;
		border: 1rpx solid #ffe0b2;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-top: 12rpx;
	}

	.deduct-info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.deduct-info-label {
		font-size: 24rpx;
		color: #ff9800;
		font-weight: 500;
	}

	.deduct-info-value {
		font-size: 24rpx;
		color: #ef6c00;
		font-weight: 600;
	}

	/* 品项明细样式 */
	.px-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.px-item {
		background: #f8fff8;
		border: 2rpx solid #e8f5e9;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.px-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.px-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #2e7d32;
	}

	.px-type {
		font-size: 24rpx;
		color: #6a9c6a;
		background: #e8f5e9;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.px-details {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.px-detail-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.px-label {
		font-size: 22rpx;
		color: #6a9c6a;
		margin-bottom: 4rpx;
	}

	.px-value {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	.px-value.amount {
		color: #43a047;
		font-weight: 600;
	}

	/* 员工业绩样式 */
	.staff-section {
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 2rpx solid #e8f5e9;
	}

	.staff-title {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.staff-list {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.staff-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 12rpx 16rpx;
		border-radius: 12rpx;
		border: 1rpx solid #e8f5e9;
	}

	.staff-name {
		font-size: 26rpx;
		color: #2e7d32;
	}

	.staff-amount {
		font-size: 26rpx;
		color: #43a047;
		font-weight: 600;
	}

	/* 文件信息样式 */
	.file-section {
		margin-bottom: 24rpx;
	}

	.file-title {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.file-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.file-item {
		display: flex;
		align-items: center;
		background: #f8fff8;
		padding: 16rpx 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e8f5e9;
	}

	.file-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
	}

	.file-name {
		// width: 300rpx;
		font-size: 26rpx;
		color: #2e7d32;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 40rpx;
		padding-top: 32rpx;
		border-top: 2rpx solid #e8f5e9;
	}

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 24rpx;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
	}

	.cancel-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: #fff;
		border: none;
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
	}

	.cancel-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.4);
	}

	.reopen-btn {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		border: none;
		box-shadow: 0 6rpx 20rpx rgba(67, 233, 123, 0.3);
	}

	.reopen-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(67, 233, 123, 0.4);
	}

	/* 作废对话框样式 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.cancel-dialog {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 600rpx;
		max-width: 90%;
	}

	.dialog-header {
		background: linear-gradient(120deg, #ff6b6b 0%, #ee5a52 100%);
		padding: 32rpx 40rpx;
		text-align: center;
	}

	.dialog-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}

	.dialog-content {
		padding: 40rpx;
	}

	.dialog-tip {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 32rpx;
		display: block;
	}

	.remark-section {
		margin-top: 24rpx;
	}

	.remark-label {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		margin-bottom: 16rpx;
		display: block;
	}

	.remark-input {
		width: 100%;
		min-height: 120rpx;
		padding: 20rpx;
		border: 2rpx solid #e8f5e9;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #2e7d32;
		background: #f8fff8;
		box-sizing: border-box;
		resize: none;
	}

	.remark-input:focus {
		border-color: #43a047;
		background: #fff;
	}

	.dialog-buttons {
		display: flex;
		gap: 24rpx;
		padding: 0 40rpx 40rpx;
	}

	.dialog-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
	}

	.cancel-dialog-btn {
		background: #f5f5f5;
		color: #666;
		border: 2rpx solid #e0e0e0;
	}

	.cancel-dialog-btn:hover {
		background: #eeeeee;
	}

	.confirm-dialog-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: #fff;
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
	}

	.confirm-dialog-btn:hover:not(:disabled) {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
	}

	.confirm-dialog-btn:disabled {
		background: #ccc;
		color: #999;
		box-shadow: none;
		cursor: not-allowed;
	}

	// 响应式设计
	// @media (max-width: 750rpx) {
	// 	.info-grid {
	// 		grid-template-columns: 1fr;
	// 	}
		
	// 	.deduct-details {
	// 		grid-template-columns: 1fr;
	// 	}
		
	// 	.px-details {
	// 		grid-template-columns: 1fr;
	// 	}

	// 	.action-buttons {
	// 		flex-direction: column;
	// 		gap: 16rpx;
	// 	}

	// 	.action-btn {
	// 		height: 96rpx;
	// 	}

	// 	.dialog-buttons {
	// 		flex-direction: column;
	// 		gap: 16rpx;
	// 	}

	// 	.dialog-btn {
	// 		height: 88rpx;
	// 	}
	// }
</style>
