<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle ? pageTitle : '课程中心'"></z-nav-bar>		
		<view class="containerBg1">			
			<!-- <view class="containerBg"> -->
			<view class="coursePart flexbox" v-if="tabList.length > 1">
				<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in tabList"
					:key="index" @click="clicklib(item,index)">
					<!-- <u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon> -->
					<!-- <u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon> -->
					<view class="">{{item.title}}</view>
				</view>
			</view>
			<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
			<!-- 目录是否已经购买 -->
			<!-- 0:普通 1超级 2医学 3国学 -->
			<view class="endBox" v-if="tabList[curIndex].isBuy == 1 && userMsg.vip == '0'">
				<view class="" >
					<view class="flexbox" v-if="tabList[curIndex].startTime == null">
						<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
					</view>
					<view class="flexbox" v-else>
						<text >课程观看有效期截止到：{{tabList[curIndex].endTime}} </text><uni-tag type="primary" @click="goToLearn()" text="继续学习"></uni-tag>
					</view>					
				</view>
				
			</view>
				<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
					<text>{{item.title}}</text>
					<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
						size="mini" type="primary" />
				</view>
			</view>
			<u-divider v-else text="暂无数据"></u-divider>
			
			<view>
				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
					:iconStyle="iconStyle"></u-back-top>
			</view>
			<!-- </view> -->
			<!-- 评论弹出 -->			
			<public-module></public-module>
			<z-navigation></z-navigation>
			<!-- <music-play :playData="playData"></music-play> -->
		</view>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import commentsList from '@/components/commentsList.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},				
				// fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},				
				userMsg: {}, // 用户信息
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				scrollable: false,
				pageTitle: null,
				courseList: [],
			
				tabList: [{id:1, name:'我的课程'},{id:2, name:'在学习'},{id:3, name:'已过期'}], // 目录列表
				curId: null,
				curIndex: 0,
				
				
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			// this.pageTitle = e.title
			console.log(e, '传入分类id')
			this.getUserInfo()
			// this.courseId = e.id
			// this.getCateList(this.courseId)
			// this.getData(e.id)			
			// this.getSayList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();

		},
		onReachBottom() {
			console.log('触底');
			if (this.status != 2) {
				this.pPage++
				this.getSayList()
			}
		},
		components: {
			// musicPlay
			emotion,
			// commentsList

		},
		//方法
		methods: {
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},
			
			// 跳转
			onPageJump(url,id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},
			
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';


	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}
</style>