<template>
	<view class="content">
		<view class="navLeft align-center" :style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)">
			<uni-icons type="left" color="#000000"></uni-icons>
			<!-- <view class="">{{$c.detailPageTitle((pageData && pageData.goods) || '')}}</view> -->
		</view>

		<view class="title1">福利屋</view>

		<view class="" style="height: 232rpx;"></view>

		<view class=""
			style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 0 auto 0;">

		</view>

		<view class="center" style="width: 100%; margin-top: 30rpx;">
			<view class="tab">
				<view class="tab-item1 center" @click="$refs.rulePop.getRule(15, '规则说明')">
					<text>规则说明</text>
				</view>
				<view class="tab-item2 center" :class="[tabCur == 1 ? 'act' : 'unact']" @click="tabChange(1)">
					<text>进行中</text>
				</view>
				<view class="tab-item3 center" :class="[tabCur == 2 ? 'act' : 'unact']" @click="tabChange(2)">
					<text>已结束</text>
				</view>
			</view>
		</view>


		<!-- 进行中 -->
		<view v-if="tabCur == 1" class=""
			style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
			<scroll-view scroll-y="true" style=" height: 760rpx;">
				<view class="relative" v-for="(item,index) in benefitsData" @click="$c.to({url: '/pages/infinite/bonus_house_details'})"
					style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">

					<text
						style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
					<text
						style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>

					<view class="center"
						style="width: 128rpx; height: 60rpx; background-color: #D8FD24; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
						<text style="font-size: 20rpx; color: #333333; font-weight: 600;">马上参与</text>
					</view>

					<scroll-view scroll-x="true"
						style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
						<view v-for="(item1,index) in item.GoodsList" class="relative" :key="index1"
							style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">

							<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
								style="width: 100%; height: 100%; position: absolute;"></image>
							<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
							<view class="center"
								style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
								<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
							</view>
						</view>
					</scroll-view>
					<view class=""
						style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
					</view>
					<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
						<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
						<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
					</view>
					<text
						style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 已结束 -->
		<view v-else class="" style="width: 672rpx; height: 760rpx; margin: 40rpx auto 0; overflow: hidden;">
			<scroll-view scroll-y="true" style=" height: 760rpx;">
				<view class="relative" v-for="(item,index) in benefitsData"
					style="width: 100%; height: 274rpx; background-color: #F8F8F8; margin-bottom: 36rpx; border-radius: 16rpx;">

					<text
						style="position: absolute; left: 24rpx; top: 28rpx; color: #333333;font-size: 24rpx;">{{item.title}}</text>
					<text
						style="position: absolute; left: 24rpx; top: 62rpx; color: #FF862D; font-size: 18rpx;">{{item.tips}}</text>

					<view class="center"
						style="width: 128rpx; height: 60rpx; background-color: #333333; border-radius: 16rpx; position: absolute; top: 20rpx; right: 24rpx;">
						<text style="font-size: 20rpx; color: #D8FD24; font-weight: 600;">已结束</text>
					</view>

					<scroll-view scroll-x="true"
						style="height: 80rpx; white-space: nowrap; position: absolute; left: 24rpx; top: 112rpx;">
						<view v-for="(item1,index1) in item.GoodsList" class="relative" :key="index1"
							style="width: 80rpx; height: 80rpx; display: inline-block; margin-right: 36rpx;">

							<image src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png"
								style="width: 100%; height: 100%; position: absolute;"></image>
							<!-- src="https://mh.shhuanmeng.com/static/web/static/checkin/gem.png":src="$img1('checkin/Fire.png')" -->
							<view class="center"
								style="width: 44rpx; height: 20rpx; background-color: rgba(172, 172, 172, 0.60); position: absolute; border-radius: 10rpx; bottom: 4rpx; left: 50%; transform: translateX(-50%);">
								<text style="font-size: 18rpx; color: #fff;">x{{item1.num}}</text>
							</view>
						</view>
					</scroll-view>
					<view class=""
						style="width: 624rpx; height: 2.01rpx; background-color: #F3F3F3; position: absolute; left: 24rpx; bottom: 54rpx;">
					</view>
					<view class="center" style="position: absolute; left: 24rpx; bottom: 16rpx;">
						<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
						<text style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{item.Popularity}}</text>
					</view>
					<text
						style="font-size: 16rpx; color: #999999; position: absolute; right: 24rpx; bottom: 18rpx;">{{item.Time}}</text>
				</view>
			</scroll-view>
		</view>


		<view class="row center" style="margin-top: 20rpx;">
			<view class="center" style="width: 220rpx; height: 72rpx; background-color: #333333; border-radius: 16rpx;">
				<text style="font-size: 24rpx; color: #D8FD24;">我的卡券</text>
			</view>
			<view class="center" style="width: 220rpx; height: 72rpx; background-color: #D8FD24; border-radius: 16rpx; margin-left: 38rpx;">
				<text style="font-size: 24rpx; color: #333333;">赏品记录</text>
			</view>
		</view>


		<rule-pop ref="rulePop"></rule-pop>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabCur: 1,
				benefitsData: [{
					title: "新人消费满5元福利屋",
					tips: "消费返利（所有参与者有机会获得奖励",
					isOngoing: true, //是否进行中
					Popularity: 52, //热度
					Time: "2025-03-10  14:00—2025-03-10  14:00",
					GoodsList: [{
						imgUrl: "", //赏品图
						num: 1, //数量
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, {
						imgUrl: "",
						num: 1,
					}, ],
				}, {
					title: "新人消费满10元福利屋",
					tips: "消费返利（所有参与者有机会获得奖励",
					isOngoing: true, //是否进行中
					Popularity: 52, //热度
					Time: "2025-03-10  14:00—2025-03-10  14:00",
					GoodsList: [{
						imgUrl: "", //赏品图
						num: 1, //数量
					}, {
						imgUrl: "",
						num: 1,
					}, ]
				}, {
					title: "新人消费满15元福利屋",
					tips: "消费返利（所有参与者有机会获得奖励",
					isOngoing: true, //是否进行中
					Popularity: 52, //热度
					Time: "2025-03-10  14:00—2025-03-10  14:00",
					GoodsList: [{
						imgUrl: "", //赏品图
						num: 1, //数量
					}, {
						imgUrl: "",
						num: 1,
					}, ]
				}, ],


			}
		},
		methods: {
			tabChange(i) {
				this.tabCur = i
				switch (Number(i)) {
					case 1:
						this.getData()
						break
					case 2:
						this.getData()
						this.subTabChange(this.subTabCur)
						break
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.navLeft {
		position: fixed;
		left: 30rpx;
		height: 44px;
		z-index: 100;

		>view {
			font-weight: 400;
			font-size: 50rpx;
			color: #FFFFFF;
		}
	}

	.title1 {
		width: 100%;
		top: 108rpx;
		position: absolute;
		display: flex;
		align-items: center;
		font-size: 34rpx;
		justify-content: center;
		color: black;
		z-index: 50;
	}

	.tab {
		display: flex;
		align-items: center;

		.tab-item1 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;
			margin-right: 30rpx;
			background: url($imgurl + "index/uncheckTab1.png") no-repeat 0 0 / 100% 100%;

			>text {
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.tab-item2 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;
			margin-right: 30rpx;

			&.act {
				background: url($imgurl + "index/checkTab2.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&.unact {
				background: url($imgurl + "index/uncheckTab2.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

			}
		}

		.tab-item3 {
			width: 160rpx;
			height: 92rpx;
			font-weight: 400;

			&.act {
				background: url($imgurl + "index/checkTab3.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}
			}

			&.unact {
				background: url($imgurl + "index/uncheckTab3.png") no-repeat 0 0 / 100% 100%;

				>text {
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

			}
		}
	}
</style>