<template>
	<view class="wrap_box">
		<CustomReturn title="校园排行榜" color="#fff" :bgColor="bgColor">
			
		</CustomReturn>
		<view class="bg-img">
			<image src="/static/imagesV2/icon18.png" mode="widthFix"></image>
		</view>
		
		<PaddingTopB>
			
			<view class="main">
				
				<view class="card">
					<view class="head">
						<view class="icon">
							<image src="/static/imagesV2/icon19.png" mode="aspectFill"></image>
						</view>
						<view class="title">
							班级考勤排名
						</view>
						<view class="icon">
							<image src="/static/imagesV2/icon19s.png" mode="aspectFill"></image>
						</view>
					</view>
					
					<view class="list">
						<view class="item" v-for="(item,index) in datas">
							<view class="item-index">
								<image v-if="item.key==1" src="/static/imagesV2/icon20.png" mode="aspectFit"></image>
								<image v-else-if="item.key==2" src="/static/imagesV2/icon21.png" mode="aspectFit"></image>
								<image v-else-if="item.key==3" src="/static/imagesV2/icon22.png" mode="aspectFit"></image>
								<text v-else>{{item.key}}</text>
							</view>
							<view class="item-title">
								{{item.title}}
							</view>
							<view class="item-val">
								{{item.num}}
							</view>
							<view class="item-unit">
								分
							</view>
						</view>
						<u-empty
							v-if="datas.length==0"
						    mode="data"
							text="暂无数据"
						    icon="/static/images/tch/img_blank.png"
						>
						</u-empty>
					</view>
					
					<view class="footer">
						<view class="item">
							<view class="item-index">
								<image v-if="mydata.key==1" src="/static/imagesV2/icon20.png" mode="aspectFit"></image>
								<image v-else-if="mydata.key==2" src="/static/imagesV2/icon21.png" mode="aspectFit"></image>
								<image v-else-if="mydata.key==3" src="/static/imagesV2/icon22.png" mode="aspectFit"></image>
								<text v-else>{{mydata.key}}</text>
							</view>
							<view class="item-title">
								{{mydata.title || ''}}
							</view>
							<view class="item-tabs">
								<view class="tab">
									本班
								</view>
							</view>
							<view class="item-val">
								{{mydata.num || ''}}
							</view>
							<view class="item-unit">
								分
							</view>
						</view>
					</view>
				</view>
				
				
				
				
			</view>
			
		</PaddingTopB>
		
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import CustomReturn from "@/components/CustomReturn/index.vue"
	import PaddingTopB from "@/components/PaddingTopB/index.vue"
	var that 
	export default {
		components: {
			CustomReturn,
			PaddingTopB
		},
		data() {
			return {
				bgColor: 'transparent',
				options:'',
				datas:'',
				mydata:''
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		onPageScroll(e) {
			if(e.scrollTop > 0 ) {
				this.bgColor = '#3384fc'
			}else {
				this.bgColor = 'transparent'
			}
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			that.getdata()
		},
		onShow() {
			
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			getdata(){
				
				var datas={
					type: 4
				}
				var jkurl='/student/ranking'
				
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						that.datas=datas.list
						that.mydata=datas.my
						
					} else {
					
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			getimg(img){
				return service.getimg(img)
			},
			jump(e) {
				var that = this
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
					setTimeout(function() {
						that.btnkg = 0
					}, 2000)
				}
				console.log(e.currentTarget.dataset.type)
				service.jump(e)
			},
			goback(){
			  uni.navigateBack()
			},
			func(){
				// that.$store.commit('setSystem',datas.system)
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap_box{
	width: 100%;
	// padding: 30rpx;
	min-height: 100vh;
	// #ifdef H5
	min-height: calc(100vh - 44px);
	// #endif
	background: #3384fc;
}
.bg-img {
	height: 100vh;
	position: absolute;
	width: 100%;
	top: 0;
	image{
		width: 100%;
		height: 100%;
	}
}
.main {
	width: 100%;
	padding: 25rpx 25rpx 135rpx;
	box-sizing: border-box;
	margin-top: 160rpx;
}

.card {
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0 30rpx;
		background: linear-gradient(to bottom, #AEC7FF 0%, #FFFFFF 100%);
		.icon {
			width: 40rpx;
			height: 40rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #323232;
			margin: 0 20rpx;
		}
	}
	
	.list,
	.footer{
		padding: 0 30rpx;
		.item {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			padding: 30rpx 0;
			border-bottom: 1px solid #FAFBFA;
			padding: 30rpx 0;
			&:last-child {
				border: 0;
			}
			&-index {
				width: 50rpx;
				height: 50rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #979797;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&-title {
				flex: 1;
				margin: 0 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #323232;
			}
			&-val {
				font-size: 32rpx;
				font-weight: bold;
				color: #2D81FF;
			}
			&-unit {
				font-size: 26rpx;
				color: #646464;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 0 55rpx;
		box-sizing: border-box;
		.item-title {
			flex: unset;
		}
		.item-tabs {
			flex: 1;
			.tab {
				width: 80rpx;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #448EFE;
				background-color: rgba(49, 132, 255, 0.08);
				border-radius: 5rpx;
			}
		}
	}
}

</style>