<template>
	<view>
		<u-popup v-model="show" mode="center" @close="close">
			<view class="bg">
				<view class="title">恭喜您获得</view>
				<view class="goods">
					<template v-if="result&&result.type==3">
						<view class="u-flex  u-col-center u-row-center">
							<image style="height: 42px;" src="/static/red-pack.png" mode="heightFix"></image>
						</view>
						<view class="u-flex u-row-center">
							<view class="type">物品</view>
						</view>
					</template>
					<template v-if="result&&result.type==2">
						<view class="u-flex color-money u-col-center u-row-center">
							<view class="money">{{result.number}}</view>
							<view class="font-bold" style="margin-top: 20rpx;">元</view>
						</view>
						<view class="u-flex u-row-center">
							<view class="type">现金红包</view>
						</view>
					</template>
					
				</view>
				<view class="u-flex u-row-center btn-box">
					<view class="btn" @click="lingqu">立即领取</view>
				</view>
			</view>
			<view class="u-flex u-row-center">
				<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				result: ''
			}
		},
		methods: {
			open(data) {
				console.log(data);
				this.result = data
				this.show = true
			},
			lingqu() {
				const {
					orderId,
					id
				} = this.result
				this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
					this.result = ''
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						})
						this.$emit('success')
						this.close()
					} else {
						uni.showToast({
							title: '领取失败',
							icon: 'none'
						})
					}
				})
			},
			close() {
				this.show = false
				if(!this.result){
					return
				}
				const {
					orderId,
					id
				} = this.result
				this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
					this.result = ''
					console.log(res)
					if (res.code == 0) {
						this.$emit('success')
						this.close()
					} else {
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-mode-center-box {
		background-color: transparent;
	}

	.color-money {
		color: #E42F00;
	}

	.money {
		font-weight: 700;
		font-size: 72rpx;
		letter-spacing: 2px;
	}

	.bg {
		width: 628rpx;
		height: 770rpx;
		margin-right: 10rpx;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-image: url("~static/images/zhuanpan/ling-qu.png");
		position: relative;

		@media (-webkit-min-device-pixel-ratio: 2),
		(min-device-pixel-ratio: 2) {
			background-image: url("~static/images/zhuanpan/ling-qu@2x.png");
		}

		.title {
			position: absolute;
			top: 238rpx;
			text-align: center;
			left: 0;
			right: 0;
			font-weight: 700;
			font-size: 58rpx;
			color: #AF6920;
			letter-spacing: 4rpx;
		}

		.goods {
			position: absolute;
			top: 326rpx;
			text-align: center;
			left: 0;
			right: 0;
			text-align: center;
		}

		.type {
			padding: 6rpx 28rpx;
			border-radius: 100rpx;
			background: #E25B41;
			font-size: 28rpx;
			color: #fff;
			font-weight: bold;
		}

		.btn-box {
			position: absolute;
			top: 574rpx;
			left: 0;
			right: 0;

			.btn {
				padding: 10rpx 60rpx 10rpx 64rpx;
				text-align: center;
				font-weight: bold;
				font-size: 44rpx;
				color: #AF6920;
				letter-spacing: 2px;
			}
		}

	}
</style>