<template>
	<block>
		<div class="uni-inline-item ranking-tab-box">
			<div class="ranking-tab-unit" @tap="selectTab(1000)" :class="{'active':nowRank==1000}">商超
			</div>
			<div class="ranking-tab-unit" @tap="selectTab(2000)" :class="{'active':nowRank==2000}">餐饮
			</div>
			<div class="ranking-tab-unit" @tap="selectTab(3000)" :class="{'active':nowRank==3000}">小吃
			</div>
		</div>
		<div class="ranking-content" v-if="wechatPushSalesList">
			<div class="ranking-list" v-for="(item,index) in wechatPushSalesList[nowRank]" :key="index">
				<div class="rank-index">{{item.RANK_ID||item.Rank_ID}}</div>
				<div class="ranking-list-unit">
					<div>{{item.COMMODITY_NAME || item.Commodity_Name}}</div>
					<div class="ranking-unit-info">
						<text>销售金额 </text>
						<text>¥{{$util.fmoney(item.TOTALPRICE || item.TotalPrice)}}</text>
						<text>销售数量 </text>
						<text>{{item.SELLCOUNT || item.SellCount}}</text>
					</div>
				</div>
			</div>
		</div>
	</block>
</template>

<script>
	export default {
		props: ['wechatPushSalesList'],
		data: () => {
			return {
				nowRank: 1000
			}
		},
		methods:{
			selectTab(index){
				
				this.nowRank=index
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	/*排行*/
	.ranking-tab-box {
		margin: 20rpx 32rpx;
		border: 2rpx solid #565656;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		text-align: center;
	
	}
	
	.ranking-tab-box .ranking-tab-unit {
		color: #565656;
		flex: 1;
		height: 64rpx;
		line-height: 60rpx;
	}
	
	.ranking-tab-box .ranking-tab-unit.active {
		background-color: #565656;
		color: #fff
	}
	
	.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
		border-left: 2rpx solid #565656;
	}
	
	.ranking-content {
		/* display: none; */
		min-height: 160rpx;
	}
	
	.ranking-content .ranking-list {
		display: flex;
		align-items: center;
		color: #000;
		padding: 24rpx 32rpx;
	}
	
	.ranking-content .rank-index {
		width: 72rpx;
		height: 72rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 30rpx;
		font-weight: bolder;
		margin-right: 32rpx;
	}
	
	.ranking-content .ranking-list:nth-child(1) .rank-index {
		background: url('/static/images/revenue/top1.png') no-repeat center;
		background-size: contain;
		font-size: 0;
	}
	
	.ranking-content .ranking-list:nth-child(2) .rank-index {
		background: url(/static/images/revenue/top2.png) no-repeat center;
		background-size: contain;
		font-size: 0;
	}
	
	.ranking-content .ranking-list:nth-child(3) .rank-index {
		background: url(/static/images/revenue/top3.png) no-repeat center;
		background-size: contain;
		font-size: 0;
	}
	
	.ranking-content .ranking-list-unit {
		font-size: 28rpx;
		flex: 1;
	}
	
	.ranking-content .ranking-unit-info {
		/* margin-top: 16rpx; */
		display: flex;
		align-items: center;
		/* font-size: .13rem; */
	}
	
	.ranking-content .ranking-unit-info text {
		flex: 2;
		color: #929292;
	}
	
	.ranking-content .ranking-unit-info text:nth-child(2) {
		flex: 3;
	}
	
	.ranking-content .ranking-unit-info text:nth-child(2n) {
		color: #000
	}
	
	.ranking-ico {
		width: 72rpx;
		height: 72rpx;
	}
</style>
