<template>
	<view class="prize">
		<!-- 分段器 -->
		<view class="segmented">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#DDB15B"></uni-segmented-control>
		</view>

		<view style="margin-bottom: 60rpx; ">
			<view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="current === 0">
				<view class="ListItem" v-for="item in 5">
					<view class="title"><text>HUAWEI MateBook X Pro</text></view>
					<view class='data'><text>2022-02-10</text></view>
					<view class="alreadyBtn">
						<text>已兑换</text>
					</view>
					<view class="instantBtn" v-if="false">
						<text>立即兑换</text>
					</view>
				</view>
			</view>
			<view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="current === 1">
				<view class="ListItem" v-for="item in 5">
					<view class="title"><text>HUAWEI MateBook X Pro</text></view>
					<view class='data'><text>2022-02-10</text></view>
					<view class="alreadyBtn" v-if="false">
						<text>已兑换</text>
					</view>
					<view class="instantBtn">
						<text>立即兑换</text>
					</view>
				</view>
			</view>
			<view class="prizeList" :style="{'--height':ListHeight+'rpx'}" v-if="current === 2">
				<view class="ListItem" v-for="item in 5">
					<view style="display: flex; justify-content: space-between;">
						<view class="title"><text>活动奖品</text> </view>
						<view class='data'><text>2022-02-10</text></view>
					</view>
					<view class="content"><text>点赞“IHG最受欢迎酒店”获得奖品“xxx”</text></view>
				</view>
			</view>
		</view>

		<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['实物奖品', '线下奖品', '中奖记录'],
				current: 0,
				ListHeight: 800,
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				}
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.prize {
		height: 100%;
		background: $pageColor;
	}

	.segmented {
		width: 100%;
		height: 112rpx;
		background: $bgColor;
		box-shadow: 0px 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		margin-bottom: 24rpx;
	}

	::v-deep .segmented-control__text {
		font-size: 32rpx !important;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 500 !important;
	}

	::v-deep .segmented-control__item--text {
		font-size: 32rpx;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 800 !important;
		padding: 10rpx 0 !important;
		border-radius: 4rpx !important;
	}

	.prizeList {
		width: 750rpx;
		height: var(--height);
		background: $bgColor;
		box-shadow: 0px 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
		border-radius: 12rpx;
		padding: 8rpx 28rpx 0 32rpx;
		box-sizing: border-box;

		.ListItem {
			width: 690rpx;
			height: 160rpx;
			border-bottom: #F0F0F0 solid 0.5rpx;
			position: relative;
			padding-top: 35rpx;
			box-sizing: border-box;

			.title {
				margin-bottom: 10rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.data {
				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.alreadyBtn {
				position: absolute;
				top: 50rpx;
				right: 0rpx;
				width: 148rpx;
				height: 60rpx;
				background: $bgColor;
				border-radius: 30rpx;
				border: 2rpx solid #D0D0D0;
				@include flexlayout();

				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #D0D0D0;
				}
			}

			.instantBtn {
				position: absolute;
				top: 50rpx;
				right: 0rpx;
				width: 148rpx;
				height: 60rpx;
				background: $bgColor;
				border-radius: 30rpx;
				border: 2rpx solid #FF6200;
				@include flexlayout();

				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #FF6200;
				}
			}

			.content {
				text {
					font-size: 28rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.ListItem:last-child{
			width: 690rpx;
			height: 160rpx;
			border-bottom: #F0F0F0 solid 0rpx;
			position: relative;
			padding-top: 35rpx;
			box-sizing: border-box;
		
			.title {
				margin-bottom: 10rpx;
		
				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}
		
			.data {
				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
				}
			}
		
			.alreadyBtn {
				position: absolute;
				top: 50rpx;
				right: 0rpx;
				width: 148rpx;
				height: 60rpx;
				background: $bgColor;
				border-radius: 30rpx;
				border: 2rpx solid #D0D0D0;
				@include flexlayout();
		
				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #D0D0D0;
				}
			}
		
			.instantBtn {
				position: absolute;
				top: 50rpx;
				right: 0rpx;
				width: 148rpx;
				height: 60rpx;
				background: $bgColor;
				border-radius: 30rpx;
				border: 2rpx solid #FF6200;
				@include flexlayout();
		
				text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #FF6200;
				}
			}
		
			.content {
				text {
					font-size: 28rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>
