<template>
	<view>
		<fui-tabs :tabs="tabsList" @change="change" isDot scroll alignLeft></fui-tabs>
		<scroll-view scroll-y :scroll-with-animation="true" @scrolltolower="onReachBottom">
			<view class="dis_style div_style" v-for="(item,index) in arrayList" :key="index">
				<view @click="info(item.id)">
					<view class='color_style'>{{item.title}}</view>
					<view class='color_type_style'>{{getTableType(item.table_type)}}</view>
				</view>
				
				<view>
					<view class='color_date_style'>{{item.create_time}}</view>
					<view class='color_date_style' style="color: blue;" v-if="item.exam_papers_id != 0" @click="goTake(item.exam_papers_id,item.id)">去考试</view>
				</view>
			</view>
			<view v-if="loading" class="loading">加载中...</view>
			<view v-else-if="noMoreData" class="no-more">没有更多数据了</view>
		</scroll-view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				arrayList: [],
				tabsList: [],
				tableTypeName: {
					'1': "课程教学大纲",
					'2': "跳绳教案库",
					'3': "增高教案库",
					'4': "篮球教案库",
					'5': "强化教案库",
					'6': "空中忍者教案库",
					'7': "少儿安防教案库",
					'8': "体能教案库",
					'9': "热身动作库",
					'10': "体能动作库",
					'11': "趣味游戏库",
					'12': "放松动作库",
					'13': "训练内容",
					'14': "训练视频",
					'15': "课后作业",
					'16': "优秀一堂课",
					'17': "空中忍者",
					'18': "篮球动作",
					'19': "跳绳动作",
					'20': "跑酷动作",
					'21': "安防动作",
					'22': "标准化动作",
					'23': "3-6岁体测",
					'24': "7+体测",
					'25': "3-6岁体测讲解—解读",
					'26': "7+岁体测讲解—解读",
					'27': "互动游戏",
					'28': "套圈游戏",
					'29': "鼓励方式"
				},
				tabsListArr: [],
				searchArr: {
					table_type: undefined,
					page: 1,
					limit: 10
				},
				loading: false,
				noMoreData: false,
				initId: undefined
			}
		},
		onLoad() {
			this.getTabs()
		},
		methods: {
			getTabs() {
				this.tabsListArr = []
				this.tabsList = []
				apiRoute.teachingResearchLookType().then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							let arr = {
								value: item,
								lebal: this.tableTypeName[item]
							}
							this.tabsListArr.push(arr)
							this.tabsList.push(this.tableTypeName[item])
						})
						if (this.tabsListArr.length > 0) {
							this.initId = this.tabsListArr[0].value
							this.init()
						}
					}
				})
			},
			change(e) {
				const item = this.tabsListArr.find(item => item.lebal == e.name);
				const id = item ? item.value : 0
				this.initId = id
				this.arrayList = []
				this.searchArr.page = 1
				this.init()
			},
			getTableType(text) {
				return this.tableTypeName[text]
			},
			info(id) {
				uni.navigateTo({
					url: '/pages/coach/my/teaching_management_info?id=' + id
				})
			},
			onReachBottom() {
				if (this.noMoreData || this.loading) return;
				this.searchArr.page += 1
				this.init();
			},
			init(id) {
				this.searchArr.table_type = this.initId
				apiRoute.teachingResearchList(this.searchArr).then(res => {
					this.loading = true
					if (res.code == 1) {
						this.arrayList.push(...res.data.data)
						if(res.last_page <= this.searchArr.page){
							this.noMoreData = true;
						}
						this.loading = false
					}
				})
			},
			goTake(id,zid) {
				uni.navigateTo({
					url: '/pages/coach/my/gotake_exam?id=' + id + '&zid=' + zid
				})
			}
		}
	}
</script>

<style>
	.div_style {
		padding: 18rpx 50rpx;
		background-color: #fff;
		margin-top: 10rpx;
		line-height: 30px;
	}

	.dis_style {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.color_style {
		font-size: 30rpx;
		font-weight: bold;
	}

	.color_type_style {
		font-size: 22rpx;
	}

	.color_date_style {
		font-size: 22rpx;
	}
</style>