<template>
	<view class="courseContent">
		
		<view class="course-top">
		<!-- 	<video id="myVideo" :src="selectcourse.FilePath"
			          @error="videoErrorCallback"   controls></video> -->
					  <video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
					                      @error="videoErrorCallback"  controls duration='70'></video>
		</view>
		<view class="course-t">
			<view class="course-t-item">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fengx.png" class="share-icon" />
				<text>分享</text>
			</view>
			<view class="course-t-item" @click="setFavorite">
				
				<u-icon :name="favorite ? 'like' : 'like-o'" size="44" :color="favorite ? mc : '#333'"></u-icon>
				<!-- <u-icon name="like-o" size="44" style='margin-bottom: 12rpx;'></u-icon> -->
				<text>收藏</text>
			</view>
			<view class="course-t-item">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/huanc.png" class="share-icon" />
				<text>缓存</text>
			</view>
		</view>
		<view style="width: 100%;height: 15px;background: #FAF8F9;"></view>
		<view class="title">
			<view style=" overflow: hidden;
			  text-overflow: ellipsis;
			  display: -webkit-box;
			  -webkit-line-clamp: 1;
			  -webkit-box-orient: vertical;
			  color: #1C1E1F;
			  font-size: 16px;">{{name}}</view>
			<span style='font-size: 12px;color: #888888;'>共{{courseList.length}}课时</span>
		</view>
		<view style="width: 100%;height: 1px;background: #E2E2E2;"></view>
		<view v-if="courseList.length > 0" style="
		  height: calc(100vh - 405px);
		  width: 100%;
		  overflow: hidden;
		">
					<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" 
					 style="height: 100%;">
						<view class="scrollitem" v-for="(cl, ci) in courseList" :key="ci" @click="gocourse(cl,ci)">
							<view class="catalog-box-l" :style="{color:index==ci?'#00D6A6':'#121212'}">
							  <view class="cb-l-bt" :style="{border:index==ci?'0.5px solid #00D6A6':'0.5px solid #121212'}">{{cl.TypeName}}</view>
							  {{cl.SortName}}{{cl.Name}}
							</view>
						</view>
					</scroll-view>
				</view>
		
		<view class="goback" @click="goback" :style="{'padding-top':paddingHTop}">
			<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				mc:'',
				pricecolor:'',
				secondary:'',
				paddingHTop:0,
				id:0,
				courseList:[],
				index:0,
				name:'',
				selectcourse:{},
				favorite:false,//是否收藏
			}
		},
		onLoad(options) {
			console.log(options,'options')
			if(options && options.id){
				this.id = options.id
				this.index = options.index;
				this.name = options.name
				this.getGoodsCourseList()//获取课程目录
				this.getAppletCourseCollect()//获取课程是否收藏
			}
			// 多反了个字段  IsRead   是否已学习， 1是   2否
		},
		created() {
			this.mc = this.$uiConfig.mainColor;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.secondary = this.$uiConfig.secondary;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.paddingHTop = this.nav +'px';
		},
		methods:{
			goback(){
				uni.navigateBack({})
			},
			getGoodsCourseList(){
				this.request2({
						url: '/api/AppletSchool/GetAppletGoodsCourseList',
						data: {GoodsId: this.id, pageIndex	:1,pageSize:10000}
					},
					res => {
						this.courseList = res.data.pageData;
						this.selectcourse=this.courseList[this.index]
					}
				);
			},
			getAppletCourseCollect(){
				this.request2({
						url: '/api/AppletSchool/GetAppletCourseCollect',
						data: {GoodsId: this.id,}
					},
					res => {
						this.favorite =res.data.Favorite
					}
				);
			},
			setFavorite(){//设置喜欢
				this.request2(
					{
						url: '/api/AppletUser/SetUserCollectionInfo',
						data: {
							GoodsId: this.id
						}
					},
					res => {
						this.favorite = !this.favorite;
					}
				);
			},
			 videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			gocourse(item,index){
				this.index = index;
				this.selectcourse=item
				
			},
		}
	}
</script>

<style>
	.courseContent .course-top{
		width: 100%;
		height: 230px;
	}
	.courseContent .goback{
		margin-left: 15px;
		position: fixed;
		top: 0;
		left: 0;
	}
	#myVideo{
		width: 100%;
		height: 100%;
	}
	.courseContent .course-t{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80px;
	}
	.courseContent .course-t-item{
		width: 33.3%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.courseContent .share-icon {
	  width: 22px;
	  height: 22px;
	  margin-bottom: 12rpx;
	}
	.courseContent .title{
		width: 100%;
		height: 79px;
		padding: 18px 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.courseContent .scrollitem{
		width: 100%;
		padding: 15px;
		display: flex;flex-direction: row;
		align-items: center;
	}
	.courseContent .catalog-box-l{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.courseContent .cb-l-bt{
		font-size: 9px;
		border-radius: 2px;
		border: 1px solid #9A9A9A;
		padding: 1px;
		margin-right: 5px;
	}
</style>
