<template>
	
	<view class="contract-page">
		<!-- 顶部导航栏 -->
		<customNavbar title="我的合同" />

		<!-- Tabs -->
		<view class="tab-wrapper">
			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#2979ff"
				activeColor="#2979ff" itemStyle="padding: 0 30rpx;"></u-tabs>
		</view>

	
		<DateFilter
		  :start="startDate"
		  :end="endDate"
		  @update:start="startDate = $event"
		  @update:end="endDate = $event"
		  @change="onDateFilterChange"
		/>

		<!-- 合同列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="isRefreshing" @refresherrefresh="refresh">
			<view v-if="contracts.length > 0" class="contract-list">
				<view class="contract-card" v-for="item in contracts" :key="item.id" @click="goDetail(item)">
					<image class="contract-cover" :src="item.coverUrl || defaultCover" mode="aspectFill" />
		
					<view class="contract-info">
						<view class="top-row">
							<text class="asset-name">{{ item.assetName }}</text>
							<u-icon name="arrow-right" size="28" color="#ccc" />
						</view>
						<view class="asset-room">{{ item.assetRoom || "—" }}</view>
						<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
		
						<view :class="['status-tag', item.status]">
							{{ getStatusText(item.status) }}
						</view>
					</view>
				</view>
		
				<u-loadmore :status="loadStatus" />
			</view>
		
			<view v-else class="empty">
				<u-empty mode="list" text="暂无合同记录" />
			</view>
		</scroll-view>


	</view>

</template>


<script>
	import DateFilter from '../../components/DatePicker/DateFilter.vue';
	export default {
		  components: { DateFilter },
		data() {
			return {
				tabList: [{
						name: "全部",
						value: "all"
					},
					{
						name: "待签署",
						value: "pending"
					},
					{
						name: "已签署",
						value: "signed"
					},
					{
						name: "已过期",
						value: "expired"
					},
				],

				currentTab: 0,
				statusFilter: "all",

				// --- 时间筛选 ---
				startDate: "",
				endDate: "",
				// 可选：限制日期范围
				minDate: "2000-01-01",
				maxDate: "2099-12-31",
				contracts: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				loadStatus: "loadmore",
				isRefreshing: false,
				defaultCover: "/static/img/index/swiper/swiper3.jpg",
			};
		},

		onLoad() {
			this.loadContracts(true);
		},

		methods: {
			onTabChange(index) {
				this.currentTab = index;
				this.statusFilter = this.tabList[index].value;
				this.resetAndLoad();
			},
			  onDateFilterChange({ start, end }) {
			     this.resetAndLoad();
			   },
			   
			formatDate(time) {
				const d = new Date(time);
				const m = String(d.getMonth() + 1).padStart(2, "0");
				const day = String(d.getDate()).padStart(2, "0");
				return `${d.getFullYear()}-${m}-${day}`;
			},

			resetAndLoad() {
				this.pageNo = 1;
				this.contracts = [];
				this.loadStatus = "loading";
				this.loadContracts(true);
			},

			/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
			loadContracts(isInit = false) {
				this.loadStatus = "loading";

				setTimeout(() => {
					let mockAll = [{
							id: 1,
							assetName: '金辉大厦',
							assetRoom: '502',
							coverUrl: '',
							status: 'pending',
							startDate: '2025-01-01',
							endDate: '2025-12-31'
						},
						{
							id: 2,
							assetName: '东方广场',
							assetRoom: '',
							status: 'signed',
							startDate: '2024-03-01',
							endDate: '2025-03-01'
						},
						{
							id: 3,
							assetName: '海景公寓',
							assetRoom: 'A-1201',
							status: 'expired',
							startDate: '2023-01-01',
							endDate: '2024-01-01'
						},
						{
							id: 4,
							assetName: '富力中心',
							assetRoom: '1699',
							status: 'pending',
							startDate: '2024-10-01',
							endDate: '2025-10-01'
						},
						{
							id: 5,
							assetName: '财富大厦',
							assetRoom: '2308',
							status: 'signed',
							startDate: '2023-06-01',
							endDate: '2024-06-01'
						}
					];

					// 状态过滤
					if (this.statusFilter !== "all") {
						mockAll = mockAll.filter(i => i.status === this.statusFilter);
					}

					// 时间过滤
					if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
					if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);

					// 分页
					this.total = mockAll.length;
					const start = (this.pageNo - 1) * this.pageSize;
					const pageList = mockAll.slice(start, start + this.pageSize);

					if (this.pageNo === 1) {
						this.contracts = pageList;
					} else {
						this.contracts = [...this.contracts, ...pageList];
					}

					this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
					this.isRefreshing = false;
				}, 400);
			},

			refresh() {
				this.isRefreshing = true;
				this.resetAndLoad();
			},

			loadMore() {
				if (this.loadStatus !== "loadmore") return;
				this.pageNo++;
				this.loadContracts();
			},

			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/contractDetail?id=${item.id}`,
				});
			},

			getStatusText(status) {
				switch (status) {
					case "pending":
						return "待签署";
					case "signed":
						return "已签署";
					case "expired":
						return "已过期";
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.contract-page {
		background-color: #f8f8f8;
		padding-top: 175rpx;
		/* 给导航栏留空间 */
		min-height: 100vh;
	}

	.scroll-content {
		height: calc(100vh - 100rpx);
	}

	.contract-list {
		padding: 20rpx;
	}

	.contract-card {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.contract-cover {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		background-color: #f0f0f0;
		flex-shrink: 0;
	}

	.contract-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.top-row {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.asset-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			flex: 1;
		}
	}

	.asset-room {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	.date-range {
		font-size: 24rpx;
		color: #888;
		margin-top: 8rpx;
	}

	.status-tag {
		position: absolute;
		bottom: 10rpx;
		right: 0rpx;
		padding: 6rpx 16rpx;
		border-radius: 24rpx;
		font-size: 24rpx;

		&.pending {
			background: #fff8e1;
			color: #ff9800;
		}

		&.signed {
			background: #e8f5e9;
			color: #4caf50;
		}

		&.expired {
			background: #fbe9e7;
			color: #e53935;
		}
	}

	.empty {
		margin-top: 200rpx;
	}

	.tab-wrapper {
		background-color: #ffffff;
		padding: 10rpx 0;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
		position: sticky;
		top: 0;
		z-index: 10;
	}

</style>