<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header-tabbar dis-flex">
				<view class="tabbar-item col-f t-c f-28 p-r" v-for="(tabItem,index) in tabbar" :key="index" @click="selectTabbar(tabItem['type'])">{{tabItem.title}}
					<view class="select-tabbarIcon iconfont icon-triangleupfill" v-if="tabType===tabItem.type"></view>
				</view>
			</view>
			<block v-if="!selectTabbarLoading">
				<view class="header-userInfo padding-box-all dis-flex flex-x-between flex-y-center">
					<view class="header-userInfo-left dis-flex">
						<view class="header-avatar m-right20" :style="{'background-image':'url('+user.avatar+')'}"></view>
						<view class="header-nickname-rank">
							<view class="dis-flex">
								<view class="header-nickname f-28 m-right10">{{user.nickname}}</view>
								<view class='at-rank col-f f-24'>{{user.orders==="-1"?'未入榜':'排名:'+user.orders}}</view>
							</view>
							<view class="f-24 col-9">{{user.orders==="-1"?'未入榜':'第'+user.orders+'名'}}</view>
						</view>
					</view>
					<view class="header-userInfo-right f-24 col-f">{{tabType==='1'?'连续签到:'+user.times+'天':tabType==='2'?'总签到次数:'+user.totaltimes+'次':TextSubstitution.credittext+':'+user.integral}}</view>
				</view>
				<view class="rank-content padding-box-all p-r">
					<view class="content-title t-c">
						<view class="content-title-letter f-48 col-f m-btm10">{{tabType==='1'?'连续签到':tabType==='2'?'总签到次数':TextSubstitution.credittext}}排行榜</view>
						<view class="content-title-label f-24">注:该排行榜为实时更新</view>
					</view>
					<view class="rank-bg" :style="{'background-image':'url('+imageRoot+'signrank_bg.png)'}"></view>
					<view class="rank-first rank-first_1 onelist-hidden" v-if="!!list && list.length>0">
						<view class="userInfo-avatar-nickName_1">
							<view class="first-avtar-bg p-r">
								<view class="first-avtar rank-avatar" :style="{'background-image':'url('+list['0'].avatar+')'}"></view>
							</view>
							<view class="userInfo-nickName f-24 onelist-hidden t-c">{{list['0'].nickname}}</view>
						</view>
					</view>
					<view class="rank-first rank-first_2 onelist-hidden" v-if="!!list['1']">
						<view class="userInfo-avatar-nickName_2">
							<view class="first-avtar-bg p-r">
								<view class="first-avtar rank-avatar" :style="{'background-image':'url('+list['1'].avatar+')'}"></view>
							</view>
							<view class="userInfo-nickName f-24 onelist-hidden t-c">{{list['1'].nickname}}</view>
						</view>
					</view>
					<view class="rank-first rank-first_3 onelist-hidden" v-if="!!list['2']">
						<view class="userInfo-avatar-nickName_3">
							<view class="first-avtar-bg p-r">
								<view class="first-avtar rank-avatar" :style="{'background-image':'url('+list['2'].avatar+')'}"></view>
							</view>
							<view class="userInfo-nickName f-24 onelist-hidden t-c">{{list['2'].nickname}}</view>
						</view>
					</view>
					<view class="first-avatar-crown first-avatar-crown_1 iconfont icon-crownfill" v-if="!!list['0']"></view>
					<view class="first-avatar-crown first-avatar-crown_2 iconfont icon-crownfill" v-if="!!list['1']"></view>
					<view class="first-avatar-crown first-avatar-crown_3 iconfont icon-crownfill" v-if="!!list['2']"></view>
				</view>
				<view class="rank-list">
					<view class="rank-list-item padding-box-all border-line border-bottom dis-flex flex-x-between flex-y-center" v-if="index>2"
					 v-for="(listItem,index) in list" :key="index">
						<view class="rank-list-item-left dis-flex flex-y-center">
							<view class="rank-index f-24 col-3">{{index+1}}</view>
							<view class="rank-list-avatar m-left-right-20" :style="{'background-image':'url('+listItem.avatar+')'}"></view>
							<view class="rank-list-nickname f-28 col-3">{{listItem.nickname}}</view>
						</view>
						<view class="header-userInfo-right f-24 col-f rank-list-item-right">{{tabType==='1'?'连续签到:'+listItem.times+'天':tabType==='2'?'总签到次数:'+listItem.totaltimes+'次':TextSubstitution.credittext+':'+listItem.integral}}</view>
					</view>
				</view>
			</block>
			<block v-else>
				<part-loading ref="partLoading" :backgroundType="'goods'"></part-loading>
			</block>
		</view>
		<view class="page-footer">
			<TabBars :tabBarAct="0" :pageType="'11'" />
		</view>
	</view>
