<template>
	<view style="width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center;">

		<view class="" style="position: relative;width: 100%;">
			<view class="" style=" width: 100%; height: 457.64rpx; position: absolute;">
				<swiper class="" style="width: 100%; height: 100%;" :autoplay="true" :indicator-dots="false"
					:circular="true" :interval="3000">
					<swiper-item v-for="(v, i) in advert" :key="i" @click="$c.navTo(v)">
						<image class="yh_bg" :src="v.imgurl" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
			<uni-icons type="left" style="position: absolute; left: 30rpx; z-index: 100;"
				:style="{top:$sys().statusBarHeight+'px'}" @tap="$c.back(1)" color="#FFFFFF"></uni-icons>
			<view class="" :style="{top:$sys().statusBarHeight+'px'}"
				style="position: absolute;width: 100%; position: absolute; font-weight: 400; text-align: center; font-size: 37rpx; color: #FFFFFF;">
				消费榜</view>
		</view>



		<view
			style="width: 683rpx; margin-top: 457.64rpx; margin-bottom: 50rpx; display: flex; flex-direction: column; overflow: auto;">
			<view class="" v-for="(item,index) in list"
				style="display: flex; flex-direction: row; align-items: center; margin-top:30rpx; border-radius: 14rpx; padding-top: 15rpx; padding-bottom: 15rpx;"
				: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: 43rpx; height: 47rpx;"></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: 43rpx; height: 47rpx;"></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: 43rpx; height: 47rpx;"></image>
				</view>
				<view class="" v-if="index > 2 "
					style="width: 43rpx; height: 47rpx;color: #B8B8B8;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: 33rpx; color: white;">{{item.nickname}}</text>
				</view>
				<view class="" style="width:180rpx;">
					<span style="color: white; font-size: 33rpx;">{{item.price}}</span>
				</view>

			</view>
		</view>

	</view>
</template>

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

			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">
	.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>