<template>
	<view style="min-height: 100vh; background-color: #f6f6f8;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="我的班级"></z-nav-bar>	
		<view class="containerBg" style="background-color: #f6f6f8;">
			<view class="subCate flex" v-if="subList1.length> 0">
				<text :class="['item',subTabId == item.id ? 'active' : '']" v-for="(item, index) in subList1"
					@click="curseClick(item)" :key="index">{{item.title}}</text>
			</view>
			<view class="" v-show="subTabId == 0">
				<view class="" v-if="preClassList.length > 0">
					<!-- 待开班 -->
					<uni-section class="mb-10 nobg" title="待开班" type="line"></uni-section>
					<view class="888">
						<view class="newBox" v-if="preClassList.length > 0">
							<view class="item flexbox" v-for="(item, index) in preClassList" :key="index"
								@click="onPageJump('/pages/miniClass/classInfo',item.id)">
								<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
								<view class="imgcontainer" v-if="item.icon != ''">
									<image :src="item.icon" mode="aspectFit"></image>
								</view>
								<view class="imgcontainer defaultImg" v-else>
									<image src="@/static/my_04.png" mode="aspectFit"></image>
								</view>
								<view class="buyItems">
									<view class="">
										<text v-show="item.classModel.type == 0">【普通班】</text>
										<text v-show="item.classModel.type == 1">【联合班】</text>
										<text v-show="item.classModel.type == 2">【精英班】</text>
										<text class="txt555" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
											{{item.title}}
										</text>
									</view>
									<view class="jianjie">
										目标学员人数：{{item.number}} 人
									</view>
									<view class="btn_box">
										<text class="seeInfo">进入班级</text>
									</view>
								</view>
							</view>
						</view>									
					</view>
				</view>
				<view class="" v-if="learningClassList.length > 0">
					<uni-section class="mb-10 nobg" title="学习中" type="line"></uni-section>
					<view class="learnBox ">
						<view class="newBox" v-if="learningClassList.length > 0">
							<view class="item flexbox" v-for="(item, index) in learningClassList" :key="index"
								@click="onPageJump('/pages/miniClass/classInfo',item.id)">
								<view class="imgcontainer" v-if="item.icon != ''">
									<image :src="item.icon" mode="aspectFit"></image>
								</view>
								<view class="imgcontainer defaultImg" v-else>
									<image src="@/static/my_04.png" mode="aspectFit"></image>
								</view>
								<view class="buyItems">
									<view class="">
										<text v-show="item.classModel.type == 0">【普通班】</text>
										<text v-show="item.classModel.type == 1">【联合班】</text>
										<text v-show="item.classModel.type == 2">【精英班】</text>
										<text class="txt555" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
											{{item.title}}
										</text>
									</view>
									<view class="jianjie">
										目标学员人数：{{item.number}} 人<br/>
										<text v-if="item.startTime&&item.studyEndTime">学习日期：{{(item.startTime).split('T')[0]}}至{{(item.studyEndTime).substring(0, 10)}}<br/></text>
										<text v-if="item.examStartTime&&item.examEndTime">考试周日期：{{item.examStartTime.substring(0, 10)}}至{{(item.examEndTime).substring(0, 10)}}</text>
									</view>
									
									<view class="btn_box">
										<text class="seeInfo">进入班级</text>
									</view>
								</view>
							</view>
						</view>				
					</view>
				</view>
				<view class="" v-if="examingClassList.length > 0">
					<uni-section class="mb-10 nobg" title="考试中" type="line"></uni-section>
					<view class="learnBox ">
						<view class="newBox" v-if="examingClassList.length > 0">
							<view class="item flexbox" v-for="(item, index) in examingClassList" :key="index"
								@click="onPageJump('/pages/miniClass/classInfo',item.id)">
								<view class="imgcontainer" v-if="item.icon != ''">
									<image :src="item.icon" mode="aspectFit"></image>
								</view>
								<view class="imgcontainer defaultImg" v-else>
									<image src="@/static/my_04.png" mode="aspectFit"></image>
								</view>
								<view class="buyItems">
									<view class="">
										<text v-show="item.classModel.type == 0">【普通班】</text>
										<text v-show="item.classModel.type == 1">【联合班】</text>
										<text v-show="item.classModel.type == 2">【精英班】</text>
										<text class="txt555" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
											{{item.title}}
										</text>
									</view>
									<view class="jianjie">
										目标学员人数：{{item.number}} 人<br/>
										<text v-if="item.startTime&&item.studyEndTime">学习日期：{{(item.startTime).split('T')[0]}}至{{(item.studyEndTime).substring(0, 10)}}<br/></text>
										<text v-if="item.examStartTime&&item.examEndTime">考试周日期：{{item.examStartTime.substring(0, 10)}}至{{(item.examEndTime).substring(0, 10)}}</text>
									</view>
									<view class="btn_box">
										<text class="seeInfo">进入班级</text>
									</view>
								</view>
							</view>
						</view>				
					</view>
				</view>
				<u-divider v-if="preClassList.length == 0 && learningClassList.length == 0 && examingClassList.length == 0" text="暂无数据"></u-divider>
			</view>			
			
			<!-- 过期班级 -->
			<view class="" v-show="subTabId == 2">
				<view class="learnBox box">
					<view class="newBox" v-if="classList.length > 0">
						<view class="item flexbox" v-for="(item, index) in classList" :key="index"
							@click="onPageJump('/pages/miniClass/classInfo',item.id)">
							<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
							<view class="imgcontainer" v-if="item.icon != ''">
								<image :src="item.icon" mode="aspectFit"></image>
							</view>
							<view class="imgcontainer defaultImg" v-else>
								<image src="@/static/my_04.png" mode="aspectFit"></image>
							</view>
							<view class="buyItems">
								<view class="">
									<text v-show="item.classModel.type == 0">【普通班】</text>
									<text v-show="item.classModel.type == 1">【联合班】</text>
									<text v-show="item.classModel.type == 2">【精英班】</text>
									<text class="txt555" @click="onPageJump('/pages/miniClass/classInfo',item.id)">
										{{item.title}}
									</text>
								</view>
								<view class="jianjie">
									目标学员人数：{{item.number}} 人
								</view>
								<view class="btn_box">
									<text class="seeInfo">进入班级</text>
								</view>
							</view>
						</view>
					</view>
					<u-divider v-else text="暂无数据"></u-divider>
				</view>
				<view>
					<!-- <u-back-top scroll-top="100"></u-back-top> -->
					<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
						:iconStyle="iconStyle"></u-back-top>
				</view>
			</view>

		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				addType: undefined, // 小班类型
				range: [{
						value: '0',
						text: "普通小班",
						name: "普通小班"
					},
					{
						value: '1',
						text: "联合班",
						name: "普通小班"
					},
					{
						value: '2',
						text: "精英班",
						name: "普通小班"
					},
				],
				tagId: null,
				pid: null,
				fixed: false,
				pupShow: false,
				fatherTabId: null,
				subTabId: null, //
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				subList1: [{
					title: '进行中',
					id: '0'
				}, {
					title: '已结班',
					id: '2'
				}],
				subList: [{
					title: '待开班',
					id: '0'
				}, {
					title: '已开班',
					id: '1'
				}, {
					title: '已结班',
					id: '2'
				}],
				scrollable: false,
				pageTitle: '',
				tabList: [{
					name: '普通小班',
					id: '0'
				}, {
					name: '联合班',
					id: '1'
				}, {
					name: '精英班',
					id: '2'
				}],
				curTagId: 0,
				classList: [], // 已结班
				preClassList: [], // 待开班
				learningClassList: [], // 在学习的班级
				examingClassList:[],   // 考试周班级
				status: 3, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
				page: 1,
				flag: true, // 函数是否执行完

			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// this.tagId = e.id			
			this.curTagId = this.range[0].value
			this.subTabId = this.subList[0].id
			this.pageTitle = e.title
			this.pid = e.pid
			console.log(e, '传入分类id')
			// this.getData()
			// this.getCateList(this.tagId)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
			// console.log(this.scrollTop,'this.scrollTop')
		},
		async onPullDownRefresh() {
			console.log('下拉刷新')
			// this.status = 3
			// this.page = 1
			this.classList = []
			// this.getData()
			this.classList = await this.getData('0','2')
			this.learningClassList = await this.getData('0','1')
			this.preClassList = await this.getData('0','0')
			this.examingClassList = await this.getData('0','3')
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// if (this.status != 2 && this.flag) {
			// 	this.page++
			// 	this.getData(this.subTabId)
			// }
			console.log('触底加载', this.page)
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
	async	onShow() {
			// 隐藏原生的tabbar
			// uni.hideTabBar();
			this.classList = await this.getData('0','2')
			this.learningClassList = await this.getData('0','1')
			this.preClassList = await this.getData('0','0')
			this.examingClassList = await this.getData('0','3')
			// this.getLearingClassList()			
		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			// 加入班级
			enterClass() {

			},
			selectChange(e) {
				console.log("e:", e);
			},
			closePup() {
				this.pupShow = false
			},
			surl(imageurl) {
				return `url(${imageurl})`
			},			
			
			goCreateClass() {
				console.log('this.addType', this.addType);
				if (this.addType != undefined) {
					uni.navigateTo({
						url: `/pages/miniClass/addClass?type=${this.addType}&name=add`
					})
				} else {
					uni.showToast({
						title: '请选择班级的类型',
						icon: 'none'
					})
					return
				}
			},
			fatherClick(e) {
				console.log('点击', e)
				this.page = 1
				// var item = e
				this.curTagId = e.id
				this.subTabId = this.subList[0].id
				this.getData(this.subTabId);
			},
			curseClick(item) {
				this.subTabId = item.id
				// this.classList = []
				// this.page = 1
				// this.getData(this.subTabId);
			},
			
		async getData(role,state) {
				// if (!this.flag) {
				// 	console.log('正在执行，未完成')
				// 	return
				// }
				var _list = []
				this.status = 1
				// this.flag = false
				// uni.showLoading({
				// 	title: '正在加载'
				// })
				var data = {
					"isCommittee": role,
					"state": state, //小班状态0待开班1已开班2完成
					"type": '' // 班类型 0小班 1联合班 2精英班
				}
				console.log('----data', data);
			await	$http.request({
					
						url: "common/class/MyClassList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.result.length > 0) {
								// this.classList = res.result
								_list = res.result
							} else {
								// this.classList = []
								_list = []
							}
							// this.flag = true
						}
						// uni.hideLoading()
					}).catch(e => {
						// uni.hideLoading()
						// this.flag = true
						console.log('数据报错',e)
						// this.status = 3
						uni.showToast({
							title: `获取数据失败`,
							icon: 'error'
						})
					});
					return _list
			},
			// 跳转
			onPageJump(url, id, have) {
				// console.log('进来了',url,id);				
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},

			shuomingPage(url, id, pid) {
				uni.navigateTo({
					url: `${url}?id=${id}&pid=${pid}`
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	/deep/.uni-select__selector {
		top: unset;
		bottom: calc(100% + 12px);
	}

	/deep/.uni-select {
		border: none;
	}

	/deep/.uni-select__input-text {
		font-size: 14px;
		color: #7f7f7f //修改为你的字体颜色
	}

	/deep/.uni-select__input-placeholder {
		font-size: 14px;
		color: #7f7f7f //修改为你的字体颜色
	}

	/deep/.uni-popper__arrow {
		top: unset;
		bottom: -6px;
		transform: rotate(180deg);
	}

	/deep/.uni-popper__arrow::after {
		top: 0
	}

	.nobg {
		background-color: transparent !important;
	}

	.box6 {
		.btnBox {
			justify-content: center;
		}
	}

	.containerBg {
		// background-color: $containerColor;
		background-color: #f6f6f8;
		padding: 0 20rpx;

	}

	.curseSet {
		margin-right: 20rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.fixed {
		position: fixed;
		z-index: 1;
		width: 100%;
		background-color: #fff;
	}

	.newBox {

		.item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			@include ptop_bottm(10px);
			@include pleft_right(10px);

			@include mshadow(10px, 1) .imgcontainer {
				display: block;
				width: 90rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				// background-size: cover;
				// background-position: center;
				height: 200rpx;
				flex-grow: 1;
				// @include ptop_bottm(10px);
				overflow: hidden;

				// @include pleft_right(10px);
				image {
					width: 100%;
					height: 200rpx;
				}
			}

			.btn_box {
				text-align: right;
				margin-top:20rpx;

				text {
					border-radius: 20rpx;
					padding: 3px 5px;
					@include theme("btn_bg");
					font-size: 28rpx;
					color: #fff;
				}

				.seeInfo {
					background-color: #fff;
					background-image: none;
					border: 1px solid #666;
					color: #333;
					margin-left: 20rpx;
				}
			}

			.jianjie {
				line-height: 36rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #9c9c9c;
			}

			.txt555 {
				font-size: 30rpx;
				color: #000;
				@include bov()
			}
		}
	}

	.subCate {
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;

		.item {
			border: 1px solid #bfcad9;
			display: inline-block;
			text-align: center;
			font-size: 26rpx;
			background-color: #fff;
			border-radius: 4px;
			width: 100%;
			color: #333;
			margin-right: 16rpx;
			padding: 14rpx 30rpx;
		}

		.item:last-child() {
			margin-right: 0;
		}

		.item.active {
			border-color: $themeColor;
			background-color: $themeColor;
			color: #fff;
		}
	}

	.tabList {
		text-align: center;
	}

	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}

	.box {
		// background-color: #fff;		
		min-height: calc(100vh - 270rpx);
	}

	.learnBox {
		// background-color: #fff;
		margin-top: 10px;

		.learn {
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 48%;
				margin-bottom: 16px;

				overflow: hidden;

				image {
					width: 100%;
					height: 200rpx;
				}

				.txt555 {
					display: block;
					text-align: center;
					height: 40rpx;
					width: 100%;
					line-height: 40rpx;
					@include bov(1);
					margin-top: 10rpx;
					font-size: 24rpx;

				}

			}
		}
	}
</style>