<template>
	<view>
		<view class="p14">
			<view class="wp100 p14lr p20tb bc-fff br8 mb10 relative" style="box-sizing: border-box;" :class="checkedCar==item.carTypeId?'checked':''" v-for="(item,index) of carTypeList" :key="index" @click="changeType(item)">{{item.carName}}{{item.remark}}
			<view class="p5 cor-fff fs12 br4" style="background-color:#05C341;position: absolute;right: -1rpx;top:-1rpx" v-if="checkedCar==item.carTypeId">已选</view>
			</view>
			<view class="wp100" style="margin-top: 40px;">
				<u-button :customStyle="{width: '100%',borderRadius:'40rpx',backgroundColor:'#05C341',color:'#fff'}" text="确定"
					@click="submit" />
			</view>
			<u-modal :show="show" title="提示" content="切换题库后上一个题库练习记录将会全部清空，确定要切换吗" showCancelButton @confirm="confirmSubmit" @cancel="cancel"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'pinia' //引入映射函数
	import {
		getCarTypeList,
	} from '@/jtools/api/index';
		import storage from '@/jtools/storage';
		import useQuestionStore from '@/jtools/store/question' //引入store
	export default{
		data() {
			return{
				show:false,
				carTypeList:[],
				checkedCar: storage.get('carType') ||'1001',
				checkedCarName:storage.get('carName') || '小车C1/C2/C3'
			}
		},
		mounted() {
			this.getCarTypeList()
		},
		computed:{
			...mapState(useQuestionStore, ["loading_subject4", "loading_subject1","curSubject"]), //映射函数，取出tagslist
			getLoading() {
				return this.loading_subject4 && this.loading_subject1
			}
		},
		watch:{
			getLoading(newVal){
				console.log(newVal);
				if(newVal){
					uni.hideLoading()
					uni.showToast({
						title:'切换成功！'
					})
					this.cancel()
				}
			}
		},
		methods:{
			getCarTypeList(){
				getCarTypeList().then(resp=>{
					if(resp.code==='0000'){
						this.carTypeList=resp.data
					}
				})
			},
			changeType(item){
				this.checkedCar=item.carTypeId
				this.checkedCarName=item.carName+item.remark
			},
			submit(){
				const id=storage.get('carType') ||'1001'
				if(this.checkedCar==id){
					uni.showToast({
						title:'当前已是该车型题库！',
						icon:'error'
					})
				}else{
					this.show=true
				}
			},
			cancel(){
				this.show=false
			},
			confirmSubmit(){
				storage.set('carType',this.checkedCar)
				storage.set('carName',this.checkedCarName)
				uni.showLoading({
					title: '加载中'
				});
				useQuestionStore().resetStorage()
				useQuestionStore().getAllQuestion()
			}
		}
	}
</script>

<style scoped>
	.checked{
		border: 6rpx solid #05C341;
	}
</style>