<template>
	<view class="list-bonus-com">
		<image src="@/static/rank/close.png" mode="" class="close-icon" @click="close"></image>
		<view class="title">
			<image src="@/static/rank/title.png" mode="aspectFit" class="title-icon"></image>
			<!-- <view class="title-top">榜单奖励</view> -->
			<!-- <view class="title-last">榜单奖励</view> -->
		</view>
		<scroll-view scroll-y="true" class="scroll-view-content">
			<view class="content" :class="{'content-two':Number(key) <= 3}" v-for="(item,key) in detail" :key="key">
				
				<!-- <view class="content-title" v-if="key > 3">第{{Number(key) + 1}}-{{key}}名</view> -->
				<view class="content-title">第{{key}}名</view>
				<scroll-view scroll-x="true" class="award">
					<template v-for="(childItem,childIndex) in item">
						<view class="award-item" v-if="childItem.type !== 'PRODUCT' && childItem.type !== 'COUPON'">
							<image :src="`/static/rank/${childItem.type}.png`" mode="aspectFit" class="award-icon"></image>
							<view class="award-name">
								{{typeObj[childItem.type]}}X{{childItem.num}}
								<!-- <image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image> -->
							</view>
						</view>
						<view class="award-item" v-if="childItem.type === 'PRODUCT'">
							<template v-if="childItem.info">
								<image v-if="childItem.info.coverResource" :src="childItem.info.coverResource.url" mode="aspectFit" class="award-icon"></image>
							</template>
							
							<view class="award-name">
								{{childItem.info.name}}X{{childItem.num}}
								<!-- <image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image> -->
							</view>
						</view>
						<view class="award-item" v-if="childItem.type === 'COUPON'">
							<view class="award-icon" :style="{'background-image': `url(/static/rank/${childItem.type}.png)`}">
								<template v-if="childItem.info.type === 'REDUCTION'">
									<text class="coupon-sym">¥</text>
									<text class="coupon-price">{{Number(childItem.info.amount)}}</text>
								</template>
								<template v-if="childItem.info.type === 'DISCOUNT'">
									
									<text class="coupon-price">{{Number(childItem.info.amount)}}</text>
									<text class="coupon-sym">折</text>
								</template>
							</view>
							<!-- couponObj:{
											'REDUCTION':"立减",
											'DISCOUNT':"折扣"
							} -->
							<view class="award-name">
								{{childItem.info.name}}X{{childItem.num}}
							</view>
						</view>
					</template>
					<!-- <view class="award-item">
						<view class="award-icon" style="background-image: url('/static/rank/yhq.png');">
							<text class="coupon-sym">¥</text>
							<text class="coupon-price">10</text>
						</view>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view> -->
					<!-- <view class="award-item">
						<image src="@/static/rank/cck.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/hz.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view> -->
				</scroll-view>
			</view>
			<!-- <view class="content content-two">
				<view class="content-title">第2名</view>
				<scroll-view scroll-x="true" class="award">
					<view class="award-item">
						<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- <view class="content content-two">
				<view class="content-title">第2名</view>
				<scroll-view scroll-x="true" class="award">
					<view class="award-item">
						<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- <view class="content content-two">
				<view class="content-title">第2名</view>
				<scroll-view scroll-x="true" class="award">
					<view class="award-item">
						<image src="@/static/rank/jfk.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
					<view class="award-item">
						<image src="@/static/rank/yhq.png" mode="aspectFit" class="award-icon"></image>
						<view class="award-name">
							Apple AirPods
							<image src="@/static/rank/x.png" mode="aspectFit" class="name-bottom"></image>
						</view>
					</view>
				</scroll-view>
			</view> -->
		</scroll-view>
		<!-- 道具奖励在冲榜结束后0点下发，到账存在10分钟的延迟实物奖励请联系企微福利官领取 -->
		<view class="footer-title">{{description}}</view>
		<view class="footer-go" @click="goCustomer">
			点我跳转至微信福利官
			<image src="@/static/rank/go.png" mode="" class="go-icon"></image>
		</view>
	</view>
</template>

