<template>
	<view :data-theme="theme">
		<view class="CommissionRank">
			<view class="header">
				<view class="rank" v-if="position">您目前的排名<text class="num">{{position}}</text>名</view>
				<view class="rank" v-else>您目前暂无排名</view>
			</view>
			<view class="wrapper">
				<view class="nav acea-row row-around">
					<view class="item" :class="active == index ? 'font_color' : ''" v-for="(item,index) in navList" :key="index"
					 @click="switchTap(index)">
						{{ item }}
					</view>
				</view>
				<view class="list">
					<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
						<view class="num" v-if="index <= 2">
							<image :src="'/static/images/medal0'+(index+1)+'.png'"></image>
						</view>
						<view class="num" v-else>
							{{index+1}}
						</view>
						<view class="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="item.avatar"></image>
							</view>
							<view class="text line1">{{item.nickname}}</view>
						</view>
						<view class="people font_color">￥{{item.brokeragePrice}}</view>
					</view>
				</view>
				<view class='noCommodity' v-if="rankList.length == 0 && isShow">
					<emptyPage title="暂无排行～"></emptyPage>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBrokerageRank,
		brokerageRankNumber
	} from '@/api/user.js';
	import {toLogin} from '@/libs/login.js';
	import emptyPage from '@/components/emptyPage.vue'
	import {mapGetters} from "vuex";
	import {setThemeColor} from '@/utils/setTheme.js'
	const app = getApp();
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				navList: ["周排行", "月排行"],
				active: 0,
				rankList: [],
				page: 1,
				limit: 20,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				type: 'week',
				position: 0,
				isShow: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				theme:app.globalData.theme,
				bgColor:'#e93323'
			};
		},
		computed: mapGetters(['isLogin']),
		watch:{
			isLogin:{
				handler:function(newV,oldV){
					if(newV){
						this.getBrokerageRankList();
						this.getBrokerageRankNumber(this.type);
					}
				},
				deep:true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.getBrokerageRankList();
				this.getBrokerageRankNumber(this.type);
			} else {
				toLogin();
			}
			let that = this;
			that.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor:that.bgColor,
			});
		},
		methods: {
			onLoadFun: function() {
				this.getBrokerageRankList();
				this.getBrokerageRankNumber(this.type);
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			switchTap: function(index) {
				this.active = index;
				this.type = index ? 'month' : 'week';
				this.page = 1;
				this.loadend = false;
				this.$set(this, 'rankList', []);
				this.getBrokerageRankList();
				this.getBrokerageRankNumber(this.type);
			},
			getBrokerageRankNumber(type) {
				brokerageRankNumber({
					type: type
				}).then(res => {
					this.position = res.data;
				})
			},
			getBrokerageRankList: function() {
				if (this.loadend) return;
				if (this.loading) return;
				this.loading = true;
				this.loadTitle = '';
				getBrokerageRank({
					page: this.page,
					limit: this.limit,
					type: this.type
				}).then(res => {
					let list = res.data || [];
					let loadend = list.length <= this.limit;
					this.rankList.push.apply(this.rankList, list);
					this.loading = false;
					this.loadend = loadend;
					this.loadTitle = loadend ? '😕我也是有底线的' : '加载更多';
					this.$set(this, 'rankList', this.rankList);
					this.isShow = true;
					//this.position = res.data.position;
				}).catch(err => {
					this.loading = false;
					this.loadTitle = '加载更多'; 
				})
			}
		},
		onReachBottom: function() {
			this.getBrokerageRankList();
		}
	}
</script>

<style scoped lang="scss">
	.CommissionRank .header {
		background: url("data:image/png;base64,[encoded data, 23984 characters]");
		@include main_bg_color(theme);
		width: 100%;
		height: 344rpx;
		background-size: 100% 100%;
	}

	.CommissionRank .header .rank {
		font-size: 33rpx;
		color: #fff;
		position: absolute;
		top: 160rpx;
		left: 48rpx;
	}

	.CommissionRank .header .rank .num {
		font-size: 51rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}

	.CommissionRank .wrapper {
		width: 710rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: -76rpx auto 0 auto;
	}

	.CommissionRank .wrapper .nav {
		height: 99rpx;
		border-bottom: 2.5rpx solid #f3f3f3;
		font-size: 30rpx;
		font-weight: bold;
		color: #999;
		line-height: 99rpx;
	}
	.CommissionRank .wrapper .nav .item.font_color {
		@include main_color(theme);
		@include  tab_border_bottom(theme);
		margin-top: -2rpx;
	}

	.CommissionRank .wrapper .list {
		padding: 0 30rpx;
	}

	.CommissionRank .wrapper .list .item {
		border-bottom: 1px solid #f3f3f3;
		height: 101rpx;
		font-size: 28rpx;
	}

	.CommissionRank .wrapper .list .item .num {
		color: #666;
		width: 70rpx;
	}

	.CommissionRank .wrapper .list .item .num image {
		width: 34rpx;
		height: 40rpx;
		display: block;
	}

	.CommissionRank .wrapper .list .item .picTxt {
		width: 350rpx;
	}

	.CommissionRank .wrapper .list .item .picTxt .pictrue {
		width: 68rpx;
		height: 68rpx;
	}

	.CommissionRank .wrapper .list .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
	}

	.CommissionRank .wrapper .list .item .picTxt .text {
		width: 262rpx;
		color: #333;
	}

	.CommissionRank .wrapper .list .item .people {
		width: 175rpx;
		text-align: right;
	}
	.font_color{
		@include price_color(theme);
	}
</style>
