<template>
	<view class="contract-container">
		<!-- 自定义导航栏 -->
		<view class="custom-nav">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-arrow-left"></text>
			</view>
			<view class="nav-title">我的合同</view>
			<view class="nav-right"></view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" 
				  :class="filterStatus === '' ? 'active' : ''" 
				  @click="filterContract('')">
				全部
			</view>
			<view class="filter-item" 
				  :class="filterStatus === 'unsigned' ? 'active' : ''" 
				  @click="filterContract('unsigned')">
				待签订
			</view>
			<view class="filter-item" 
				  :class="filterStatus === 'signed' ? 'active' : ''" 
				  @click="filterContract('signed')">
				已签订
			</view>
		</view>

		<!-- 合同列表 -->
		<view class="contract-list">
			<view v-if="loading" class="loading-container">
				<uni-load-more status="loading" content-text="加载中..."></uni-load-more>
			</view>

			<view v-else-if="filteredContracts.length === 0" class="empty-container">
				<view class="empty-icon">📄</view>
				<view class="empty-text">暂无合同数据</view>
			</view>

			<view v-else>
				<view v-for="contract in filteredContracts" 
					  :key="contract.id" 
					  class="contract-item" 
					  @click="goToDetail(contract)">
					
					<!-- 合同卡片 -->
					<view class="contract-card">
						<!-- 合同标题和状态 -->
						<view class="contract-header">
							<view class="contract-title">
								<text class="title-text">{{contract.contract_name}}</text>
								<view class="contract-status" :class="needSignButton(contract) ? 'status-unsigned' : 'status-signed'">
									{{needSignButton(contract) ? '待签订' : '已签订'}}
								</view>
							</view>
							<view class="contract-arrow">
								<text class="iconfont icon-arrow-right"></text>
							</view>
						</view>

						<!-- 合同信息 -->
						<view class="contract-info">
							<view class="info-row">
								<text class="info-label">合同类型：</text>
								<text class="info-value">{{contract.contract_type}}</text>
							</view>
							<view class="info-row">
								<text class="info-label">创建时间：</text>
								<text class="info-value">{{formatDate(contract.created_at)}}</text>
							</view>
							<view class="info-row" v-if="contract.sign_time">
								<text class="info-label">签订时间：</text>
								<text class="info-value">{{formatDate(contract.sign_time)}}</text>
							</view>
						</view>

						<!-- 操作按钮 -->
						<view class="contract-actions" v-if="needSignButton(contract)">
							<button class="sign-btn" @click.stop="goToSign(contract)">
								立即签订
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部加载更多 -->
		<view v-if="hasMore && !loading && filteredContracts.length > 0" class="load-more">
			<uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMore"></uni-load-more>
		</view>
	</view>
</template>

<script>
import apiRoute from '@/common/axios.js'

export default {
	data() {
		return {
			loading: true,
			contracts: [],
			filterStatus: '', // '', 'unsigned', 'signed'
			currentPage: 1,
			pageSize: 10,
			hasMore: true,
			loadMoreStatus: 'more'
		}
	},
	computed: {
		filteredContracts() {
			if (this.filterStatus === '') {
				return this.contracts
			} else if (this.filterStatus === 'unsigned') {
				return this.contracts.filter(contract => this.needSignButton(contract))
			} else if (this.filterStatus === 'signed') {
				return this.contracts.filter(contract => !this.needSignButton(contract))
			}
			return this.contracts
		}
	},
	onLoad() {
		this.loadContracts()
	},
	onPullDownRefresh() {
		this.refreshContracts()
	},
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.loadMore()
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 加载合同列表
		async loadContracts(refresh = false) {
			if (refresh) {
				this.currentPage = 1
				this.hasMore = true
				this.contracts = []
			}

			this.loading = true
			this.loadMoreStatus = 'loading'

			try {
				const response = await apiRoute.get('contract/myContracts', {
					page: this.currentPage,
					limit: this.pageSize
				})

				if (response.data.code === 1) {
					const newContracts = response.data.data.data || []
					
					if (refresh) {
						this.contracts = newContracts
					} else {
						this.contracts = [...this.contracts, ...newContracts]
					}

					// 检查是否还有更多数据
					this.hasMore = newContracts.length === this.pageSize
					this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
				} else {
					uni.showToast({
						title: response.data.msg || '加载失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载合同列表失败:', error)
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
				if (refresh) {
					uni.stopPullDownRefresh()
				}
			}
		},

		// 刷新合同列表
		refreshContracts() {
			this.loadContracts(true)
		},

		// 加载更多
		loadMore() {
			if (this.hasMore && !this.loading) {
				this.currentPage++
				this.loadContracts()
			}
		},

		// 筛选合同
		filterContract(status) {
			this.filterStatus = status
		},

		// 前往合同详情
		goToDetail(contract) {
			uni.navigateTo({
				url: `/pages/common/contract/contract_detail?id=${contract.id}`
			})
		},

		// 前往签名页面
		goToSign(contract) {
			uni.navigateTo({
				url: `/pages/common/contract/contract_sign?id=${contract.id}&contractName=${encodeURIComponent(contract.contract_name)}`
			})
		},

		// 判断是否需要显示签订按钮
		needSignButton(contract) {
			return contract.status === 1 && (
				contract.sign_file === null || 
				contract.sign_file === '' || 
				contract.sign_file === undefined
			)
		},


		// 格式化日期
		formatDate(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}`
		}
	}
}
</script>

<style lang="scss" scoped>
.contract-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 自定义导航栏 */
.custom-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	position: sticky;
	top: 0;
	z-index: 100;

	.nav-left {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			font-size: 36rpx;
			color: #333;
		}
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
	}
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	background-color: #fff;
	padding: 24rpx 32rpx;
	margin-bottom: 20rpx;
	border-bottom: 1rpx solid #e5e5e5;

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
		color: #666;
		border-radius: 8rpx;
		transition: all 0.3s;

		&.active {
			background-color: #007ACC;
			color: #fff;
		}
	}
}

/* 合同列表 */
.contract-list {
	padding: 0 20rpx;
}

.contract-item {
	margin-bottom: 24rpx;
}

.contract-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.contract-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 24rpx;

	.contract-title {
		flex: 1;

		.title-text {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			display: block;
			margin-bottom: 12rpx;
		}

		.contract-status {
			display: inline-block;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: 500;

			&.status-unsigned {
				background-color: #fff3cd;
				color: #856404;
				border: 1rpx solid #ffeaa7;
			}

			&.status-signed {
				background-color: #d4edda;
				color: #155724;
				border: 1rpx solid #c3e6cb;
			}
		}
	}

	.contract-arrow {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.contract-info {
	.info-row {
		display: flex;
		margin-bottom: 16rpx;

		.info-label {
			font-size: 26rpx;
			color: #666;
			width: 140rpx;
			flex-shrink: 0;
		}

		.info-value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
		}
	}
}

.contract-actions {
	margin-top: 24rpx;
	padding-top: 24rpx;
	border-top: 1rpx solid #f0f0f0;

	.sign-btn {
		width: 100%;
		height: 72rpx;
		background-color: #007ACC;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: #0056b3;
		}
	}
}

/* 加载状态 */
.loading-container {
	padding: 60rpx 0;
	text-align: center;
}

.empty-container {
	text-align: center;
	padding: 120rpx 40rpx;

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 24rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

.load-more {
	padding: 40rpx 0;
}

/* 动画效果 */
.contract-item {
	animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>