<template>
	<view class="wrap_box">
		<CustomReturn title="考勤积分" color="#fff" :bgColor="bgColor">
			
		</CustomReturn>
		<view class="bg-img">
			<image src="/static/imagesV2/tch_index/bg1.png" mode="aspectFill"></image>
		</view>
		
		<PaddingTopB>
			<view class="main">
				<view class="head">
					<view class="head-label">
						班级考勤积分（分）
					</view>
					<view class="head-content">
						{{allnum}}
					</view>
				</view>
				
				<view class="list">
					<view class="item" v-for="(item,index) in datas" :key="index">
						<view class="item-cell">
							<view class="title">
								{{item.title}}
							</view>
							<view class="value">
								-{{item.class_num}}
							</view>
						</view>
						<view class="item-cell">
							<view class="name">
								学员:{{item.uid}}
							</view>
							<view>
								{{item.deduct_time}}
							</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:'',
				allnum:'',
				page:1
			}
		},
		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() {
			that.onRetry()
		},
		onReachBottom() {
			that.getdata()
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			onRetry(){
				that.page=1
				that.datas = []
				that.getdata()
			},
			getdata() {
			
				var jkurl="/teacher/credith"
				//类型1、成绩变化 2、思想动态 3、生活
				var datas={
					id:that.options.id,
					page:that.page,
					type:that.active
				}
				// if(that.data_last == true){
				// 	return
				// }
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
				}
				var page_now=that.page
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
					
						if (page_now == 1) {
						
							that.datas = datas.data
						
						} else {
							if (datas.data.length == 0) {
								that.data_last = true
								return
							}
							that.data_last = false
							that.datas = that.datas.concat(datas.data)
						}
						that.allnum=datas.allnum
						that.page++
				
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '操作失败'
							})
						}
					}
				}).catch(e => {
					that.btnkg = 0
					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: #f3f4f6;
}
.bg-img {
	height: 504rpx;
	position: absolute;
	width: 100%;
}
.main {
	width: 100%;
	padding: 25rpx;
	box-sizing: border-box;
}
.head {
	font-family: PingFang SC;
	color: #FFFFFF;
	margin-top: 50rpx;
	&-label {
		font-size: 30rpx;
		font-weight: 500;
	}
	&-content {
		font-size: 60rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}
}

.list {
	padding: 0 30rpx;
	border-radius: 20rpx;
	background-color: #fff;
	margin-top: 30rpx;
	.item {
		border-bottom: 1px solid #FAFBFA;
		padding: 30rpx 0;
		&:last-child {
			border: 0;
		}
		&-cell {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			justify-content: space-between;
			margin-bottom: 20rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #323232;
			}
			.value {
				font-size: 30rpx;
				font-weight: 500;
				color: #FC5101;
			}
			.name {
				font-size: 26rpx;
				font-weight: 500;
				color: #979797;
			}
			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #979797;
			}
		}
	}
}
</style>