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

		<!-- Tabs -->
		<view class="tab-wrapper">
			<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#EA4D3E" activeColor="#EA4D3E"
				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.contractNo" @click="goDetail(item)">
					<image class="contract-cover" :src="staticHost + (item.coverImgUrl || defaultCover)" mode="aspectFill" />

					<view class="contract-info">
						<view class="top-row">
							<text class="asset-name">{{ $ellipsis(item.contractName,12) }}</text>
							<u-icon name="arrow-right" size="28" color="#ccc" />
						</view>
						<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>

						<view :class="['status-tag', item.signStatus]">
							{{ getStatusText(item.signStatus) }}
						</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: "2199-12-31",
			contracts: [],
			pageNo: 1,
			pageSize: 10,
			total: 0,
			loadStatus: "more", // ✅ 修复为官方正确值
			isRefreshing: false,
			defaultCover: "/public/static/index/assets.jpg",
		};
	},
	onLoad(options) {
		// loadContracts 移到 onShow 中，等 token 校验通过后再加载
	},
	async onShow() {
		try {
			await this.$checkToken(this.$getToken())
			// token 有效，继续执行
			this.checkOaAuth()
			this.loadContracts()
		} catch (e) {
			// token 无效，$checkToken 内部已处理跳转登录页
			return
		}
	},
	// ✅ 删除和 scroll-view 冲突的 onReachBottom
	computed: {
		staticHost() {
			return this.$config.staticUrl
		}
	},
	methods: {
		checkOaAuth() {
			const token = this.$getToken()
			if (!token) return
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || !userInfo.oaAuth) {
				uni.showModal({
					title: '提示',
					content: '您还未实名认证，请先完成实名认证',
					showCancel: false,
					confirmText: '去认证',
					success: () => {
						uni.redirectTo({ url: '/pages-biz/profile/profile' })
					}
				})
			}
		},
		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 = "more"; // ✅ 修复
			this.loadContracts();
		},
		loadContracts() {
			// ✅ 正确判断加载状态
			if (this.loadStatus !== 'more') return;
			this.loadStatus = 'loading';

			this.$u.post('/contract/queryPage', {
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate,
				signStatus: this.statusFilter
			}, {
				WT: this.$getToken()
			}).then(result => {
				const rows = result.data.result || [];

				if (this.pageNo === 1 && rows.length === 0) {
					this.contracts = [];
					this.loadStatus = 'nomore';
					return;
				}

				this.contracts = this.contracts.concat(rows);

				if (rows.length < this.pageSize) {
					this.loadStatus = 'nomore';
				} else {
					this.pageNo++;
					this.loadStatus = 'more'; // ✅ 修复
				}
			}).catch(err => {
				console.log("获取合同信息失败：", err);
				this.loadStatus = 'more'; // ✅ 异常恢复
			}).finally(() => {
				this.isRefreshing = false;
			});
		},
		refresh() {
			this.isRefreshing = true;
			this.resetAndLoad();
		},
		loadMore() {
			if (this.loadStatus !== "more") return; // ✅ 修复
			this.loadContracts();
		},
		goDetail(item) {
			uni.navigateTo({
				url: `/pages-biz/contract/contractDetail?contractNo=${item.contractNo}`,
			});
		},
		getStatusText(status) {
			switch (status) {
				case "pending": return "待签署";
				case "signed": return "已签署";
				case "expired": return "已过期";
				default: return "未知";
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.contract-page {
	background-color: #f8f8f8;
	padding-top: 170rpx;
	min-height: 100vh;
	box-sizing: border-box;
}

/* ✅ 核心修复：正确的滚动高度 */
.scroll-content {
	height: calc(100vh - 170rpx - 100rpx);
	box-sizing: border-box;
}

.contract-list {
	padding: 20rpx;
}

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

.contract-cover {
	width: 193rpx;
	height: 145rpx;
	border-radius: 10rpx;
	background-color: #FCE5E0;
	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: 18rpx;
}

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

.status-tag {
	position: absolute;
	bottom: 20rpx;
	right: 0rpx;
	padding: 12rpx 15rpx;
	border-radius: 6rpx;
	font-size: 26rpx;

	&.pending {
		background: #FEEDDD;
		color: #EFA049;
	}

	&.signed {
		background: #FCE5E0;
		color: #ED7748;
	}

	&.expired {
		background: #CDCDCD;
		color: #969696;
	}
}

.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>