<template>
	<view :style="viewColor">
		<view class="PromoterRank">
			<view class="redBg">
				<view class="header">
					<view class="nav acea-row row-center-wrapper">
						<view class="item" :class="active == index ? 'view-color' : ''" v-for="(item,index) in navList" :key="index"
						 @click="switchTap(index)">
							{{ item }}
						</view>
					</view>
					<view class="rank acea-row row-bottom row-around">
						<view class="item" v-if="Two.uid">
							<view class="pictrue pictrue2">
								<image :src="Two.avatar ? Two.avatar : '/static/images/f.png'"></image>
							</view>
							<view class="name line1">{{Two.nickname}}</view>
							<view class="num">{{Two.count}}人</view>
						</view>
						<view class="item" v-if="One.uid">
							<view class="pictrue pictrue1">
								<image :src="One.avatar ? One.avatar : '/static/images/f.png'"></image>
							</view>
							<view class="name line1">{{One.nickname}}</view>
							<view class="num">{{One.count}}人</view>
						</view>
						<view class="item" v-if="Three.uid">
							<view class="pictrue pictrue3">
								<image :src="Three.avatar ? Three.avatar : '/static/images/f.png'"></image>
							</view>
							<view class="name line1">{{Three.nickname}}</view>
							<view class="num">{{Three.count}}人</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="rankList.length">
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in rankList" :key="index">
					<view class="num">{{index+4}}</view>
					<view class="picTxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="item.avatar ? item.avatar : '/static/images/f.png'"></image>
						</view>
						<view class="text line1">{{item.nickname}}</view>
					</view>
					<view class="people">{{item.count}}人</view>
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>

	import { getRankList } from '@/api/user.js';
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
  import spread from "../../../libs/spread";
	export default {
		components: {
			authorize
		},
		data() {
			return {
				navList: ["周榜", "月榜"],
				active: 0,
				page: 1,
				limit: 10,
				type: 'week',
				loading: false,
				loadend: false,
				rankList: [],
				Two: {},
				One: {},
				Three: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin','uid','viewColor']),
		onLoad(options) {
			if (this.isLogin) {
				this.getRanklist();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}

      // 关系处理
      if(options.spread) spread(options.spread, this.isLogin)
		},
		methods: {
			onLoadFun() {
				this.getRanklist();
        this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			getRanklist: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				getRankList({
					page: that.page,
					limit: that.limit,
					type: that.active
				}).then(res => {
					let list = res.data.list;
					that.rankList.push(...list);
					if (that.page == 1) {
						that.One = that.rankList.shift() || {};
						that.Two = that.rankList.shift() || {};
						that.Three = that.rankList.shift() || {};
					}
					that.loadend = list.length < that.limit;
					that.loading = false;
					that.$set(that, 'rankList', that.rankList);
					that.One = that.One;
					that.Two = that.Two;
					that.Three = that.Three;
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
				})
			},

			switchTap: function(index) {
				if (this.active === index) return;
				this.active = index;
				this.type = index ? 'month' : 'week';
				this.page = 1;
				this.loadend = false;
				this.$set(this, 'rankList', []);
				this.Two = {};
				this.One = {};
				this.Three = {};
				this.getRanklist();
			},
		},
		onReachBottom: function() {
			this.getRanklist();
		},
    // #ifdef MP
    // 分享给好友
    onShareAppMessage () {
      let pages = getCurrentPages();
      let page = pages[pages.length - 1]
      let shareData = {
        title: '推广人排行',
        path: page.$page.fullPath || '/' + page.route,
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // 分享到朋友圈
    onShareTimeline() {
      let shareData = {
        title: '推广人排行',
        query: {},
      };
      // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
      if (this.isLogin) shareData.query.spread = this.uid;
      // 返回最终的分享配置信息
      return shareData
    },
    // #endif
	}
</script>

<style scoped lang="scss">
	.PromoterRank .redBg {
		padding: 45rpx 0 30rpx 0;
		height: 460rpx;
		background-color: var(--view-theme);
		background-image: url('data:image/png;base64,[encoded data, 5148 characters]');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: left bottom;
	}

	.PromoterRank .header {
		width: 100%;
	
		background-size: 100% 100%;
	}

	.PromoterRank .header .nav {
		width: 450rpx;
		height: 66rpx;
		border: 1px solid #fff;
		border-radius: 33rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0 auto;
	}
	.PromoterRank .header .nav .item {
		width: 223rpx;
		height: 100%;
		text-align: center;
		line-height: 60rpx;
	}
	.view-color{
		color: var(--view-theme);
	}
	.PromoterRank .header .nav .item.view-color:nth-of-type(1) {
		background-color: #fff;
		border-radius: 33rpx 0 0 33rpx;
	}

	.PromoterRank .header .nav .item.view-color:nth-of-type(2) {
		background-color: #fff;
		border-radius: 0 33rpx 33rpx 0;
	}

	.PromoterRank .header .rank {
		padding: 0 20rpx;
		margin-top: 15rpx;
	}

	.PromoterRank .header .rank .item .pictrue {

		background-size: 100% 100%;
		width: 136rpx;
		height: 177rpx;
		position: relative;
		margin: 0 auto;
	}

	.PromoterRank .header .rank .item .pictrue image {
		position: absolute;
		width: 130rpx;
		height: 130rpx;
		display: block;
		bottom: 2rpx;
		border-radius: 50%;
		left: 50%;
		margin-left: -65rpx;
	}

	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {

		width: 156rpx;
		height: 205rpx;
	}
	.pictrue1{
		background-image: url("data:image/png;base64,[encoded data, 9400 characters]");
	}
	.pictrue2{
		background: url("data:image/png;base64,[encoded data, 7676 characters]") no-repeat;
	}
	.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
		width: 150rpx;
		height: 150rpx;
		margin-left: -75rpx;
	}

	.PromoterRank .header .rank .item .pictrue3 {
		background-image: url("data:image/png;base64,[encoded data, 8676 characters]");
	}
	.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
		margin-left: -64rpx;
	}

	.PromoterRank .header .rank .item .name {
		font-size: 30rpx;
		color: #fff;
		margin-top: 22rpx;
		text-align: center;
		width: 170rpx;
	}

	.PromoterRank .header .rank .item .num {
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.PromoterRank .list {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: -30rpx auto 0 auto;
		padding: 0 30rpx;
	}

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

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

	.PromoterRank .list .item .picTxt {
		width: 350rpx;
	}

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

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

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

	.PromoterRank .list .item .people {
		width: 175rpx;
		text-align: right;
		color: var(--view-priceColor);
	}
</style>
