<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<image class="ph_banner" src="/static/images/phb.png" mode="aspectFill"></image>
		<view class="ph_box">
			<view class="ph_tit dis_flex aic">
				<view class="ph_d1">
					排名
				</view>
				<view class="ph_d2">
					班级
				</view>
				<view class="ph_d3">
					得分
				</view>
			</view>
			<view v-for="(item,index) in datas" class="ph_li">
				<view class="ph_d1">
					<image v-if="item.key==1" src="/static/images/ph.png" mode="aspectFit"></image>
					<image v-else-if="item.key==2" src="/static/images/ph2.png" mode="aspectFit"></image>
					<image v-else-if="item.key==3" src="/static/images/ph3.png" mode="aspectFit"></image>
					<text v-else>{{item.key}}</text>
				</view>
				<view class="ph_d2">
					{{item.title}}
				</view>
				<view class="ph_d3">
					{{item.num}}分
				</view>
			</view>
			<view class="ph_li ph_li_b">
				<view class="ph_d1">
					<image v-if="mydata.key==0" src="/static/images/ph.png" mode="aspectFit"></image>
					<image v-else-if="mydata.key==1" src="/static/images/ph2.png" mode="aspectFit"></image>
					<image v-else-if="mydata.key==2" src="/static/images/ph3.png" mode="aspectFit"></image>
					<text v-else>{{mydata.key}}</text>
					<!-- <text>{{mydata.key}}</text> -->
				</view>
				<view class="ph_d2">
					{{mydata.title}}<text>本班</text>
				</view>
				<view class="ph_d3">
					{{mydata.num}}分
				</view>
			</view>
		</view>
		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				options:'',
				datas:'',
				mydata:''
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		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: #F8F8F8;
}
.ph_banner{
	width: 100%;
	height: 340rpx;
	position: relative;
	z-index: 1;
	margin-bottom: -40rpx;
}
.ph_box{
	position: relative;
	z-index: 2;
	background: #FFFFFF;
	border-radius: 30rpx 30rpx 0 0;
	padding: 30rpx 30rpx 130rpx;
	min-height: calc(100vh - 300rpx);
	// #ifdef H5
	min-height: calc(100vh - 44px - 300rpx);
	// #endif
}
.ph_tit{
	font-size: 28rpx;
	color: #929399;
	height: 60rpx;
	.ph_d1{
		width: 60rpx;
		margin-right: 40rpx;
	}
	.ph_d2{
		flex: 1;
		margin-right: 40rpx;
		text-align: left;
	}
	.ph_d3{
		text-align: right;
	}
}
.ph_li{
	font-size: 32rpx;
	color: #545C71;
	height: 120rpx;
	display: flex;
	align-items: center;
	
	.ph_d1{
		width: 60rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.ph_d2{
		flex: 1;
		margin-right: 40rpx;
		text-align: left;
		text{
			font-size: 28rpx;
			color: #2D81FF;
			margin-left: 10rpx;
			padding: 5rpx 14rpx;
			background: rgba(45, 129, 255, .1);
			border-radius: 10rpx;
		}
	}
	.ph_d3{
		text-align: right;
	}
}
.ph_li_b{
	position: fixed;
	bottom: 0;
	z-index: 900;
	left: 0;
	width: 100%;
	background: #fff;
	padding: 0 30rpx;
	box-shadow: 0px 3rpx 8px 0px rgba(207, 207, 207, 0.5);
}
</style>