<template>
	<view class="ranking-list-info">
		<view class="back-icon" @click="back()">
			<u-icon name="arrow-left"></u-icon>
		</view>
		<view class="ranking-list-box">
			<u-tabs :list="tabList" @click="clickTabs"
			lineColor="#007DFF"
			lineWidth="40"
			lineHeight="4"
			 :activeStyle="{
            color: '#333333',
            fontWeight: '600',
           }"></u-tabs>
		   <view v-show="activeTab == 0">
				<view class="box-info-top">
					<text class="top-text">我的排名：<text class="text-num">{{experience.data.rankingNo}}</text></text>
					<text class="top-text" style="margin-left: 30upx;">我的经验值：<text  class="text-num">{{experience.data.total}}</text></text>
				</view>
				<view class="ran-table">
					<view class="ran-table-haeder">
						<view class="table-cell-one">排名</view>
						<view class="table-cell-tow">姓名</view>
						<view class="table-cell-three">经验值</view>
					</view>
					<view class="ran-table-body" v-for="(exper, index) in experience.list">
						<view class="table-cell-one">
							<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
							<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
							<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
							<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
						</view>
						<view class="table-cell-tow">
							<author-img :avatar="exper.authorInfo.avatar" :sex="exper.authorInfo.sex"></author-img>
							<text class="table-cell-tow-name">{{exper.authorInfo.name}}</text>
							<text class="table-cell-tow-org">{{cutOrgNamePath(exper.authorInfo.orgInfo)}}</text>
						</view>
						<view class="table-cell-three">{{exper.total}}</view>
					</view>
					<view class="ranking-dote" v-if="experience.data.rankingNo>5">
						<view>.</view>
						<view>.</view>
						<view>.</view>
					</view>
					<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="experience.data.rankingNo>5">
						<view class="table-cell-one">
							<text class="cell-one-index" style="color:#326DFF">{{experience.data.rankingNo}}</text>
						</view>
						<view class="table-cell-tow">
							<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
							<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
							<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
							<text class="table-cell-tow-org" style="color:#326DFF">{{cutOrgNamePath(userInfo.departFullName)}}</text>
						</view>
						<view class="table-cell-three" style="color:#326DFF">{{experience.data.total}}</view>
					</view>
				</view>
			</view>
		   <view v-show="activeTab == 1">
		   	<view class="box-info-top">
		   		<text class="top-text">我的排名：<text class="text-num">{{learningDuration.data.rankingNo}}</text></text>
		   		<text class="top-text" style="margin-left: 30upx;">我的学习时长：<text  class="text-num">{{formatSecondToHour(learningDuration.data.total)}}</text>h</text>
		   	</view>
		   	<view class="ran-table">
		   		<view class="ran-table-haeder">
		   			<view class="table-cell-one">排名</view>
		   			<view class="table-cell-tow">姓名</view>
		   			<view class="table-cell-three">学习时长(h)</view>
		   		</view>
		   		<view class="ran-table-body" v-for="(learning, index) in learningDuration.list">
		   			<view class="table-cell-one">
		   				<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
		   				<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
		   				<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
		   				<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
		   			</view>
		   			<view class="table-cell-tow">
						<author-img :avatar="learning.authorInfo.avatar" :sex="learning.authorInfo.sex"></author-img>
		   				<text class="table-cell-tow-name">{{learning.authorInfo.name}}</text>
		   				<text class="table-cell-tow-org">{{cutOrgNamePath(learning.authorInfo.orgInfo)}}</text>
		   			</view>
		   			<view class="table-cell-three">{{formatSecondToHour(learning.total)}}</view>
		   		</view>
		   		<view class="ranking-dote" v-if="learningDuration.data.rankingNo > 5">
		   			<view>.</view>
		   			<view>.</view>
		   			<view>.</view>
		   		</view>
		   		<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDuration.data.rankingNo > 5">
		   			<view class="table-cell-one">
		   				<text class="cell-one-index" style="color:#326DFF">{{learningDuration.data.rankingNo}}</text>
		   			</view>
		   			<view class="table-cell-tow">
						<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
		   				<!-- <image style="width: 80upx;height:80upx;vertical-align: middle;" src="../../static/images/woman.png" mode=""></image> -->
		   				<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
		   				<text class="table-cell-tow-org" style="color:#326DFF">{{cutOrgNamePath(userInfo.departFullName)}}</text>
		   			</view>
		   			<view class="table-cell-three" style="color:#326DFF">{{formatSecondToHour(learningDuration.data.total)}}</view>
		   		</view>
		   	</view>
		   </view>
		   <view v-show="activeTab == 2">
		   	<view class="box-info-top">
		   		<text class="top-text">我的排名：<text class="text-num">{{learningDays.data.rankingNo}}</text></text>
		   		<text class="top-text" style="margin-left: 30upx;">我的学习天数：<text  class="text-num">{{learningDays.data.total}}</text></text>
		   	</view>
		   	<view class="ran-table">
		   		<view class="ran-table-haeder">
		   			<view class="table-cell-one">排名</view>
		   			<view class="table-cell-tow">姓名</view>
		   			<view class="table-cell-three">学习天数</view>
		   		</view>
		   		<view class="ran-table-body" v-for="(days, index) in learningDays.list">
		   			<view class="table-cell-one">
		   				<image v-if="index == 0" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image>
		   				<image v-if="index == 1" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-tow.png" mode=""></image>
		   				<image v-if="index == 2" style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-three.png" mode=""></image>
		   				<text v-if="index > 2" class="cell-one-index">{{index+1}}</text>
		   			</view>
		   			<view class="table-cell-tow">
						<author-img :avatar="days.authorInfo.avatar" :sex="days.authorInfo.sex"></author-img>
		   				<text class="table-cell-tow-name">{{days.authorInfo.name}}</text>
		   				<text class="table-cell-tow-org">{{cutOrgNamePath(days.authorInfo.orgInfo)}}</text>
		   			</view>
		   			<view class="table-cell-three">{{days.total}}</view>
		   		</view>
		   		<view class="ranking-dote" v-if="learningDays.data.rankingNo > 5">
		   			<view>.</view>
		   			<view>.</view>
		   			<view>.</view>
		   		</view>
		   		<view class="ran-table-body" style="border-bottom: none;margin-bottom: 60upx;" v-if="learningDays.data.rankingNo > 5">
		   			<view class="table-cell-one">
		   				<text class="cell-one-index" style="color:#326DFF">{{learningDays.data.rankingNo}}</text>
		   			</view>
		   			<view class="table-cell-tow">
						<author-img :avatar="userInfo.avatar" :sex="userInfo.sex"></author-img>
		   				<text class="table-cell-tow-name" style="color:#326DFF">{{userInfo.name}}</text>
		   				<text class="table-cell-tow-org" style="color:#326DFF">{{cutOrgNamePath(userInfo.departFullName)}}</text>
		   			</view>
		   			<view class="table-cell-three" style="color:#326DFF">{{learningDays.data.total}}</view>
		   		</view>
		   	</view>
		   </view>
		
		</view>
	</view>
