<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: 100px;" :src="result.img" mode="heightFix"></image>
						</view>
						<view class="u-flex u-row-center u-m-t-30">
							<view class="type">{{result.name}}</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;font-size: 36rpx;">元</view>
						</view>
						<view class="u-flex u-m-t-24 u-row-center">
							<view class="type">现金红包</view>
						</view>
					</template>
					
				</view>
				
				<view class="u-flex close u-row-center">
					<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
				</view>
			</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
			},
			close() {
				console.log('抽奖弹窗关闭');
				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) {
						console.log('抽奖领取成功');
						const key=res.data==0?'isBindAliPay':undefined
						this.$emit('close',key)
						if(key&&key=='isBindAliPay'){
							uni.navigateTo({
								url:'/me/invite/zhifubao'
							})
						}
					} 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: 96rpx;
		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/gift.png");
		position: relative;

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

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

		.goods {
			position: absolute;
			top: 336rpx;
			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;
		}
		.close{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.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>