<template>
	<view class="question">
		<view class="question-hd" :style="{'height': isToggle?'420rpx':'100%'}">
			<view class="a">
				<view class="l">{{categoryArray[categoryIndex]}}</view>
				<picker @change="bindPickerChange" :value="categoryIndex" :range="categoryArray">
					<view class="r">
						切换分类<image :src="staticUrl('/static/icon-arrow.png')"></image>
					</view>
				</picker>
			</view>
			<template v-if="categoryList[categoryIndex] && categoryList[categoryIndex].children.length > 0">
				<view class="c" v-for="(a,index) in categoryList[categoryIndex].children" :key="index">
					<template v-if="a.children && a.children.length > 0">
						<view class="name">{{a.name}}<text v-if="a.is_buy == 0"  @click="openPage(3,categoryList[categoryIndex],2,index)">打包购买</text></view>
						<view class="b" v-for="(b,idx) in a.children" :key="idx" @click="toSelect1(index,idx,b)">
							<view class="l">
								<image v-if="b.isSelect" :src="staticUrl('/static/icon-select-on.png')"></image>
								<image v-else :src="staticUrl('/static/icon-select.png')"></image>{{b.name}}
							</view>
							<view class="r" :class="b.is_buy==1?'r-on':''"  @click.stop="b.is_buy!=0?'':openPage(3,a,3,index,idx)">{{b.is_buy == 1?'已购买':'购买'}}</view>
						</view>
					</template>
					<template v-else>
						<view class="b" @click="toSelect(index,a)">
							<view class="l">
								<image v-if="a.isSelect" :src="staticUrl('/static/icon-select-on.png')"></image>
								<image v-else :src="staticUrl('/static/icon-select.png')"></image>{{a.name}}
							</view>
							<view class="r" :class="a.is_buy==1?'r-on':''"  @click.stop="a.is_buy!=0?'':openPage(3,categoryList[categoryIndex],2,index)">{{a.is_buy == 1?'已购买':'打包购买'}}</view>
						</view>
					</template>
				</view>
			</template>
		</view>
		<view class="question-anniu" @click="toggleItem()" v-if="isToggle">
			展开<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="question-anniu" @click="toggleItem()" v-else>
			收起<u-icon name="arrow-up"></u-icon>
		</view>
		<view class="question-bd">
			<!-- <view class="a">
				<view class="t" @click="openPage(1)">
					<image src="/static/icon-t-01.png"></image>刷实操
				</view>
			</view>
			<view class="b">
				<view class="t">
					<image src="/static/icon-t-02.png"></image>实操考试
				</view>
			</view> -->
			<view class="c">
				<view class="t" @click="openPage(2,0)">
					<image :src="staticUrl('/static/icon-t-03.png')"></image>刷章节
				</view>
				<view class="m" @click="openPage(2,1)">
					<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
			<view class="d">
				<view class="t" @click="openPage(1,0)">
					<image :src="staticUrl('/static/icon-t-04.png')"></image>刷真题
				</view>
				<view class="m" @click="openPage(1,1)">
					<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
				<view class="m" @click="openPage(1,3)">
					<image class="l" :src="staticUrl('/static/icon-error.png')"></image>顺序题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
				</view>
			</view>
		</view>
		<view class="question-fd">
			<view class="a">
				<view class="t">上次分数</view>
				<view class="m"><text>{{realforecastInfo.last_score}}</text>分</view>
			</view>
			<view class="a">
				<view class="t">预测考分</view>
				<view class="m"><text>{{realforecastInfo.forecast_score}}</text>分</view>
			</view>
		</view>
		<view class="question-bd">
			<view class="e">
				<view class="t" @click="openPage(2,3)">
					<image :src="staticUrl('/static/icon-t-05.png')"></image>免费刷题
				</view>
			</view>
			<view class="f">
				<view class="t" @click="openPage(1,2)">
					<image :src="staticUrl('/static/icon-t-06.png')"></image>模拟考试
				</view>
                <view class="m" @click="openPage(1,4)">
                	<image class="l" :src="staticUrl('/static/icon-error.png')"></image>刷错题<image class="r" :src="staticUrl('/static/icon-arrow.png')"></image>
                </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isToggle: true,
				categoryList: [],
				categoryIndex: 0,
				categoryArray: [],
				info: {},
				realforecastInfo: {
					forecast_score: 0,
					last_score: 0
				}
			};
		},
		onShow() {
			this.getCategoryList();
		},
		methods: {
			toggleItem() {
				this.isToggle = !this.isToggle
			},
			toSelect(index,a){
				// if(a.is_buy == 0){
				// 	return ;
				// }
				this.categoryList[this.categoryIndex].children.map(a=>{
					a.isSelect = false;
					if(a.children){
						a.children.map(b=>{
							b.isSelect = false;
							if(b.children){
								b.children.map(c=>{
									c.isSelect = false;
								})
							}
						})
					}
				})
				if(this.categoryList[this.categoryIndex].children){
					this.categoryList[this.categoryIndex].children[index].isSelect = true
					this.info = this.categoryList[this.categoryIndex].children[index]
					this.getRealforecast();
				}
			},
			toSelect1(index,idx, a){
				this.categoryList[this.categoryIndex].children.map(a=>{
					a.isSelect = false;
				})
				let arr = this.categoryList[this.categoryIndex].children
				if(arr[index].children && arr[index].children.length > 0){
					this.categoryList[this.categoryIndex].children.map(a=>{
						a.isSelect = false;
						if(a.children){
							a.children.map(b=>{
								b.isSelect = false;
							})
						}
					})
					this.categoryList[this.categoryIndex].children[index].children[idx].isSelect = true
					this.info = this.categoryList[this.categoryIndex].children[index].children[idx]
					this.isToggle = true
					this.getRealforecast();
				}
			},
			bindPickerChange(e) {
				this.categoryIndex = e.detail.value
			},
			//真题分预测
			async getRealforecast(){
				let { code, data, msg } = await this.$api.Realforecast({category_id: this.info.id})
				if (code == 200) {
					this.realforecastInfo = data;
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//分类
			async getCategoryList(){
				const that = this;
				let { code, data, msg } = await this.$api.categoryTreeList({})
				if (code == 200) {
					let arr = [], arr1 = []
					if(data && data.length > 0){
						data.map(a=>{
							arr.push(a.name);
							a.isSelect = false;
							if(that.info.id == a.id){
								a.isSelect = true;
							}
							if(a.children && a.children.length > 0){
								a.children.map(b=>{
									b.isSelect = false;
									if(that.info.id == b.id){
										b.isSelect = true;
									}
									if(b.children && b.children.length > 0){
										b.children.map(c=>{
											c.isSelect = false;
											if(that.info.id == c.id){
												c.isSelect = true;
											}
										})
									}
								})
							}
						})
					}
					this.categoryArray = arr;
					this.categoryList = data;
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			openPage(index,a,type,idx,idx1) {
				if(!uni.getStorageSync('userToken')){
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return ;
				}
				if(index == 1){
					if(this.info.id){
						uni.setStorageSync("categoryTitle",this.info.name)
                        if(a == 4){
                        	uni.navigateTo({
                        		url: "/pages/exercises/cuowuti/cuowuti?id="+this.info.id+"&type="+a
                        	})
                        }else{
                        	uni.navigateTo({
                        		url: "/pages/exercises/index?id="+this.info.id+"&type="+a
                        	})
                        }
					}else{
						uni.showToast({
							icon: "none",
							title: "请选择分类"
						})
					}
				}else if(index == 2){
					if(this.info.id){
						uni.setStorageSync("categoryTitle",this.info.name)
						if(a == 0){
							uni.navigateTo({
								url: "/pages/study/index?id="+this.info.id+"&type="+a
							})
						}else if(a == 3){
							uni.navigateTo({
								url: "/pages/study/free?id="+this.info.id
							})
						}else{
							uni.navigateTo({
								url: "/pages/study/detail?type="+a+"&id="+this.info.id
							})
						}
					}else{
						uni.showToast({
							icon: "none",
							title: "请选择分类"
						})
					}
				}else if(index == 3){
					if(!uni.getStorageSync("userToken")){
						uni.navigateTo({
							url: "/pages/login/login"
						})
						return ;
					}
					a.idx = idx
					a.idx1 = idx1
					a.type = type
					uni.setStorageSync("teamInfo",a)
					uni.navigateTo({
						url: "/pages/question/buyTwo"
					})
				}else if(index == 4){
					if(!uni.getStorageSync("userToken")){
						uni.navigateTo({
							url: "/pages/login/login"
						})
						return ;
					}
					uni.navigateTo({
						url: "/pages/question/buyOne"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.question {
		width: 100%;
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		&-hd {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			overflow: hidden;
			.a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ddd;
				padding: 20rpx 0;
				.l {
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #222;
					font-weight: bold;

					text {
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #FFFFFF;
						border: 1px solid #F01B1B;
						border-radius: 40rpx;
						font-size: 22rpx;
						color: #F01B1B;
						display: block;
						text-align: center;
						margin-left: 20rpx;
					}
				}

				.r {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.c{
				border-top: 1px solid #ddd;
				&:first-child{
					border-top-color: #FFFFFF;
				}
				.name{
					padding: 20rpx 0;
					font-size: 30rpx;
					font-weight: 400;
					color: #222222;
					margin-left: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text {
						width: 120rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #FFFFFF;
						border: 1px solid #F01B1B;
						border-radius: 40rpx;
						font-size: 22rpx;
						color: #F01B1B;
						display: block;
						text-align: center;
						margin-left: 20rpx;
					}
				}
			}
			.b {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				.l {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 18rpx;
					}
				}
				.r {
					width: 90rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #FFFFFF;
					border: 1px solid #F01B1B;
					border-radius: 40rpx;
					font-size: 22rpx;
					color: #F01B1B;
					display: block;
					text-align: center;
					margin-left: 20rpx;

					&-on {
						border-color: #EAEAEA;
						background: #EAEAEA;
						color: #222222;
					}
				}
			}
		}
		&-anniu{
				height: 80rpx;
				font-weight: bold;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
		}
		&-bd {
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.a {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #09B7B9, #54E1EA);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;

					image {
						width: 44rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}
			}

			.b {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #FF8E43, #FFBF50);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;

					image {
						width: 44rpx;
						height: 42rpx;
						margin-right: 20rpx;
					}
				}
			}
			.c {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.m{
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					padding: 20rpx 0 0;
					.l{
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						margin-left: 10rpx;
						vertical-align: middle;
						margin-top: -1px;
					}
					.r{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-top: -1px;
						float: right;
					}
				}
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #13BAA0, #49D2BD);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;
			
					image {
						width: 43rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			.d {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.m{
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					padding: 20rpx 0 0;
					.l{
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						vertical-align: middle;
						margin-left: 10rpx;
						margin-top: -1px;
					}
					.r{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-top: -1px;
						float: right;
					}
				}
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #3399EA, #38BCFF);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;
			
					image {
						width: 42rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			.e {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
			
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #13BAA0, #49D2BD);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;
			
					image {
						width: 40rpx;
						height: 43rpx;
						margin-right: 20rpx;
					}
				}
			}
			.f {
				width: 340rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
                .m{
                	font-size: 28rpx;
                	font-weight: 400;
                	color: #222222;
                	padding: 20rpx 0 0;
                	.l{
                		width: 24rpx;
                		height: 24rpx;
                		margin-right: 10rpx;
                		vertical-align: middle;
                		margin-left: 10rpx;
                		margin-top: -1px;
                	}
                	.r{
                		width: 40rpx;
                		height: 40rpx;
                		vertical-align: middle;
                		margin-top: -1px;
                		float: right;
                	}
                }
				.t {
					height: 150rpx;
					background: linear-gradient(-90deg, #3399EA, #38BCFF);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					font-weight: 400;
					color: #FFFFFF;
			
					image {
						width: 40rpx;
						height: 43rpx;
						margin-right: 20rpx;
					}
				}
			}

		}
		&-fd{
			background-color: #FFFFFF;
			overflow: hidden;
			border-radius: 20rpx;
			margin-top: 20rpx;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.a{
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 42rpx;
				&:first-child{
					border-right: 1px solid #CCCCCC;
				}
				.m{
					margin-top: 20rpx;
					text{
						font-size: 48rpx;
					}
					font-size: 30rpx;
					font-weight: 400;
					color: #F01B1B;
				}
			}
		}
	}
</style>