</template>

<script>
	import apiUser from "@/api/system/user.js";
	import apiStat from '@/api/phase2/stat.js';
	import {cutOrgNamePath,formatSecondToHour} from '@/utils/tools.js'
	export default {
		data() {
			return {
				formatSecondToHour,
				cutOrgNamePath,
				tabList:[
					{ name: '经验值'},
				    { name: '学习时长'},
					{ name: '学习天数'},
				],
				activeTab:0,
				rankingList:{},
				userInfo:{},
				learningDays:{
				    field:'total',
				    name:'累计',
				    data:{
				        rankingNo:0,
				        total:0
				    },
				    list:[],
				},
				experience:{
				    field:'total',
				    name:'累计',
				    data:{
				        rankingNo:0,
				        total:0
				    },
				    list:[],
				},
				learningDuration:{
				    field:'total',
				    name:'累计',
				    data:{
				        rankingNo:0,
				        total:0
				    },
				    list:[],
				},
			}
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		onLoad(options) {
			this.$store.dispatch('GetUserInfo').then(rs => {
				this.userInfo = rs;
				this.getExperience();
				this.getDuration();
				this.getDays();
				this.userInfo.avatar = this.userInfo.avatar.substring(this.userInfo.avatar.indexOf("upload")+6);
			});
			
		},
		methods:{
			back(){
			 uni.navigateBack();	
			},
			clickTabs(item) {
				this.activeTab = item.index;
			},
			getExperience() {//经验值
			  let data = {
			      aid:this.userInfo.aid,// #用户id
			      statType:20, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
			      field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
			      num:5,//  #显示的条数
			  }
			  apiStat.getRanking(data).then(res=>{
			      if(res.status==200){
			          if(res.result.currentUserRankingData) {
			              res.result.currentUserRankingData.authorInfo={
			                  aid: "",
			                  name: "",
			                  orgInfo: "",
			                  avatar: "",
			                  sex: null
			              }
			              this.experience.data = res.result.currentUserRankingData;
			          }
			         const ids= [];
			         res.result.rankingData.forEach(item=>{
			          ids.push(item.aid)
			          item.authorInfo = {
			              aid: "",
			              name: "",
			              orgInfo: "",
			              avatar: "",
			              sex: null
			          }
			         })
			         this.getUserData(ids,res.result.rankingData)
			         this.experience.list = res.result.rankingData;
			      }
			  })
			    },
			getDuration() {//学习时长
			      let data = {
			          aid:this.userInfo.aid,// #用户id
			          statType:10, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
			          field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
			          num:5,//  #显示的条数
			      }
			      apiStat.getRanking(data).then(res=>{
			          if(res.status==200){
			              if(res.result.currentUserRankingData) {
			                  this.learningDuration.data = res.result.currentUserRankingData;
			              }
			             const ids= [];
			             res.result.rankingData.forEach(item=>{
			              ids.push(item.aid)
			              item.authorInfo = {
			                  aid: "",
			                  name: "",
			                  orgInfo: "",
			                  avatar: "",
			                  sex: null
			              }
			             })
			             this.getUserData(ids,res.result.rankingData)
			             this.learningDuration.list = res.result.rankingData;
			          }
			      })
			    },
			    //学习天数
			getDays() {
			      let data = {
			          aid:this.userInfo.aid,// #用户id
			          statType:11, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
			          field:'total',// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
			          num:5,//  #显示的条数
			      }
			      apiStat.getRanking(data).then(res=>{
			          if(res.status==200){
			              if(res.result.currentUserRankingData) {
			                  this.learningDays.data = res.result.currentUserRankingData;
			              }
			
			             const ids= [];
			             res.result.rankingData.forEach(item=>{
			              ids.push(item.aid)
			              item.authorInfo = {
			                  aid: "",
			                  name: "",
			                  orgInfo: "",
			                  avatar: "",
			                  sex: null
			              }
			             })
			             this.getUserData(ids,res.result.rankingData)
			             this.learningDays.list = res.result.rankingData;
			          }
			      })
			    },
				 getUserData(ids,list) {
				    const noReapetIds = [...new Set(ids)];
				    apiUser.getByIds(noReapetIds).then(res => {
				        if (res.status == 200) {
				            list.forEach((item, index) => {
				                res.result.some(author => {
				                if (author.aid == item.aid) {
				                    item.authorInfo = author;
				                    return true;
				                } else {
				                    return false;
				                }
				            });
				        });
				        } else {
				        this.$message.error(res.message);
				        }
				    });
				},
		
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-tabs__wrapper__nav__item__text{
		font-size: 32upx;
		color: #666666 !important;
	}
	.ranking-list-info{
		padding-top: 376upx;
		background: url(../../static/images/ranking-list.png) no-repeat 100% / 100%;
		background-position: 0 0;
		position: relative;
		.back-icon{
				   position: absolute;
				   top:110upx;
				   left:40upx;
				 /deep/  .uicon-arrow-left{
					   color: #fff !important;
				   }
		}
		.ranking-list-box{
			padding: 34upx 40upx;
			border-radius: 40upx 40upx 0 0;
			background-color: #fff;
			.box-info-top{
				margin-top: 20upx;
				padding: 10upx 35upx 12upx 38upx;
				height: 100upx;
				line-height: 100upx;
				background: #FFFFFF;
				box-shadow: 0upx 4upx 10upx 2upx rgba(0,0,0,0.05);
				border-radius: 8upx;
				color: #333333;
				font-size: 26upx;
				.text-num{
					font-size: 30upx;
					color: #000;
					font-weight: 600;
				}
			}
			.ran-table{
				margin-top: 62upx;
				.ran-table-haeder{
					font-size: 28upx;
					color: #999999;
					display: flex;
					.table-cell-one{
						width: 200upx;
						padding-left: 8upx;
					}
					.table-cell-tow{
						// flex: 100%;
						width: 100%;
						padding-left: 8upx;
					}
					.table-cell-three{
						width: 260upx;
						text-align: right;
					}
				}
				.ran-table-body{
					display: flex;
					padding: 46upx 0 38upx 0;
					border-bottom: 2upx solid rgba($color: #979797, $alpha: 0.1);
					// margin-top: 30upx;
					.table-cell-one{
						width: 200upx;
						padding-top: 10upx;
						.cell-one-index{
							font-size: 32upx;
							color: #333333;
							margin-left: 16upx;
						}
					}
					.table-cell-tow{
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 1; 
						word-break:break-all;
						// flex: 100%;
						width: 100%;
						.table-cell-tow-name{
							font-size: 28upx;
							font-weight: 600;
							color: #333333;
							margin-left: 28upx;
						}
						.table-cell-tow-org{
							font-size: 24upx;
							color: #999999;
							margin-left: 16upx;
						}
					}
					.table-cell-three{
						padding-top: 10upx;
						width: 260upx;
						font-size: 36upx;
						font-weight: 600;
						color: #333333;
						text-align: right;
					}
				}
				.ranking-dote{
					margin-left: 20upx;
					margin-top: 10upx;
					color: #D8D8D8;
					font-size: 36upx;
					line-height: 16upx;
				}
			}
		}
	}
</style>
