<template>
	<view class="page">
		<!-- 头部过滤区域 -->
		<view class="filter-header">
			<view class="filter-row">
				<!-- 下拉过滤 1 -->
				<u-dropdown v-model="filter1Value" :options="filter1Options" @change="handleFilter1Change"></u-dropdown>

				<!-- 下拉过滤 2 -->
				<u-dropdown v-model="filter2Value" :options="filter2Options" @change="handleFilter2Change"></u-dropdown>

				<!-- 刷新按钮 -->
				<view class="refresh-btn" @click="handleRefresh">
					<u-icon name="reload" :size="36" :class="{ rotating: loading }"></u-icon>
				</view>
			</view>
		</view>

		<!-- 列表内容 -->
		<scroll-view
			class="list-scroll"
			scroll-y
			:scroll-into-view="scrollIntoView"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="refreshing"
			@refresh="handleRefresh"
		>
			<!-- 列表项 -->
			<view class="list-wrap">
				<view
					v-for="(item, index) in listData"
					:key="item.id || index"
					class="list-item"
					@click="handleItemClick(item)"
				>
					<view class="item-header">
						<text class="item-title">{{ item.name || '未命名' }}</text>
						<text class="item-status" :class="item.status">{{ item.statusText || '' }}</text>
					</view>
					<view class="item-content">
						<text class="item-desc">{{ item.description || '' }}</text>
					</view>
					<view class="item-footer">
						<text class="item-time">{{ item.createTime || '' }}</text>
						<text class="item-author">{{ item.creator || '' }}</text>
					</view>
				</view>

				<!-- 空状态 -->
				<u-empty
					v-if="!loading && listData.length === 0"
					mode="list"
					text="暂无数据"
				></u-empty>

				<!-- 加载提示 -->
				<view v-if="loading && listData.length > 0" class="loading-more">
					<u-loading mode="circle" size="32"></u-loading>
					<text>加载中...</text>
				</view>

				<!-- 没有更多 -->
				<view v-if="!loading && !hasMore && listData.length > 0" class="no-more">
					<text>— 没有更多了 —</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// ===== 过滤条件 =====
const filter1Value = ref('')
const filter2Value = ref('')

// 过滤选项 1
const filter1Options = ref([
	{ label: '全部类型', value: '' },
	{ label: '类型 A', value: 'type_a' },
	{ label: '类型 B', value: 'type_b' },
	{ label: '类型 C', value: 'type_c' }
])

// 过滤选项 2
const filter2Options = ref([
	{ label: '全部状态', value: '' },
	{ label: '进行中', value: 'pending' },
	{ label: '已完成', value: 'completed' },
	{ label: '已取消', value: 'cancelled' }
])

// ===== 列表数据 =====
const listData = ref([])
const loading = ref(false)
const refreshing = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = 20
const scrollIntoView = ref('')

// ===== 筛选条件变更 =====
const filterParams = reactive({
	filter1: '',
	filter2: ''
})

// 过滤 1 变化
const handleFilter1Change = (value) => {
	filterParams.filter1 = value
	resetAndLoad()
}

// 过滤 2 变化
const handleFilter2Change = (value) => {
	filterParams.filter2 = value
	resetAndLoad()
}

// ===== 数据加载 =====

// 加载数据
const fetchData = async (isRefresh = false) => {
	if (loading.value || (!isRefresh && !hasMore.value)) return

	loading.value = true
	if (isRefresh) {
		refreshing.value = true
	}

	try {
		// TODO: 替换为实际 API 调用
		// const res = await api.getList({
		// 	page: currentPage.value,
		// 	pageSize,
		// 	...filterParams
		// })

		// 模拟数据
		const mockData = await mockApiFetch({
			page: currentPage.value,
			pageSize,
			...filterParams
		})

		if (isRefresh) {
			listData.value = mockData.list
		} else {
			listData.value = [...listData.value, ...mockData.list]
		}

		hasMore.value = mockData.hasMore
		currentPage.value++
	} catch (error) {
		console.error('加载数据失败:', error)
		uni.showToast({
			title: '加载失败，请重试',
			icon: 'none'
		})
	} finally {
		loading.value = false
		refreshing.value = false
	}
}

// 重置并重新加载
const resetAndLoad = () => {
	currentPage.value = 1
	hasMore.value = true
	listData.value = []
	fetchData(true)
}

// 下拉刷新
const handleRefresh = () => {
	resetAndLoad()
}

// 上拉加载更多
const loadMore = () => {
	if (!loading.value && hasMore.value) {
		fetchData(false)
	}
}

// 列表项点击
const handleItemClick = (item) => {
	console.log('点击列表项:', item)
	// TODO: 跳转详情
	// uni.navigateTo({ url: `/pages/xxx/detail?id=${item.id}` })
}

// ===== 模拟 API（实际使用时删除）=====
const mockApiFetch = async (params) => {
	return new Promise((resolve) => {
		setTimeout(() => {
			const start = (params.page - 1) * params.pageSize
			const end = start + params.pageSize
			const hasMore = end < 100 // 模拟总共 100 条数据

			const list = Array.from({ length: hasMore ? params.pageSize : (100 - start) }, (_, i) => ({
				id: start + i + 1,
				name: `项目 ${start + i + 1}`,
				description: '这是一个测试项目的描述信息，可能包含更多内容',
				status: ['pending', 'completed', 'cancelled'][Math.floor(Math.random() * 3)],
				statusText: ['进行中', '已完成', '已取消'][Math.floor(Math.random() * 3)],
				createTime: '2024-01-01 12:00:00',
				creator: `用户${Math.floor(Math.random() * 10) + 1}`
			}))

			resolve({
				list,
				hasMore
			})
		}, 500)
	})
}

// ===== 生命周期 =====
onMounted(() => {
	fetchData(true)
})
</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f5f6f8;
}

// 头部过滤区域
.filter-header {
	background: #ffffff;
	padding: 20rpx 24rpx;
	border-bottom: 1rpx solid #f0f0f0;

	.filter-row {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.refresh-btn {
		margin-left: auto;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.rotating {
			animation: rotate 1s linear infinite;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

// 列表滚动区域
.list-scroll {
	flex: 1;
	overflow: hidden;
}

.list-wrap {
	padding: 24rpx;
}

// 列表项
.list-item {
	background: #ffffff;
	border-radius: 16rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	&:last-child {
		margin-bottom: 0;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;

		.item-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
		}

		.item-status {
			font-size: 22rpx;
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
			background: #f0f0f0;
			color: #666;

			&.pending {
				background: rgba(255, 167, 38, 0.1);
				color: #ffa726;
			}

			&.completed {
				background: rgba(76, 175, 80, 0.1);
				color: #4caf50;
			}

			&.cancelled {
				background: rgba(244, 67, 54, 0.1);
				color: #f44336;
			}
		}
	}

	.item-content {
		margin-bottom: 16rpx;

		.item-desc {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.item-footer {
		display: flex;
		justify-content: space-between;

		.item-time,
		.item-author {
			font-size: 22rpx;
			color: #999;
		}
	}
}

// 加载中
.loading-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32rpx 0;
	color: #999;
	font-size: 24rpx;
}

// 没有更多
.no-more {
	text-align: center;
	padding: 32rpx 0;
	color: #ccc;
	font-size: 24rpx;
}
</style>
