<template>
	<Navigation :title_name="person.exam.examName"
	        :isReturn="0"
	        :color="'#000000'"
	        :bgc="'#FFFFFF'"
			:isCenter="false" />
	<view class="page-bg">
		<view class="test_top">
			<text>{{person.exam.userName}}</text>
			<text>{{person.exam.subject}}</text>
			<text>{{person.exam.totalScore}}</text>
			<text class="top-score" v-if="person.exam.isJuniorSchool">{{person.exam.baseScore?person.exam.baseScore+'分':'0分'}}</text>
			<text>{{person.testData.length>0?person.btnActive+1:person.btnActive}}/{{person.testData.length}}页</text>
		</view>
		<view v-if="person.testData&&person.testData.length>0">
			<movable-area class="movable_box" v-if="person.itemExam.PaperType===1">
				<movable-view :style="{height:person.itemExam.Width*person.scaleHeight+'px;'}" direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" >
					<view class="test_center" :style="{transform:'rotate(90deg);',width:person.itemExam.Width*person.scaleHeight+'px;',height:person.itemExam.Height*person.scaleHeight+'px;'}">
						<image :style="{width:person.itemExam.Width*person.scaleHeight+'px;',height:person.itemExam.Height*person.scaleHeight+'px;'}" :src="person.itemExam.ImageUrl" mode=""></image>
						<view class="page_item flex" v-for="(quest,quIndex) in person.itemExam.Questions" :key="quIndex"
						:style="{
						top:quest.Y*person.scaleHeight +'px;',
						left:quest.X*person.scaleHeight+'px;',
						width:quest.Width*person.scaleHeight+'px;',
						height:quest.Height*person.scaleHeight+'px;'}">
						   <view class="text_flex flex" :style="{fontSize:quest.isObj?'24rpx':''}">
							   <text class="color_red">{{quest.score}}</text>/
							   <text class="color_blue">{{quest.totalScore}}</text>
						   </view>
						</view>
					</view>
				</movable-view>
			</movable-area>
			<movable-area class="movable_box" v-else-if="person.itemExam.PaperType===2">
				<movable-view :style="{height:person.itemExam.Height*person.scaleWidth+'px;'}" direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" >
					<view class="test_center" :style="{width:person.itemExam.Width*person.scaleWidth+'px;',height:person.itemExam.Height*person.scaleWidth+'px;'}">
						<image data-type="image" :src="person.itemExam.ImageUrl" mode=""></image>
						<view class="page_item flex" v-for="(quest,quIndex) in person.itemExam.Questions" :key="quIndex"
						:style="{
						top:quest.Y*person.scaleWidth +'px;',
						left:quest.X*person.scaleWidth+'px;',
						width:quest.Width*person.scaleWidth+'px;',
						height:quest.Height*person.scaleWidth+'px;'}">
						   <view class="text_flex flex" :style="{fontSize:quest.isObj?'24rpx':''}">
							   <text class="color_red">{{quest.score}}</text>/
							   <text class="color_blue">{{quest.totalScore}}</text>
						   </view>
						</view>
					</view>
				</movable-view>
			</movable-area>
		</view>
		<view v-else>
			<view class="empty_box">
				<image src="../../static/null_icon.png" mode=""></image>
				<text>暂无数据~</text>
			</view>
		</view>
		<view class="test_bottom flex">
			<view class="bottom_list">
				<view class="btn_list flex" v-if="person.itemLength>1">
					<view class="btn_item" :class="[person.btnActive===index?'btn_item_active':'']" v-for="(item,index) in person.itemLength" :key="index" @click="changeBtn(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="bottom_list flex">
				<view class="bottom_item flex">
					<text class="bottom_item_red"></text>
					我的得分
				</view>
				<view class="bottom_item flex">
					<text class="bottom_item_blue"></text>
				    年级平均分
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { nextTick, reactive, ref, watch } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import Navigation from '@/components/navigation/index.vue'
import { getTestImgs } from "@/api/exam-data";

let person=reactive({
	testData:[],
	exam:{},
	btnActive:0,
	itemExam:{},
	itemLength:0,
	scaleWidth:0, // 根据宽的缩放比例
	scaleHeight:0
})
onLoad((e)=>{
	// e 获取路由参数
	person.exam=JSON.parse(e.info)
	GetTestImgs(e.Id)
	load()
})

// 初始值
const load=()=>{
	if(person.testData&&person.testData.length>0){
		person.itemExam=person.testData[person.btnActive]
		person.itemLength=person.testData.length
		// 获取屏幕宽
		uni.getSystemInfo({
			success:(res)=> {
				person.scaleWidth = res.windowWidth/person.itemExam.Width
				person.scaleHeight = res.windowWidth/person.itemExam.Height
			}
		})
	}
}

// 获取学生答卷
const GetTestImgs=(Id)=> {
	getTestImgs({examSubjectId: Id}).then(res => {
		let { Code, Data, Message } = res
		if(Code===200&&Data){
			person.testData=Data
			load()
		}else{
			uni.showToast({
				title: Message,
				icon: 'none'
			})
		}
	})
}

const changeBtn=(index)=>{
	person.btnActive=index
	if(person.testData&&person.testData.length>0){
		person.itemExam=person.testData[index]
	}
}

</script>

<style lang="scss" scoped>
.test_top{
	padding: 0 32rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #888888;
	text{
		margin-right:30rpx;
	}
	.top-score{
		color: red;
		font-weight: bold;
	}
}
.page-bg{
	height: calc(100vh - 230rpx);
}
.movable_box{
	width: 375px;
	height: calc(100vh - 340rpx);
	overflow: hidden;
	movable-view{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.test_center{
	position: relative;
	top: 0;
	left: 0;
	image{
		width: 100%;
		height: 100%;
	}
	.page_item{
		position: absolute;
		border: 2rpx solid red;
		.text_flex{
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			font-size: 36rpx;
			line-height: 30rpx;
			overflow: hidden;
			text{
				font-weight: 600;
			}
		}
	}
}
.test_bottom{
	background: #fff;
	height: 80rpx;
	overflow: hidden;
	width: 100%;
	position: fixed;
	bottom: 0;
	text-align: center;
	border-top: 2rpx solid #eee;
	justify-content: space-between;
	z-index: 999;
	.bottom_list{
		padding: 25rpx 32rpx;
		.btn_list{
			padding: 10rpx 0;
			max-width: 350rpx;
			display: -webkit-box;
			white-space: nowrap;
			overflow-x: scroll;
			-webkit-overflow-scrolling:touch; // 允许独立的滚动区域和触摸回弹
			.btn_item{
				border: 2rpx solid #999;
				color: #999;
				margin-right: 25rpx;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.btn_item_active{
				background: #6B86FF !important;
				color: #fff !important;
				border: 2rpx solid #6B86FF !important;
			}
		}
		.bottom_item{
			font-size: 24rpx;
			color: #888888;
			margin-left: 20rpx;
			white-space: nowrap;
			text{
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
			.bottom_item_red{
				background: #FF2929;
			}
			.bottom_item_blue{
				background: #6B86FF;
			}
		}
	}
}
.color_red{
	color: #FF2929;
}
.color_blue{
	color: #6B86FF;
}
</style>