<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 swiperList" :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="courses_box">
				<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>
						</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,
				
			}
		},
		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: that.pageNum
				};
				
				
				
				
				app.post(url, param, 'get').then(r => {
					console.log(r)
					that.courseList=r.list
					
					
					
					
						
				
				
				}).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.image
					
					
					
						
				
				
				}).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)
				uni.navigateTo({
					url:"/pages/course/courseIntro"
				})
			},
		},
		onLoad() {
			this.getcourselist();
			this.getbanner()
		},
	}
</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>