<template>
	<view>
		<h4 v-if="cffpCourseInfos.length<=0" class="noLists">暂无课程列表</h4>
		<ul v-if="cffpCourseInfos.length>0">
			<li v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
				<view class="thumbnailBox">
					<img :src="item.displayImage" alt="">
				</view>
				<view class="courseDetailBox">
					<h4>{{item.fileTitle}}</h4>
					<view class="summaryBox">
						<text>{{item.fileSynopsis}}</text>
					</view>
					<view class="dataBox">
						<strong>￥{{item.coursePrice}}</strong>
						<text>{{item.salesNumber}}人购买</text>
					</view>
					<view class="tagListBox">
						<view class="tagItem">{{item.fileLecturerName}}</view>
						<view class="tagItem">{{item.fileLecturerRanks}}</view>
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	import api from "../../api/api";
	
	export default{
		props:['tagIds'],
		data(){
			return{
				cffpCourseInfos:[]
			}
		},
		name:'courselist',
		components:{
		},
		onLoad(){
			this.courseList();
		},
		methods:{
			goDetail(item){
				uni.navigateTo({
					url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				});
			},
			courseList(){
				api.courseList().then(res=>{
					console.log(res)
					if(res['success']){
						this.cffpCourseInfos = res['data']['data'];
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			}
		},
		mounted() {
			this.courseList();
		}
	}
</script>

<style lang="scss">
	ul,li{
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}
	ul{
		flex-direction: column;
	}
	li{
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
		padding: 10rpx;
	}
	.noLists{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		
	}
	.thumbnailBox{
		width: 200rpx;
		height: 200rpx;
		background-color: #888;
		margin-right: 26rpx;
		img{
			max-width: 100%;
			height: auto;
		}
	}
	.courseDetailBox{
		width: 100%;
		color: #333;
		h4{
			font-size: 32rpx;
		}
		.summaryBox{
			font-size: 24rpx;
			margin: 10rpx 0;
			text{
				margin-right: 20rpx;
			}
		}
		.dataBox{
			strong{
				color: #F15A1F;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			text{
				font-size: 28rpx;
			}
		}
		.tagListBox{
			display: flex;
			.tagItem{
				color: #20279B;
				font-size: 28rpx;
				border-radius: 20rpx;
				border-top-left-radius: 0;
				border-bottom-right-radius: 0;
				padding: 10rpx 18rpx;
				border: 1px solid #20279B;
				margin-right: 20rpx;
			}
		}
	}
</style>