<template>
	<view class="wrap">
		<uni-nav-bar @clickLeft="goBack()" height="110upx" leftWidth="200upx" leftText="考试记录" leftIcon="left" border
			backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
		<view class="content" v-if="list.length>0">
			<view class="item-wrap" v-for="(item,index) in list" :key="index">
				<view class="item-container" @click="goDetail(item.id)">
					<view class="top-info">
						<view class="info-title">{{item.exam_name}}-{{item.paper_name}}</view>
					</view>
					<view class="center-info">
						<view class="info-details">试卷总分：{{item.total_score}} </view>
						<view class="info-details">合格分数：{{item.pass_score}} </view>
						<view class="info-details">我的得分：{{item.score}} </view>
						<view class="info-details">开始时间：{{item.start_time}} </view>
						<view class="info-details">结束时间：{{item.end_time}} </view>
						<!-- <view class="info-details">考试时长：{{item.took}} </view> -->
					</view>
				</view>
			</view>
			<view v-if="isBottom" class="bottomText"> 已经到底了</view>
		</view>
		<view class="content" v-else>
			<view style="text-align: center;"> 暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ticket',
		data() {
			return {
				params: {
					page: 1,
					page_size: 20,
					is_my:true,
				},
				list: [],
				isLoading: false,
				refreshText: "",
				loadingText: '加载中...',
				isBottom:false,
			}
		},
		//上拉加载
		onReachBottom() {
			if (this.isBottom) {} else {
				this.params.page  = this.params.page +1;
				this.getList();
			}
		},
		onShow() {
			this.params.page = 1;
			this.list = [];
			this.getList();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.params.page = 1;
			this.list = [];
			this.getList();
		},
		methods: {
			getList() {
					var that = this;
					that.$u.api.examRecord(that.params).then(res => {
						uni.stopPullDownRefresh()
						// uni.setNavigationBarTitle({
						// 	title: res.count + '条考试记录'
						// })
						if (that.params.page == 1) {
							if (res.results.length == 0) {
								that.isBottom = true;
								that.loadingText = '暂无考试记录'
							} else {
								that.loadingText = ''
								that.list = res.results
							}
						} else {
							if (res.results.length == 0) {
								that.isBottom = true;
							}else{
								that.loadingText = ''
								that.list = that.list.concat(res.results)
							}
						}
					}).catch(res => {
						that.isBottom = true;
						console.log('没有数据',res)
						uni.stopPullDownRefresh()
						// if (res.code == 404) {
						// 	that.loadingText = '到底了'
						// }
					})
				},
				goDetail(id) {
					uni.showLoading({
						title:"正在获取考试详情",
					})
					this.$u.api.examRecordDetail(id).then(res=>{
						uni.hideLoading()
						console.log('考试详情',res)
						uni.setStorageSync('currentExam', res)
						if (res.detail&&res.detail.length>0){
							uni.navigateTo({
								url:'/pages/exam/detail?examrecord='+id
							})
						}
						else{
							uni.showModal({
							    title: '提示',
							    content: '考试未结束，请考试结束后再查看',
							    success: function (res) {
							       
							    }
							});
							// uni.showToast({
							// 	title:'考试未结束，请考试结束后再查看',
							// 	icon:'none'
							// })
							return
						}
					}).catch(e=>{
					})
				},
			
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchHandle() {
				this.params.page = 1;
				this.list = [];
				this.getList()
			},
			resetSearch() {
				this.params.page = 1;
				this.params.search = "";
				this.list = [];
				this.getList();
			},
			
		}
	}
</script>

<style scoped>
.wrap{
		height: 100%;
		    background-color: #f3fbff;
	}
>>>.uni-navbar__header,
	>>>.uni-status-bar{
		background-image: linear-gradient(270deg,
				#0ca7ee 0%,
				#005aff 100%,
				#2a8cff 100%,
				#54bdff 100%),
			linear-gradient(#e60012,
				#e60012);
	}
	.content {
		padding: 14upx;
		/* padding-top: 120upx; */
	}

	.item-wrap {
		margin-bottom: 14upx;
	}

	.item-container {
		width: 720upx;
		background-color: #ffffff;
		border-radius: 10upx;
		margin: 0 auto;
		padding: 21upx 24upx;
		box-sizing: border-box;
	}

	.info-title {
		font-weight: bold;
		font-family: PingFang-SC-Medium;
		font-size: 30upx;
		line-height: 72upx;
		color: #3d3d3d;
		flex: 1;
		border-bottom: 1upx solid #efefef;
		margin-bottom: 10upx;
	}


	.info-details {  
		font-size: 28upx;
		line-height: 40upx;
		color: #5b5b5b;
	}


	.shenhezhong {
		color: #2c6fd9;
	}

	.bottomText{
		 font-size: 20upx;
		 text-align: center;
		 height: 50upx;
	}
</style>
