<template>
	<view class="prize-log-wrapper">
		<!-- 分类标签 -->
		<scroll-view class="sub-tab" scroll-x>
			<view v-for="(item, i) in subTab" :key="i" class="sub-tab-item"
				:class="{ act: currentSubTab === i, unact: currentSubTab !== i }" @click="onSubTabChange(i)">
				{{ item.shang_title }}
			</view>
		</scroll-view>

		<!-- 中奖记录列表 -->
		<view v-if="logList.length > 0" class="log-list">
			<view v-for="(item, i) in logList" :key="i" class="log-item br20">
				<!-- 用户头像 -->
				<view class="avatar">
					<image :src="item.user_info.headimg" lazy-load></image>
				</view>

				<!-- 用户信息 -->
				<view class="info">
					<view class="name hang1">{{ item.user_info.nickname }}</view>
					<view class="time">{{ item.addtime }}</view>
				</view>

				<!-- 中奖信息 -->
				<view class="prize">
					<view class="pic flex">
						<image class="img100" style="border-radius: 16rpx;" :src="item.goodslist_imgurl" lazy-load></image>
					</view>
					<view class="column align-end">
						<view class="prize-shang center" :style="{ background: item.shang_color }">
							{{ item.shang_title }}
						</view>
						<view class="flex mt10">
							<view class="title hang1">{{ item.goodslist_title }}</view>
							<view class="num">×{{ item.prize_num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无数据提示 -->
		<view v-else class="empty-tip">暂无中奖记录</view>
	</view>
</template>

<script>
	export default {
		name: "DetailPrizeLog",
		props: {
			// 分类标签列表
			subTab: {
				type: Array,
				default: () => [],
			},
			// 中奖记录列表
			logList: {
				type: Array,
				default: () => [],
			},
			// 当前选中的分类
			currentSubTab: {
				type: Number,
				default: 0,
			},
		},
		methods: {
			// 切换分类
			onSubTabChange(index) {
				if (index === this.currentSubTab) return;
				this.$emit("sub-tab-change", index);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.prize-log-wrapper {
		width: 100%;

		// 分类标签栏
		.sub-tab {
			white-space: nowrap;
			padding: 30rpx 0 10rpx;

			.sub-tab-item {
				display: inline-flex;
				align-items: center;
				padding: 0 20rpx;
				height: 50rpx;
				margin-left: 30rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				border-radius: 8rpx;
				transition: all 0.2s;

				// 活跃状态
				&.act {
					color: #333333;
					background: #e6f791;
				}

				// 非活跃状态
				&.unact {
					color: #333333;
					background: #f5f5f5;
				}

				&:last-child {
					margin-right: 30rpx;
				}
			}
		}

		// 中奖记录列表
		.log-list {
			padding: 1rpx 30rpx 30rpx;

			.log-item {
				height: 144rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				background: #f8f8f8;

				// 用户头像
				.avatar {
					width: 76rpx;
					height: 76rpx;
					background: #9d9d9d;
					border: 1px solid #cccccc;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 用户信息
				.info {
					width: 230rpx;
					margin-left: 20rpx;

					.name {
						font-size: 20rpx;
						font-weight: 400;
						color: #333333;
					}

					.time {
						margin-top: 10rpx;
						white-space: nowrap;
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}

				// 中奖物品信息
				.prize {
					flex: 1;
					padding-left: 60rpx;
					display: flex;
					align-items: center;

					.prize-shang {
						min-width: 68rpx;
						height: 32rpx;
						border-radius: 18rpx;
						font-size: 14rpx;
						color: #ffffff;
					}

					.pic {
						width: 76rpx;
						height: 76rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						width: 100rpx;
						margin-left: 20rpx;
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						text-align: right;
					}

					.num {
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		// 空数据提示
		.empty-tip {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>