<!--合同签署表单页面-->
<template>
	<view class="main_box">
		<!-- 自定义导航栏 -->
		<view class="navbar_section">
			<view class="navbar_back" @click="goBack">
				<text class="back_icon">‹</text>
			</view>
			<view class="navbar_title">合同签署</view>
			<view class="navbar_action"></view>
		</view>
		
		<!-- 合同信息 -->
		<view class="contract_info_section" v-if="contractInfo">
			<view class="info_header">
				<view class="contract_name">{{ contractInfo.contract_name }}</view>
				<view class="contract_type">{{ contractInfo.contract_type }}</view>
			</view>
		</view>
		
		<!-- 合同内容 -->
		<view class="contract_content_section" v-if="contractContent">
			<view class="content_header">
				<view class="content_title">合同内容</view>
				<view class="content_expand_btn" @click="toggleContentExpand">
					{{ contentExpanded ? '收起' : '展开' }}
				</view>
			</view>
			<view class="content_body" :class="{ expanded: contentExpanded }">
				<view v-html="renderContractContentWithFields" class="content_text"></view>
			</view>
		</view>
		
		<!-- 表单内容 -->
		<view class="form_section" v-if="!loading">
			<view class="form_title">请填写以下信息</view>
			<view class="form_content">
				<view 
					v-for="(field, index) in filteredFormFields" 
					:key="index"
					class="form_field"
					:class="getFieldClass(field)"
				>
					<view class="field_label">
						{{ field.name }}
						<text v-if="field.is_required" class="required_mark">*</text>
						<view v-if="isStaff" class="party_indicator">
							<text class="party_tag" :class="getPartyClass(field)">{{ getPartyLabel(field) }}</text>
						</view>
					</view>
					
					<!-- 手写签名字段 -->
					<view v-if="field.data_type === 'signature'" class="field_signature">
						<view 
							class="signature_button"
							@click="goToSignature(field)"
							:class="formData[field.placeholder] ? 'signed' : ''"
						>
							<text class="signature_icon">✒️</text>
							<text class="signature_text">
								{{ formData[field.placeholder] ? '已签名' : '手写签名' }}
							</text>
						</view>
						<view v-if="formData[field.placeholder]" class="signature_preview">
							<image :src="formData[field.placeholder]" mode="aspectFit" />
						</view>
					</view>
					
					<!-- 签名图片上传字段 -->
					<view v-else-if="field.data_type === 'sign_img'" class="field_sign_img">
						<view 
							class="sign_img_button"
							@click="chooseSignImage(field)"
							:class="formData[field.placeholder] ? 'uploaded' : ''"
						>
							<text class="sign_img_icon">📷</text>
							<text class="sign_img_text">
								{{ formData[field.placeholder] ? '已上传' : '上传签名图片' }}
							</text>
						</view>
						<view v-if="formData[field.placeholder]" class="sign_img_preview">
							<image :src="formData[field.placeholder]" mode="aspectFit" />
						</view>
					</view>
					
					<!-- 文本输入框 -->
					<view v-else-if="field.field_type === 'text'" class="field_input">
						<input 
							type="text" 
							:placeholder="field.placeholder || '请输入' + field.name"
							v-model="formData[field.placeholder]"
							:disabled="!canEditField(field)"
							:class="!canEditField(field) ? 'disabled' : ''"
						/>
					</view>
					
					<!-- 日期选择器 -->
					<view v-else-if="field.field_type === 'date'" class="field_input">
						<picker 
							mode="date" 
							:value="formData[field.placeholder]" 
							@change="handleDateChange(field.placeholder, $event)"
							:disabled="field.data_type !== 'user_input'"
						>
							<input 
								type="text" 
								:placeholder="field.placeholder || '请选择' + field.name"
								:value="formData[field.placeholder]"
								:disabled="field.data_type !== 'user_input'"
								:class="field.data_type !== 'user_input' ? 'disabled' : ''"
								readonly
							/>
						</picker>
					</view>
					
					<!-- 数字输入框 -->
					<view v-else-if="field.field_type === 'number'" class="field_input">
						<input 
							type="number" 
							:placeholder="field.placeholder || '请输入' + field.name"
							v-model="formData[field.placeholder]"
							:disabled="!canEditField(field)"
							:class="!canEditField(field) ? 'disabled' : ''"
						/>
					</view>
					
					<!-- 文本域 -->
					<view v-else-if="field.field_type === 'textarea'" class="field_textarea">
						<textarea 
							:placeholder="field.placeholder || '请输入' + field.name"
							v-model="formData[field.placeholder]"
							:disabled="!canEditField(field)"
							:class="!canEditField(field) ? 'disabled' : ''"
						></textarea>
					</view>
					
					<!-- 提示信息 -->
					<view v-if="field.data_type !== 'user_input' && field.data_type !== 'signature' && field.data_type !== 'sign_img'" class="field_hint">
						{{ getFieldHint(field) }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading_section">
			<view class="loading_spinner"></view>
			<view class="loading_text">加载表单配置中...</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit_section" v-if="!loading">
			<fui-button 
				type="warning" 
				btn-size="medium" 
				width="100%" 
				:loading="submitting"
				@click="submitContract"
			>
				{{ submitting ? '提交中...' : '提交签署' }}
			</fui-button>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js'
  import { Api_url } from '@/common/config.js'
	
	export default {
		data() {
			return {
				contractId: 0,
				studentId: 0,
				contractSignId: 0, // 新增：合同签署记录ID
				contractName: '',
				contractInfo: null,
				contractContent: '',
				contentExpanded: false,
				formFields: [],
				formData: {},
				loading: true,
				submitting: false,
				// 角色和权限控制
				userInfo: null,
				userRole: 'student', // 默认为学生角色
				isStaffMode: false
			}
		},
		
		computed: {
			// 检查当前用户是否为员工
			isStaff() {
				return this.userRole === 'staff' || this.isStaffMode
			},
			
			// 根据角色过滤表单字段
			filteredFormFields() {
				if (!this.formFields || this.formFields.length === 0) {
					return []
				}
				
				// 员工可以填写所有字段
				if (this.isStaff) {
					return this.formFields
				}
				
				// 学生只能填写乙方字段
				return this.formFields.filter(field => {
					const signParty = field.sign_party || ''
					return signParty === 'second_party' || signParty === 'party_b' || signParty === '乙方'
				})
			},
			
			// 渲染合同内容，替换占位符为实际值
			renderContractContent() {
				if (!this.contractContent) return ''
				
				let content = this.contractContent
				// 将表单数据替换到合同内容中的占位符
				Object.keys(this.formData).forEach(key => {
					const value = this.formData[key] || ''
					const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g')
					content = content.replace(regex, value)
				})
				
				return content
			},
			
			// 根据字段配置渲染合同内容，支持用户输入和电子签名字段
			renderContractContentWithFields() {
				if (!this.contractContent) return ''
				
				let content = this.contractContent
				
				// 遍历表单字段配置，根据数据类型处理占位符
				this.formFields.forEach(field => {
					const placeholder = field.placeholder || field.name
					const regex = new RegExp(`\\{\\{${placeholder}\\}\\}`, 'g')
					
					// 根据数据类型渲染不同的内容
					let replacementContent = ''
					
					switch (field.data_type) {
						case 'user_input':
							// 用户输入字段：显示输入框或当前值
							const inputValue = this.formData[placeholder] || field.default_value || ''
							if (inputValue) {
								replacementContent = `<span style="border-bottom: 1px solid #333; padding: 2px 8px; min-width: 80px; display: inline-block;">${inputValue}</span>`
							} else {
								replacementContent = `<span style="border-bottom: 1px solid #ccc; padding: 2px 8px; min-width: 80px; display: inline-block; color: #999;">待填写</span>`
							}
							break
							
						case 'signature':
							// 电子签名字段：显示签名状态或占位符
							const signatureValue = this.formData[placeholder]
							if (signatureValue) {
								replacementContent = `<span style="display: inline-block; border: 1px solid #27ae60; padding: 4px 8px; background: rgba(39, 174, 96, 0.1); color: #27ae60; border-radius: 4px;">✓ 已签名</span>`
							} else {
								replacementContent = `<span style="display: inline-block; border: 1px dashed #29D3B4; padding: 4px 8px; background: rgba(41, 211, 180, 0.05); color: #29D3B4; border-radius: 4px;">✒️ 待签名</span>`
							}
							break
							
						case 'sign_img':
							// 签名图片字段：显示上传状态
							const signImgValue = this.formData[placeholder]
							if (signImgValue) {
								replacementContent = `<span style="display: inline-block; border: 1px solid #67c23a; padding: 4px 8px; background: rgba(103, 194, 58, 0.1); color: #67c23a; border-radius: 4px;">✓ 已上传</span>`
							} else {
								replacementContent = `<span style="display: inline-block; border: 1px dashed #409eff; padding: 4px 8px; background: rgba(64, 158, 255, 0.05); color: #409eff; border-radius: 4px;">📷 待上传</span>`
							}
							break
							
						case 'database':
						case 'system':
						default:
							// 数据库字段和系统字段：直接显示值
							const defaultValue = this.formData[placeholder] || field.default_value || ''
							if (defaultValue) {
								replacementContent = `<span style="font-weight: 500;">${defaultValue}</span>`
							} else {
								replacementContent = `<span style="color: #999; font-style: italic;">系统自动获取</span>`
							}
							break
					}
					
					content = content.replace(regex, replacementContent)
				})
				
				return content
			}
		},
		
		onLoad(options) {
			this.contractId = parseInt(options.contract_id) || 0
			this.studentId = parseInt(options.student_id) || 0
			this.contractName = decodeURIComponent(options.contract_name || '')
			// 新增：支持合同签署记录ID（用于已存在的签署记录）
			this.contractSignId = parseInt(options.contract_sign_id) || 0
			
			// 角色检测
			this.userRole = options.user_role || 'student'
			this.isStaffMode = options.user_role === 'staff'
			
			// 获取用户信息进行角色验证
			this.getUserInfo()
			
			if (this.contractId && this.studentId) {
				this.loadSignForm()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		
		onShow() {
			// 从签名页面返回时，检查是否有新的签名数据
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			if (currentPage.data && currentPage.data.newSignature) {
				const { fieldPlaceholder, signatureData } = currentPage.data.newSignature
				this.formData[fieldPlaceholder] = signatureData
				// 清除临时数据
				delete currentPage.data.newSignature
			}
		},
		
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			// 获取用户信息
			getUserInfo() {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (userInfo) {
						this.userInfo = JSON.parse(userInfo)
						// 如果缓存的用户类型与URL参数不符，以URL参数为准
						if (this.userInfo.user_type && this.userRole === 'student') {
							this.userRole = this.userInfo.user_type === 'staff' ? 'staff' : 'student'
							this.isStaffMode = this.userRole === 'staff'
						}
					}
				} catch (error) {
					console.error('获取用户信息失败:', error)
				}
			},
			
			// 检查字段是否可编辑
			canEditField(field) {
				// 非用户输入类型的字段都不可编辑
				if (field.data_type !== 'user_input') {
					return false
				}
				
				// 员工可以编辑所有用户输入字段
				if (this.isStaff) {
					return true
				}
				
				// 学生只能编辑乙方字段
				const signParty = field.sign_party || ''
				return signParty === 'second_party' || signParty === 'party_b' || signParty === '乙方'
			},
			
			// 获取字段样式类
			getFieldClass(field) {
				const classes = []
				
				if (this.isStaff) {
					const signParty = field.sign_party || ''
					if (signParty === 'first_party' || signParty === 'party_a' || signParty === '甲方') {
						classes.push('first_party_field')
					} else if (signParty === 'second_party' || signParty === 'party_b' || signParty === '乙方') {
						classes.push('second_party_field')
					}
				}
				
				if (!this.canEditField(field)) {
					classes.push('readonly_field')
				}
				
				return classes.join(' ')
			},
			
			// 获取甲乙方标签样式类
			getPartyClass(field) {
				const signParty = field.sign_party || ''
				if (signParty === 'first_party' || signParty === 'party_a' || signParty === '甲方') {
					return 'party_first'
				} else if (signParty === 'second_party' || signParty === 'party_b' || signParty === '乙方') {
					return 'party_second'
				}
				return 'party_unknown'
			},
			
			// 获取甲乙方标签文本
			getPartyLabel(field) {
				const signParty = field.sign_party || ''
				if (signParty === 'first_party' || signParty === 'party_a' || signParty === '甲方') {
					return '甲方'
				} else if (signParty === 'second_party' || signParty === 'party_b' || signParty === '乙方') {
					return '乙方'
				}
				return '未知'
			},
			
			async loadSignForm() {
				this.loading = true
				try {
					console.log('加载签署表单:', { 
						contractId: this.contractId, 
						studentId: this.studentId, 
						contractSignId: this.contractSignId 
					})
					
					let response;
					
					// 优先使用contract_sign_id获取签署表单（支持按签署关系区分字段）
					if (this.contractSignId && this.contractSignId > 0) {
						console.log('使用签署记录ID获取表单配置')
						response = await apiRoute.getStudentContractSignFormBySignId({
							contract_sign_id: this.contractSignId,
							student_id: this.studentId
						})
					} else {
						console.log('使用合同模板ID获取表单配置（兼容模式）')
						// 兼容旧版本：使用contract_id获取签署表单
						response = await apiRoute.getStudentContractSignForm({
							contract_id: this.contractId,
							student_id: this.studentId
						})
					}
					
					if (response.code === 1) {
						const data = response.data
						this.contractInfo = {
							contract_name: data.contract_name,
							contract_type: data.contract_type
						}
						this.contractContent = data.contract_content || ''
						this.formFields = data.form_fields || []
						
						// 初始化表单数据
						this.initFormData()
						
						console.log('表单配置加载成功:', this.formFields)
					} else {
						uni.showToast({
							title: response.msg || '获取表单配置失败',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				} catch (error) {
					console.error('获取表单配置失败:', error)
					uni.showToast({
						title: '获取表单配置失败',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} finally {
					this.loading = false
				}
			},
			
			initFormData() {
				const data = {}
				this.formFields.forEach(field => {
					const key = field.placeholder || field.name
					// 根据数据类型设置初始值
					if (field.data_type === 'database' || field.data_type === 'system') {
						data[key] = field.default_value || ''
					} else {
						data[key] = field.default_value || ''
					}
				})
				this.formData = data
			},
			
			handleDateChange(fieldKey, event) {
				this.formData[fieldKey] = event.detail.value
			},
			
			toggleContentExpand() {
				this.contentExpanded = !this.contentExpanded
			},
			
			goToSignature(field) {
				// 跳转到签名页面
				const fieldPlaceholder = field.placeholder || field.name
				uni.navigateTo({
					url: `/pages-common/contract/contract_sign?field_name=${encodeURIComponent(field.name)}&field_placeholder=${encodeURIComponent(fieldPlaceholder)}&contract_id=${this.contractId}`
				})
			},
			
			chooseSignImage(field) {
				// 选择签名图片
				const fieldPlaceholder = field.placeholder || field.name
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						
						// 上传图片到服务器
						this.uploadSignImage(tempFilePath, fieldPlaceholder)
					},
					fail: (err) => {
						console.error('选择图片失败:', err)
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			},
			
			async uploadSignImage(tempFilePath, fieldPlaceholder) {
				// 显示上传进度
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				
				try {
					// 上传图片到服务器
					const uploadResult = await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: Api_url + '/file/image',
							filePath: tempFilePath,
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync('token') || ''
							},
							success: (uploadRes) => {
								try {
									const result = JSON.parse(uploadRes.data)
									if (result.code === 1) {
										resolve(result.data)
									} else {
										reject(new Error(result.msg || '上传失败'))
									}
								} catch (e) {
									reject(new Error('上传响应解析失败'))
								}
							},
							fail: (err) => {
								reject(new Error('上传请求失败'))
							}
						})
					})
					
					// 上传成功，使用服务器返回的URL
					this.formData[fieldPlaceholder] = uploadResult.url || uploadResult.path || tempFilePath
					
					uni.hideLoading()
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
					
					console.log('签名图片上传成功:', uploadResult)
					
				} catch (error) {
					console.error('签名图片上传失败:', error)
					
					// 上传失败时使用本地临时路径（仅供预览）
					this.formData[fieldPlaceholder] = tempFilePath
					
					uni.hideLoading()
					uni.showToast({
						title: '上传失败，使用本地图片',
						icon: 'none',
						duration: 2000
					})
				}
			},
			
			getFieldHint(field) {
				switch (field.data_type) {
					case 'database':
						return '此信息将从系统数据库自动获取'
					case 'system':
						return '此信息将由系统自动生成'
					default:
						return ''
				}
			},
			
			validateForm() {
				// 验证必填字段
				for (const field of this.formFields) {
					if (field.is_required) {
						const key = field.placeholder || field.name
						const value = this.formData[key]
						if (!value || value.toString().trim() === '') {
							uni.showToast({
								title: `请填写${field.name}`,
								icon: 'none'
							})
							return false
						}
					}
				}
				return true
			},
			
			async submitContract() {
				if (!this.validateForm()) {
					return
				}
				
				this.submitting = true
				try {
					console.log('提交合同签署:', {
						contractId: this.contractId,
						studentId: this.studentId,
						formData: this.formData
					})
					
					// 根据角色提交签署数据
					let response
					if (this.isStaff) {
						// 员工端签署
						response = await apiRoute.signStaffContract({
							contract_id: this.contractId,
							student_id: this.studentId,
							form_data: this.formData,
							personnel_id: this.userInfo?.id || 0
						})
					} else {
						// 学生端签署
						response = await apiRoute.signStudentContract({
							contract_id: this.contractId,
							student_id: this.studentId,
							form_data: this.formData
						})
					}
					
					if (response.code === 1) {
						uni.showToast({
							title: '合同签署成功',
							icon: 'success',
							duration: 2000
						})
						
						setTimeout(() => {
							// 返回合同列表并刷新
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: response.msg || '合同签署失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('合同签署失败:', error)
					uni.showToast({
						title: '合同签署失败',
						icon: 'none'
					})
				} finally {
					this.submitting = false
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.main_box {
	background: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

// 自定义导航栏
.navbar_section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #29D3B4;
	padding: 40rpx 32rpx 20rpx;
	
	// 小程序端适配状态栏
	// #ifdef MP-WEIXIN
	padding-top: 80rpx;
	// #endif
	
	.navbar_back {
		width: 60rpx;
		
		.back_icon {
			color: #fff;
			font-size: 40rpx;
			font-weight: 600;
		}
	}
	
	.navbar_title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}
	
	.navbar_action {
		width: 60rpx;
	}
}

// 合同信息
.contract_info_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	
	.info_header {
		.contract_name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.contract_type {
			font-size: 24rpx;
			color: #666;
		}
	}
}

// 合同内容区域
.contract_content_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	
	.content_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		
		.content_title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}
		
		.content_expand_btn {
			font-size: 24rpx;
			color: #29D3B4;
			padding: 8rpx 16rpx;
			border: 1rpx solid #29D3B4;
			border-radius: 8rpx;
			background: rgba(41, 211, 180, 0.05);
		}
	}
	
	.content_body {
		max-height: 200rpx;
		overflow: hidden;
		transition: max-height 0.3s ease;
		
		&.expanded {
			max-height: none;
		}
		
		.content_text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			word-break: break-all;
		}
	}
}

// 表单区域
.form_section {
	margin: 20rpx;
	
	.form_title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		padding: 0 8rpx;
	}
	
	.form_content {
		.form_field {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			
			.field_label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				font-weight: 500;
				
				.required_mark {
					color: #e74c3c;
					margin-left: 4rpx;
				}
			}
			
			.field_input {
				input {
					width: 100%;
					height: 80rpx;
					padding: 0 20rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #333;
					background: #fff;
					
					&::placeholder {
						color: #999;
					}
					
					&.disabled {
						background: #f5f5f5;
						color: #666;
					}
				}
			}
			
			.field_textarea {
				textarea {
					width: 100%;
					min-height: 120rpx;
					padding: 20rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #333;
					background: #fff;
					
					&::placeholder {
						color: #999;
					}
					
					&.disabled {
						background: #f5f5f5;
						color: #666;
					}
				}
			}
			
			.field_signature {
				.signature_button {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
					border: 2rpx dashed #29D3B4;
					border-radius: 12rpx;
					background: rgba(41, 211, 180, 0.05);
					
					&.signed {
						border-color: #27ae60;
						background: rgba(39, 174, 96, 0.05);
					}
					
					.signature_icon {
						font-size: 32rpx;
						margin-right: 8rpx;
					}
					
					.signature_text {
						font-size: 28rpx;
						color: #29D3B4;
						
						.signed & {
							color: #27ae60;
						}
					}
				}
				
				.signature_preview {
					margin-top: 16rpx;
					
					image {
						width: 100%;
						height: 120rpx;
						border-radius: 8rpx;
						border: 1rpx solid #e0e0e0;
					}
				}
			}
			
			.field_sign_img {
				.sign_img_button {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 80rpx;
					border: 2rpx dashed #409eff;
					border-radius: 12rpx;
					background: rgba(64, 158, 255, 0.05);
					
					&.uploaded {
						border-color: #67c23a;
						background: rgba(103, 194, 58, 0.05);
					}
					
					.sign_img_icon {
						font-size: 32rpx;
						margin-right: 8rpx;
					}
					
					.sign_img_text {
						font-size: 28rpx;
						color: #409eff;
						
						.uploaded & {
							color: #67c23a;
						}
					}
				}
				
				.sign_img_preview {
					margin-top: 16rpx;
					
					image {
						width: 100%;
						height: 120rpx;
						border-radius: 8rpx;
						border: 1rpx solid #e0e0e0;
					}
				}
			}
			
			.field_hint {
				margin-top: 8rpx;
				font-size: 22rpx;
				color: #999;
				font-style: italic;
			}
		}
	}
}

