<template>
	<!-- 导航栏 -->
	<van-nav-bar :title="exerciseTitle" left-arrow @click-left="back" fixed placeholder>
		<!-- <template #right>
			<m-icon type="shezhi" @click="setShow = true" />
		</template> -->
	</van-nav-bar>
	<!-- 导航栏end -->
	<!-- 答题模式选择 -->
	<!-- <div class="answerType">
		<span v-for="(answerType, index) in answerTypeList" :key="index" :class="{ selected: currentType == index }" @click="currentType = index">{{ answerType.name }}</span>
		<span v-if="isVip" :class="{ selected: aotuPlayFlag }" @click="aotuPlaySet">自动读题</span>
		 不是vip隐藏自动读题 
		<span v-else class="visibility-hidden" :class="{ selected: aotuPlayFlag }">自动读题</span>
	</div> -->
	<!-- 答题模式选择end -->
	<!-- 分割线 -->
	<div class="divider" />
	<!-- 题目模块 -->
	<!-- 题目预加载 -->
	<m-empty v-if="!currentSubject" />
	<!-- 题目预加载end -->
	<div class="problem-box" v-else>
		<!-- 题目内容 -->
		<subjectContext :currentSubject="currentSubject" :currentSubjectIndex="currentSubjectIndex" />
		<!-- 背题模式展示 -->
		<div v-if="typeParams.answerShow">
			<reciteMode :currentSubject="currentSubject" />
		</div>
		<!-- 背题模式展示end -->
		<!-- 选择内容 -->
		<div v-else-if="currentSubject.isTrue === null">
			<!-- 单选 -->
			<van-radio-group v-model="currentSubject.userAnswer" v-if="currentSubject.questionType !== 3" @change="userAnswerChange" icon-size="35px">
				<van-radio v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
					>{{ item }}
					<template #icon="props">
						<div class="choose-icon" :class="{ selected: props.checked }">
							{{ String.fromCharCode(65 + Number(index)) }}
						</div>
					</template>
				</van-radio>
			</van-radio-group>
			<!-- 多选 -->
			<div v-else>
				<van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
					<van-checkbox v-for="(item, index) in currentSubject.opts" :key="Number(index)" :name="item" class="answer"
						>{{ item }}
						<template #icon="props">
							<div class="choose-icon" :class="{ selected: props.checked }">
								{{ String.fromCharCode(65 + Number(index)) }}
							</div>
						</template>
					</van-checkbox>
				</van-checkbox-group>
			</div>
		</div>
		<!-- 展示答题后选择内容 -->
		<div v-else>
			<div>
				<div v-for="(item, index) in currentSubject.optsBack" :key="Number(index)" class="answer-box">
					<div class="choose-icon" :class="{ iconTrue: item.status % 2 !== 0 }" v-if="item.status < 2">
						{{ String.fromCharCode(65 + Number(index)) }}
					</div>
					<m-icon v-else-if="item.status == 3" type="dui" size="30px" style="margin-left: 5px" />
					<m-icon v-else-if="item.status == 2" size="30px" type="cuo" style="margin-left: 5px" />
					<span class="answer-text" :class="{ true: item.status % 2 !== 0, false: item.status == 2 }">
						{{ item.opt }}
					</span>
				</div>
			</div>
			<div class="checkbox-answer">答案: {{ currentSubject.answer }}</div>
		</div>
		<!-- 展示答题后选择内容end -->
	</div>
	<!-- 选择内容End -->
	<!-- 分割线 -->
	<!-- <van-divider /> -->
	<!-- 功能选择列表 -->
	<!-- <functionList :currentSubject="currentSubject" @subjectAudioPlay="subjectAudioPlay" @addCurrentQuestion="addCurrentQuestion" v-model:skillsShow="skillsShow" /> -->
	<!-- 技巧讲解 -->
	<!-- <explainJq :currentSubject="currentSubject" v-model:skillsShow="skillsShow" @subjectAudioPlay="subjectAudioPlay" /> -->
	<!-- 官方解释 -->
	<!-- <explainJs :currentSubject="currentSubject" v-model:officialShow="officialShow" @subjectAudioPlay="subjectAudioPlay" /> -->
	<!-- 设置操作栏 -->
	<!-- <van-popup v-model:show="setShow" position="bottom">
		<van-cell center title="答对跳转下一题">
			<template #right-icon>
				<van-switch v-model="isJumpNext" size="24" />
			</template>
		</van-cell>
		<van-cell center title="答题音效提示">
			<template #right-icon>
				<van-switch v-model="isSoundEffect" size="24" />
			</template>
		</van-cell>
	</van-popup> -->
	<!-- 设置操作栏end -->
	<!-- 底部弹出题目选择栏 -->
	<van-popup v-model:show="showSubjectChangePopup" position="bottom">
		<subjectChangePopup :trueNum="trueNum" :falseNum="falseNum" v-model:currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" />
	</van-popup>
	<!-- 底部操作栏 -->
	<bottomBar @redo="resetLocalWrong" :listType="listType" :currentSubjectIndex="currentSubjectIndex" :subjectList="subjectList" :subjectTotal="subjectTotal" :trueNum="trueNum" :falseNum="falseNum" v-model:showSubjectChangePopup="showSubjectChangePopup" v-model:officialShow="officialShow" @lastSubject="lastSubject" @nextSubject="nextSubject" />
