<template>
	<!-- 排行榜 -->
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="container">
			<far-bottom></far-bottom>
			<view class="header" :style="{'background-image':'url('+imageRoot+'rank_bg.jpg)'}">
				<view class="rank_first-box dis-flex flex-y-center flex-x-end" v-if="!!list && list.length>0">
					<view class="first-avatar m-right10" :style="{'background-image':'url('+list[0]['avatar']+')'}"></view>
					<view class="first-detail">
						<view class='first-nickname f-32'>{{list[0]['nickname']}}</view>
						<view class="first-earning-price f-24">{{!!list[0]['total_price']?list[0]['total_price']:'0.00'}}元收益</view>
					</view>
				</view>
			</view>
			<view class="tabBar dis-flex">
				<view class="tabBar-item t-c f-24" :class="{'tabBar_active':currentTab===tabItem.Tabtype}" v-for="(tabItem,index) in RankTab"
				 :key="index" @click="select_current(tabItem.Tabtype)">{{tabItem['title']}}
				 <view class="iconfont icon-triangleupfill active-upfill" v-if="currentTab===tabItem.Tabtype"></view>
				 </view>
			</view>
			<view class="user-detail dis-flex flex-x-between flex-y-center padding-box-all b-f m-btm20">
				<view class="user-avatar-nickname dis-flex flex-y-center">
					<view class="user-avatar m-right20" :style="{'background-image':'url('+user.avatar+')'}"></view>
					<view class="user-nickname-rank">
						<view class="user-nickname f-28">{{user.nickname}}</view>
						<view class="user-rank  col-9 f-26">{{user['sort']==-1?'未能进入排行榜':`位于排行榜第${user['sort']+1}名`}}</view>
					</view>
				</view>
				<view class="withdraw-price f-26" v-if="user['sort']!=-1">{{user['sort']+1}}</view>
			</view>
			<block v-if="!!list&&list.length>0">
				<view class="rank-list b-f">
					<view class="rank-item border-line border-bottom dis-flex flex-y-center flex-x-between" v-for="(rankItem,index) in list"
					 :key="index">
						<view class="dis-flex flex-y-center">
							<block v-if="index<3">
								<block v-if="index===0">
									<image :src="imgfixUrls+ rankIcon[0]['icon_url']" class="item-icon m-right20"></image>
								</block>
								<block v-if="index===1">
									<image :src="imgfixUrls+ rankIcon[1]['icon_url']" class="item-icon m-right20"></image>
								</block>
								<block v-if="index===2">
									<image :src="imgfixUrls+ rankIcon[2]['icon_url']" class="item-icon m-right20"></image>
								</block>
							</block>
							<block v-else>
								<view class="m-right20 f-28 rank-num">{{index+1}}</view>
							</block>
							<view class="rank-avatar-nickname dis-flex flex-y-center">
								<view class="rank-avatar m-right10" :style="{'background-image':'url('+rankItem.avatar+')'}"></view>
								<view class="rank-nickname f-28">{{rankItem.nickname}}</view>
							</view>
						</view>
						<view class="rank-withdraw-price f-24">{{rankItem.total_price}}元</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="no-shop-image">
					<view class="not-image"></view>
					<view class="t-c f-28 m-top30 col-9">亲! 暂无相关数据哦~</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	export default {
		data() {
			return {
				currentTab: '1',
				RankTab: [{
						title: '周排行榜',
						Tabtype: '1'
					},
					{
						title: '月排行榜',
						Tabtype: '2'
					},
					{
						title: '总排行榜',
						Tabtype: '3'
					}
				],
				rankIcon: [{
						icon_url: 'dealer_tool/one.png'
					},
					{
						icon_url: 'dealer_tool/two.png'
					},
					{
						icon_url: 'dealer_tool/three.png'
					}
				],
				loadlogo: false, //页面是否加载完成,
				list: [], //排行榜
				user: {} ,//个人信息
				img:''
			}
		},
		components: {
			Loadlogo
		},
		computed: {

		},
		onShow() {

		},
		onLoad() {
			this.img= this.imgfixUrl;
		},
		mounted() {
			this.img= this.imgfixUrl;
			this.getRankDetail()
		},
		methods: {
			getRankDetail(state = "1") {
				let _this = this,
					requestData = {
						state
					};
				App._post_form('&p=distribution&do=commissionRanking', requestData, res => {
					_this.setData(res.data)
				}, false, () => {
					uni.hideLoading();
					_this.loadlogo = true;
				})
			},
			select_current(current) {
				uni.showLoading({})
				let _this = this;
				_this.currentTab = current;
				_this.getRankDetail(current)

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}

	.container {

		// 头部
		.header {
			width: 100%;
			height: 200upx;
			background-repeat: no-repeat;
			background-size: 100% 200upx;

			.rank_first-box {
				height: 100%;
				margin: auto 0;
				padding-right: 100upx;

				.first-avatar {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					background-size: 100upx 100upx;
					background-repeat: no-repeat;
				}
			}
		}

		//选项
		.tabBar {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background-color: rgb(251, 232, 104);

			.tabBar-item {
				position: relative;
				flex: 1;
				.active-upfill{
					position: absolute;
					color: #ffffff;
					left: 50%;
					bottom: -44%;
					transform: translateX(-50%);
					font-size: 40upx;
					
				}
			}

			.tabBar_active {
				font-weight: 600;
				font-size: 28upx;
			}
		}

		//个人信息
		.user-detail {
			.user-avatar-nickname {
				.user-avatar {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					background-size: 80upx 80upx;
					background-repeat: no-repeat;
				}
				
			}
		}

		.rank-list {
			.rank-item {
				padding: 20upx 30upx;

				.rank-num {
					text-align: center;
					width: 40upx;
				}

				// 排行图标
				.item-icon {
					display: block;
					width: 40upx;
					height: 50upx;
				}

				.rank-avatar-nickname {
					.rank-avatar {
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						background-image: url('http://img3.imgtn.bdimg.com/it/u=400062461,2874561526&fm=26&gp=0.jpg');
						background-size: 60upx 60upx;
						background-repeat: no-repeat;
					}
				}
			}
		}

		//提示图

		.no-shop-image {
			.not-image {
				margin: 20% auto 0;
				width: 400upx;
				height: 200upx;
				background-image: url('https://s10.mogucdn.com/p2/161213/upload_27e7gegi3f9acl5e05f3951if5855_514x260.png');
				background-size: 400upx 200upx;
				background-repeat: no-repeat;
			}
		}
	}
</style>
