<style scoped>
	.Question_Bank {
		padding: 0 25rpx;
		/* height: 100vh; */
		background-color: #F5F5F5;
	}

	.Question_Top {
		display: flex;
		align-items: center;
		padding-top: 40rpx;
	}

	.Ques_Title {
		font-size: 28rpx;
		font-weight: bold;
		color: #111111;
		margin-right: 45rpx;
	}

	.Ques_Select {
		padding: 5rpx;
		background-color: #FFF3F8;
		color: #F27573;
		border-radius: 20rpx;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		padding: 5rpx 10rpx 5rpx 20rpx;
	}

	.Ques_CirContent {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		margin-top: 40rpx;
	}

	.Ques_Circle {
		width: 190rpx;
		height: 200rpx;
		text-align: center;
		color: #fff;
		margin-right: 25rpx;
		display: inline-block;
		border-radius: 24rpx;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
	}

	.Ques_CirContent::-webkit-scrollbar {
		display: none;
	}

	.Ques_Top {
		font-weight: bold;
		font-size: 35rpx;
		margin-top: 30rpx;
		color: #4C50E7;
	}

	.Ques_Num {
		margin-top: 12rpx;
		font-size: 25rpx;
		color: #666666;
	}

	.Ques_Join {
		display: flex;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}

	.Janpa_Level {
		margin-top: 40rpx;
	}

	.Ques_Inner {
		width: 200rpx;
		height: 140rpx;
		background-color: #fff;
		text-align: center;
		color: #111111;
		font-size: 28rpx;
		margin: 0 25rpx 25rpx 0;
		border-radius: 24rpx;
		position: relative;
	}

	.Ques_level {
		font-style: italic;
		position: absolute;
		font-size: 34rpx;
		font-weight: bold;
		left: 15rpx;
		top: 10rpx;
		z-index: 99;
	}

	.Ques_Big {
		position: absolute;
		font-style: italic;
		font-size: 80rpx;
		color: #F1F1FD;
		left: 0;
		font-weight: bold;
	}

	.Ques_Jnber {
		position: absolute;
		color: #A3A3A3;
		font-size: 20rpx;
		bottom: 16rpx;
		right: 20rpx;
	}

	.JanpaTrueTi {
		width: 100%;
		height: 250rpx;
		margin-top: 40rpx;
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.JanpaTrueTi img {
		width: 100%;
		height: 100%;
	}

	.Join_Content {
		color: #333E52;
		font-size: 28rpx;
		position: absolute;
		left: 68rpx;
		bottom: 90rpx;
	}

	.Join_Linian {
		color: #333E52;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.Ques_Circle img {
		position: absolute;
		bottom: 0;
		width: 80rpx;
		height: 48rpx;
		left: 60rpx;
	}

	.triangle_Down {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #F27573;
		display: inline-block;
		margin-left: 10rpx;
	}
	.level_Choice{
		color:#000000;
		font-size:33rpx;
		margin-top:40rpx;
		font-weight: bold;
		margin-bottom:50rpx;
	}
	.level_Content{
		width:100%;
	}
	.level_Content view{
		padding:10rpx 0;
		background-color: #F1F1F1;
		font-size:26rpx;
		border-radius: 30rpx;
		text-align: center;
		margin:0 30rpx 30rpx 0;
		width:173rpx;
		display:inline-block;
	}
	.level_Content view:nth-child(3n){
		margin-right:0;
	}
	.checkedLevel{
		background-color: #FFF3F8!important;
		color: #F27573!important;
	}
</style>
<template>
	<view class="Question_Bank">
		<view class="Question_Top">
			<view class="Ques_Title">日语专项练习</view>
			<view class="Ques_Select" @click="showExambox()">
				{{comNum}}<text class="triangle_Down"></text>
			</view>
			<view class="Ques_Reset">

			</view>
		</view>
		<view class="Ques_CirContent" v-if="Object.keys(TypeObj).length>0">
			<view class="Ques_Circle" @click="goExam(1,TypeObj.wordsStartId,TypeObj.wordsTimes)">
				<view class="Ques_Top">单词</view>
				<view class="Ques_Num">{{TypeObj.wordsFinishCount}}/{{TypeObj.wordsTotalCount}}</view>
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/word1.png" alt="" />
			</view>
			<view class="Ques_Circle" @click="goExam(2,TypeObj.grammarStartId,TypeObj.grammarTimes)">
				<view class="Ques_Top">语法</view>
				<view class="Ques_Num">{{TypeObj.grammarFinishCount}}/{{TypeObj.grammarTotalCount}}</view>
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/word2.png" alt="" />
			</view>
			<view class="Ques_Circle" @click="goExam(3,TypeObj.listeningStartId,TypeObj.listeningTimes)">
				<view class="Ques_Top">听力</view>
				<view class="Ques_Num">{{TypeObj.listeningFinishCount}}/{{TypeObj.listeningTotalCount}}</view>
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/word3.png" alt="" />
			</view>
			<view class="Ques_Circle" style="margin-right:0;" @click="goExam(4,TypeObj.readingStartId,TypeObj.readingTimes)">
				<view class="Ques_Top">阅读</view>
				<view class="Ques_Num">{{TypeObj.readingFinishCount}}/{{TypeObj.readingTotalCount}}</view>
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/word4.png" alt="" />
			</view>
		</view>
		<view class="Janpa_Level">
			<view class="Ques_Title">日语等级评测</view>
			<view class="Ques_Join">
				<view class="Ques_Inner" v-for="(sItem,sIndex) in JoinArr" v-if="getIsExist(sItem.Id)&&sIndex!=JoinArr.length-1" :key="sIndex" @click="goJpGrade(sItem.Id)">
					<text class="Ques_level">{{sItem.Name}}</text>
					<text class="Ques_Big">{{sItem.Name}}</text>
					<text class="Ques_Jnber">{{sItem.JoinNum}}人参与</text>
				</view>
			</view>
		</view>
		<view class="Janpa_Level" style="margin-top:20rpx;">
			<template v-if="getIsExist(6)">
				<view class="Ques_Title">日语真题演练</view>
				<view class="JanpaTrueTi" style="margin:26rpx 0 20rpx 0" @click="goJpGrade(6)">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/trueTi.png" alt="" />
					<view class="Join_Content">
						<view v-if="JoinArr&&JoinArr.length>0">{{JoinArr[5].JoinNum}}人参与</view>
					</view>
				</view>
			</template>
			<view class="Ques_Title">日语错题</view>
			<view class="JanpaTrueTi" style="margin:26rpx 0 20rpx 0" @click="goWrong()">
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/wrong.png" alt="" />
			</view>
		</view>
		<van-popup :show="showPop" @close="showPop=false" round>
			<view  style="
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  background: #fff;
			  width: 580rpx;
			  height: 420rpx;
			  padding:20rpx;
			">
				<view class="level_Choice">等级选择</view>
				<view class="level_Content">
					<view v-for="(item,index) in LevelData" :key="index" :class="{'checkedLevel':item.Id==TypeMsg.BankType}" @click="getLevel(item)">{{item.Name}}</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	import { GetBankTypeList,GetAppQuestionStatic,GetAppBankStatic } from "../../api/exam";
	export default {
		props: {},
		setup(props, ctx) {
			let data = reactive({
				msg: {},
				showPop: false,
				LevelData: [],
				comNum:'',
				TypeMsg:{
					BankType:'',
					StudentId:1
				},
				TypeObj:{},
				JoinArr:[] //测评数据
			});
			let methods = {
				//获取等级
				async getLevels(){
					let res = await GetBankTypeList({});
					if (res) {
					  if (res.Code == 1) {
					    let UserInfo = uni.getStorageSync('indexData');
						let tempData = res.Data;
						this.LevelData=[];
						if(tempData&&tempData.length>0&&UserInfo.BankTypeList&&UserInfo.BankTypeList.length>0){
							tempData.forEach(x=>{
								UserInfo.BankTypeList.forEach(y=>{
									if(x.Id==y){
										this.LevelData.push(x);
									}
								})
							})
						}
						if(this.LevelData.length>0){
							this.comNum = this.LevelData[0].Name;
							this.TypeMsg.BankType = this.LevelData[0].Id;
							this.getLevelTotal();
						}
					  }
					}
				},
				//判断是否存在
				getIsExist(Id){
					for(let i=0;i<data.LevelData.length;i++){
						if(Id==data.LevelData[i].Id){
							return true;
						}
					}
				},
				//返回首页
				goExam(Type,startId,Times) {
					uni.navigateTo({
						url: '/pages/exam/examStart?Type='+Type+'&&BankType='+data.TypeMsg.BankType+'&&StartId='+startId+'&&Times='+Times
					});
				},
				showExambox() {
					data.showPop = true;
				},
				onClose() {
					data.showPop = false;
				},
				//点击选择等级
				getLevel(obj){
					data.comNum = obj.Name;
					data.TypeMsg.BankType = obj.Id;
					data.showPop = false;
					this.getLevelTotal();
				},
				//获取等级切换数据
			    getLevelTotal(){
				  GetAppQuestionStatic(data.TypeMsg).then(res=>{
					if(res){
						data.TypeObj = res.Data;
					}
				  });
				},
				//获取评测人数
				GetPincePeople(){
					GetAppBankStatic({}).then(res=>{
						if(res.Code==1){
							data.JoinArr = res.Data;
						}
					})
				},
				//跳转到日语等级评测列表
				goJpGrade(Type){
					uni.navigateTo({
						url: '/pages/exam/examGradeList?BankType='+Type+'&&StudentId='+ data.TypeMsg.StudentId
					});
				},
				//跳转我的错题
				goWrong(){
					uni.navigateTo({
						url: '/pages/exam/wrong'
					});
				}
			};
			let that = methods;
			onMounted(() => {
			});
			return {
				...toRefs(data),
				...methods,
			};
		},
		async onLoad(options) {
			await this.getLevels();
		},
		async onShow(){
			let UserInfo = uni.getStorageSync('userInfo');
			this.TypeMsg.StudentId = UserInfo.AccountId;
		    this.getLevelTotal();
			this.GetPincePeople();
		}
  };
</script>

<style>
</style>
