<style scoped>
	.GradeContent {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.Grade_List {
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;
		padding: 30rpx;
		overflow: hidden;
		/* margin-bottom: 30rpx; */
		margin:30rpx 35rpx;
	}

	.Grade_Title {
		color: #111111;
		font-size: 32rpx;
		width: 100%;
		text-align: center;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.Grade_Join {
		display: flex;
	}
	.Grade_TopNum {
		color: #111111;
		font-size: 24rpx;
		margin-bottom: 17rpx;
		font-weight: bold;
		height: 34rpx;
	}

	.Grade_BtmText {
		color: #888888;
		font-size: 22rpx;
	}

	.Grade_JoinFirst {
		position: relative;
		padding-left: 35rpx;
		width:28%;
	}

	.Grade_JoinFirst:after {
		content: "";
		border-left: 1px solid #c0c4cc;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
		position: absolute;
		right: 0;
		top: 20rpx;
	}

	.Grade_JoinSecond {
		text-align: center;
		position: relative;
		width:38%;
		display: flex;
		justify-content: center;
	}

	.Grade_JoinSecond:after {
		content: "";
		border-left: 1px solid #c0c4cc;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
		position: absolute;
		right: 0;
		top: 20rpx;
	}

	.Grade_GongGu {
		display: flex;
		margin-top: 35rpx;
	}

	.Grade_Left {
		width: 445rpx;
		height: 137rpx;
		background-color: #F6F6FE;
		border-radius: 24rpx;
		color: #4C50E7;
		display: flex;
		align-items: center;
	}

	.Grade_Left view {
		flex: 1;
		padding-left: 15rpx;
	}

	.Grade_Score {
		color: #4C50E7;
		font-size: 26rpx;
		height: 34rpx;
	}

	.Grade_Name {
		color: #B9BAF4;
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.Grade_Gonggu {
		padding: 10rpx 20rpx;
		background-color: #4C50E7;
		color: #FFFFFF;
		border-radius: 30rpx;
		margin-left: 36rpx;
		font-size: 24rpx;
	}

	.Grade_jiexi {
		padding: 10rpx 20rpx;
		border: 1px solid #4C50E7;
		color: #4C50E7;
		border-radius: 30rpx;
		margin: 20rpx 0 0 36rpx;
		font-size: 24rpx;
	}

	.Grade_Pingce {
		position: absolute;
		padding: 8rpx 15rpx;
		right: 0;
		top: 0;
		background-color: #FEEAD1;
		color: #FA9717;
		font-size: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
	.scroll-box {
	  height: 100vh;
	  width: 100%;
	}
</style>
<template>
	<view class="GradeContent">
		<van-empty description="暂无数据" v-if="dataList.length === 0" />
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-box" @scrolltolower="lower"
			v-if="dataList.length > 0">
			<view class="Grade_List" v-for="(item,index) in dataList" :key="index">
				<view class="Grade_Title">{{item.BankName}}</view>
				<view class="Grade_Pingce">测评次数 {{item.MyTimes}}</view>
				<view class="Grade_Join">
					<view class="Grade_JoinFirst">
						<view class="Grade_TopNum">{{item.JoinNum}}</view>
						<view class="Grade_BtmText">参加人数</view>
					</view>
					<view class="Grade_JoinSecond">
						<view style="text-align: left;">
							<view class="Grade_TopNum">
								{{item.LeastTime?item.LeastTime:'-'}}
							</view>
							<view class="Grade_BtmText">最低用时</view>
						</view>
					</view>
					<view>
						<view style="margin-left:60rpx;">
							<view class="Grade_TopNum">
								{{item.HighestScore?item.HighestScore:'-'}}
							</view>
							<view class="Grade_BtmText">最高得分</view>
						</view>
					</view>
				</view>
				<view class="Grade_GongGu">
					<view class="Grade_Left">
						<view>
							<view class="Grade_Score">
								{{item.MyUseTime?item.MyUseTime:'-'}}
							</view>
							<view class="Grade_Name">我的耗时</view>
						</view>
						<view>
							<view class="Grade_Score">
								{{item.MyScore?item.MyScore:'-'}}
							</view>
							<view class="Grade_Name">我的得分</view>
						</view>
						<view>
							<view class="Grade_Score">{{item.MyRank}}</view>
							<view class="Grade_Name">我的排名</view>
						</view>
					</view>
					<view>
						<view class="Grade_Gonggu" @click="getDetail(item.BankId,1)">巩固练习</view>
						<view class="Grade_jiexi" @click="getDetail(item.BankId,2)">查看解析</view>
					</view>
				</view>
			</view>
			<Loadmore :state="pageState" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import Loadmore from "../../components/loadmore.vue";
	import {
		GetAppBankPage,
		GetAppBankDetails
	} from "../../api/exam";
	export default {
		components: {
		  Loadmore
		},
		setup(props, ctx) {
			let data = reactive({
				pageState: "more",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					BankType: 1,
					StudentId: 0
				},
				PageCount: 0,
				dataList: [],
				timer: null, //防抖
			});
			let methods = {
				lower(e) {
					if (data.msg.pageIndex < data.PageCount) {
						data.pageState = "loading";
						if (data.timer) clearTimeout(data.timer);
						data.timer = setTimeout(() => {
							data.msg.pageIndex++;
							that.getList();
						}, 1000);
					} else {
						data.pageState = "none";
					}
				},
				async getList() {
					data.pageState = "loading";
					let res = await GetAppBankPage(data.msg);
					if (res) {
						if (data.timer) data.timer = null;
						data.PageCount = res.Data.PageCount;
						if (data.msg.pageIndex === 1) {
							data.dataList = res.Data.PageData;
						} else {
							data.dataList = [...data.dataList, ...res.Data.PageData];
						}
						if (data.msg.pageIndex >= res.Data.PageCount) {
							data.pageState = "none";
						} else {
							data.pageState = "more";
						}
					}
				},
				getDetail(BankId,Type){
					// Type 1考试 2 查看解析
					uni.navigateTo({
						url: "/pages/exam/examGongu?BankId="+BankId+'&&Type='+Type
					});
				}
			};
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "日语等级测评"
			});
			if (options && options.BankType) {
				this.msg.BankType = options.BankType
			}
			if (options && options.StudentId){
				this.msg.StudentId = options.StudentId
			}	
		},
		onShow() {
			this.getList();
		}
	};
</script>

<style>
</style>
