<template>
	<u-popup :show="show" round="20rpx" mode="center" bgColor="#fff" zIndex="10076" @close="$emit('confirm')">
		<view class="prize-popup" v-if="isWon">
			<image class="prize-header-image"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/red_head.png"
				mode="widthFix" />
			<view class="prize-title">恭喜您 中奖啦！</view>
			<view class="prize-info-section" v-for="(item, index) in (prizeInfo || [])" :key="index">
				<view class="prize-info-item">{{ item.userName }}</view>
				<view class="prize-info-item">{{ item.userId }}</view>
				<view class="prize-level item">{{ item.prizeLevel }}等奖</view>
			</view>
			<view class="prize-tip">请填写收货地址，主播将会将奖品发给您</view>
			<view class="prize-action-button" @click="$emit('fill-address')">填写地址</view>
		</view>
		<view class="no-prize-popup" v-else>
			<image class="no-prize-image"
				src="https://bjzmky-1323137866.cos.ap-chongqing.myqcloud.com/userapp/images/no-prize.png"
				mode="widthFix" />
			<view class="no-prize-tip">很遗憾 您未中奖</view>
			<view class="no-prize-confirm-button" @click="$emit('confirm')">确认</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: 'LivePrizePanel',
	props: {
		show: { type: Boolean, default: false },
		isWon: { type: Boolean, default: false },
		prizeInfo: { type: Array, default: () => [] }
	}
}
</script>

<style scoped lang="scss">
.prize-popup {
	width: 504rpx;
	padding: 40rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	align-items: center;
	background: linear-gradient(180deg, #f7823f 0%, #ffd4be 27%, #ffffff 100%);
	position: relative;

	.prize-header-image {
		width: 311rpx;
		position: absolute;
		top: -122rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.prize-title {
		color: #c32008;
		font-size: 34rpx;
		font-weight: 600;
		margin: 20rpx 0 40rpx;
	}

	.prize-info-section {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin: 10rpx 0;

		.prize-level {
			font-weight: 600;
		}
	}

	.prize-tip {
		font-size: 28rpx;
		color: #414141;
		margin: 40rpx 0;
	}

	.prize-action-button {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: linear-gradient(180deg, #ff7c30 0%, #ff3a1e 100%);
		border-radius: 28rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
	}
}

.no-prize-popup {
	width: 504rpx;
	padding: 40rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	align-items: center;

	.no-prize-image {
		margin-top: 40rpx;
		width: 300rpx;
		height: 300rpx;
	}

	.no-prize-tip {
		font-size: 36rpx;
		color: #414141;
		margin: 40rpx 0;
	}

	.no-prize-confirm-button {
		width: 220rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(180deg, #fdfbb8 0%, #b79243 100%);
		border-radius: 28rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
	}
}
</style>
