<template>
	<view>
		<view v-if="getLoading" class="wp100 relative" style="height: 100vh;">
			<image class="wp100" mode="widthFix" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E8%80%83%E8%AF%95%E6%8F%90%E9%86%92_20230906135037.png"></image>
			<view class="wp100 flex ai-c jc-c" style="position: absolute;bottom: 0;left: 0;padding-bottom: 124rpx;">
				<image style="width: 452rpx;" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E9%87%91%E6%AD%A6%E8%81%94_20230831123333.png" mode="widthFix"></image>
			</view>
		</view>
		<view v-if="!getLoading">
			<j-navbar :isBack="false">金武联驾考</j-navbar>
			<u-sticky bgColor="#fff">
				<u-tabs :list="categoryList" :current="curTab" :scrollable="false" @change="changeCategory"></u-tabs>
			</u-sticky>
			<view style="background-color: rgb(245, 245, 245);">
				<template v-if="subject=='1' || subject=='4'">
					<Subject1 :subject="subject" :rightList="rightList" :wrongList="wrongList" />
				</template>
				<template v-else>
					<Subject2 :subject="subject" ref="subjectRef" />
				</template>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import useQuestionStore from '@/jtools/store/question' //引入store
	import storage from '@/jtools/storage';
	import {
		querySysConfigList,
	} from '@/jtools/api/question';
	import Subject1 from "./components/Subject1";
	import Subject2 from "./components/Subject2";
	export default {
		components: {
			Subject1,
			Subject2
		},
		data() {
			return {
				show:false,
				subject: storage.get('curSubject') || '1',
				curTab: 0,
				searchValue: '',
				cityName: '',
				categoryList: [],
				rightList: storage.get(`rightList_subject${this.subject}`) || [],
				wrongList: storage.get(`wrongList_subject${this.subject}`) || [],
			};
		},
		onShow() {
			this.show=true
			this.getSubjectConfig()
			if (this.subject == '1' || this.subject == '4') {
				this.rightList = storage.get(`rightList_subject${this.subject}`) || []
				this.wrongList = storage.get(`wrongList_subject${this.subject}`) || []
			}
			if(this.subject=='2'||this.subject=='3'){
				this.$refs.subjectRef.getDiverType()
			}
		},
		onHide(){
			this.show=false
		},
		computed: {
			...mapState(useQuestionStore, ["loading_subject4", "loading_subject1","curSubject","orderQuestion_subject1","orderQuestion_subject4"]), //映射函数，取出tagslist
			getLoading() {
				return this.loading_subject4 && this.loading_subject1
			}
		},
		watch:{
			getLoading(newVal){
				if(this.show){
					if(newVal){
							if(this.loading_subject4 && this.loading_subject1){
								uni.hideTabBar();
							}
						}else{
							uni.showTabBar()
						}
					}
				}
		},
		methods: {
			...mapActions(useQuestionStore, ['getOrderQuestion_sub4', 'getOrderQuestion_sub1', 'changeSubject']),
			//获取科目配置
			getSubjectConfig() {
				const carTypeId = storage.get('carType') || '1001'
				querySysConfigList(carTypeId, 'Subject').then(resp => {
					if (resp.code === '0000') {
						this.categoryList = resp.data.map(item => {
							return {
								...item,
								name: item.configItemName
							}
						})
					this.subject=storage.get('curSubject') || '1',
					this.curTab=this.categoryList.findIndex(item=>item.configItemCode==this.subject)
					}
				})
			},
			//切换科目
			async changeCategory(val) {
				this.subject = val.configItemCode
				this.changeSubject(this.subject)
				if (this.subject == '1' || this.subject == '4') {
					this.rightList = storage.get(`rightList_subject${this.subject}`) || []
					this.wrongList = storage.get(`wrongList_subject${this.subject}`) || []
				} else {
					setTimeout(() => {
						this.$refs.subjectRef.getDiverType()
					}, 100)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs__wrapper__nav__line {
		background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
		bottom: 14rpx !important;
	}
</style>