<template>
	<page-container title="哈尼券排行榜" :showBack="true">
		<view class="content-container">
			<image :src="$img('/static/image/reward_rule.png')" style="width: 686rpx; height: 120rpx; margin-top: 30rpx;"
				@click="$refs.rulePop.getRule(24, '规则说明')" mode=""></image>

			<view class="ranking-list">
				<view class="ranking-item" v-for="(item,index) in list" :key="index"
					:style="{backgroundColor: setBgColor(index)}">

					<view class="" v-if="index == 0 "
						style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
						<image :src="$img1('/image/1.png')" style="width: 42rpx; height: 54rpx;"></image>
					</view>
					<view class="" v-if="index == 1 "
						style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
						<image :src="$img1('/image/2.png')" style="width: 42rpx; height: 54rpx;"></image>
					</view>
					<view class="" v-if="index == 2 "
						style="width: 43rpx; height: 47rpx;color: #B8B8B8;text-align:center; margin-left: 32rpx;">
						<image :src="$img1('/image/3.png')" style="width: 42rpx; height: 54rpx;"></image>
					</view>
					<view class="" v-if="index > 2 "
						style="width: 42rpx; height: 42rpx;color: #333333;text-align:center; margin-left: 32rpx;">
						{{index+1}}
					</view>

					<view class="" style="width: 94rpx; height: 94rpx; margin-left: 30rpx;">
						<image :src="item.headimg" style="width: 94rpx; height: 94rpx; border-radius: 50%;"></image>
					</view>
					<view class="" style="display: flex; flex-direction: column; margin-left: 28rpx;flex: 1;">
						<text style="font-size: 20rpx; color: #333333;">{{item.nickname}}</text>
					</view>
					<view class="" style="margin-right: 20rpx;">
						<span style="color: #333333; font-size: 32rpx;">{{item.value}}<text
								style="font-size: 16rpx; color: #8A8A8A;">张</text></span>
					</view>
				</view>
			</view>
		</view>
		<rule-pop ref="rulePop"></rule-pop>
	</page-container>
</template>

<script>
	import { getAdvert } from '@/common/server/config'
	import { getDadajuanRank } from '@/common/server/rank'
	export default {
		data() {
			var list;
			return {
				advert: [], //轮播图
				list: [],
				colors: ['#FDFCD8', '#ECF7FF', '#FFF6EE', '#F8F8F8'],
			}
		},
		onLoad() {
			this.load();
		},
		methods: {
			async load() {
				const advert = await getAdvert(4)
				this.advert = advert
				
				const res = await getDadajuanRank()
				console.log(res);
				if (res.status == 1) {
					this.list = res.data
				}
			},

			setBgColor(index) {
				if (index == 0) {
					return this.colors[index];
				} else if (index == 1) {
					return this.colors[index];
				} else if (index == 2) {
					return this.colors[index];
				} else {
					return this.colors[3];
				}
			},
		}
	}
</script>

<style lang="scss">
	.content-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	
	.ranking-list {
		width: 100%;
		margin-bottom: 50rpx;
		display: flex;
		flex-direction: column;
		overflow: auto;
		margin-top: 20rpx;
	}
	
	.ranking-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30rpx;
		border-radius: 14rpx;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}
	
	.navLeft {
		height: 44px;
		z-index: 100;
		display: flex;
		width: 100%;
		align-items: center !important;

		>view {
			width: 100%;
			// font-family: YouSheBiaoTiHei;
			position: absolute;
			font-weight: 400;
			text-align: center;
			font-size: 37rpx;
			color: #FFFFFF;
		}
	}
</style>