<template>
	<!--    章节练习答题页-->
	<view :class="{'yejian': if_theme_dark}">
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left">
					<view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
				</view>
				<view class="kaoshi-head-m">题目搜索</view>
				<view class="kaoshi-head-right"></view>
			</view>
		</view>
		<!--#endif-->
		<view style="height: 10px;"></view>
		<view class="questionBankAnswer" v-if="current_timu && current_timu.id">
			<view class="questionBankAnswer-tx">
				{{ current_timu.type == 1 ? "单选题" : current_timu.type == 2 ? "多选题" : current_timu.type == 3 ?'判断题' : current_timu.type == 4 ?'填空题' : current_timu.type == 5 ?'简答题' : '' }}
			</view>
		</view>
		<view class="questionBankAnswer-content" v-if="current_timu && current_timu.answers">
			<question-title :node="current_timu.question_name"></question-title>
			<block v-for="(item, index) in current_timu.answers" :key="index">
				<question-option :ref="'questionOption_' + index" :type="type" :item="item" :index="index"
					:current_timu="current_timu" :timu_index="timu_order - 1" @post_answer_req="post_answer_req"
					@set_sub_button_style="set_sub_button_style"></question-option>
			</block>
			<template v-if="current_timu.type == 4">
				<view style="height: 12px;"></view>
			</template>
			<template v-else-if="current_timu.type == 5">
				<view style="height: 12px;"></view>
			</template>
		</view>
		<question-answer ref="questionAnswer" v-if="current_timu" :timu_order="timu_order" :current_timu="current_timu">
		</question-answer>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				type: '', //from_type 1：章节练习  2：历年真题
				// 当前题目
				current_timu: {},
				show_change_moshi: false,
				if_theme_dark: false, // 黑夜模式
				// 上次答到第几题
				timu_order: 1,
			};
		},
		computed: {
			...mapState(['subject', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + '/static/img/dui.png',
				}
			},
		},
		onLoad(opts) {
			this.id = opts.id
			this.type = opts.from_type
			this.get_timu_info();
		},
		methods: {
			// 获取当前题目
			async get_timu_info() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.timu_details,
					data: {
						id: this.id
					},
					needLogin: true
				});
				if (res.code == 1) {
					if (res.data != []) {
						let timu = this.set_right_flg(res.data);
						this.current_timu = timu;
						this.setAnswerStyle(this.current_timu)
					} else {
						this.current_timu = null;
					}
				}
			},
			//单选多选判断，选项正确错误
			setAnswerStyle(timu) {
				this.$nextTick(() => {
					timu.answers.forEach((item, index) => {
						this.$refs['questionOption_' + index][0].setAnswerStyle({});
					})
				})
			},
			// 设置正确答案的标记
			set_right_flg(timu) {
				if (timu) {
					timu.post_status = 0;
					if (timu.answers) {
						for (let i = 0, leng = timu.answers.length; i < leng; i++) {
							if (timu.right_answer.toString().toLowerCase().replace(/\s/g, '').indexOf(timu.answers[i]
									.answer_code.toString().toLowerCase().replace(/\s/g, '')) !== -1) {
								timu.answers[i]['right_flg'] = true
							}
						}
					}
				}
				return timu
			},
		}
	};
</script>

<style>
	/*====sl修改样式开始====*/
	@import "~@/static/css/tiku.css";
</style>