<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="问卷调查" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
		</uni-nav-bar>


		<view style="width: 40vw;">
			<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="switchTab" style-type="text"
				active-color="#007AFF" inactive-color="#999" class="seg-control"></uni-segmented-control>
		</view>
		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">
			<view class="list-container">
				<view v-for="(item, index) in currentList" :key="index" class="list-item" :class="{ 
			            disabled: currentTab === 1,
			            selected: currentTab === 0 && item.status === '已参与' 
			          }" @click="handleItemClick(item)">
					<view class="item-content">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-info">
							<text class="info-time">{{ item.time }}</text>
							<text class="info-community">{{ item.community }}</text>
						</view>
					</view>
					<view class="item-status"
						:class="{joined: currentTab === 0 &&item.status === '已参与',unjoined: item.status === '未参与'||currentTab === 1, }">
						{{ item.status }}
					</view>
				</view>
			</view>
			<!-- 占位 -->
			<view style="width: 100%;height:2rpx;"> </view>


		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {


			// 计算当前显示的列表
			currentList() {
				return this.currentTab === 0 ? this.collectingList : this.endedList;
			},


		},
		created() {

		},
		onShow() {

		},

		mounted() {
			this.getDataList()
		},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				currentTab: 0, // 0=收集中，1=已结束
				tabs: ["收集中", "已结束"],
				// 收集中列表数据
				collectingList: [{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '已参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					}, {
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					}, {
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2026-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
				],
				// 已结束列表数据
				endedList: [{
						title: '问卷调查名称问卷调查名称问卷调查...',
						time: '2023-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '已参与',
					},
					{
						title: '问卷调查名称问卷调查名称调查...',
						time: '2023-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
					{
						title: '问卷调查名称问卷调查名称调查...',
						time: '2023-09-01 11:00:56',
						community: '阳光海岸社区',
						status: '未参与',
					},
				],
			}
		},


		methods: {
			// Tab切换

			switchTab(e) {
				this.currentTab = e.currentIndex;
				this.getDataList()
			},

			// 列表项点击
			handleItemClick(item) {
				if (item.status == '已参与') {
					this.turnToDetail(item)
				} else {
					if (this.currentTab === 0) {
						this.turnToFillout(item)
					} else if (this.currentTab === 1) {
						// 未参与的已结束问卷
					}
				}

			},
			turnToFillout(item) {
				// 跳转到问卷填写
				uni.redirectTo({
					url: `/pages/service-list/questionnaireFillout`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			turnToDetail(item) {
				// 跳转到问卷详情
				uni.redirectTo({
					url: `/pages/service-list/questionnaireDetail`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getDataList() {
				if (this.currentTab == 0) {
					this.dataList = this.collectingList
				} else if (this.currentTab == 1) {

					this.dataList = this.endedList
				}
			},

			onTabClick(e) {
				this.currentTab = e.currentIndex;
				this.getDataList()
			},
			goBack() {
				uni.switchTab({
					url: '/pages/serviceIndex/serviceIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f2f1f6;
	}
</style>

<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;

		/* background-color: #fff; */
	}

	.page-container {
		padding: 40rpx;
	}

	/* --- 分段控制器样式 --- */
	.seg-control {
		margin-bottom: 20rpx;
	}

	.cardScroll {
		padding: 0rpx 0rpx 0px 0rpx;
		overflow-y: scroll;
	}

	/* 列表区域 */
	.list-scroll {
		flex: 1;

	}

	.list-container {
		padding-top: 20rpx;
	}

	.list-item {
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border:2rpx solid #E6E6E6;
		background-color: #fff;

		&.disabled {
			opacity: 0.6;

			.item-title,
			.item-info {}
		}

		&.selected {
			border:2rpx solid #2F77FD;
			background-color: #F5FAFF;
		}
	}

	.item-content {
		// flex: 1;
		width: calc(100% - 100rpx);
		// margin-right: 20rpx;
	}

	.item-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
		line-height: 44rpx;
		margin-bottom:10rpx;
		/* 超长文本省略 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}

	.item-info {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.info-time,
		.info-community {
			font-size: 28rpx;
			color: #666;
			line-height: 32rpx;
			/* 超长文本省略 */
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.item-status {
		font-size: 28rpx;
		font-weight: 500;
		padding: 0px 0px;
		border-radius:8rpx;

		&.joined {
			color: #2F77FD;
		}

		&.unjoined {
			color: #999;
		}
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>