<template>
	<view class="questionnaire-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">问卷记录</text>
				</view>
			</template>
			<!-- #ifdef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-200 li-pt-6" @click="showFilter">
					<text class="ri-filter-line li-text-48"></text>
				</view>
			</template>

			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-25 li-pt-6" @click="showFilter">
					<text class="ri-filter-line li-text-48"></text>
				</view>
			</template>
			<!-- #endif -->
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 整页背景 -->
		<view class="page-bg"></view>

		<!-- 筛选区域 -->
		<!-- <view class="filter-section li-w-92% li-mx-auto li-mt-30">
			<view class="li-flex li-items-center li-flex-wrap">
				<text v-for="(item, index) in statusList" :key="index"
					:class="activeStatus === item.value ? 'status-tag active' : 'status-tag'"
					@click="handleStatusChange(item.value)">
					{{item.label}}
				</text>
			</view>
		</view> -->

		<!-- 小区选择器 -->
	<!-- 	<view class="li-px-15">
			<wd-picker size="large" v-model="showVillagePicker" :columns="pickerVillageList" title="选择小区"
				v-model:value="selectedVillage" @confirm="handleVillageConfirm" label-key="label" value-key="value" />
		</view> -->

		<!-- 问卷列表 -->
		<view class="li-w-92% li-mx-auto li-mt-30 li-pb-30">
			<view v-if="questionnaireList.length > 0">
				<view v-for="(item, index) in questionnaireList" :key="index"
					class="questionnaire-card li-bg-white li-rd-20 li-p-30 li-mb-20 li-shadow-sm"
					@click="toPages({type:'detail', value:item})">
					<!-- 问卷标题 -->
					<view class="li-flex li-items-center li-justify-between li-pb-20 li-bottom-border2">
						<view class="li-flex li-items-center">
							<text class="ri-questionnaire-line li-text-40 li-mr-15 li-text-#0070F0"></text>
							<text class="li-text-32 li-font-bold">{{item.title}}</text>
						</view>
						<view class="status-badge" :style="{
                            backgroundColor: getStatusBgColor(item.status),
                            color: getStatusColor(item.status)
                        }">
							{{getStatusText(item.status)}}
						</view>
					</view>

					<!-- 问卷信息 -->
					<view class="li-mt-20">
						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交人</text>
							<view class="li-flex li-items-center">
								<text class="content-text li-text-28 li-text-#333">{{item.user_name}}</text>
								<view class="user-badge" v-if="item.is_anonymous">匿名</view>
							</view>
						</view>

						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">所属小区</text>
							<text class="content-text li-text-28 li-text-#333">{{item.village_name}}</text>
						</view>

						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">问卷类型</text>
							<wd-tag color="#0083ff" bg-color="#d0e8ff">{{item.type}}</wd-tag>
						</view>

						<view class="li-flex li-items-center li-mb-15">
							<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">提交时间</text>
							<text class="content-text li-text-28 li-text-#333">{{item.submit_time}}</text>
						</view>

						<view class="li-flex li-items-center li-justify-between">
							<view class="li-flex li-items-center">
								<text class="content-label li-text-28 li-text-#9a9a9a li-w-160">问题数量</text>
								<text class="content-text li-text-28 li-text-#333">{{item.question_count}}题</text>
							</view>
							<view class="action-wrapper">
								<wd-button type="primary" size="small" custom-class="view-btn"
									@click.stop="toPages({type:'detail', value:item})">查看详情</wd-button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="li-mt-200">
				<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/search.png'" tip="暂无问卷记录" />
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="li-flex-center li-mt-30">
				<wd-loading color="#0070F0" />
			</view>

			<!-- 底部提示 -->
			<view v-if="!loading && finished && questionnaireList.length > 0"
				class="li-text-center li-text-26 li-text-#999 li-py-20">
				-- 没有更多数据了 --
			</view>
		</view>

		<!-- 筛选弹窗 -->
		<wd-popup v-model="showFilterPopup" position="right" custom-class="filter-popup">
			<view class="filter-popup-content">
				<view class="filter-popup-header li-flex li-justify-between li-items-center li-p-30 ">
					<text class="li-text-36 li-font-bold">筛选类型</text>
					<text class="ri-close-line li-text-40" @click="showFilterPopup = false"></text>
				</view>
				<view class="filter-popup-body li-p-30">
					<view class="filter-section-title li-mb-20">提交时间</view>
					<view class="date-range li-mb-30">
						<view class="li-flex li-items-center li-justify-between li-mb-20">
							<wd-button size="small" custom-class="date-btn"
								:class="{'date-btn-active': dateRange === 'today'}"
								@click="setDateRange('today')">今天</wd-button>
							<wd-button size="small" custom-class="date-btn"
								:class="{'date-btn-active': dateRange === 'yesterday'}"
								@click="setDateRange('yesterday')">昨天</wd-button>
							<wd-button size="small" custom-class="date-btn"
								:class="{'date-btn-active': dateRange === 'week'}"
								@click="setDateRange('week')">近7天</wd-button>
							<wd-button size="small" custom-class="date-btn"
								:class="{'date-btn-active': dateRange === 'month'}"
								@click="setDateRange('month')">近30天</wd-button>
						</view>
						<view class="li-flex li-items-center li-justify-between">
							<wd-datetime-picker v-model="showStartPicker" title="开始日期" v-model:value="startDate"
								type="date" @confirm="handleDateChange">
								<wd-input size="large" placeholder="开始日期" class="date-input"
									:value="formatDate(startDate)" disabled></wd-input>
							</wd-datetime-picker>
							<text class="li-text-30 li-mx-20">至</text>
							<wd-datetime-picker v-model="showEndPicker" title="结束日期" v-model:value="endDate" type="date"
								@confirm="handleDateChange">
								<wd-input size="large" placeholder="结束日期" class="date-input"
									:value="formatDate(endDate)" disabled></wd-input>
							</wd-datetime-picker>
						</view>
					</view>

					<view class="filter-section-title li-mb-20">问卷类型</view>
					<view class="type-filter li-flex li-flex-wrap li-mb-30">
						<wd-tag v-for="(type, index) in typeList" :key="index"
							:color="selectedTypes.includes(type.value) ? '#0070F0' : '#666'"
							:bg-color="selectedTypes.includes(type.value) ? '#e8f4ff' : '#f5f5f5'"
							custom-class="type-tag" @click="toggleTypeSelection(type.value)">
							{{type.label}}
						</wd-tag>
					</view>

					<view class="filter-section-title li-mb-20">其他筛选</view>
					<view class="other-filters li-mb-30">
						<view class="li-flex li-items-center li-justify-between li-mb-20">
							<text class="li-text-30">只看匿名提交</text>
							<wd-switch v-model="filterAnonymous" active-color="#0070F0" />
						</view>
					</view>
				</view>
				<view class="filter-popup-footer li-p-30 li-flex li-justify-between">
					<wd-button size="large" custom-class="reset-btn" @click="resetFilters">重置</wd-button>
					<wd-button size="large" type="primary" custom-class="confirm-btn"
						@click="applyFilters">确定</wd-button>
				</view>
			</view>
		</wd-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, watch } from 'vue';
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { useNavigation } from '@/hooks/useNavigation';
	import { useToast } from '@/uni_modules/wot-design-uni';

	const Toast = useToast();

	// 使用导航composable
	const {
		hasMultiplePages,
		isTabBarPage,
		checkRouteStack
	} = useNavigation();

	// 状态管理
	const selectedVillage = ref('ALL'); // 设置默认为全部小区
	const activeStatus = ref('ALL');
	const loading = ref(false);
	const finished = ref(false);
	const page = ref(1);
	const pageSize = ref(10);

	// 筛选相关
	const showFilterPopup = ref(false);
	const dateRange = ref('');
	const startDate = ref('');
	const endDate = ref('');
	const showStartPicker = ref(false);
	const showEndPicker = ref(false);
	const selectedTypes = ref([]);
	const filterAnonymous = ref(false);

	// 小区列表
	const villageList = ref([
		{ value: '1', label: '阳光花园小区' },
		{ value: '2', label: '翠湖庭院' },
		{ value: '3', label: '金色家园' }
	]);

	// 问卷类型列表
	const typeList = ref([
		{ value: '1', label: '满意度调查' },
		{ value: '2', label: '意见征集' },
		{ value: '3', label: '投票选举' },
		{ value: '4', label: '需求调研' },
		{ value: '5', label: '活动报名' }
	]);

	// 状态筛选选项
	const statusList = ref([
		{ label: '全部', value: 'ALL' },
		{ label: '已查看', value: 1 },
		{ label: '未查看', value: 0 }
	]);

	// 模拟问卷列表数据
	const questionnaireList = ref([
		// {
		// 	id: 1,
		// 	title: '2024年度物业服务满意度调查',
		// 	village_name: '阳光花园小区',
		// 	type: '满意度调查',
		// 	user_name: '张三',
		// 	is_anonymous: false,
		// 	submit_time: '2024-06-15 14:23',
		// 	question_count: 15,
		// 	status: 1  // 已查看
		// },
		// {
		// 	id: 2,
		// 	title: '小区环境改造意见征集',
		// 	village_name: '翠湖庭院',
		// 	type: '意见征集',
		// 	user_name: '李四',
		// 	is_anonymous: true,
		// 	submit_time: '2024-06-12 09:45',
		// 	question_count: 8,
		// 	status: 0  // 未查看
		// },
		// {
		// 	id: 3,
		// 	title: '业主委员会换届选举投票',
		// 	village_name: '金色家园',
		// 	type: '投票选举',
		// 	user_name: '王五',
		// 	is_anonymous: false,
		// 	submit_time: '2024-06-10 18:30',
		// 	question_count: 12,
		// 	status: 1  // 已查看
		// },
		// {
		// 	id: 4,
		// 	title: '小区健身设施需求调研',
		// 	village_name: '阳光花园小区',
		// 	type: '需求调研',
		// 	user_name: '赵六',
		// 	is_anonymous: false,
		// 	submit_time: '2024-06-08 11:20',
		// 	question_count: 10,
		// 	status: 1  // 已查看
		// },
		// {
		// 	id: 5,
		// 	title: '端午节活动满意度调查',
		// 	village_name: '翠湖庭院',
		// 	type: '满意度调查',
		// 	user_name: '匿名用户',
		// 	is_anonymous: true,
		// 	submit_time: '2024-06-05 16:40',
		// 	question_count: 6,
		// 	status: 0  // 未查看
		// }
	]);

	// 状态颜色配置
	const getStatusColor = (status) => {
		const colorMap = {
			0: '#ff9d00', // 未查看
			1: '#07c160'  // 已查看
		};
		return colorMap[status] || '#666666';
	};

	// 状态背景色配置
	const getStatusBgColor = (status) => {
		const bgColorMap = {
			0: '#fff6e9', // 未查看
			1: '#e8fff1'  // 已查看
		};
		return bgColorMap[status] || '#f5f5f5';
	};

	// 状态文字配置
	const getStatusText = (status) => {
		const textMap = {
			0: '未查看',
			1: '已查看'
		};
		return textMap[status] || '未知状态';
	};

	// 处理状态切换
	const handleStatusChange = (status) => {
		activeStatus.value = status;
		resetList();
		loadQuestionnaireList();
	};

	// 重置列表
	const resetList = () => {
		page.value = 1;
		finished.value = false;
		questionnaireList.value = [];
	};

	// 加载问卷列表数据
	const loadQuestionnaireList = async () => {
		if (loading.value || finished.value) return;

		try {
			loading.value = true;
			// 实际项目中这里应该调用API
			await new Promise(resolve => setTimeout(resolve, 1000));
			if (page.value > 1) {
				finished.value = true;
			} else {
				page.value++;
			}
			loading.value = false;
		} catch (error) {
			console.error('加载问卷记录失败', error);
			Toast.fail('加载失败，请重试');
			loading.value = false;
		}
	};

	// 页面跳转
	const toPages = (item) => {
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				});
				break;
			case 'detail':
				// 更新记录状态为已查看
				const record = questionnaireList.value.find(q => q.id === item.value.id);
				if (record && record.status === 0) {
					record.status = 1;
				}
				uni.navigateTo({
					url: `/pagesB/questionnaire/detail?id=${item.value.id}`
				});
				break;
			default:
				break;
		}
	};

	// 生命周期钩子
	onLoad(() => {
		checkRouteStack();
		// loadQuestionnaireList();
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		resetList();
		loadQuestionnaireList().then(() => {
			uni.stopPullDownRefresh();
		});
	});

	// 上拉加载
	onReachBottom(() => {
		loadQuestionnaireList();
	});

	// 监听小区选择变化
	watch(selectedVillage, (newVal) => {
		resetList();
		loadQuestionnaireList();
	});

	// 小区选择相关
	const showVillagePicker = ref(false);
	const pickerVillageList = ref([
		[
			{ value: 'ALL', label: '全部小区' },
			{ value: '1', label: '阳光花园小区' },
			{ value: '2', label: '翠湖庭院' },
			{ value: '3', label: '金色家园' }
		]
	]);

	const handleVillageConfirm = (selectedItem) => {
		selectedVillage.value = selectedItem[0].value;
		resetList();
		loadQuestionnaireList();
	};

	// 筛选相关方法
	const showFilter = () => {
		showFilterPopup.value = true;
	};

	const setDateRange = (range) => {
		dateRange.value = range;
		const now = new Date();

		switch (range) {
			case 'today':
				startDate.value = formatDate(now);
				endDate.value = formatDate(now);
				break;
			case 'yesterday':
				const yesterday = new Date(now);
				yesterday.setDate(now.getDate() - 1);
				startDate.value = formatDate(yesterday);
				endDate.value = formatDate(yesterday);
				break;
			case 'week':
				const weekStart = new Date(now);
				weekStart.setDate(now.getDate() - 7);
				startDate.value = formatDate(weekStart);
				endDate.value = formatDate(now);
				break;
			case 'month':
				const monthStart = new Date(now);
				monthStart.setDate(now.getDate() - 30);
				startDate.value = formatDate(monthStart);
				endDate.value = formatDate(now);
				break;
		}
	};

	const formatDate = (date) => {
		if (!date) return '';
		if (typeof date === 'string') return date;

		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}`;
	};

	const handleDateChange = () => {
		dateRange.value = '';
	};

	const toggleTypeSelection = (typeValue) => {
		const index = selectedTypes.value.indexOf(typeValue);
		if (index > -1) {
			selectedTypes.value.splice(index, 1);
		} else {
			selectedTypes.value.push(typeValue);
		}
	};

	const resetFilters = () => {
		dateRange.value = '';
		startDate.value = '';
		endDate.value = '';
		selectedTypes.value = [];
		filterAnonymous.value = false;
	};

	const applyFilters = () => {
		showFilterPopup.value = false;
		resetList();
		loadQuestionnaireList();
		Toast.success('筛选条件已应用');
	};
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.questionnaire-page {
		min-height: 100vh;
		position: relative;
		z-index: 0;
	}

	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
		z-index: 10;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.page-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(247, 248, 250, 0.9) 0%, rgba(247, 248, 250, 1) 100%);
		z-index: -2;
	}

	.filter-section {
		padding: 20rpx 0 0;
		position: sticky;
		/* #ifdef MP-WEIXIN */
		top: calc(var(--status-bar-height) + 110rpx);
		/* #endif */
		/* #ifndef MP-WEIXIN */
		top: calc(var(--status-bar-height) + 85rpx);
		/* #endif */
		z-index: 9;
		background: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.status-tag {
		height: 60rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		background: rgba(255, 255, 255, 0.8);
		margin-right: 20rpx;
		margin-bottom: 16rpx;
		transition: all 0.3s;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid transparent;

		&:active {
			transform: scale(0.95);
			opacity: 0.8;
		}
	}

	.status-tag.active {
		color: #0070F0;
		background: rgba(255, 255, 255, 0.95);
		font-weight: 500;
		border-color: #0070F0;
		box-shadow: 0 2rpx 12rpx rgba(0, 112, 240, 0.15);
	}

	.questionnaire-card {
		transition: all 0.3s;
		position: relative;
		z-index: 1;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}

		.status-badge {
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}

	.li-bottom-border2 {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.empty-image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.view-btn {
		width: 160rpx !important;
		font-size: 26rpx !important;
		height: 60rpx !important;
		border-radius: 30rpx !important;
	}

	.user-badge {
		display: inline-block;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #999;
		padding: 2rpx 12rpx;
		border-radius: 16rpx;
		margin-left: 16rpx;
	}

	::v-deep .wd-navbar__placeholder {
		height: calc(var(--status-bar-height) + 88rpx) !important;
		padding-top: constant(safe-area-inset-top) !important;
		padding-top: env(safe-area-inset-top) !important;
	}

	::v-deep .wd-select {
		background-color: transparent !important;
		margin-bottom: 0 !important;

		.wd-select__value {
			color: #333 !important;
		}

		.wd-select__label {
			margin-right: 20rpx !important;
		}
	}

	::v-deep .wd-select__right-icon {
		color: #666 !important;
	}

	.filter-popup {
		width: 80%;
		height: 100%;

		.filter-popup-content {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		.filter-popup-header {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			/* #ifdef MP-WEIXIN */
			margin-top: 200rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			margin-top: 100rpx;
			/* #endif */
		}

		.filter-popup-body {
			flex: 1;
			overflow-y: auto;
		}

		.filter-popup-footer {
			border-top: 1px solid rgba(0, 0, 0, 0.05);

			.reset-btn {
				width: 45% !important;
				background-color: #f5f5f5 !important;
				color: #666 !important;
			}

			.confirm-btn {
				width: 45% !important;
			}
		}
	}

	.filter-section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.date-btn {
		width: 22% !important;
		height: 70rpx !important;
		background-color: #f5f5f5 !important;
		color: #666 !important;
		border: none !important;

		&-active {
			background-color: #e8f4ff !important;
			color: #0070F0 !important;
			font-weight: 500;
		}
	}

	.date-input {
		width: 45% !important;
		background-color: #f5f5f5 !important;
	}

	.type-tag {
		margin: 0 16rpx 16rpx 0 !important;
		padding: 16rpx 24rpx !important;
		border-radius: 8rpx !important;
		font-size: 26rpx !important;
	}

	.village-filter {
		.select-box {
			background: rgba(255, 255, 255, 0.9);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		}
	}
</style>