<template>
	<view>
		<view class="ezy-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">我的错题</text>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="data.current" :values="data.items" style-type="button"
				active-color="#007aff" @clickItem="onChangeTab" />
		</view>
		<view class="content">
			<view v-if="data.current === 0">
				<scroll-view style="height: 300px;" scroll-y="true" refresher-enabled="true"
					:refresher-triggered="data.shuxue.loading" :refresher-threshold="50"
					refresher-background="lightgreen" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
					@refresherabort="onAbort">
					<!--数学-->
					<uni-list>
						<uni-list-item v-for="item in data.shuxue.list">
							<template v-slot:body>
								<view class="slot-box">
									<!-- 时间 -->
									<text class="slot-text">日期{{ item.date }}</text>
									<!-- 数量 -->
									<text class="slot-text">错题数：{{ item.count }}题</text>
									<button @click="getCuotiData(item)">查看错题</button>
								</view>
							</template>
						</uni-list-item>
						<uni-load-more :status="data.shuxue.state" @click="getMore(0)"
							:contentText="data.shuxue.contentText"></uni-load-more>
					</uni-list>
				</scroll-view>
			</view>
			<view v-if="data.current === 1">
				<!--英语-->
				<uni-list>
					<uni-list-item v-for="item in data.yingyu.list">
						<template v-slot:body>
							<view class="slot-box">
								{{ item }}
								<text class="slot-text">title</text>
								<text class="slot-text">date</text>
								<text class="slot-text">wrong</text>
								<button>查看错题</button>
							</view>
						</template>
					</uni-list-item>
					<uni-load-more :status="data.yingyu.state" @click="getMore(1)"
						:contentText="data.yingyu.contentText"></uni-load-more>
				</uni-list>
			</view>
		</view>
		<cuoti ref="wrongRef" :list="data.wrongList" @back="handleBackFromCuoti"></cuoti>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getWrongData
	} from "@/api/wrong";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import cuoti from "@/components/chengji/chengji.vue";
	import {
		getWrongInfo
	} from "@/api/wrong";

	const wrongRef = ref(null);

	const data = reactive({
		items: ['数学', '英语'],
		current: 0,
		shuxue: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
			state_text: '加载更多'
		},
		yingyu: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
			state_text: '加载更多'
		},
		wrongList: [],
	})

	function handleBack() {
		uni.redirectTo({
			url: '/pages/my/index'
		})
	}

	function handleBackFromCuoti() {
		wrongRef.value.closePopup();
	}

	function onChangeTab(e) {
		if (data.current !== e.currentIndex) {
			data.current = e.currentIndex;
			if (data.current == 0) {
				data.shuxue.page = 0
			} else if (data.current == 1) {
				data.yingyu.page = 0
			}
			refreshData(data.current);
		}
	}
	
	function refreshData(code) {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			cardId: data.current + 1 // 前台索引加1为学科cardId
		}
		
		if (code == 0) {
			data.shuxue.list = [];
			// 数学
			data.shuxue.state = 'loading';
			data.shuxue.page++;
			opt.page = data.shuxue.page;
		} else if (code == 1) {
			data.yingyu.list = [];
			// 英语
			data.yingyu.state = 'loading';
			data.yingyu.page++;
			opt.page = data.yingyu.page;
		}
		getWrongData(opt).then(res => {
			if (code == 0) {
				data.shuxue.list = data.shuxue.list.concat(res.data.data);
				data.shuxue.loading = false;
			} else if (code == 1) {
				data.yingyu.list = data.yingyu.list.concat(res.data.data);
				data.yingyu.loading = false;
			}
			if (code == 0) {
				if (res.data.total >= data.shuxue.list.length) {
					// 数学
					data.shuxue.state = 'no-more';
					data.shuxue.state_text = '没有更多啦';
					data.shuxue.loading = false;
				} else {
					// 数学
					data.shuxue.state = 'more';
					data.shuxue.state_text = '加载更多';
					data.shuxue.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total >= data.yingyu.list.length) {
					// 英语
					data.yingyu.state = 'no-more';
					data.yingyu.state_text = '没有更多啦';
					data.yingyu.loading = false;
				} else {
					// 英语
					data.yingyu.state = 'more';
					data.yingyu.state_text = '加载更多';
					data.yingyu.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				data.shuxue.state = 'more';
				data.shuxue.state_text = '加载更多';
				data.shuxue.loading = false;
			} else if (code == 1) {
				// 英语
				data.yingyu.state = 'more';
				data.yingyu.state_text = '加载更多';
				data.yingyu.loading = false;
			}
		})
	}

	function getMore(code) {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			cardId: data.current + 1 // 前台索引加1为学科cardId
		}

		if (code == 0) {
			if (data.shuxue.state == 'no-more' && !refresh) return;
			// 数学
			data.shuxue.state = 'loading';
			data.shuxue.page++;
			opt.page = data.shuxue.page;
		} else if (code == 1) {
			// 英语
			if (data.yingyu.state == 'no-more' && !refresh) return;
			data.yingyu.state = 'loading';
			data.yingyu.page++;
			opt.page = data.yingyu.page;
		}
		getWrongData(opt).then(res => {
			if (code == 0) {
				data.shuxue.list = data.shuxue.list.concat(res.data.data);
				data.shuxue.loading = false;
			} else if (code == 1) {
				data.yingyu.list = data.yingyu.list.concat(res.data.data);
				data.yingyu.loading = false;
			}
			if (code == 0) {
				if (res.data.total >= data.shuxue.list.length) {
					// 数学
					data.shuxue.state = 'no-more';
					data.shuxue.state_text = '没有更多啦';
					data.shuxue.loading = false;
				} else {
					// 数学
					data.shuxue.state = 'more';
					data.shuxue.state_text = '加载更多';
					data.shuxue.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total >= data.yingyu.list.length) {
					// 英语
					data.yingyu.state = 'no-more';
					data.yingyu.state_text = '没有更多啦';
					data.yingyu.loading = false;
				} else {
					// 英语
					data.yingyu.state = 'more';
					data.yingyu.state_text = '加载更多';
					data.yingyu.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				data.shuxue.state = 'more';
				data.shuxue.state_text = '加载更多';
				data.shuxue.loading = false;
			} else if (code == 1) {
				// 英语
				data.yingyu.state = 'more';
				data.yingyu.state_text = '加载更多';
				data.yingyu.loading = false;
			}
		})
	}

	function getCuotiData(item) {
		getWrongInfo({
			cardId: data.current + 1,
			cdate: item.cdate
		}).then(res => {
			data.wrongList = res.data;
			wrongRef.value.showPopup();
		})
	}

	function onRefresh() {
		if (data.current == 0) {
			data.shuxue.page = 0;
			data.shuxue.list = [];
			data.shuxue.loading = true;
		} else if (data.current == 1) {
			data.yingyu.page = 0;
			data.yingyu.list = [];
			data.yingyu.loading = true;
		}
		refreshData(data.current);
	}

	function onRestore() {
		data.shuxue.loading = 'restore'; // 需要重置
		// console.log("onRestore");
	}

	function onAbort() {
		// console.log("onAbort");
	}


	onLoad(() => {
		getMore(data.current);
	})
</script>

<style>

</style>