// 加载状态
.loading_section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 32rpx;
	
	.loading_spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f0f0f0;
		border-left: 4rpx solid #29D3B4;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 24rpx;
	}
	
	.loading_text {
		font-size: 28rpx;
		color: #666;
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// 甲乙方标识和字段样式
.party_indicator {
	display: inline-flex;
	align-items: center;
	margin-left: 12rpx;
	
	.party_tag {
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 6rpx;
		font-weight: 500;
		
		&.party_first {
			background: rgba(255, 152, 0, 0.1);
			color: #ff9800;
			border: 1rpx solid rgba(255, 152, 0, 0.3);
		}
		
		&.party_second {
			background: rgba(76, 175, 80, 0.1);
			color: #4caf50;
			border: 1rpx solid rgba(76, 175, 80, 0.3);
		}
		
		&.party_unknown {
			background: rgba(158, 158, 158, 0.1);
			color: #9e9e9e;
			border: 1rpx solid rgba(158, 158, 158, 0.3);
		}
	}
}

// 字段样式区分
.form_field {
	&.first_party_field {
		border-left: 4rpx solid #ff9800;
		background: linear-gradient(90deg, rgba(255, 152, 0, 0.02) 0%, transparent 100%);
		
		.field_label {
			color: #e65100;
		}
	}
	
	&.second_party_field {
		border-left: 4rpx solid #4caf50;
		background: linear-gradient(90deg, rgba(76, 175, 80, 0.02) 0%, transparent 100%);
		
		.field_label {
			color: #2e7d32;
		}
	}
	
	&.readonly_field {
		background: #f8f9fa;
		
		.field_label {
			color: #6c757d;
		}
		
		input, textarea {
			background: #f8f9fa !important;
			color: #6c757d !important;
		}
	}
}

// 提交按钮
.submit_section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 32rpx 40rpx;
	border-top: 1rpx solid #f0f0f0;
	
	// 小程序端适配底部安全区域
	// #ifdef MP-WEIXIN
	padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	// #endif
}
</style>