<template>
	<view class="wrap">
		<image class="bg" src="../static/qus-bg.png" mode=""></image>
		<!-- 弹窗 -->
		<view class="answer" v-if="progress!=1" :class="progress!=1?'fade-in':'fade-out'">
			<view class="answer-wrap">
				<view class="answer-wrap-img">
					<u-image :show-loading="false" :fade="false" mode="widthFix" :width="711"
						:src="require('../static/toast.png')"></u-image>
				</view>
				<view class="answer-wrap-tip">
					<view v-if="isCorrect">
						<image style="width:226rpx;height: 139rpx;" src="../static/answer-correct.png" mode="">
						</image>
					</view>
					<view class="" v-else>
						<image style="width:298rpx;height: 137rpx;" src="../static/answer-wrong.png" mode="">
						</image>
					</view>
					<view class="">
						正确答案：{{ correctAnswer }}
					</view>
					<view class="">
						<image v-if="progress===2" @click="$u.throttle(next)" style="width:309rpx;height: 208rpx;"
							src="../static/answer-next.png" mode=""></image>
						<image v-if="progress===3" @click="$u.throttle(back)" style="width:309rpx;height: 208rpx;"
							src="../static/answer-back.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<view class="questions">
			<view class="question">
				<view class="question-num">
					{{ containerTitle(now+1) }}
				</view>
				<view class="question-wrap">
					<view class="question-wrap-title">
						{{questionTitle}}
					</view>
					<view class="question-wrap-answer">
						<view class="question-wrap-answer-item" v-for="(item, index) in questionAnswers"
							@click="$u.throttle(() => answer(item, index))">
							<view class="question-wrap-answer-item-num"
								:class="{ 'question-wrap-answer-item-num-active': index === flag }">
								{{num(item.myindex)}}
							</view>
							<view class="question-wrap-answer-item-text"
								:class="{ 'question-wrap-answer-item-text-active': index === flag }">{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<tabbar :currentPage="5"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				answers: [],
				now: 0,
				myAnswers: [],
				isCorrect: false,
				progress: 1, //1答题中2答案3结束
				flag: -1, //显示active index
				id: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getQuestions(option.id);
		},
		computed: {
			questionTitle() {
				return this.answers[this.now] ? this.answers[this.now].title : ''
			},
			questionAnswers() {
				return this.answers[this.now]?.options?.sort((a, b) => {
					return a.myindex - b.myindex
				})
			},
			correctAnswer() {
				let correct = this.answers[this.now]?.options?.find(i => i.is_correct)
				return `${this.num(correct?.myindex)}、${correct?.title}`
			},
			num() {
				return function(index) {
					let map = new Map([
						[1, 'A'],
						[2, 'B'],
						[3, 'C'],
						[4, 'D'],
						[5, 'E'],
						[6, 'F'],
						[7, 'G'],
						[8, 'H'],
						[9, 'I'],
					])
					return map.get(index)
				}
			},
			containerTitle() {
				return function(number) {
					let chineseNumber = "";
					let chineseDigits = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
					let chineseUnits = ["", "十", "百", "千", "万", "亿"];

					if (number === 0) {
						return chineseDigits[0];
					}

					let digits = [];
					while (number > 0) {
						digits.push(number % 10);
						number = Math.floor(number / 10);
					}

					let unitIndex = 0;
					for (let i = 0; i < digits.length; i++) {
						let digit = digits[i];
						let unit = chineseUnits[unitIndex];

						if (digit === 0) {
							if (unit === "万" || unit === "亿") {
								chineseNumber = chineseUnits[unitIndex] + chineseNumber;
								unitIndex++;
							}
							continue;
						}

						chineseNumber = chineseDigits[digit] + unit + chineseNumber;
						unitIndex++;

						if (unitIndex === 5) {
							unitIndex = 1;
						}
					}

					return `第${chineseNumber}题`;
				}
			}
		},
		methods: {
			async getQuestions(id) {
				const res = await this.$u.api.getQuestions({
					point_id: id
				})
				this.answers = res.questions
			},
			answer(item, index) {
				this.flag = index
				this.myAnswers.push({
					question_id: this.answers[this.now].id,
					answer_ids: item.id
				})
				this.isCorrect = !!item.is_correct

				setTimeout(() => {

					this.progress = this.now === (this.answers?.length - 1) ? 3 : 2

					if (this.progress === 3) {
						this.$u.api.saveQuiz({
							point_id: this.id,
							answers: this.myAnswers
						})
					}
				}, 500)
			},
			next() {
				this.now++
				this.flag = -1
				this.progress = 1
			},
			back() {
				uni.navigateBack(-1)
			}

		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;

		// overflow: scroll;
		.bg {
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}

		.questions {
			position: relative;
			height: 100vh;
			overflow: scroll;
			padding-top: 160rpx;
			padding-bottom: 160rpx;

			& .question {
				width: 660rpx;
				margin: 0 auto;

				&-num {
					width: 380rpx;
					height: 91rpx;
					background: url(../static/qus-item.png) no-repeat left center;
					background-size: 100% 100%;
					line-height: 91rpx;
					font-size: 54rpx;
					padding-left: 90rpx;
					color: #fff;
				}

				&-wrap {
					background: #fff;
					border-radius: 0 60rpx 60rpx 60rpx;
					padding: 70rpx 30rpx;
					padding-bottom: 120rpx;

					&-title {
						font-size: 35rpx;
						line-height: 1.5;
						color: #333;
					}

					&-answer {
						font-size: 32rpx;
						color: #666666;
						margin-top: 30rpx;

						&-item {
							display: flex;
							margin-bottom: 35rpx;

							&-num {
								width: 60rpx;
								height: 60rpx;
								text-align: center;
								line-height: 55rpx;
								border-radius: 60rpx;
								border: 1px solid #ba9669;
								margin-right: 13rpx;

								&-active {
									background-color: #bb2903;
									color: #fff;
									border: 1px solid #bb2903;
								}
							}

							&-text {
								background-color: #fef8e9;
								border-radius: 0 20rpx 20rpx 20rpx;
								min-height: 60rpx;
								color: #666666;
								padding: 10rpx 30rpx;
								width: calc(100% - 80rpx);

								&-active {
									background-color: #bb2903;
									color: #fff;
								}
							}

						}
					}
				}
			}
		}

		.answer {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			position: relative;
			top: 0;
			left: 0;

			&-active {
				
			}

			&-wrap {
				&-img {
					position: absolute;
					top: 0;
					width: 100%;

					u-image {
						&>view {
							margin: 0 auto;
						}
					}
				}

				&-tip {
					padding-top: 350rpx;
					position: relative;
					width: 100%;
					text-align: center;
					color: #333;
					font-size: 33rpx;

					>view {
						margin-bottom: 60rpx;
					}
				}
			}
		}
	}

	.fade-in {
		animation: fade-in .5s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.fade-out {
		animation: fade-out .4s ease-out both;
	}

	@keyframes fade-out {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>