<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 style="height: 232rpx;">

		</view>


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

			<image style="width: 108rpx; height: 108rpx;position: absolute; left: 24rpx; top: 22rpx;"
				:src="$img1('checkin/logo2.png')"></image>

			<text
				style="font-size: 24rpx; color: #333333; position: absolute; left: 146rpx; top: 34rpx;">{{bonusDetailsData.Title}}</text>

			<text
				style="font-size: 18rpx; color: #FF862D; position: absolute; left: 146rpx; top: 68rpx;">{{bonusDetailsData.Tips}}</text>

			<text
				style="font-size: 16rpx; color: #999999; position: absolute; left: 146rpx; top: 102rpx;">{{bonusDetailsData.Time}}</text>

			<view class="row center" style="position: absolute; left: 470rpx; top: 68rpx;">
				<image style="width: 18rpx; height: 20rpx;" :src="$img1('checkin/Fire.png')" mode=""></image>
				<text
					style="font-size: 16rpx; color: #999999; margin-left: 8rpx;">{{bonusDetailsData.Popularity}}</text>
			</view>

			<image style="width: 50rpx; height: 50rpx; position: absolute; top: 50rpx; right: 24rpx;"
				:src="$img1('checkin/ic_share.png')" mode=""></image>
		</view>


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

			<view class="tab">
				<view class="tab-item center relative" v-for="(item, i) in tabList" :key="i"
					:class="tabCur == i?'act':'unact'" @click="tabChange(i)">
					<text>{{item}}</text>
				</view>
			</view>

			<!-- 赏品预览 -->
			<scroll-view v-if="tabCur==0" scroll-y="true" class="" style="width: 100%; height: 900rpx;">
				<view style="height: 60rpx;"></view>
				<view class="" style="width: 544rpx; height: 500rpx; background-color: #999999; margin: 0 auto 0;">
				</view>

				<view class="grid-container">
					<view class="grid-item column align-center" v-for="(item,index) in bonusDetailsData.GoodsList"
						style="">

						<image style="width: 112rpx; height: 112rpx;background-color: #D8D8D8; border-radius: 16rpx;"
							:src="$img1('checkin/gem2.png')" mode=""></image>

						<text style="color: #999999; font-size: 16rpx; margin-top: 16rpx;">{{item.Price}}</text>

					</view>

				</view>
			</scroll-view>


			<scroll-view v-if="tabCur==1" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
				<view class="row align-center" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
					style="height: 76rpx; margin-bottom: 24rpx;">

					<view class="center" style="width: 30rpx;">
						<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
					</view>


					<image :src="item.Avatar"
						style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
						mode=""></image>

					<view class="column" style="margin-left: 16rpx;">
						<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
					</view>

				</view>
			</scroll-view>

			<scroll-view v-if="tabCur==2" scroll-y="true" style="width: 100%; height: 890rpx; padding: 24rpx;">
				<view class="row align-center relative" v-for="(item,index) in bonusDetailsData.PlayerList" :key="index"
					style="height: 76rpx; margin-bottom: 24rpx;">

					<view class="center" style="width: 30rpx;">
						<text style="color: #999999; font-size: 20rpx;">{{index+1}}</text>
					</view>


					<image :src="item.Avatar"
						style="width: 76rpx; height: 76rpx; background-color: #D8D8D8; border-radius: 50%; margin-left: 24rpx;"
						mode=""></image>

					<view class="column" style="margin-left: 16rpx;">
						<text style="color: #333333; font-size: 20rpx;">{{item.name}}</text>
						<text style="color: #999999; font-size: 16rpx; margin-top: 12rpx;">{{item.time}}</text>
					</view>


					<view class="row center" style="position: absolute; right: 56rpx;">
						<image v-if="index==0" :src="$img1('checkin/Jackpot.png')" style="width: 46rpx; height: 26rpx;"
							mode=""></image>
						<text style="color: #999999; font-size: 20rpx; margin-left: 16rpx;">晶体*1500</text>
					</view>


				</view>
			</scroll-view>





		</view>


		<view class="column align-center"
			style="width: 100%; height: 198rpx; background-color: #fff; margin-top: 8rpx;">

			<view class="center"
				style="width: 340rpx; height: 84rpx; background-color: #D8FD24; border-radius: 16rpx; margin-top: 32rpx;">
				<text style="color: #333333; font-size: 32rpx; font-weight: 600;">马上参与</text>
			</view>
			<text
				style="color: #8A8A8A; font-size: 20rpx; font-weight: 400; margin-top: 12rpx;">距离开奖时间：0天06：29：19</text>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				bonusDetailsData: {
					Title: "新人消费满5元福利屋",
					Tips: "消费返利（所有参与者有机会获得奖励",
					Time: "2025-03-10  14:00",
					Popularity: 52, //热度
					GoodsList: [{
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, {
						imgUrl: "",
						Price: "1000钻石",
					}, ],
					PlayerList: [{
						Avatar: "", //头像
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, {
						Avatar: "",
						name: "微信名",
						time: "2025-03-10  14:00"
					}, ]
				},

				tabList: [
					"赏品预览", "参与人数", "赏品记录"
				]

			}
		},
		methods: {

			tabChange(i) {
				this.tabCur = i

				switch (i) {
					case 0:
						this.subTabChange(this.subTabCur)
						break
					default:
						this.listData = []

						this.mescroll.resetUpScroll()
						this.mescroll.scrollTo(0, 0)
						break
				}
			},

		}
	}
</script>

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

	.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;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 60rpx;


		.tab-item {
			width: 155rpx;
			height: 68rpx;
			position: relative;
			margin-right: 25rpx;

			&.act {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 48rpx;
					height: 4rpx;
					background: #333333;
				}
			}

			&.unact {
				font-weight: 400;
				font-size: 28rpx;
				color: #CCCCCC;
			}
		}
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 134rpx);
		gap: 24rpx;
		width: 580rpx;
		margin: 28rpx auto 0;
		padding-bottom: 20rpx;
	}

	.grid-item {
		width: 112rpx;
		height: 150rpx;


	}
</style>