<template>
	<view class="oneMyCredit">
		<CustomReturn title="我的学分" color="#fff" :bgColor="bgColor"/>
		<view class="bg-img">
			<image src="/static/imagesV2/study/xuefen-bg.png" mode="aspectFill"></image>
		</view>
		<PaddingTopB>
			
			<view class="main">
				<view class="credit-wrap">
					<view class="credit-label">
						我的学分（分）
					</view>
					<view class="credit-content">
						{{all_num}}
					</view>
				</view>
				<view class="my-credit-main">
					<view class="statement_text">
						<text>
							注：低于80分将被无条件退学处理
						</text>
					</view>
					
					<view class="learn-credit-wrap" >
						<view class="learn-credit-item flex" v-for="(item,index) in datas" :key="index">
							<view class="learn-credit-left">
								<view class="learn-credit-tit">
									{{item.title}}
								</view>
								<view class="learn-credit-day">
									{{item.deduct_time}}
								</view>
							</view>
							<view class="learn-credit-num">
								-{{item.num}}
							</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 {
				all_num: "0", //分数
				datas: [],
				bgColor: 'none'
			}
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			that.onRetry()
		},
		onShow() {
			
		},
		onReachBottom() {
			that.getdata()
		},
		onPageScroll(e) {
			if(e.scrollTop > 0 ) {
				this.bgColor = '#3384fc'
			}else {
				this.bgColor = 'none'
			}
		},
		methods: {
			onRetry(){
				that.page=1
				that.datas = []
				that.getdata()
			},
			getdata() {
			
				var datas = {
					page:that.page,
					limit:20
				}
				var jkurl = '/study/credith'
				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.all_num=datas.all_num
						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: '操作失败'
					})
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.oneMyCredit {
		position: relative;
		
	}
	.bg-img {
		height: 504rpx;
		position: absolute;
		width: 100%;
	}
	.main {
		width: 100%;
		
	}
	.credit-wrap {
		padding: 70rpx 0 0 25rpx;
		
		.credit-label{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.credit-content {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			margin-top: 10rpx;
		}
	}
	
	.my-credit-main {
		margin: 20rpx;
	}
	
	.learn-credit-wrap {
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx;
		.learn-credit-item {
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F3F3F7;
			padding: 30rpx;
			.learn-credit-left {
				.learn-credit-tit {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #323232;
					margin-bottom: 30rpx;
				}

				.learn-credit-day {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}

			.learn-credit-num {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FC5101;
			}
		}
	}

	.learn-credit-wrap:last-child {
		.learn-credit-item{
			border-bottom: none;
		}
	}
	.statement_text{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #646464;
		padding: 40rpx 20rpx 20rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text {
			position: relative;
			&:before {
				content: '';
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 12rpx;
				background-color: rgba(252, 81, 1, 0.1);
			}
		}
		
	}
</style>