<template>
	<view>
		<view class="card-view">
			<image src="../../static/img/train-banner1.png" mode="aspectFill" style="width: 100%;"></image>
		</view>

		<view class="card-view">
			<!-- <tui-divider width="80%" gradual>选择要练习的题目类型</tui-divider> -->
			
			<view class="margin">
				<tn-radio-group activeColor="#5677fc" v-model="mode">
					<tn-radio name="normal">正常模式</tn-radio>
					<tn-radio name="memory">记忆模式</tn-radio>
					<tn-radio name="random">随机模式</tn-radio>
				</tn-radio-group>
			</view>
			
			<tui-cascade-selection height="200px" :itemList="cateList" @complete="complete" text="请选择题库" :defaultItemList="defaultCateList"></tui-cascade-selection>
		</view>

		<view style="width:90%; margin: 10rpx auto;" class="padding-bottom-xl">
			<tui-button shape="circle" shadow bold preventClick :disabled="questionCount == 0" @click="goTrain">{{btnText}}</tui-button>
		</view>
		
		<login ref="login" v-on:succ="getCate"></login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: '',
				cateList: [],
				cateId: 0,
				cateName: '',
				questionCount: 0,
				btnText: '开始练习',
				mode: 'normal',
				defaultCateList: []
			}
		},
		onLoad(e) {
			this.page = e?.page
			this.getCate()
		},
		methods: {
			// 获取分类
			getCate() {
				this.http('cate/getThree', {
					kind: 'QUESTION'
				}).then(res => {
					this.cateList = res.data
					
					// 模拟分类点击事件
					if (this.cateId) {
						this.complete({
							value: this.cateId,
							result: [
								{
									text: this.cateName
								}
							]
						})
					} else {
						let defaultCate = this.utils.getData('default_cate-QUESTION')
						console.log('defaultCate', defaultCate)
						if (defaultCate) {
							let lastCate = [...defaultCate.result].pop()
							console.log('lastCate', lastCate)
							
							let defaultCateList = []
							for (var i = 0; i < defaultCate.result.length; i++) {
								defaultCateList.push(defaultCate.result[i].text)
							}
							this.defaultCateList = defaultCateList
							
							this.cateId = lastCate.value
							this.cateName = lastCate.text
							
							this.complete({
								value: this.cateId,
								result: [
									{
										text: this.cateName
									}
								]
							})
						}
						
						// let user = this.utils.getData('user')
						// if (user?.info && user.info?.default_cate_ids) {
						// 	this.defaultCateList = [...user.info.default_cate_names]
							
						// 	this.cateId = [...user.info.default_cate_ids].pop()
						// 	this.cateName = [...user.info.default_cate_names].pop()
							
						// 	this.complete({
						// 		value: this.cateId,
						// 		result: [
						// 			{
						// 				text: this.cateName
						// 			}
						// 		]
						// 	})
						// }
					}
					
					// this.defaultCateList = ["消防","灭火救援常识",]
				})
			},
			// 选择分类
			complete(e) {
				console.log(e);
				console.log('您选择的数据为:', e);

				this.cateId = e.value
				this.cateName = e.result[e.result.length - 1].text

				let params = {
					cate_id: this.cateId,
					just_get_count: 1,
				}
				
				this.$refs.login.afterMethod = () => {
					this.complete(e)
				}
				console.log('afterMethod', this.$refs.login.afterMethod)
				this.http('question/train', params).then(res => {
					
					if (res.code == 1) {
						this.questionCount = res.data.total
						if (this.questionCount) {
							this.btnText = '开始练习(' + this.questionCount + '题)'
						} else {
							this.btnText = '当前分类无试题'
						}
					} else {
						this.utils.toast(res.msg)
					}
				})

			},
			// 开始练习
			goTrain() {
				if (!this.cateId) {
					this.utils.toast('请先选择练习题分类')
					return
				}
				
				this.page = this.page == 'train' ? 'train' : 'look'
				this.utils.goto(this.page + '?cateId=' + this.cateId + '&cateName=' + this.cateName + '&mode=' + this.mode)
			}
		}
	}
</script>

<style>
	.tn-radio__label {
		color: #333 !important;
		font-size: 15px !important;
	}
</style>