<template>
	<view class="Parsing">
		<view class="pageStyle">
			<view class="toptitle">
				<view class="lefttoptitle">{{ nowPageData.type === 1 ? '单选' : nowPageData.type === 2 ? '多选' : nowPageData.type === 3 ? '判断' : '案例' }}</view>
				<view class="righttoptitle">
					<span class="spans">{{ numIndex + 1 }}</span>
					/{{ list.length }}
				</view>
			</view>
			<view class="title">{{ nowPageData.content }}</view>
			<view class="imgBox" v-if="nowPageData.imgUrl !== null && nowPageData.imgUrl">
				<image :src="$method.splitImgHost(nowPageData.imgUrl)" mode="aspectFit" @click="seeBigImage(nowPageData.imgUrl)"></image>
			</view>
			<view v-if="nowPageData.type === 4" class="contentList">
				<!-- 案例题start -->

				<view class="pageStyle" v-for="(items, index) in nowPageData.jsonStr">
					<view class="toptitle">
						<view class="lefttoptitle">{{ items.type === 1 ? '单选' : items.type === 2 ? '多选' : items.type === 3 ? '判断' : '案例' }}</view>
					</view>
					<view class="title">{{ items.content }}</view>
					<view class="imgBox" v-if="items.imgUrl !== null && items.imgUrl">
						<image :src="$method.splitImgHost(items.imgUrl)" mode="aspectFit" @click="seeBigImage(items.imgUrl)"></image>
					</view>
					<view class="contentList">
						<view class="listCen" v-for="(item, index) in items.answer" :key="index" :class="item.optionAnswer === 1 ? 'activeBtn' : ''">
							<view>{{ alphabet[index] }}.</view>
							<view>
								<view>{{ item.content }}</view>
								<view class="imgBox" v-if="item.imgUrl !== null && item.imgUrl">
									<image :src="$method.splitImgHost(item.imgUrl)" mode="aspectFit" @click="seeBigImage(item.imgUrl)"></image>
								</view>
							</view>
						</view>
					</view>
					<view style="font-weight: bold;margin-top: 20rpx;">正确答案: {{ comswet[index] }}</view>
					<view class="jx">
						答案解析：
						<view class="jxlis"></view>
					</view>
					<view class="answerJX">{{ items.analysisContent }}</view>
				</view>

				<!-- 案例题end -->
			</view>
			<view v-else class="contentList">
				<view class="listCen" v-for="(item, index) in nowPageData.jsonStr" :key="index" :class="item.optionAnswer === 1 ? 'activeBtn' : ''">
					<view>{{ alphabet[index] }}.</view>
					<view>
						<view>{{ item.content }}</view>
						<view class="imgBox" v-if="item.imgUrl !== null && item.imgUrl">
							<image :src="$method.splitImgHost(item.imgUrl)" mode="aspectFit" @click="seeBigImage(item.imgUrl)"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="nowPageData.type !== 4" style="font-weight: bold;margin-top: 20rpx;">正确答案: {{ comans }}</view>
			<view class="jx">
				答案解析：
				<view class="jxlis"></view>
			</view>
			<view class="answerJX">{{ nowPageData.analysisContent }}</view>
		</view>
		<view class="footer_tab">
			<u-line color="#D6D6DB" />
			<u-row gutter="16">
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;margin-left: 30rpx;position: absolute;left: 20rpx;" v-if="numIndex !== 0" @click="backPage">
							<u-icon name="arrow-leftward" color="#333" size="38"></u-icon>
							<view class="sc_t">上一题</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;" @click="menu">
							<image src="/static/up.png" style="width: 58rpx;height: 22rpx;"></image>
							<view class="sc_t">答题卡</view>
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="box">
						<view style="text-align: center;margin-right: 30rpx;position: absolute;right: 20rpx;" v-if="numIndex !== list.length - 1" @click="nextPage">
							<u-icon name="arrow-rightward" color="#333" size="38"></u-icon>
							<view class="sc_t">下一题</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true">
			<view class="popup_box">
				<scroll-view scroll-y="true" class="popup_list">
					<view v-for="(item, index) in list" :key="index" class="btn_num" :class="numIndex === index ? 'btn_bac2' : 'btn_bac1'" @click="changeMt(index)">
						<text class="">{{ index + 1 }}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			numIndex: 0,
			type: 1,
			show: false,
			list: [],
			bankSectionId: null,
			examId: null,
			errorArrayList: [],
			nowPageData: {},
			comans: '', //除案例题外的正确答案
			comswet: [], //案例题的正确答案
			alphabet: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
			allItem: false //是否全部解析
		};
	},
	onLoad(option) {
		console.log(option.allItem);
		this.type = option.type;
		if (option.bankSectionId !== null) {
			this.bankSectionId = option.bankSectionId;
		}
		if (option.examId !== null) {
			this.examId = option.examId;
		}
		if (option.allItem === 'true') {
			this.allItem = true;
		}
		this.errorArrayList = decodeURIComponent(option.errorArrayList)
			.split(',')
			.map(Number);
		this.getTitleInit();
	},
	onShow() {},
	methods: {
		nextPage() {
			var int = this.numIndex + 1;
			this.changeMt(int);
		},
		backPage() {
			var int = this.numIndex - 1;
			this.changeMt(int);
		},
		// 切换题目
		changeMt(int) {
			this.numIndex = int;
			this.intPageNowPageData(int);
			this.chanInts(this.list);
			this.show = false;
		},
		intPageNowPageData(int) {
			var self = this;
			self.nowPageData = self.list[int];
		},
		//预览图片
		seeBigImage(url) {
			var urlarr = [];
			urlarr.push(this.$method.splitImgHost(url));
			uni.previewImage({
				urls: urlarr
			});
		},
		getTitleInit() {
			var self = this;
			if (self.bankSectionId !== 'null') {
				var data = {
					bankSectionId: this.bankSectionId
				};
			}
			if (self.examId !== 'null') {
				var data = {
					examId: self.examId
				};
			}
			self.$api.questiondetailList(data).then(res => {
				if (self.allItem === true) {
					res.data.rows.forEach((item, index) => {
						item.jsonStr = JSON.parse(item.jsonStr);
					});
					self.list = res.data.rows;
					self.nowPageData = res.data.rows[self.numIndex];
					self.chanInts(res.data.rows);
				} else {
					var listArrays = [];
					res.data.rows.forEach((ite, ind) => {
						if (self.errorArrayList.indexOf(ite.questionId) !== -1) {
							listArrays.push(ite);
						}
					});
					listArrays.forEach((item, index) => {
						item.jsonStr = JSON.parse(item.jsonStr);
					});
					self.list = listArrays;
					self.nowPageData = listArrays[self.numIndex];
					self.chanInts(listArrays);
				}
			});
		},
		chanInts(res) {
			var a = [];
			var self = this;
			if (res[self.numIndex].type === 4) {
				res[self.numIndex].jsonStr.forEach((item,index) => {
					if(item.type === 3){
						if (item.answerQuestion === 1) {
							a[index] = '正确'
						} else {
							a[index] = '错误'
						}
					}else{
						var aras = []
						item.answer.forEach((items, indexs) => {
							if (items.optionAnswer === 1) {
								aras.push(self.alphabet[indexs])
							}
						});
						a[index] = aras.toString()
					}
					self.comswet = a
				})
			} else {
				if (res[self.numIndex].type === 3) {
					if (res[self.numIndex].answerQuestion === 1) {
						a.push('正确');
					} else {
						a.push('错误');
					}
				} else {
					res[self.numIndex].jsonStr.forEach((items, indexs) => {
						if (items.optionAnswer === 1) {
							a.push(self.alphabet[indexs]);
						}
					});
				}
				self.comans = a.toString();
			}
		},
		menu() {
			this.show = true;
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.u-drawer-content-visible {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	overflow: hidden;
}
</style>
<style scope>
.activeBtn {
	background-color: #f7fff7 !important;
	border-color: #09bb07 !important;
}
.imgBox {
	text-align: center;
}
.imgBox > image {
	max-height: 300rpx;
}
.pageStyle {
	padding: 20rpx 32rpx 100rpx;
}
.toptitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	margin-bottom: 25rpx;
}
.listCen {
	display: flex;
	font-size: 34rpx;
	color: #333;
	background-color: #f7fbff;
	margin-bottom: 8rpx;
	border-radius: 16rpx;
	padding: 15rpx 18rpx;
	border: 2rpx solid transparent;
}
.jx {
	position: relative;
	color: #333333;
	font-size: 30rpx;
}
.jx > .jxlis {
	position: absolute;
	top: 50%;
	left: 0;
	width: 118rpx;
	height: 8rpx;
	background-color: rgba(50, 70, 123, 0.2);
}
.answerJX {
	color: #333333;
	font-size: 30rpx;
}
.lefttoptitle {
	border-radius: 10rpx;
	border: 1rpx solid #32467b;
	height: 36rpx;
	line-height: 36rpx;
	padding: 0rpx 8rpx;
	text-align: center;
	color: #32467b;
	background: rgba(50, 70, 123, 0.1);
}
.pageStyle > .title {
	margin-bottom: 25rpx;
}
.righttoptitle {
	color: #999;
}
.righttoptitle > .spans {
	color: #32467b;
}
.btn_bac2 {
	background: #32467b;
	color: #fff;
}
.btn_bac1 {
	background: #f7f8ff;
	color: #666666;
}
.btn_num::before {
	content: '';
	padding-top: 100%;
	display: block;
}
.btn_num text {
	font-size: 24rpx;
	width: 100%;
	display: inline-block;
	text-align: center;
	top: 50%;
	position: absolute;
	height: 30rpx;
	line-height: 30rpx;
	margin-top: -15rpx;
}
.btn_num {
	border-radius: 32rpx;
	width: 16%;
	margin: 2%;
	display: inline-block;
	position: relative;
}
.popup_list {
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	height: 899rpx;
	background: #f2f3f6;
	padding-bottom: 30rpx;
}
.popup_box {
	height: 899rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: #f2f3f6;
	padding: 30rpx;
}
.sc_t {
	font-size: 22rpx;
	color: #000000;
}
.box {
	height: 95rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.sc {
	width: 29rpx;
	height: 29rpx;
}
.footer_tab {
	position: fixed;
	bottom: 0;
	height: 96rpx;
	width: 100%;
	background-color: #ffffff;
}
page {
	background: #ffffff;
}
</style>
