<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="detailData" class="info-sections">
					<!-- 基本信息 -->
					<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">{{ (formData && formData.applicationUserName) || detailData.applicationUserName || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">申请门店</text>
								<text class="info-value">{{ formData ? (formData.applicationStoreName || getStoreName(formData.applicationStoreId)) : (getStoreName(detailData.applicationStoreId) || '无') }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">申请时间</text>
								<text class="info-value">{{ formatTime((formData && formData.applicationTime) || detailData.applicationTime) }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">总金额</text>
								<text class="info-value amount">¥{{ formatMoney((formData && formData.amount) || detailData.amount) }}</text>
							</view>
						</view>
					</view>
					
					<!-- 购买记录列表 -->
					<view class="info-section" v-if="purchaseRecords && purchaseRecords.length > 0">
						<view class="section-title">购买记录列表</view>
						<view class="purchase-records-list">
							<view v-for="(item, index) in purchaseRecords" :key="item.id || index" class="purchase-record-item">
								<view class="record-header">
									<text class="record-category">{{ item.reimbursementCategoryName || '无' }}</text>
									<text class="record-amount">¥{{ formatMoney(item.amount) }}</text>
								</view>
								<view class="record-details">
									<view class="record-detail-item">
										<text class="record-label">单价:</text>
										<text class="record-value">¥{{ formatMoney(item.unitPrice) }}</text>
									</view>
									<view class="record-detail-item">
										<text class="record-label">数量:</text>
										<text class="record-value">{{ item.quantity || '无' }}</text>
									</view>
									<view class="record-detail-item">
										<text class="record-label">购买时间:</text>
										<text class="record-value">{{ formatTime(item.purchaseTime) }}</text>
									</view>
								</view>
								<view class="record-memo" v-if="item.memo">
									<text class="record-label">备注说明:</text>
									<text class="record-value">{{ item.memo || '无' }}</text>
								</view>
								<!-- 附件信息 -->
								<view class="record-attachment" v-if="item.attachment && item.attachment.length > 0">
									<text class="record-label">附件:</text>
									<view class="attachment-list">
										<view class="attachment-count">
											<text class="file-icon">📎</text>
											<text class="file-count">{{ item.attachment.length }}个文件</text>
										</view>
										<!-- 显示所有附件 -->
										<view class="attachment-items">
											<view 
												v-for="(file, fileIndex) in item.attachment" 
												:key="fileIndex" 
												class="attachment-item"
												@click="previewFile(file, item.attachment)">
												<!-- 如果是图片，显示预览 -->
												<view v-if="isImageFile(file)" class="attachment-image-wrapper">
													<image 
														:src="getImageUrl(file.url)" 
														mode="aspectFit"
														class="attachment-image"
													/>
												</view>
												<!-- 如果不是图片，显示文件信息 -->
												<view v-else class="attachment-file-info">
													<text class="file-icon">📄</text>
													<text class="file-name">{{ file.name || '文件' + (fileIndex + 1) }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 审批流程 -->
					<view class="info-section" v-if="nodes && nodes.length > 0">
						<view class="section-title">审批流程</view>
						<view class="approval-flow">
							<view 
								v-for="(node, index) in nodes" 
								:key="node.nodeId || index" 
								class="flow-node"
								:class="{
									'node-active': node.nodeOrder === currentNodeOrder,
									'node-completed': node.nodeOrder < currentNodeOrder,
									'node-pending': node.nodeOrder > currentNodeOrder
								}"
							>
								<view class="node-header">
									<view class="node-order">{{ node.nodeOrder }}</view>
									<view class="node-info">
										<view class="node-name">{{ node.nodeName || '无' }}</view>
										<view class="node-type">
											<view class="node-type-tag" :class="node.approvalType === '会签' ? 'type-success' : 'type-warning'">
												{{ node.approvalType || '无' }}
											</view>
											<view v-if="node.isRequired === 1" class="node-type-tag type-info">必审</view>
										</view>
									</view>
								</view>
								
								<!-- 审批人列表 -->
								<view class="approvers-list" v-if="node.approvers && node.approvers.length > 0">
									<text class="approvers-label">审批人：</text>
									<view class="approvers-items">
										<view 
											v-for="approver in node.approvers" 
											:key="approver.userId"
											class="approver-tag"
										>
											{{ approver.userName || '无' }}
										</view>
									</view>
								</view>

								<!-- 审批记录 -->
								<view class="approval-records" v-if="node.approvalRecords && node.approvalRecords.length > 0">
									<text class="records-label">审批记录：</text>
									<view class="records-list">
										<view 
											v-for="(record, recordIndex) in node.approvalRecords" 
											:key="recordIndex"
											class="record-item"
										>
											<view class="record-header">
												<text class="record-approver">{{ record.approverName || '无' }}</text>
												<view class="record-result-tag" :class="getRecordClass(record.approvalResult)">
													{{ record.approvalResult || '无' }}
												</view>
											</view>
											<view class="record-opinion" v-if="record.approvalOpinion">
												意见：{{ record.approvalOpinion }}
											</view>
											<view class="record-time" v-if="record.approvalTime">
												时间：{{ formatTime(record.approvalTime) }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 当前审批人信息 -->
					<view class="info-section" v-if="currentApprovers && currentApprovers.length > 0">
						<view class="section-title">当前审批人</view>
						<view class="current-approvers">
							<view 
								v-for="approver in currentApprovers" 
								:key="approver.userId"
								class="current-approver-tag"
							>
								{{ approver.userName || '无' }}
							</view>
						</view>
					</view>

					<!-- 退回原因 -->
					<view class="info-section" v-if="returnedReason">
						<view class="section-title">退回原因</view>
						<view class="returned-reason">
							{{ returnedReason }}
						</view>
					</view>

					<!-- 审批操作区域 -->
					<view class="info-section" v-if="canApprove">
						<view class="section-title">审批操作</view>
						<view class="approval-form">
							<view class="form-item">
								<text class="form-label">审批结果</text>
								<view class="radio-group">
									<view 
										class="radio-item" 
										:class="{ 'active': approvalForm.result === '通过' }"
										@tap="approvalForm.result = '通过'">
										<text>通过</text>
									</view>
									<view 
										class="radio-item" 
										:class="{ 'active': approvalForm.result === '不通过' }"
										@tap="approvalForm.result = '不通过'">
										<text>不通过</text>
									</view>
									<view 
										class="radio-item" 
										:class="{ 'active': approvalForm.result === '退回' }"
										@tap="approvalForm.result = '退回'">
										<text>退回</text>
									</view>
								</view>
							</view>
							<view class="form-item">
								<text class="form-label">审批意见</text>
								<textarea 
									v-model="approvalForm.opinion" 
									placeholder="请输入审批意见"
									class="form-textarea"
									maxlength="500"
								/>
							</view>
							<view class="form-actions">
								<button class="approve-btn" @tap="handleApprove" :disabled="approving">
									{{ approving ? '提交中...' : '提交审批' }}
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/apis/index.js'
	import purchaseApi from '@/apis/modules/purchase.js'
	import config from '@/common/config.js'

	export default {
		data() {
			return {
				loading: false,
				error: null,
				detailData: null,
				formData: null, // 表单数据
				nodes: [], // 审批节点
				currentApprovers: [], // 当前审批人
				currentNodeOrder: 0, // 当前节点顺序
				approvalStatus: '', // 审批状态
				returnedReason: null, // 退回原因
				purchaseRecords: [],
				reimbursementId: null,
				storeOptions: [],
				baseUrl: config.getApiBaseUrl(),
				userInfo: null, // 当前登录用户信息
				// 审批操作表单
				approvalForm: {
					result: '通过',
					opinion: ''
				},
				approving: false // 审批提交中
			}
		},

		computed: {
			// 判断是否可以审批
			canApprove() {
				// 判断是否可以审批：状态为"审批中"且当前用户是当前审批人
				if (this.approvalStatus !== '审批中') {
					return false
				}
				
				if (!this.userInfo || !this.userInfo.userId) {
					return false
				}
				
				if (!this.currentApprovers || this.currentApprovers.length === 0) {
					return false
				}
				
				// 检查当前用户的userId是否在审批人列表中
				const isCurrentApprover = this.currentApprovers.some(approver => {
					return approver.userId === this.userInfo.userId
				})
				
				return isCurrentApprover
			}
		},

		onLoad(options) {
			if (options.id) {
				this.reimbursementId = options.id
				this.userInfo = uni.getStorageSync('userInfo')
				this.loadStoreOptions()
				this.loadDetail()
			} else {
				this.error = '缺少记录ID'
			}
		},

		methods: {
			// 加载门店列表
			async loadStoreOptions() {
				try {
					const res = await api.getStoreList({
						currentPage: 1,
						pageSize: 1000
					})
					if (res.code === 200 && res.data && res.data.list) {
						this.storeOptions = res.data.list
					} else {
						this.storeOptions = []
					}
				} catch (error) {
					console.error('加载门店列表失败:', error)
					this.storeOptions = []
				}
			},

			// 获取门店名称
			getStoreName(storeId) {
				if (!storeId) return '无'
				const store = this.storeOptions.find(item => item.id === storeId)
				return store ? store.dm : '无'
			},

			// 加载详情数据
			async loadDetail() {
				if (!this.reimbursementId) return

				try {
					this.loading = true
					this.error = null

					const res = await api.getReimbursementDetail(this.reimbursementId)

					if (res.code === 200 && res.data) {
						// 根据PC端的数据结构处理
						this.formData = res.data.form || res.data
						this.detailData = this.formData // 保持兼容
						this.nodes = res.data.nodes || []
						this.currentApprovers = res.data.currentApprovers || []
						this.currentNodeOrder = res.data.currentNodeOrder || 0
						this.approvalStatus = res.data.approvalStatus || this.formData.approveStatus || this.formData.approvalStatus || ''
						this.returnedReason = res.data.returnedReason || null
						
						// 处理购买记录
						if (res.data.purchaseRecords && res.data.purchaseRecords.length > 0) {
							this.purchaseRecords = res.data.purchaseRecords.map(item => {
								// 处理附件字段
								if (item.attachment) {
									try {
										item.attachment = typeof item.attachment === 'string' 
											? JSON.parse(item.attachment) 
											: item.attachment
									} catch (e) {
										item.attachment = []
									}
								} else {
									item.attachment = []
								}
								return item
							})
						} else if (this.detailData.purchaseRecordsId) {
							// 如果没有直接返回购买记录，则通过ID加载
							await this.loadPurchaseRecords(this.detailData.purchaseRecordsId)
						}
					} else {
						this.error = res.message || '加载详情失败'
					}
				} catch (error) {
					console.error('加载详情失败:', error)
					this.error = '加载详情失败，请重试'
				} finally {
					this.loading = false
				}
			},

			// 加载购买记录
			async loadPurchaseRecords(purchaseRecordsId) {
				if (!purchaseRecordsId) {
					this.purchaseRecords = []
					return
				}

				// 处理逗号分隔的ID字符串
				const normalizedStr = purchaseRecordsId.toString().replace(/[\r\n]+/g, ',').replace(/\s+/g, '')
				const ids = normalizedStr.split(',').map(id => id.trim()).filter(id => id && id !== '')

				if (ids.length === 0) {
					this.purchaseRecords = []
					return
				}

				try {
					// 批量加载购买记录
					const promises = ids.map(id => {
						return purchaseApi.getPurchaseDetail(id)
							.then(res => res.code === 200 ? res.data : null)
							.catch(() => null)
					})

					const results = await Promise.all(promises)
					this.purchaseRecords = results.filter(item => item !== null)
				} catch (error) {
					console.error('加载购买记录失败:', error)
					this.purchaseRecords = []
				}
			},

			// 重试加载
			retryLoad() {
				this.loadDetail()
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '无'
				// 如果是时间戳（数字），需要转换
				if (typeof timestamp === 'number') {
					const date = new Date(timestamp)
					const year = date.getFullYear()
					const month = String(date.getMonth() + 1).padStart(2, '0')
					const day = String(date.getDate()).padStart(2, '0')
					const hours = String(date.getHours()).padStart(2, '0')
					const minutes = String(date.getMinutes()).padStart(2, '0')
					const seconds = String(date.getSeconds()).padStart(2, '0')
					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
				}
				// 如果是字符串，尝试解析
				const date = new Date(timestamp)
				if (isNaN(date.getTime())) return timestamp
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			},
			
			// 格式化金额
			formatMoney(amount) {
				if (!amount) return '0.00'
				return Number(amount).toLocaleString('zh-CN', {
					minimumFractionDigits: 2,
					maximumFractionDigits: 2
				})
			},
			
			// 获取图片URL
			getImageUrl(url) {
				if (!url) return ''
				if (url.startsWith('http')) return url
				return `${this.baseUrl}${url}`
			},
			
			// 判断是否为图片文件
			isImageFile(file) {
				if (!file || !file.url) return false
				const url = file.url.toLowerCase()
				const name = (file.name || '').toLowerCase()
				const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
				return imageExtensions.some(ext => url.includes(ext) || name.includes(ext))
			},

			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case '待审批':
						return 'pending'
					case '审批中':
						return 'pending'
					case '已通过':
						return 'approved'
					case '未通过':
						return 'rejected'
					case '已退回':
						return 'rejected'
					default:
						return 'unapproved'
				}
			},
			
			// 获取审批记录样式类
			getRecordClass(result) {
				switch (result) {
					case '通过':
						return 'result-success'
					case '不通过':
						return 'result-danger'
					case '退回':
						return 'result-warning'
					case '待审批':
					default:
						return 'result-info'
				}
			},
			
			// 提交审批
			async handleApprove() {
				if (!this.approvalForm.result) {
					uni.showToast({
						title: '请选择审批结果',
						icon: 'none'
					})
					return
				}

				this.approving = true
				try {
					const res = await api.approveReimbursement(this.reimbursementId, {
						result: this.approvalForm.result,
						opinion: this.approvalForm.opinion || ''
					})

					if (res.code === 200) {
						uni.showToast({
							title: '审批成功',
							icon: 'success'
						})
						// 重新加载详情
						setTimeout(() => {
							this.loadDetail()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message || '审批失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('审批失败:', error)
					uni.showToast({
						title: '审批失败',
						icon: 'none'
					})
				} finally {
					this.approving = false
				}
			},
			// 预览文件
			previewFile(file, attachmentList) {
				if (!file || !file.url) {
					uni.showToast({
						title: '附件URL不存在',
						icon: 'none'
					})
					return
				}
				
				const fullUrl = file.url.startsWith('http') ? file.url : `${this.baseUrl}${file.url}`
				
				// 判断文件类型
				const fileExtension = this.getFileExtension(file.name || file.url)
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
				
				if (imageExtensions.includes(fileExtension.toLowerCase())) {
					// 图片类型：预览
					// 构建所有图片URL列表
					const imageUrls = attachmentList
						.filter(item => {
							const ext = this.getFileExtension(item.name || item.url)
							return imageExtensions.includes(ext.toLowerCase())
						})
						.map(item => {
							const url = item.url.startsWith('http') ? item.url : `${this.baseUrl}${item.url}`
							return url
						})
					
					const currentIndex = imageUrls.findIndex(url => url === fullUrl)
					
					uni.previewImage({
						urls: imageUrls,
						current: currentIndex >= 0 ? currentIndex : 0
					})
				} else {
					// 其他类型：下载或打开
					uni.showToast({
						title: '非图片文件，请下载查看',
						icon: 'none'
					})
					// 可以在这里添加下载逻辑
					// uni.downloadFile({
					// 	url: fullUrl,
					// 	success: (res) => {
					// 		// 处理下载成功
					// 	}
					// })
				}
			},
			// 获取文件扩展名
			getFileExtension(fileName) {
				if (!fileName) return ''
				const lastDot = fileName.lastIndexOf('.')
				return lastDot > -1 ? fileName.substring(lastDot + 1) : ''
			}
		}
	}
</script>

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

	.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-size: 36rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.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: #f56c6c;
		font-size: 28rpx;
	}

	.retry-btn {
		margin-top: 32rpx;
	}

	.info-sections {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.info-section {
		background: #f9fff9;
		border-radius: 24rpx;
		padding: 32rpx;
		border: 2rpx solid #e8f5e9;
	}

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

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

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

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

	.info-value {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		word-break: break-all;
	}

	.info-value.amount {
		color: #f57c00;
		font-weight: 600;
		font-size: 32rpx;
	}

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

	.status-badge.unapproved {
		background: #fff3e0;
		color: #ef6c00;
		border: 2rpx solid #ffe0b2;
	}

	.status-badge.pending {
		background: #e3f2fd;
		color: #1976d2;
		border: 2rpx solid #bbdefb;
	}

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

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

	.purchase-records-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.purchase-record-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		border: 2rpx solid #e0e0e0;
	}

	.record-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

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

	.record-amount {
		font-size: 32rpx;
		color: #f57c00;
		font-weight: 600;
	}

	.record-details {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-bottom: 12rpx;
	}

	.record-detail-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.record-label {
		font-size: 24rpx;
		color: #6a9c6a;
	}

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

	.record-memo {
		margin-top: 12rpx;
		padding-top: 12rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 8rpx;
	}

	.record-memo .record-value {
		flex: 1;
		word-break: break-all;
	}

	.record-attachment {
		margin-top: 12rpx;
		padding-top: 12rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.attachment-list {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		margin-top: 8rpx;
	}

	.attachment-count {
		display: flex;
		align-items: center;
		gap: 8rpx;
		margin-bottom: 16rpx;
	}

	.file-icon {
		font-size: 24rpx;
	}

	.file-count {
		font-size: 24rpx;
		color: #606266;
	}

	.attachment-items {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-top: 16rpx;
	}

	.attachment-item {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s;
	}

	.attachment-item:active {
		opacity: 0.7;
		transform: scale(0.98);
	}

	.attachment-image-wrapper {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		border: 2rpx solid #e0e0e0;
		background: #f5f5f5;
	}

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

	.attachment-file-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 16rpx 24rpx;
		background: #f9fff9;
		border: 2rpx solid #c8e6c9;
		border-radius: 12rpx;
		min-width: 200rpx;
	}

	.attachment-file-info .file-icon {
		font-size: 32rpx;
	}

	.attachment-file-info .file-name {
		font-size: 24rpx;
		color: #2e7d32;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 审批流程样式 */
	.approval-flow {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.flow-node {
		padding: 24rpx;
		border: 2rpx solid #e4e7ed;
		border-radius: 16rpx;
		background: #fafafa;
		transition: all 0.3s;
	}

	.flow-node.node-active {
		border-color: #409EFF;
		background: #ecf5ff;
	}

	.flow-node.node-completed {
		border-color: #67C23A;
		background: #f0f9ff;
	}

	.flow-node.node-pending {
		border-color: #e4e7ed;
		background: #fafafa;
		opacity: 0.6;
	}

	.node-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.node-order {
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #409EFF;
		color: #fff;
		border-radius: 50%;
		font-weight: 600;
		font-size: 28rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.node-info {
		flex: 1;
	}

	.node-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 16rpx;
	}

	.node-type {
		display: flex;
		gap: 16rpx;
	}

	.node-type-tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.node-type-tag.type-success {
		background: #f0f9ff;
		color: #67C23A;
		border: 2rpx solid #c8e6c9;
	}

	.node-type-tag.type-warning {
		background: #fff3e0;
		color: #e6a23c;
		border: 2rpx solid #ffe0b2;
	}

	.node-type-tag.type-info {
		background: #e3f2fd;
		color: #909399;
		border: 2rpx solid #bbdefb;
	}

	.approvers-list {
		margin-bottom: 24rpx;
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
	}

	.approvers-label {
		min-width: 160rpx;
		color: #606266;
		font-weight: 500;
		font-size: 26rpx;
	}

	.approvers-items {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.approver-tag {
		display: inline-block;
		padding: 8rpx 16rpx;
		background: #e8f5e9;
		border: 2rpx solid #c8e6c9;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #2e7d32;
	}

	.approval-records {
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 2rpx solid #e4e7ed;
	}

	.records-label {
		color: #606266;
		font-weight: 500;
		font-size: 26rpx;
		margin-bottom: 16rpx;
		display: block;
	}

	.records-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.record-item {
		padding: 16rpx;
		background: #fff;
		border-radius: 8rpx;
		border-left: 6rpx solid #409EFF;
	}

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

	.record-approver {
		font-weight: 500;
		color: #303133;
		font-size: 26rpx;
	}

	.record-result-tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.record-result-tag.result-success {
		background: #f0f9ff;
		color: #67C23A;
	}

	.record-result-tag.result-danger {
		background: #ffebee;
		color: #F56C6C;
	}

	.record-result-tag.result-warning {
		background: #fff3e0;
		color: #e6a23c;
	}

	.record-result-tag.result-info {
		background: #e3f2fd;
		color: #909399;
	}

	.record-opinion {
		color: #606266;
		font-size: 24rpx;
		margin-bottom: 8rpx;
		line-height: 1.6;
	}

	.record-time {
		color: #909399;
		font-size: 22rpx;
	}

	/* 当前审批人样式 */
	.current-approvers {
		padding: 24rpx;
		background: #fff3cd;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.current-approver-tag {
		display: inline-block;
		padding: 12rpx 24rpx;
		background: #fff;
		border: 2rpx solid #e6a23c;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #e6a23c;
		font-weight: 500;
	}

	/* 退回原因样式 */
	.returned-reason {
		padding: 24rpx;
		background: #fef0f0;
		border-radius: 16rpx;
		color: #F56C6C;
		line-height: 1.6;
		font-size: 26rpx;
	}

	/* 审批操作表单样式 */
	.approval-form {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

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

	.radio-group {
		display: flex;
		gap: 24rpx;
	}

	.radio-item {
		flex: 1;
		padding: 20rpx;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 16rpx;
		text-align: center;
		font-size: 26rpx;
		color: #2e7d32;
		transition: all 0.2s;
	}

	.radio-item.active {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		border-color: #43e97b;
		color: #fff;
		font-weight: 600;
	}

	.form-textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 24rpx;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 16rpx;
		font-size: 26rpx;
		color: #2e7d32;
		box-sizing: border-box;
	}

	.form-actions {
		margin-top: 16rpx;
	}

	.approve-btn {
		width: 100%;
		padding:10rpx 32rpx;
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(67, 233, 123, 0.3);
	}

	.approve-btn:active {
		transform: scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(67, 233, 123, 0.4);
	}

	.approve-btn:disabled {
		opacity: 0.5;
	}
</style>