</template>

<script>
	import Loadlogo from '@/components/template/loadlogo'
	import PartLoading from "@/components/template/PartLoading.vue"
	import App from "@/common/js/app.js"
	import TabBars from '@/components/template/tabBar.vue'
	export default {
		data() {
			return {
				loadlogo: false,
				selectTabbarLoading:false,
				tabType: '1',
				list: [],
				user: {},
				set:{},
				tabbar: [{
						title: '最执着',
						type: '1'
					},
					{
						title: '签到狂',
						type: '2'
					},
					{
						title: '最富有',
						type: '3'
					}
				],
				TextSubstitution:{}
			}
		},
		components: {
			Loadlogo,
			PartLoading,
			TabBars
		},
		mounted() {
			this.getrankingList();
			this.TextSubstitution = uni.getStorageSync('TextSubstitution');
		},
		methods: {
			getrankingList(type = '1') {
				let _this = this;
				App._post_form('&p=wlsign&do=rankingList', {
					type
				}, res => {
					if (res.errno === 0) {
						_this.setData(res.data)
					}
				}, false, () => {
					_this.loadlogo = true;
					_this.selectTabbarLoading = false;
				})
			},
			selectTabbar(currentType) {
				let _this = this;
				_this.tabType = currentType;
				_this.selectTabbarLoading = true;
				_this.getrankingList(currentType);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.header-tabbar {
		background-color: #000000;
		width: 100%;
		height: 80upx;

		.tabbar-item {
			width: 33.33%;
			line-height: 80upx;

			.select-tabbarIcon {
				position: absolute;
				left: 50%;
				bottom: -30upx;
				transform: translateX(-50%);
				color: #FFFFFF;
			}
		}
	}

	.header-userInfo {
		.header-userInfo-left {
			.header-avatar {
				width: 80upx;
				height: 80upx;
				background-repeat: no-repeat;
				background-size: 80upx 80upx;
				border-radius: 50%;
			}

			.at-rank {
				background-color: rgb(240, 129, 74);
				border-radius: 20upx;
				padding: 4upx 20upx;
			}
		}

		.header-userInfo-right {
			background-color: rgb(240, 129, 74);
			border-radius: 20upx;
			padding: 6upx 12upx;
		}
	}

	.rank-list-item {
		.rank-list-avatar {
			width: 80upx;
			height: 80upx;
			background-repeat: no-repeat;
			background-size: 80upx 80upx;
			border-radius: 50%;
		}
	}

	.rank-content {
		background-color: rgb(225, 114, 58);
		height: 460upx;

		.content-title {
			.content-title-letter {
				letter-spacing: 4upx;
			}

			.content-title-label {
				color: rgb(242, 240, 202);
			}
		}

		.rank-bg {
			width: 530upx;
			height: 126upx;
			background-size: 530upx 126upx;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.rank-first {
		position: absolute;
	}

	.rank-first_1 {
		left: 50%;
		top: 55%;
		transform: translate(-50%, -50%);
	}

	.rank-first_2 {
		left: 17%;
		top: 50%;
	}

	.rank-first_3 {
		left: 67%;
		top: 55%;
	}

	.userInfo-avatar-nickName_1 {
		.first-avtar-bg {
			width: 92upx;
			height: 92upx;
			background-color: #FFCD38;
			border-radius: 50%;
			margin: 0 auto;
		}
	}

	.userInfo-avatar-nickName_2 {
		.first-avtar-bg {
			width: 92upx;
			height: 92upx;
			background-color: #DBDBDB;
			border-radius: 50%;
			margin: 0 auto;
		}
	}

	.userInfo-avatar-nickName_3 {
		.first-avtar-bg {
			width: 92upx;
			height: 92upx;
			background-color: #D9A269;
			border-radius: 50%;
			margin: 0 auto;
		}
	}

	.rank-avatar {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-repeat: no-repeat;
		background-size: 80upx 80upx;
	}

	.userInfo-nickName {
		width: 120upx;
		color: rgb(242, 240, 202);
	}

	.rank-list-item-right {
		background-color: rgb(240, 129, 74);
		border-radius: 20upx;
		padding: 6upx 12upx;
	}

	.first-avatar-crown {
		position: absolute;
	}

	.first-avatar-crown_1 {
		left: 50%;
		top: 35%;
		transform: translateX(-50%);
		color: #FFCD38;
	}

	.first-avatar-crown_2 {
		left: 23%;
		top: 43%;
		color: #DBDBDB;
	}

	.first-avatar-crown_3 {
		color: #D9A269;
		left: 72.5%;
		top: 48.5%;
	}
	.rank-list{
		padding-bottom: 120upx;
	}
</style>
