<template>
	<view class="container">
		
		
		<uni-nav-bar 
		left-icon="back" 
		background-color="#0279FF" 
		color="#fff"
		left-text="返回" 
		right-text="开始训练"
		@clickLeft="navtoBack"
		@clickRight="navtoTrain"></uni-nav-bar>
		
		
		<!-- 设置圆角 -->
		<view style="padding: 10px 30px 10px 30px;">
			<uni-search-bar :radius="100" @input="search" placeholder="搜错题"></uni-search-bar>
		</view>
		
		<yf-more-list url="/api/user/wrong-book/paging" :params="queryParams" ref="moreList">
			<template v-slot:item="{ data }">
				<uni-list-item
				 :show-arrow="true" 
				 :title="data.title" 
				 :note="data.updateTime"
				 :rightText="'错误：'+data.wrongCount+'次'"
				 >
				 </uni-list-item>
			</template>
		</yf-more-list>

	</view>
</template>

<script>
	
	export default {
	
		data() {
			return {
				queryParams: {
					examId: '',
					title: ''
				}
			}
		},
		onReachBottom() {
			// 加载数据
			this.$refs.moreList.loadData()
		},
		onLoad(options) {
			this.queryParams.examId = options.id
		},
		onShow() {
			if(this.$refs.moreList){
				this.$refs.moreList.initData()
			}
		},

		methods: {


			search(e) {
				this.queryParams.title = e
			},
			
			// 考试详情页
			navtoBack(){
				uni.navigateTo({
				    url: '/pages/paper/index'
				});
				
			},
			
			// 考试详情页
			navtoTrain(){
				uni.navigateTo({
				    url: '/pages/repo/train?repoId='+this.queryParams.examId+'&mode=0'
				});
			}
		}
	}
</script>

<style>
	.container {
		font-size: 14rpx;
	}

	.exam-item {
		display: flex;
		align-items: center;
		line-height: 30px;
	}

	.exam-item .left {
		text-align: left;
		flex-grow: 1;
	}

	.exam-item .left .desc {
		color: #888;
	}

	.exam-item .left .icons {
		font-size: 10px;
		display: flex;
		align-items: center;
		color: #666;
	}

	.exam-item .right {
		text-align: right;
	}

	.pass {
		color: #007AFF !important;
		margin-right: 5px;
	}

	.fail {
		color: #ff0000 !important;
		margin-right: 5px;
	}
</style>
