<template>
	<view>
		<uni-list>
			<uni-list-item v-for="item in list" :key="item.id" @click="goDetail(item.id)" :clickable="true" link>
				<!-- 自定义 header -->
				<!-- <view slot="header" class="slot-box">
					<view>{{item.name}}</view>
				</view> -->
				<!-- 自定义 body -->
				<template slot="body" style="display: block;">
					<view>
						<text v-if="item.type=='自助模考'">模拟练习</text>
						<text v-else style="font-weight: bold;color:orange">正式竞赛</text>
						<text v-if="item.name.indexOf('(补)') != -1">(补)</text>
					</view>
					<view style="color:gray;font-size: 26rpx;">
						<span>耗时:
							<span style="color:darkblue;font-weight: bold;">{{item.took}}</span>
							s</span>
						-
						<text>提交时间:{{item.create_time}}</text>
					</view>
					<view style="color:gray;font-size: 26rpx;">
						<span>总分:{{item.total_score}}分</span>
						-
						<span>得分:
							<span style="color:green;font-weight: bold;">{{item.score}}</span>
							分</span>
					</view>
				</template>
				<!-- 自定义 footer-->
				<!-- <template slot="footer">
					<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
				</template> -->

			</uni-list-item>
		</uni-list>
		<!-- <uni-card :title="item.name" :isFull="true" isShadow='true' extra="查看详情" @click="clickCard" v-for="item in list" :key="item.id">
			<view>
				<text>{{item.type}}</text>
			</view>
			<view>
				<text>耗时:{{item.took}}</text>
				<text>开始答题:{{item.start_time}}</text>
			</view>
		</uni-card> -->
		<view style="color:gray;text-align: center;margin-top:20upx">{{loadingText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listQuery: {
					page: 1,
					page_size: 20
				},
				list: [],
				loadingText: '加载中...'
			}
		},
		methods: {
			getList() {
				var that = this
				that.$u.api.getMyExamRecord(that.listQuery).then(res => {
					uni.stopPullDownRefresh()
					uni.setNavigationBarTitle({
						title: res.data.count + '条答题记录'
					})
					if (that.listQuery.page == 1) {
						if (res.data.results.length == 0) {
							that.loadingText = '暂无答题记录'
						} else {
							that.loadingText = ''
							that.list = res.data.results
						}
					} else {
						that.loadingText = ''
						that.list = that.list.concat(res.data.results)
					}
				}).catch(res => {
					uni.stopPullDownRefresh()
					if (res.code == 404) {
						that.loadingText = '到底了'
					}
				})
			},
			goDetail(id) {
				uni.showLoading({
					title:"正在获取答题详情",
				})
				this.$u.api.getExamRecordDetail(id).then(res=>{
					uni.hideLoading()
					uni.setStorageSync('currentExam', res.data)
					if (res.data.questions.length>0){
						uni.redirectTo({
							url:'/pages/exam/detail?examrecord='+id
						})
					}
					else{
						uni.showToast({
							title:'获取失败',
							icon:'none'
						})
						return
					}
				}).catch(e=>{
				})
			}
		},
		onLoad() {
			this.listQuery.page = 1
			this.getList()
		},
		onPullDownRefresh() {
			this.listQuery.page = 1
			this.getList()
		},
		onReachBottom() {
			this.listQuery.page = this.listQuery.page + 1
			this.getList()
		}

	}
</script>

<style lang='scss'>
	page {
		background-color: $u-bg-color;

	}
</style>
