<template>
	
	<!-- 课程介绍 -->
	<view class="course_intro">
		<!-- 课程名称 -->
		<view class="intro_title">{{item.title}}</view>
		<!-- banner -->
		<view class="intro_banner">
			<view class="banner_box">
				<image :src="item.image" mode=""></image>
				<!-- 分享 -->
				<view class="intro_share layout_row">
					<image src="../../static/fenxiang_icon@2x.png" mode="widthFix"></image>
					分享
					
					<button class="lj_share"  open-type='share'>分享</button>

					<!-- <button open-type="share"></button> -->
				</view>
			</view>
		</view>
		<!-- 课程介绍 -->
		<view class="course_des">
			<!-- 标题 -->
			<view class="descrip_title">课程介绍</view>
			<!-- 介绍内容 -->
			<view class="intro" id="editorDetail" >
				<!-- v-html="content" -->
				  <u-parse :content="content" @preview="preview" @navigate="navigate" ></u-parse>
				 
			</view>
			
			<view class="contentimg">
				<image :src="item.image" mode=""></image>
			</view>
		</view>
		<!-- 进入课程 按钮 -->
		<view class="join_box">
			<view class="join_course" @click="toDetail()">进入课程</view>
		</view>
		<!-- 返回首页 -->
		<view class="back_index column_center" @click="toIndex">
			<image src="../../static/shouye_icon@2x.png" mode=""></image>
			首页
		</view>
	</view>
</template>

<script>
import uParse from '@/components/u-parse/u-parse.vue'
import app from "../../App.vue";
export default {
	components: {
	  uParse
	},
	data() {
		return {
			title: '',
			content:"",
			courseid:'',
			item:'',
			present_customs:'',
			next_customs:''
			
		};
	},
	methods: {
		preview(src, e) {
		  // do something
		},
		navigate(href, e) {
		  // do something
		},
		// 介绍内容 后台的富文本数据
		onEditorReady() {
			let t = this;
			uni.createSelectorQuery()
				.select('#editorDetail')
				.context(res => {
					console.log(res)
					this.editorCtx = res.context;
					let content = {
						html: t.content
					};
					this.editorCtx.setContents(content); //设置富文本编辑器的内容
				})
				.exec();
		},
		
		 text(details) {
		
		    var texts = '';//待拼接的内容
		
		    while (details.indexOf('<img') != -1) {//寻找img 循环
		
		      texts += details.substring('0', details.indexOf('<img') + 4);//截取到<img前面的内容
		
		      details = details.substring(details.indexOf('<img') + 4);//<img 后面的内容
		
		      if (details.indexOf('style=') != -1 && details.indexOf('style=') < details.indexOf('>')) {
		
		        texts += details.substring(0, details.indexOf('style="') + 7) + "max-width:100%;height:auto;margin:0 auto;";//从 <img 后面的内容 截取到style= 加上自己要加的内容
		
		        details = details.substring(details.indexOf('style="') + 7); //style后面的内容拼接
		
		      } else {
		
		        texts += ' style="max-width:100%;height:auto;margin:0 auto;" ';
		
		      }
		    }
		   
		    texts += details;//最后拼接的内容
		
		    return texts
		
		  },
		// 获取课程详情
		getcoursedetail(){
			let that = this;
			console.log('00001112222',that.courseid)
			var url = '/api/course/course_detail';
			var params = {
				course_id: that.courseid,
			
			}
			app.post(url, params,"post").then((res) => {
				console.log('876655',res);
				that.present_customs=res.present_customs;
				that.next_customs=res.next_customs;
				// 把富文本图片给加一个最大宽度
				
				    this.item = res.data;
					 var text=this.text(res.data.content)
					 this.content=text;
					
						 
					
			}).catch((err) => {
				console.log(err)
			
			})
		},
		
		// 进入课程
		toDetail(){
			let token=uni.getStorageSync("token")
			if(token==''){
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
				
				setTimeout(function(){
					console.log(9999)
					uni.navigateTo({
						url:'/pages/start/start'
					})
				},1500)
			}else{
				
				if(this.present_customs==''){
					uni.showToast({
						title:'此课程没有关卡',
						icon:'none'
					})
				} else if(this.item.is_auth==2){
						 uni.showToast({
						 	title:"您没有权限看此课程",
							icon:"none"
						 })
						 
						 setTimeout(function(){
							 uni.navigateTo({
							 	// url:'/pages/start/start?id='+that.courseid+'&type='+1
								url:'/pages/index/index'
							 })
						 },1500)
						
					 }else if(this.item.state==2){
						 uni.showToast({
						 	title:'课程未开始',
							icon:"none"
						 })
						 
					 }else if(this.item.state==3){
						 uni.showToast({
						 	title:'课程授权到期',
							icon:"none"
						 })
						 
					 }else{
						uni.navigateTo({
							url:"/pages/course/courseDetail?id="+this.present_customs.id+'&courseid='+this.courseid
						})
				}
				
			}
			
		},
		// 返回首页
		toIndex(){
			uni.navigateBack({
				delta:2
			})
		},
	},
	share(){
		
	},
	
	
	onLoad(options){
		let that=this;
		console.log('99999999',options)
		
		
		this.courseid=options.id;
		console.log('222558774411')
		
		this.getcoursedetail()
		let token=uni.getStorageSync("token");
		if(token==''){
			uni.showToast({
				title:"请先登陆",
				icon:'none'
			})
			setTimeout(function(){
				uni.navigateTo({
					url:'../start/start?id='+that.courseid+'&type='+1
				})
			},1500)
		}
		
	},
	onUnload: function () {
		uni.reLaunch({
			url:'/pages/index/index'
		})
	  },

	 onShareAppMessage(res) {
		 let that=this;
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: this.item.title,
	      path:'/pages/course/courseIntro?id='+that.courseid
	    }
	  }
	
	
	
};
</script>

