<template>
	<view>
		<uni-icons type="left" size="30"></uni-icons>
		<text>单元测试</text>
		<view><text>{{count}}</text>/<text>{{total}}</text></view>
	</view>
	<swiper class="swiper-box" @change="onChange" @animationfinish="onAnimationfinish" :current="current">
		<swiper-item v-for="(item ,index) in list" :key="index">
			<view class="swiper-item">
				{{item}}
			</view>
		</swiper-item>
	</swiper>
	<button class="transition-button" v-if="!isLast" type="primary" @click="nextQuestion">next</button>
	<button class="transition-button" v-if="!isFirst" type="primary" @click="prevQuestion">prev</button>
	<button class="transition-button" v-if="isLast" type="primary" @click="handleSubmit">submit</button>
</template>

<script setup>
	import {
		useExam
	} from './useUnit';
	import {
		ref,
		onMounted
	} from "vue";

	const {
		isFirst,
		isLast,
		count,
		total,
		current,
		list,
		rightAnswer,
		wrongAnswer,
		jifen,

		nextQuestion,
		prevQuestion,
		handleSubmit,
		initPage
	} = useExam();
	
	// swiper change 回调
	function onChange(e) {
		current.value = e.detail.current;
	}
	// 查看答案
	function checkAnswer() {}
	// 继续学习
	function goStudyContinue() {}
</script>

<style lang="scss" scoped>
	.swiper-box {
		height: 200px;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
	}
</style>