<template>
	<view>
		<view>
			<!-- 进度条 -->
			<view class="progress">
				<view><text class="bigsize">{{current}}</text>/{{list.length}}</view>
				<view class="pbody">
					<view class="pxin" :style="{width: current/list.length*100 +'%'}"></view>
				</view>
			</view>
			<view class="sArea" v-for="(s,index) in list" :key="index" v-show="current == Number(s.quesNo)">
				<view class="tgan">
					<text class="must">*</text>
					{{s.quesNo}}. {{s.quesTitle}}
				</view>

				<view class="option" v-for="(o, oindex) in s.evalOptionsList" :key="oindex" :class="o.status==1?'active':''" 
				@click="changeOption(o,s.evalOptionsList)">
					<view class="check">
						<image src="@/exam/img/xz@2x.png" />
					</view>
					<view class="checked">
						<image src="@/exam/img/xz_dwn@2x.png" />
					</view>
					{{opArr[oindex]}}. {{o.title}}
				</view>
			</view>

			<view class="bottomFunc">
				<view v-if="current==1" style="opacity: 0.5"><image src="@/exam/img/prev@2x.png"/>上一题</view>
				<view v-else @click="goPrev"><image src="@/exam/img/prev@2x.png"/>上一题</view>
				<view @click="submit" class="submit-btn" v-if="current == list.length">提交测评</view>
				<view v-if="canNext&&current != list.length" @click="goNext">下一题<image src="@/exam/img/next@2x.png"/></view>
				<view v-if="!canNext&&current != list.length"  style="opacity: 0.5" @click="showTip">下一题<image src="@/exam/img/next@2x.png"/></view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		nextTick,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import dayjs from 'dayjs';
	import * as api from '@/common/api.js';

const app = getApp();
const list = ref([])
const options = ref([])
const query = ref({
	state:0
})
const current = ref(1)
const canNext = ref(false)
const opArr = ref(['A','B','C','D','E','F'])
	let answerId = ''
	let flag = 0
	onLoad(option=>{
		query.value.paperId = option.id
		if(option.flag){
			flag = option.flag
		}
		console.log(option.flag)
	})
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {
			app.firstLoadCallback = () => {
				init()
			};
		}
	});
	function init(){
		uni.showLoading({
			title:'加载中'
		})
		if(flag==2){
			// 重新测评
			query.value.state = 1
		}
		api.getUserAnswerInfo(query.value).then(res=>{
			list.value = res.data.userAnswerList
			answerId = res.data.answerId
			if(flag==1){
				skip()
			}
			uni.hideLoading()
		})
	}
	function skip(){
		for(var item of list.value){
			for(var option of item.evalOptionsList){
				if(option.status == 1){
					current.value = current.value + 1
				}
			}
		}
		console.log(current.value)
	}
	function changeOption(t,list){
		// 单选
		for(var item of list){
			if(item.optionId == t.optionId){
				if(item.status == 1){
					item.status = 0
					canNext.value = false
				}else{
					item.status = 1
					canNext.value = true
				}
			} else {
				item.status = 0
			}
		}
	}
	function showTip(){
		uni.showToast({
			title:'请选择后前往下一题',
			icon:'none'
		})
	}
	function goNext(){
		current.value = current.value + 1
		canNext.value = false
		for(var item of list.value){
			if(item.quesNo==current.value){
				for(var option of item.evalOptionsList){
					if(option.status == 1){
						canNext.value = true
					}
				}
			}

		}
		save()
	}
	function goPrev(){
		current.value = current.value - 1
		canNext.value = true
	}
	function save(){
		var obj = {
			answerId:answerId,
			paperId:query.value.paperId,
			userAnswerList:list.value
		}
		api.saveAnswer(obj).then(res=>{
			
		})
	}
	function submit(){
		if(canNext.value){
			uni.showLoading({
				title:'提交中'
			})
			var obj = {
				answerId:answerId,
				paperId:query.value.paperId,
				userAnswerList:list.value
			}
			api.submitAnswer(obj).then(res=>{
				uni.hideLoading()
				let path = `/exam/result?id=${query.value.paperId}`
				uni.redirectTo({
					url: path
				});
			})
		} else {
			uni.showToast({
				title:'请选择后提交',
				icon:'none'
			})
		}

	}
</script>
<style lang="scss" scoped>
	.progress {
		color: #8F8E94;
		font-size: 30rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;

		.bigsize {
			color: #030303;
			font-size: 48rpx;
		}

		.pbody {
			height: 10rpx;
			background: #D0D5D8;
			border-radius: 5rpx;
			width: 100%;
			margin-left: 20px;
			position: relative;
			overflow: hidden;

			.pxin {
				background: linear-gradient(90deg, #FFCE56, #F79A45);
				height: 100%;
				border-radius: 5rpx;
			}
		}
	}

	.must {
		color: #DC0032;
	}

	.sArea {
		background: #fff;
		padding: 25rpx;
		border-radius: 30rpx;

		.tgan {
			padding: 20rpx;
			line-height: 1.6;
			text-align: justify;
		}

		.option {
			padding: 30rpx;
			color: #000000;
			font-size: 30rpx;
			background: #F5F8FA;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			display: flex;

			&.active {
				color: #fff;
				// background: #F89D46;
				background: linear-gradient(90deg, #fec45a, #F89D46);
				.check {
					display: none;
				}

				.checked {
					display: block;
				}
			}

			.check {
				display: block;
				margin-right: 20rpx;
			}

			.checked {
				display: none;
				margin-right: 20rpx;
			}

			.check image {
				width: 40rpx;
				height: 40rpx;
			}

			.checked image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>