<!--学员合同管理页面-->
<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="student_info_section" v-if="studentInfo">
			<view class="student_name">{{ studentInfo.name }}</view>
			<view class="contract_stats">
				<text class="stat_item">有效合同：{{ contractStats.active_contracts }}个</text>
				<text class="stat_item">剩余课时：{{ contractStats.remaining_hours }}节</text>
			</view>
		</view>
		
		<!-- 合同状态筛选 -->
		<view class="filter_section">
			<view class="filter_tabs">
				<view 
					v-for="tab in statusTabs" 
					:key="tab.value"
					:class="['filter_tab', activeStatus === tab.value ? 'active' : '']"
					@click="changeStatus(tab.value)"
				>
					{{ tab.text }}
					<view class="tab_badge" v-if="tab.count > 0">{{ tab.count }}</view>
				</view>
			</view>
		</view>
		
		<!-- 合同列表 -->
		<view class="contracts_section">
			<view v-if="loading" class="loading_section">
				<view class="loading_text">加载中...</view>
			</view>
			
			<view v-else-if="filteredContracts.length === 0" class="empty_section">
				<view class="empty_icon">📋</view>
				<view class="empty_text">暂无合同</view>
				<view class="empty_hint">签署合同后会在这里显示</view>
			</view>
			
			<view v-else class="contracts_list">
				<view 
					v-for="(contract, index) in filteredContracts" 
					:key="contract.id"
					class="contract_item"
					@click="handleViewContractDetail(contract)"
				>
					<view class="contract_header">
						<view class="contract_info">
							<view class="contract_name">{{ contract.contract_name }}</view>
							<view class="contract_number">合同编号：{{ contract.contract_no }}</view>
						</view>
						<view class="contract_status" :class="contract.status">
							{{ getStatusText(contract.status) }}
						</view>
					</view>
					
					<view class="contract_content">
						<view class="contract_details">
							<view class="detail_row">
								<text class="detail_label">课程类型：</text>
								<text class="detail_value">{{ contract.course_type }}</text>
							</view>
							<view class="detail_row">
								<text class="detail_label">总课时：</text>
								<text class="detail_value">{{ contract.total_hours }}节</text>
							</view>
							<view class="detail_row">
								<text class="detail_label">剩余课时：</text>
								<text class="detail_value remaining">{{ contract.remaining_hours }}节</text>
							</view>
							<view class="detail_row">
								<text class="detail_label">合同金额：</text>
								<text class="detail_value amount">¥{{ contract.total_amount }}</text>
							</view>
						</view>
						
						<view class="contract_dates">
							<view class="date_row">
								<text class="date_label">签署日期：</text>
								<text class="date_value">{{ formatDate(contract.sign_date) }}</text>
							</view>
							<view class="date_row">
								<text class="date_label">生效日期：</text>
								<text class="date_value">{{ formatDate(contract.start_date) }}</text>
							</view>
							<view class="date_row">
								<text class="date_label">到期日期：</text>
								<text class="date_value">{{ formatDate(contract.end_date) }}</text>
							</view>
						</view>
					</view>
					
					<view class="contract_progress" v-if="contract.status === 'active'">
						<view class="progress_info">
							<text class="progress_text">课时使用进度</text>
							<text class="progress_percent">{{ getProgressPercent(contract) }}%</text>
						</view>
						<view class="progress_bar">
							<view class="progress_fill" :style="{ width: getProgressPercent(contract) + '%' }"></view>
						</view>
					</view>
					
					<view class="contract_actions" @click.stop>
						<view 
							v-if="contract.status === 3"
							class="action_button secondary_button"
							@click="handleViewDetail(index, $event)"
						>
							查看详情
						</view>
						
						<view 
							v-if="contract.status === 3 && contract.can_renew"
							class="action_button primary_button"
							@click="handleRenewContract(index, $event)"
						>
							续约
						</view>
						
						<view 
							v-if="contract.status === 1"
							class="action_button sign_button"
							@click="handleSignContract(index, $event)"
						>
							签署合同
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load_more_section" v-if="!loading && hasMore">
			<view 
				class="load_more_button"
				@click="loadMoreContracts($event)"
				:class="{ 'loading': loadingMore }"
			>
				{{ loadingMore ? '加载中...' : '加载更多' }}
			</view>
		</view>
		
		<!-- 合同详情弹窗 -->
		<view class="contract_popup" v-if="showContractPopup" @click="closeContractPopup">
			<view class="popup_content" @click.stop>
				<view class="popup_header">
					<view class="popup_title">合同详情</view>
					<view class="popup_close" @click="closeContractPopup">×</view>
				</view>
				
				<view class="popup_contract_detail" v-if="selectedContract">
					<view class="detail_section">
						<view class="section_title">基本信息</view>
						<view class="info_grid">
							<view class="info_row">
								<text class="info_label">合同名称：</text>
								<text class="info_value">{{ selectedContract.contract_name }}</text>
							</view>
							<view class="info_row">
								<text class="info_label">合同编号：</text>
								<text class="info_value">{{ selectedContract.contract_no }}</text>
							</view>
							<view class="info_row">
								<text class="info_label">课程类型：</text>
								<text class="info_value">{{ selectedContract.course_type }}</text>
							</view>
							<view class="info_row">
								<text class="info_label">总课时：</text>
								<text class="info_value">{{ selectedContract.total_hours }}节</text>
							</view>
							<view class="info_row">
								<text class="info_label">剩余课时：</text>
								<text class="info_value">{{ selectedContract.remaining_hours }}节</text>
							</view>
							<view class="info_row">
								<text class="info_label">合同金额：</text>
								<text class="info_value">¥{{ selectedContract.total_amount }}</text>
							</view>
						</view>
					</view>
					
					<view class="detail_section">
						<view class="section_title">时间信息</view>
						<view class="info_grid">
							<view class="info_row">
								<text class="info_label">签署日期：</text>
								<text class="info_value">{{ formatFullDate(selectedContract.sign_date) }}</text>
							</view>
							<view class="info_row">
								<text class="info_label">生效日期：</text>
								<text class="info_value">{{ formatFullDate(selectedContract.start_date) }}</text>
							</view>
							<view class="info_row">
								<text class="info_label">到期日期：</text>
								<text class="info_value">{{ formatFullDate(selectedContract.end_date) }}</text>
							</view>
						</view>
					</view>
					
					<view class="detail_section" v-if="selectedContract.terms">
						<view class="section_title">合同条款</view>
						<view class="contract_terms">{{ getFilledContractContent(selectedContract) }}</view>
					</view>
				</view>
				
				<view class="popup_actions">
					<view 
						v-if="selectedContract && selectedContract.contract_file_url"
						class="popup_button primary_popup_button" 
						@click="downloadContract"
					>
						下载合同
					</view>
					
					<view 
						class="popup_button secondary_popup_button"
						@click="closeContractPopup"
					>
						关闭
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js'
	
	export default {
		data() {
			return {
				studentId: 0,
				studentInfo: {},
				contractsList: [],
				filteredContracts: [],
				contractStats: {},
				loading: false,
				loadingMore: false,
				hasMore: true,
				currentPage: 1,
				activeStatus: 'all',
				showContractPopup: false,
				selectedContract: null,
				statusTabs: [
					{ value: 'all', text: '全部', count: 0 },
					{ value: 'active', text: '生效中', count: 0 },
					{ value: 'pending', text: '待签署', count: 0 },
					{ value: 'expired', text: '已到期', count: 0 },
					{ value: 'terminated', text: '已终止', count: 0 }
				]
			}
		},
		
		onLoad(options) {
			this.studentId = parseInt(options.student_id) || 0
			if (this.studentId) {
				this.initPage()
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
			}
		},
		
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			async initPage() {
				await this.loadStudentInfo()
				await this.loadContracts()
				this.updateStatusCounts()
			},
			
			async loadStudentInfo() {
				try {
					const response = await apiRoute.getStudentInfo({
						student_id: this.studentId
					})
					
					if (response.code === 1) {
						this.studentInfo = response.data
					} else {
						// 如果API失败，使用模拟数据
						console.warn('获取学员信息失败，使用模拟数据:', response.msg)
						this.studentInfo = {
							id: this.studentId,
							name: '学员' + this.studentId
						}
					}
				} catch (error) {
					console.error('获取学员信息失败:', error)
					// 使用模拟数据作为备用
					this.studentInfo = {
						id: this.studentId,
						name: '学员' + this.studentId
					}
				}
			},
			
			async loadContracts() {
				this.loading = true
				try {
					console.log('加载合同列表:', this.studentId)
					
					// 调用真实API
					const response = await apiRoute.getStudentContracts({
						student_id: this.studentId,
						status: this.activeStatus === 'all' ? '' : this.activeStatus,
						page: this.currentPage,
						limit: 10
					})
					
					if (response.code === 1) {
						const newList = response.data.list || []
						if (this.currentPage === 1) {
							this.contractsList = newList
						} else {
							this.contractsList = [...this.contractsList, ...newList]
						}
						
						this.hasMore = response.data.has_more || false
						this.contractStats = response.data.stats || {}
						this.applyStatusFilter()
						console.log('合同数据加载成功:', this.contractsList)
					} else {
						console.error('API返回错误:', response.msg)
						// 如果API失败，使用模拟数据作为备用
						this.loadMockContracts()
					}
				} catch (error) {
					console.error('获取合同列表失败:', error)
					// 如果API失败，使用模拟数据作为备用
					this.loadMockContracts()
				} finally {
					this.loading = false
					this.loadingMore = false
				}
			},
			
			// 备用的模拟数据加载方法
			loadMockContracts() {
				console.log('使用模拟数据')
				const mockData = {
					list: [
						{
							sign_id: 1,
							contract_id: 1,
							contract_name: '少儿体适能训练合同',
							course_type: '少儿体适能',
							total_hours: 48,
							remaining_hours: 32,
							used_hours: 16,
							total_amount: '4800.00',
							status: 1, // 1=待签署
							status_text: '待签署',
							sign_date: null,
							create_date: '2024-01-15',
							can_renew: false,
							contract_file_url: '/uploads/contracts/contract_001.pdf'
						}
					],
					total: 1,
					has_more: false,
					stats: {
						active_contracts: 0,
						pending_contracts: 1,
						remaining_hours: 32
					}
				}
				
				if (this.currentPage === 1) {
					this.contractsList = mockData.list
				} else {
					this.contractsList = [...this.contractsList, ...mockData.list]
				}
				
				this.hasMore = mockData.has_more
				this.contractStats = mockData.stats
				this.applyStatusFilter()
			},
			
			async loadMoreContracts(e) {
				// 阻止事件冒泡（如果事件存在）
				if (e && typeof e.stopPropagation === 'function') {
					e.stopPropagation()
				}
				if (this.loadingMore || !this.hasMore) return
				
				this.loadingMore = true
				this.currentPage++
				await this.loadContracts()
			},
			
			changeStatus(status) {
				this.activeStatus = status
				this.currentPage = 1 // 重置页码
				this.loadContracts() // 重新加载数据
			},
			
			applyStatusFilter() {
				if (this.activeStatus === 'all') {
					this.filteredContracts = [...this.contractsList]
				} else {
					// 状态映射：前端字符串状态 -> 后端数字状态
					const statusMapping = {
						'pending': 1,  // 待签署
						'signed': 2,   // 已签署
						'active': 3,   // 已生效
						'expired': 4,  // 已失效
						'terminated': 4 // 已终止(映射到已失效)
					}
					
					const targetStatus = statusMapping[this.activeStatus]
					if (targetStatus) {
						this.filteredContracts = this.contractsList.filter(contract => contract.status === targetStatus)
					} else {
						// 如果没有映射关系，按原状态筛选
						this.filteredContracts = this.contractsList.filter(contract => contract.status === this.activeStatus)
					}
				}
			},
			
			updateStatusCounts() {
				// 优先使用API返回的统计数据
				if (this.contractStats) {
					this.statusTabs.forEach(tab => {
						switch(tab.value) {
							case 'all':
								tab.count = this.contractStats.total_contracts || this.contractsList.length
								break
							case 'pending':
								tab.count = this.contractStats.pending_contracts || 0
								break
							case 'active':
								tab.count = this.contractStats.active_contracts || 0
								break
							case 'expired':
								tab.count = this.contractStats.expired_contracts || 0
								break
							case 'terminated':
								tab.count = 0 // 通常终止状态较少
								break
						}
					})
				} else {
					// 备用：手动统计
					const counts = { 1: 0, 2: 0, 3: 0, 4: 0 }
					this.contractsList.forEach(contract => {
						counts[contract.status] = (counts[contract.status] || 0) + 1
					})
					
					this.statusTabs.forEach(tab => {
						switch(tab.value) {
							case 'all':
								tab.count = this.contractsList.length
								break
							case 'pending':
								tab.count = counts[1] || 0 // 待签署
								break
							case 'active':
								tab.count = counts[3] || 0 // 已生效
								break
							case 'expired':
								tab.count = counts[4] || 0 // 已失效
								break
							case 'terminated':
								tab.count = 0
								break
						}
					})
				}
			},
			
			getStatusText(status) {
				// 兼容数字状态和字符串状态
				const statusMap = {
					// 数字状态（后端使用）
					1: '待签署',
					2: '已签署', 
					3: '已生效',
					4: '已失效',
					// 字符串状态（前端显示）
					'pending': '待签署',
					'signed': '已签署',
					'active': '已生效',
					'expired': '已失效',
					'terminated': '已终止'
				}
				return statusMap[status] || status
			},
			
			getProgressPercent(contract) {
				if (contract.total_hours === 0) return 0
				return Math.round((contract.used_hours / contract.total_hours) * 100)
			},
			
			formatDate(dateString) {
				if (!dateString) return '未设置'
				const date = new Date(dateString)
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${month}-${day}`
			},
			
			formatFullDate(dateString) {
				if (!dateString) return '未设置'
				const date = new Date(dateString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			
			
			closeContractPopup(e) {
				// 阻止事件冒泡（如果事件存在）
				if (e && typeof e.stopPropagation === 'function') {
					e.stopPropagation()
				}
				this.showContractPopup = false
				this.selectedContract = null
			},
			
			async renewContract(contract) {
				uni.showModal({
					title: '确认续约',
					content: '确定要续约此合同吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log('续约合同:', contract.id)
								
								// 模拟API调用
								await new Promise(resolve => setTimeout(resolve, 1000))
								const mockResponse = { code: 1, message: '续约申请已提交' }
								
								if (mockResponse.code === 1) {
									uni.showToast({
										title: '续约申请已提交',
										icon: 'success'
									})
								} else {
									uni.showToast({
										title: mockResponse.message || '续约申请失败',
										icon: 'none'
									})
								}
							} catch (error) {
								console.error('续约申请失败:', error)
								uni.showToast({
									title: '续约申请失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			
			async signContract(contract) {
				uni.showModal({
					title: '确认签署',
					content: '确定要签署此合同吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log('签署合同:', contract.id)
								
								// 模拟API调用
								await new Promise(resolve => setTimeout(resolve, 1500))
								const mockResponse = { code: 1, message: '合同签署成功' }
								
								if (mockResponse.code === 1) {
									uni.showToast({
										title: '合同签署成功',
										icon: 'success'
									})
									
									// 更新合同状态
									const contractIndex = this.contractsList.findIndex(c => c.id === contract.id)
									if (contractIndex !== -1) {
										this.contractsList[contractIndex].status = 'active'
										this.contractsList[contractIndex].sign_date = new Date().toISOString().split('T')[0]
									}
									
									this.applyStatusFilter()
									this.updateStatusCounts()
								} else {
									uni.showToast({
										title: mockResponse.message || '合同签署失败',
										icon: 'none'
									})
								}
							} catch (error) {
								console.error('合同签署失败:', error)
								uni.showToast({
									title: '合同签署失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			
			async downloadContract(e) {
				// 阻止事件冒泡（如果事件存在）
				if (e && typeof e.stopPropagation === 'function') {
					e.stopPropagation()
				}
				
				if (!this.selectedContract) {
					uni.showToast({
						title: '请先选择合同',
						icon: 'none'
					})
					return
				}
				
				try {
					uni.showLoading({
						title: '准备下载...'
					})
					
					// 先获取下载信息
					const downloadInfo = await apiRoute.downloadStudentContract({
						contract_id: this.selectedContract.contract_id,
						student_id: this.studentId
					})
					
					if (downloadInfo.code !== 1) {
						uni.hideLoading()
						uni.showToast({
							title: downloadInfo.msg || '获取下载信息失败',
							icon: 'none'
						})
						return
					}
					
					uni.hideLoading()
					
					// 构建下载URL
					const downloadUrl = `/api/student/contract/download-file?contract_id=${this.selectedContract.contract_id}&student_id=${this.studentId}`
					const baseUrl = 'http://localhost:20080'
					const fullUrl = baseUrl + downloadUrl
					
					// 在小程序中使用下载功能
					// #ifdef MP-WEIXIN
					uni.downloadFile({
						url: fullUrl,
						header: {
							'token': uni.getStorageSync('token') || ''
						},
						success: (res) => {
							if (res.statusCode === 200) {
								// 保存到相册或打开文档
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: (saveRes) => {
										uni.showToast({
											title: '下载成功',
											icon: 'success'
										})
										
										// 可以选择打开文件
										uni.openDocument({
											filePath: saveRes.savedFilePath,
											success: () => {
												console.log('打开文档成功')
											},
											fail: (err) => {
												console.log('打开文档失败:', err)
											}
										})
									},
									fail: (err) => {
										console.error('保存文件失败:', err)
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
									}
								})
							} else {
								uni.showToast({
									title: '下载失败',
									icon: 'none'
								})
							}
						},
						fail: (err) => {
							console.error('下载失败:', err)
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							})
						}
					})
					// #endif
					
					// 在H5中直接打开下载链接
					// #ifdef H5
					window.open(fullUrl, '_blank')
					uni.showToast({
						title: '开始下载',
						icon: 'success'
					})
					// #endif
					
				} catch (error) {
					uni.hideLoading()
					console.error('下载合同失败:', error)
					uni.showToast({
						title: '下载失败',
						icon: 'none'
					})
				}
			},
			
			// 获取填充后的合同内容
			getFilledContractContent(contract) {
				if (!contract || !contract.terms) {
					return '暂无合同内容'
				}
				
				// 如果合同已签署且有填写数据，则替换占位符
				if (contract.status >= 2 && contract.form_data) {
					let content = contract.terms
					const formData = typeof contract.form_data === 'string' 
						? JSON.parse(contract.form_data) 
						: contract.form_data
					
					// 替换所有占位符
					Object.keys(formData).forEach(key => {
						const value = formData[key] || ''
						// 处理不同格式的占位符
						const patterns = [
							new RegExp(`{{${key}}}`, 'g'),
							new RegExp(`{{\\s*${key}\\s*}}`, 'g'),
							new RegExp(`{\\{${key}\\}}`, 'g')
						]
						
						patterns.forEach(pattern => {
							content = content.replace(pattern, value)
						})
					})
					
					return content
				}
				
				// 未签署的合同显示原始内容
				return contract.terms
			},
			
			// 处理查看详情按钮点击
			handleViewDetail(index, event) {
				// 阻止事件冒泡
				if (event && typeof event.stopPropagation === 'function') {
					event.stopPropagation()
				}
				const contract = this.filteredContracts[index]
				if (contract) {
					this.selectedContract = contract
					this.showContractPopup = true
				}
			},
			
			// 处理合同项目点击 - 直接跳转到签署页面
			handleViewContractDetail(contract) {
				// 如果合同状态为未签署(status=1)，跳转到签署页面
				if (contract.status === 1 || contract.status === '1') {
					uni.navigateTo({
						url: `/pages-common/contract/contract_form?contract_id=${contract.contract_id}&student_id=${this.studentId}&contractName=${encodeURIComponent(contract.contract_name)}`
					})
				} else {
					// 已签署的合同显示详情弹窗
					this.selectedContract = contract
					this.showContractPopup = true
				}
			},
			
			// 处理续约按钮点击
			handleRenewContract(index, event) {
				// 阻止事件冒泡
				if (event && typeof event.stopPropagation === 'function') {
					event.stopPropagation()
				}
				const contract = this.filteredContracts[index]
				if (contract) {
					this.renewContract(contract)
				}
			},
			
			// 处理签署合同按钮点击
			handleSignContract(index, event) {
				// 阻止事件冒泡
				if (event && typeof event.stopPropagation === 'function') {
					event.stopPropagation()
				}
				console.log('handleSignContract called with index:', index)
				const contract = this.filteredContracts[index]
				if (contract) {
					console.log('Navigating to contract sign page:', contract)
					// 跳转到合同签署表单页面（支持表单填写和签名）
					uni.navigateTo({
						url: `/pages-common/contract/contract_form?contract_id=${contract.contract_id}&student_id=${this.studentId}&contractName=${encodeURIComponent(contract.contract_name)}`
					})
				}
			},
			
		}
	}
</script>

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

// 自定义导航栏
.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;
	}
}

// 学员信息
.student_info_section {
	background: #fff;
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #f0f0f0;
	
	.student_name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.contract_stats {
		display: flex;
		gap: 24rpx;
		
		.stat_item {
			font-size: 24rpx;
			color: #666;
		}
	}
}

// 状态筛选
.filter_section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 24rpx 32rpx;
	
	.filter_tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		
		.filter_tab {
			position: relative;
			padding: 10rpx 20rpx;
			font-size: 24rpx;
			color: #666;
			background: #f8f9fa;
			border-radius: 16rpx;
			
			&.active {
				color: #fff;
				background: #29D3B4;
			}
			
			.tab_badge {
				position: absolute;
				top: -6rpx;
				right: -6rpx;
				background: #ff4757;
				color: #fff;
				font-size: 18rpx;
				padding: 2rpx 6rpx;
				border-radius: 10rpx;
				min-width: 16rpx;
				text-align: center;
			}
		}
	}
}

// 合同列表
.contracts_section {
	margin: 0 20rpx;
	
	.loading_section, .empty_section {
		background: #fff;
		border-radius: 16rpx;
		padding: 80rpx 32rpx;
		text-align: center;
		
		.loading_text, .empty_text {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 12rpx;
		}
		
		.empty_icon {
			font-size: 80rpx;
			margin-bottom: 24rpx;
		}
		
		.empty_hint {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.contracts_list {
		.contract_item {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
			
			.contract_header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 20rpx;
				
				.contract_info {
					flex: 1;
					
					.contract_name {
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.contract_number {
						font-size: 24rpx;
						color: #666;
					}
				}
				
				.contract_status {
					font-size: 22rpx;
					padding: 6rpx 12rpx;
					border-radius: 12rpx;
					
					&.active {
						color: #27ae60;
						background: rgba(39, 174, 96, 0.1);
					}
					
					&.pending {
						color: #f39c12;
						background: rgba(243, 156, 18, 0.1);
					}
					
					&.expired {
						color: #e74c3c;
						background: rgba(231, 76, 60, 0.1);
					}
					
					&.terminated {
						color: #95a5a6;
						background: rgba(149, 165, 166, 0.1);
					}
				}
			}
			
			.contract_content {
				display: flex;
				gap: 32rpx;
				margin-bottom: 20rpx;
				
				.contract_details {
					flex: 1;
					
					.detail_row {
						display: flex;
						margin-bottom: 8rpx;
						
						.detail_label {
							font-size: 24rpx;
							color: #666;
							min-width: 120rpx;
						}
						
						.detail_value {
							font-size: 24rpx;
							color: #333;
							
							&.remaining {
								color: #29D3B4;
								font-weight: 600;
							}
							
							&.amount {
								color: #e74c3c;
								font-weight: 600;
							}
						}
					}
				}
				
				.contract_dates {
					.date_row {
						display: flex;
						margin-bottom: 8rpx;
						
						.date_label {
							font-size: 22rpx;
							color: #999;
							min-width: 100rpx;
						}
						
						.date_value {
							font-size: 22rpx;
							color: #666;
						}
					}
				}
			}
			
			.contract_progress {
				margin-bottom: 20rpx;
				
				.progress_info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					
					.progress_text {
						font-size: 22rpx;
						color: #666;
					}
					
					.progress_percent {
						font-size: 22rpx;
						color: #29D3B4;
						font-weight: 600;
					}
				}
				
				.progress_bar {
					height: 8rpx;
					background: #f0f0f0;
					border-radius: 4rpx;
					overflow: hidden;
					
					.progress_fill {
						height: 100%;
						background: linear-gradient(90deg, #29D3B4, #26c6a0);
						border-radius: 4rpx;
						transition: width 0.3s ease;
					}
				}
			}
			
			.contract_actions {
				display: flex;
				gap: 16rpx;
				justify-content: flex-end;
				
				.action_button {
					padding: 16rpx 32rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					cursor: pointer;
					transition: all 0.3s ease;
					border: none;
					
					&.secondary_button {
						background: #f8f9fa;
						color: #666;
						
						&:active {
							background: #e9ecef;
						}
					}
					
					&.primary_button {
						background: #29D3B4;
						color: #fff;
						
						&:active {
							background: #26c6a0;
						}
					}
					
					&.sign_button {
						background: #ff6b35;
						color: #fff;
						
						&:active {
							background: #e55a2b;
						}
					}
				}
			}
		}
	}
}

// 加载更多
.load_more_section {
	padding: 40rpx 20rpx 80rpx;
	
	.load_more_button {
		padding: 24rpx 32rpx;
		background: transparent;
		color: #666;
		font-size: 28rpx;
		text-align: center;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&:active {
			background: #f5f5f5;
		}
		
		&.loading {
			color: #999;
			cursor: not-allowed;
		}
	}
}

// 合同详情弹窗
.contract_popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	
	.popup_content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-height: 80vh;
		overflow: hidden;
		
		.popup_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #f0f0f0;
			
			.popup_title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
			
			.popup_close {
				font-size: 48rpx;
				color: #999;
				font-weight: 300;
			}
		}
		
		.popup_contract_detail {
			padding: 32rpx;
			max-height: 60vh;
			overflow-y: auto;
			
			.detail_section {
				margin-bottom: 32rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.section_title {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 16rpx;
					padding-bottom: 8rpx;
					border-bottom: 2rpx solid #29D3B4;
				}
				
				.info_grid {
					.info_row {
						display: flex;
						margin-bottom: 12rpx;
						
						.info_label {
							font-size: 26rpx;
							color: #666;
							min-width: 120rpx;
						}
						
						.info_value {
							font-size: 26rpx;
							color: #333;
							flex: 1;
						}
					}
				}
				
				.contract_terms {
					font-size: 24rpx;
					color: #666;
					line-height: 1.6;
					white-space: pre-line;
				}
			}
		}
		
		.popup_actions {
			padding: 24rpx 32rpx;
			display: flex;
			gap: 16rpx;
			border-top: 1px solid #f0f0f0;
			
			.popup_button {
				flex: 1;
				padding: 16rpx 24rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				text-align: center;
				cursor: pointer;
				transition: all 0.3s ease;
				border: none;
				
				&.primary_popup_button {
					background: #3498db;
					color: #fff;
					
					&:active {
						background: #2980b9;
					}
				}
				
				&.secondary_popup_button {
					background: #f8f9fa;
					color: #666;
					
					&:active {
						background: #e9ecef;
					}
				}
			}
		}
	}
}
</style>