<script>
	import { customerApi } from '@/API/user.js'
	export default{
		props:{
			detail:{
				type:Object,
				default:() => {}
			},
			description:{
				type:String,
				default:''
			},
		},
		data(){
			return{
				typeObj:{
					POINTS:'积分',
					COUPON:'优惠券',
					PROMPT:'提示卡',
					COIN:'代币',
					PRODUCT:'商品'
				},
				couponObj:{
				'REDUCTION':"立减",
				'DISCOUNT':"折扣"
			  },
			  customer:''
			}
		},
		mounted() {
			this.getCustomer()
		},
		methods:{
			close(){
				this.$emit('close')
			},
			goCustomer(){
				uni.navigateTo({
					url:`/pages/mine/customer`
				})
				// window.location.href = this.customer
			},
			
			getCustomer(){
				customerApi().then(res => {
						if(res.code === 200){
							this.customer = res.data
						}else{
							this.$api.msg(res.message)
						}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-bonus-com{
		width: 656rpx;
		height: 829rpx;
		background-image: url('@/static/rank/jl.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		.close-icon{
			position: absolute;
			width: 73rpx;
			height: 73rpx;
			top:12rpx;
			right:13rpx;
			z-index: 10;
		}
		.title{
			position: relative;
			padding:64rpx 0 28rpx 194rpx;
			.title-icon{
				width: 308rpx;
				height: 60rpx;
			}
			.title-top{
				z-index: 2;
				font-family: YouSheBiaoTiHei;
				font-size: 70rpx;
				color: #1B6784;
			}
			// .title-last{
			// 	position: absolute;
			// 	top: 0;
			// 	left: 0;
			// 	z-index: 1;
			// 	font-family: YouSheBiaoTiHei;
			// 	font-size: 80rpx;
			// 	color: #FFFFFF;
			// 	text-stroke: 10px #FFFFFF;
			// 	webkit-text-stroke: 10px #FFFFFF;
			// }
		}
		.scroll-view-content{
			height: 530rpx;
			.content{
				background-image: url('@/static/rank/de.png');
				background-repeat: no-repeat;
				background-size: 100%;
				width: 559rpx;
				height: 226rpx;
				margin-left: 51rpx;
				margin-bottom: 43rpx;
				.content-title{
					font-family: YouSheBiaoTiHei;
					font-size: 27rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.award{
					// display: flex;
					// align-items: center;
					// padding: 0 34rpx;
					width: 559rpx;
					padding-top: 16rpx;
					white-space: nowrap;
					.award-item{
						display: inline-block;
						width: 131rpx;
						margin-left: 34rpx;
						.award-icon{
							width: 137rpx;
							height: 137rpx;
							display: block;
							margin: 0 auto;
							background-repeat: no-repeat;
							background-size: 100%;
							text-align: center;
							line-height: 147rpx;
							.coupon-sym{
								font-family: YouSheBiaoTiHei;
								font-size: 23rpx;
								color: #FFFFFF;
							}
							.coupon-price{
								font-family: YouSheBiaoTiHei;
								font-size: 30rpx;
								color: #FFFFFF;
							}
						}
						.award-name{
							width: 137rpx;
							font-size: 19rpx;
							height: 28rpx;
							// margin-top: 10rpx;
							color: #000000;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							text-align: center;
							position: relative;
							.name-bottom{
								position: absolute;
								width: 131rpx;
								height: 1rpx;
								left: 0;
								bottom: 0rpx;
							}
						}
					}
				}
			}
			.content-two{
				background-image: url('@/static/rank/dy.png');
			}
		}
		
		.footer-title{
			margin: 20rpx auto 0 auto;
			width: 469rpx;
			text-align: center;
			// color: #71DDFD;
			color: red;
			// font-size: 19rpx;
			font-size: 28rpx;
			line-height: 27rpx;
		}
		.footer-go{
			display: flex;
			align-items: center;
			justify-content: center;
			// font-size: 19rpx;
			font-size: 28rpx;
			color: #000000;
			margin-top: 10rpx;
			.go-icon{
				width: 29rpx;
				height: 29rpx;
			}
		}
	}
</style>