<template>
	<view class="discovery_wrap">
		
		<!-- <view class="bannerimg">
			<image :src="bannerimg" mode=""></image>
		</view> -->
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)" :duration="1000">
			<swiper-item  v-for="(item,index) in bannerimg" :key="index">
				<view class="swiper-item">
					<image :src="item.image" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 推荐课程 -->
		<view class="recommend_course">
			<!-- 标题 -->
			<view class="recommend_top layout_row">
				<image src="../../static/theme.png" mode=""></image>
				<view class="">
					推荐课程
				</view>
			</view>
			<!-- 推荐的课程 -->
			<view class="nodata" v-if="courseList.length==0&&time==true">暂无课程</view>
			<view class="courses_box" v-else>
				
				<view class="courses_list">
					<view class="courses_single justify_between" :class="{no_bot:noBot == index+1}" v-for="(item,index) in courseList" :key="index" @click="toCourseIntro(item)">
						<!-- 左侧 -->
						<view class="course_left justify_column_bet">
							<!-- 课程名称 -->
							<view class="course_name">{{item.title}}</view>
							<!-- 进行状态 -->
							<view class="layout_row course_status">
								<image src="../../static/index_07.png" mode=""></image>
								<view class="status_des" v-if="item.state==1">正在进行</view>
								<view class="status_des" v-if="item.state==2">未开始</view>
								<view class="status_des" v-if="item.state==3">已结束</view>
							</view>
						</view>
						<!-- 右侧 -->
						<view class="course_right">
							<image :src="item.image" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() { 
			return {
				swiperList:[
					
				],
				bannerimg:[],
				courseList:[],
				noBot:3,
				page:1,
				pageNum:10,
				time:false
				
			}
		},
		methods: {
			// 获取课程列表
			getcourselist(){
				let that=this;
				// let url = "/api/course/course_list";
				let url='/api/index/index'
				let Userid = uni.getStorageSync('userid')
				let param = {
					page: that.page,
					pageNum: 10
				};
				
				app.post(url, param, 'get').then(r => {
					console.log(r)
					that.courseList=that.courseList.concat(r)
				
				}).catch(err => {
					console.log(err)
				
				})
			},
			
			// 获取banner图
			getbanner(){
				let that=this;
				let url = "/api/slide/get_slide";
				let Userid = uni.getStorageSync('userid')
				let param = {
					
				};
				
				app.post(url, param, 'get').then(r => {
					console.log(r)
					that.bannerimg=r
				
				}).catch(err => {
					console.log(err)
				
				})
			},
			
			// 课程介绍
			toCourseIntro(item){
				
				// var item=JSON.stringify(item)
				// console.log(item)
				// wx.setStorageSync("item",JSON.stringify(item))
				// wx.setStorageSync("item", item)
				let token=uni.getStorageSync("token")
				if(token==''){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:"/pages/start/start"
						})
					},1500)
					
				}else{
					uni.navigateTo({
						url:"/pages/course/courseIntro?id="+item.id
					})
				}
				
				
			},
			
			// 获取用户信息
			getuserinfo() {
				let that = this;
				var url = '/api/index/user_info';
				var params = {
			
			
				}
				app.post(url, params, "post").then((res) => {
					console.log(res);
					
			
			
				}).catch((err) => {
					console.log(err)
					if (err.msg == '您已被拉黑') {
						uni.showToast({
							title: err.msg,
							icon: "none"
						})
			
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/start/start'
							})
						}, 1500)
					} else if (err.msg == '用户未登录') {
			
						wx.showToast({
							title: '请重新登录',
							icon: 'none'
						})
						uni.clearStorageSync(); 
						setTimeout(function(){
						 uni.navigateTo({
						  url:'/pages/start/start'
						 })
						},1500)
					}
			
			
				})
			},
			
		},
		
		onLoad() {
			
		},
		onShow: function(){
			console.log(34437347)
			this.page=1;
			this.courseList=[];
			this.getcourselist();
			this.getbanner();
			this.getuserinfo();
			
			setTimeout(function(){
				this.time=true
			},1000)
		},
		onReachBottom() {
			var newpage = this.page;
			newpage++;
			this.page = newpage
			this.getcourselist()
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFBFD;
	}
	.bannerimg{
		width:686rpx;
		height:248rpx;
		margin:42rpx auto 0;
	}
	.discovery_wrap{
		padding: 0 32upx;
		// 轮播图
		swiper{
			margin: 42upx 0;
			.swiper-item{
				width: 100%;
				height: 300upx;
				image{
					border-radius: 20upx;
				}
			}
		}
		// 推荐课程
		.recommend_course{
			padding: 32upx 0 124upx;
			// 标题
			.recommend_top{
				color: #595959;
				font-size: 36upx;
				margin-bottom: 28upx;
				image{
					width: 32upx;
					height: 32upx;
					margin-right: 18upx;
				}
			}
			// 推荐的课程
			.courses_box{
				background-color: #fff;
				border-radius: 8upx;
				padding: 0 30upx;
				
				// 单个课程
				.courses_single{
					padding: 40upx 0;
					border-bottom: 1px solid #eee;
					// 左侧
					.course_left{
						width: 380upx;
						// 课程名称
						.course_name{
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #3D444D;
							font-size: 28upx;
						}
						// 进行状态
						.course_status{
							color: #8C9198;
							font-size: 24upx;
							image{
								width: 32upx;
								height: 32upx;
								margin-right: 8upx;
							}
						}
					}
					// 右侧
					.course_right{
						width: 216upx;
						height: 124upx;
						image{
							border-radius: 8upx;
						}
					}
				}
				.no_bot{
					border-bottom: none;
				}
			}
		}
	}
</style>