<template>
	<view class="container">
		
		
		
		<!-- 设置圆角 -->
		<view style="padding: 10px 30px 10px 30px;">
			<uni-search-bar :radius="100" @input="search" placeholder="搜索训练记录"></uni-search-bar>
		</view>
		

		<yf-more-list url="/api/repo/train/paging" :params="queryParams" ref="moreList">
			
			<template v-slot:item="{ data }">
				<uni-list-item
				 :show-arrow="true" 
				 :title="data.repoId_dictText" 
				 :note="'进度：'+data.answerCount+'/'+data.totalCount+' 正确率：'+data.percent+'%'"
				 :rightText="data.state===1?'已完成':'训练中'"
				 link="navigateTo"
				 @click="toTrain(data.state, data.repoId, data.mode)"
				 >
				 </uni-list-item>
			</template>
			
		</yf-more-list>
		

	</view>
</template>

<script>
	import { trainPaging } from '@/api/repo/train.js'
	export default {
		components: { },
		data() {
			return {
				queryParams: {
					title: ''
				}
			}
		},
		
		onReachBottom() {
			// 加载数据
			this.$refs.moreList.loadData()
		},
		onShow() {
			if(this.$refs.moreList){
				this.$refs.moreList.initData()
			}
		},
		
		methods: {
		
			
			// 搜索
			search(e) {
				console.log('搜索', e)
				this.queryParams.title = e
			},
			
			toTrain(state, repoId, mode){
				
				if(state===1){
					uni.showToast({
						title: '此训练已完毕，无法查看！',
						icon:'none',
						duration: 2000
					})
					return;
				}
				
		
				uni.navigateTo({
				    url: '/pages/repo/train?repoId='+repoId+'&mode='+mode
				});
			}
		}
	}
</script>

<style>
	
	.container {
		font-size: 14rpx;
	}
	
	.exam-item{
		display: flex; align-items: center;
		line-height: 25px;
	}
	.exam-item .left{
		width: 80%; text-align: left;
	}
	.exam-item .left .title{
		font-size: 14px;
	}
	
	.exam-item .left .desc{
		font-size: 14px;
		color: #888;
	}
	
	.exam-item .left .icons{
		font-size: 10px; 
		display: flex; 
		align-items: center; 
		color: #666;
	}
	
	.exam-item .right{
		width: 20%; text-align: right;
	}
</style>