</template>

<script lang="ts" setup>
import { ref, defineProps, computed } from "vue";
import subjectChangePopup from "./components/subjectChangePopup.vue";
import { useTopicMode, useAudioSet, useSubjectShowLogic } from "@/hooks/exercise";
import { RouterBus } from "@/hooks";
import { exerciseTitle } from "@/hooks/text/title";
import subjectContext from "./components/subjectContext.vue";
import functionList from "./components/functionList.vue";
import explainJq from "./components/explainJq.vue";
import explainJs from "./components/explainJs.vue";
import reciteMode from "./components/reciteMode.vue";
import bottomBar from "./components/bottomBar.vue";
import store from "@/store";
import { useRouter } from "vue-router";
const {
	router: { back },
	route: { query },
} = new RouterBus();

const props = defineProps<{
	listType: ExerciseType.ListType;
}>();

const isVip = store.getters.getIsVip;

//答题模式选择逻辑
const { answerTypeList, currentType, typeParams } = useTopicMode();
const vehicle = useRouter().currentRoute.value.query.vehicle as string; //路由qvehicle参数
const subject = useRouter().currentRoute.value.query.subject as string; //路由subject参数
//设置操作栏
/**显示设置栏 */
const setShow = ref(false);
/**答题音效 */
const isSoundEffect = ref(true);
// 显示题目选择栏
const showSubjectChangePopup = ref(false);

//题目展示逻辑
const { subjectList, currentSubject, currentSubjectIndex, subjectTotal, nextSubject, lastSubject, trueNum, falseNum, isJumpNext, userAnswerChange, addCurrentQuestion, skillsShow, officialShow } = useSubjectShowLogic(props.listType);
const resetLocalWrong = () => {
	currentSubjectIndex.value = 0
	subjectList.value = JSON.parse(window.localStorage.getItem(vehicle+subject))  as any[];
	subjectTotal.value = subjectList.value.length

};
//本地的数据
console.log("本地的currentSubject", currentSubject);
//音频模块
const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet } = useAudioSet(currentSubject);
</script>

<style lang="scss" scoped>
.visibility-hidden {
	visibility: hidden;
}
.parsing-img {
	width: 100%;
	margin-top: 10px;
}
.answerType {
	width: 100%;
	font-size: 13px;
	display: flex;
	justify-content: space-around;
	padding: 15px;
	box-sizing: border-box;
	span {
		border-radius: 20px;
		padding: 3px 10px;
		background-color: #b8c0cc;
		color: #ffffff;
	}
	.selected {
		background-color: #498ef5;
	}
}
.divider {
	width: 100%;
	height: 10px;
	background-color: #f2f3f5;
}
.problem-box {
	font-size: 17px;
	padding: 15px;
	.answer {
		margin-top: 25px;
	}
	.answer-box {
		display: flex;
		margin-top: 25px;
		align-items: center;
		.iconTrue {
			background-color: #01c18d;
		}
		.answer-text {
			margin-left: 10px;
		}
		.true {
			color: #01c18d;
		}
		.false {
			color: #ff4d53;
		}
	}

	.choose-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
		margin-left: 5px;
		margin-top: 1px;
	}
	.selected {
		background-color: #498ef5;
	}
	.checkbox-btn {
		width: 266px;
		height: 40px;
		margin: auto;
		margin-top: 25px;
		left: 50%;
		transform: translateX(-50%);
	}
	.checkbox-answer {
		padding: 8px 10px;
		background-color: #f2f3f5;
		margin-top: 25px;
	}
}
</style>