<style>
	
</style>

<style lang="scss">
	
	image{
		display:block;
		width:100%;
	}
	.intro{
		width:686rpx;
		color:#06121E;
		font-size: 24rpx;
		margin:28rpx auto 0;
		padding-bottom: 150rpx;
		box-sizing: border-box;
	}
.course_intro {
	.intro_title {
		font-weight: 600;
		color: #000;
		font-size: 36upx;
		padding: 20upx 0;
		text-align: center;
	}
	// banner
	.intro_banner {
		background-color: #fafbfd;
		padding: 42upx 32upx;
		.banner_box {
			width: 100%;
			height: 248upx;
			position: relative;
			image {
				border-radius: 20upx;
			}
			// 分享
			.intro_share {
				position: absolute;
				width: 122upx;
				height: 50upx;
				background-color: #06121e;
				opacity: 0.54;
				border-radius: 40upx 0 0 40upx;
				top: 42upx;
				right: 0;
				color: #fff;
				font-size: 24upx;
				image {
					width: 24upx;
					margin: 0 8upx 0 22upx;
				}
				button{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
					opacity: 0;
				}
			}
		}
	}
	// 课程介绍
	.course_des{
		padding: 50upx 32upx;
		// 标题
		.descrip_title{
			position: relative;
			margin-left: 24upx;
			color: #595959;
			font-size: 36upx;
			margin-bottom: 28upx;
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: -24upx;
				width: 12upx;
				height: 30upx;
				background-color: #EE8B27;
				
				
			}
		}
	}
	// 进入课程
	.join_box{
		width: 100%;
		position: fixed;
		bottom: 0;
		left:0;
		background: #fff;
		padding-bottom: 32rpx;
		.join_course{
			margin: 0 32upx;
			height: 96upx;
			background-color: #EE8B27;
			overflow-block: #fff;
			text-align: center;
			line-height: 96upx;
			border-radius: 48upx;
			box-shadow:0px 6px 6px rgba(238,139,39,0.16);
			font-size: 28upx;
			margin-top: 60upx;
			color: #fff;
		}
	}
	// 返回首页
	.back_index{
		width:80upx;
		height:80upx;
		background:rgba(0,0,0,1);
		border-radius:50%;
		opacity:0.63;
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		color: #fff;
		font-size: 20upx;
		image{
			width: 32upx;
			height: 32upx;
			margin: 0 auto 4upx;
		}
	}
}
</style>