<template>
	<view class="container">
		<view class="shareheader" style="" v-if="coursesharing != 1">
			<view class="iconfont icon-youjiantou" style="margin-left: 30rpx;" @click="goBack()">
			</view>
			<view class="share-entrance">
				<view style="z-index: 99999;">
					<uni-popup ref="share" type="top" safeArea backgroundColor="#fff" :maskClick='true'
						@change="maskClick">
						<uni-popup-share @select="sharechange"></uni-popup-share>
					</uni-popup>
				</view>
				<view class="" style="width: 50rpx;height: 50rpx;padding-right: 20rpx;">
					<image class="image" @click="reinvite" src="../../static/fastentry/Slice122.png" mode=""></image>
				</view>
				<view class="" style="width: 50rpx;height: 50rpx; ">
					<image class="image" @click="shareToggle" src="../../static/fastentry/Slice12.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 课程banner图 -->
		<!-- v-show="!sliceshare" -->
		<view class="courseBannerBox" v-if="!sliceshare">
			<video v-if="isRenderVideo" id="myVideo" :src="courseInfo.filePathOss" :initial-time="viewTime"
				object-fit="contain" class="videoBox" :poster="courseInfo.fileFirstImage" :title="courseInfo.fileTitle"
				@play="playVideo" @pause="pause" @timeupdate="timeupdate" style="width: 100vw;height: 320rpx;"></video>
		</view>

		<!-- 课程详情图 -->
		<view class="courseTitleContent">
			<view class="courseTitle">
				<view class="" style="width: 70%;">
					<h4>{{courseInfo.fileTitle}}</h4>
				</view>
				<view class="shareF">
					<view class="awakenApp" @click="jumpapp()" v-if="coursesharing == 1">
						<view class="" style="width: 50rpx; height: 50rpx;">
							<image style="width: 50rpx; height: 50rpx;" src="../../static/Slice117.png" mode=""></image>
						</view>
						<text>唤醒App</text>
					</view>
					<!-- v-if="isWeixin == true" -->
					<!-- 	<view class="awakenApp">
						<wx-open-launch-app id="launch-btn" appid="wxb591d0034cdcf0cd" extinfo="extinfo">
							<script type="text/wxtag-template">
								<button class="btn" >打开/下载App</button>
							</script>
						</wx-open-launch-app>
					</view> -->
					<strong>

					</strong>
				</view>
			</view>
			<view class="dataBox">
				<strong v-if="courseInfo.status==1">￥{{courseInfo.coursePrice}}</strong>
				<text v-if="courseInfo.status==2" style="color: #F15A1F;margin-right: 20rpx;"><i
						class="iconfont icon-yifukuan"></i>已购</text>
				<text>{{courseInfo.salesNumber}}人购买</text>

			</view>

		</view>
		<!-- 课程介绍，相关课程，讲师 -->
		<view class="courseProBox">
			<!-- tab区域 -->
			<view class="tab">
				<text :class="{'actived': tabType===1}" @click="switchTab(1)">详情</text>
				<text :class="{'actived': tabType===2}" @click="switchTab(2)">相关课程</text>
				<text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text>
			</view>
			<!-- tabContent区域 -->
			<view class="tabContent">
				<!-- 课程介绍 -->
				<view class="courseIntroContent" v-if="tabType===1">
					<view v-html="courseInfo.fileIntroduce" class="richTextContent"></view>
				</view>
				<!-- 相关课程列表 -->
				<view class="relationCourseListsContent" v-show="tabType===2">
					<view class="totalCourseCount">
						<text v-if="requiredCount">{{requiredCount}}节必修</text>
						<text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text>
					</view>
					<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
						<view class="courseInfoContent">
							<h4>{{index + 1}}.{{item.fileTitle}}<text
									class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>

							<view class="timeContent">
								<view class="">
									{{secondsTransferPipe(Number(item.maxViewTime))}}/{{secondsTransferPipe(Number(item.courseTotalTime))}}
								</view>
							</view>
						</view>
						<view class="statusBtnContent" @click="play(item)">
							<i class="iconfont icon-24gf-playCircle"
								:style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
							<text>{{courseInfo.status == 1 ? '不可播放' : '播放'}}</text>
						</view>
					</view>
				</view>
				<!-- 讲师介绍 -->
				<view class="lecturerContent" v-if="tabType===3">
					<view class="lecturerIntro">
						<view class="lecturerUrl">
							<image :src="lecturerInfo.lecturerUrl" mode="widthFix"></image>
						</view>
						<view>
							<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
							<template v-if="lecturerInfo?.lecturerRankNames">
								<p v-for="item in lecturerInfo.lecturerRankNames.split(',')" class="lecturerTitle">
									<text>{{item}}</text>
								</p>
							</template>
						</view>
					</view>
					<h4>
						<text>讲师介绍</text>
					</h4>
					<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
				</view>
				<!-- 购买按钮 -->
				<view class="buyBox" @click="saveOrder()" v-if="courseInfo.status == 1">
					<text>{{loginType=='visitor' ? '登录/注册' : '购买'}}</text>
				</view>

			</view>
		</view>
		<boot-page v-if="sharelogin" ref="sharelogin" @close="close"></boot-page>
		<uni-share-wx ref="sharewx"></uni-share-wx>
	</view>
</template>


<script>
	import api from "../../api/api";
	import BootPage from "@/components/bootpage/bootpage.vue";
	import UniShareWx from "@/uni_modules/uni-share-wx/index.vue";
	import dataHandling from "@/util/dataHandling";
	import {
		hshare
	} from '@/util/fiveshare'
	import {
		nanoid
	} from 'nanoid';
	export default {
		components: {
			UniShareWx,
			BootPage
		},
		data() {
			return {
				isWeixin: false,
				isRenderVideo: false,
				fileId: null,
				lecturerId: null,
				tabType: 3,
				lecturerInfo: {},
				courseInfo: {},
				relatedCoursesLists: [],
				orderId: '',
				userId: uni.getStorageSync('cffp_userId'),
				shareUserId: '',
				shareCode: '',
				shareReadId: '',
				dataSource: '1',
				requiredCount: 0,
				nonRequiredCount: 0,
				videoPlaybackInfo: {},
				playbackId: '',
				totalTime: 0,
				auditionTime: 0,
				viewTime: 0,
				timer: null,
				loginType: '',
				sliceshare: false,
				nonRequiredCount: 0,
				requiredCount: 0,
				realName: '',
				coursesharing: null,
				serialsNo: null,
				shareCode: null,
				sharelogin: false,
				startTime: '',
				newCourseInfo: {},
				isPauseFlag: true,
				CONFIG: {
					android: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.xiaoxiao.shihaoo',
					ios: 'https://apps.apple.com/cn/app/%E6%98%AF%E5%A5%BD/id1457958161',
					scheme: 'com.qdxxzy.user://'
				}
			};
		},
		methods: {
			close(val) {
				if (val) {
					this.startTime = Date.parse(new Date()) / 1000;
					uni.setStorageSync('h5_startTime', this.startTime)
					this.sharelogin = false
					this.userId = val
					uni.setStorageSync('cffp_userId', this.userId);
					this.courseDetail();
					setTimeout(() => {
						this.getuserRead(this.courseInfo.status)
					}, 500)
				} else {
					this.sharelogin = false
				}
			},
			/**
			 * 判断是否为微信浏览器
			 * 兼容ios
			 * */
			// isWeiXin() {
			//         return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !== 'undefined'
			// },
			// openApp(url, callback) {
			//        let {isAndroid, isIOS, isIOS9} = judgePhoneType();
			//        if(this.isWeiXin()){
			//            alert("请您在浏览器中打开,即可下载") ;
			//            return ;
			//        }
			//        if (isAndroid || isIOS) {
			//            let hasApp = true, t = 1000,
			//                t1 = Date.now(),
			//                ifr = document.createElement("iframe");
			//            setTimeout(function () {
			//                if (!hasApp) {
			//                    callback && callback()
			//                }
			//                document.body.removeChild(ifr);
			//            }, 2000);

			//            ifr.setAttribute('src', url);
			//            ifr.setAttribute('style', 'display:none');
			//            document.body.appendChild(ifr);

			//            setTimeout(function () { //启动app时间较长处理
			//                let t2 = Date.now();
			//                if (t2 - t1 < t + 100) {
			//                    hasApp = false;
			//                }
			//            }, t);
			//        }
			//        if (isIOS9) {
			//            location.href = url;
			//            setTimeout(function () {
			//                callback && callback()
			//            }, 250);
			//            setTimeout(function () {
			//                location.reload();
			//            }, 1000);
			//        }
			// },
			/**
			 * 超时跳转h5页面
			 * */
			//  goConfirmAddr() {
			//         let { isAndroid } = judgePhoneType();
			//         window.location.href =  !isAndroid  ? CONFIG.ios : CONFIG.android ;
			// },
			jumpapp() {
				let platform = uni.getSystemInfoSync().platform
				if (platform == 'ios') {
					window.location.href = "https://mcffp.anjibao.cn/app/";
					// window.setTimeout(function() { //如果没有安装app,便会执行setTimeout跳转下载页
					// 	var timeOutDateTime = new Date();
					// 	if (timeOutDateTime - loadDateTime < 500) {
					// 		window.location.href = "https://mcffp.anjibao.cn/app/";
					// 	} else {
					// 		window.location.href = "www.baidu.com"; //ios下载地址
					// 	}
					// }, 500);

				} else if (platform == 'android') {
					// window.location.href = "cffpapp://";
				}
			},
			goBack() {
				let back = getCurrentPages();
				if (back && back.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 监听空白关闭
			maskClick(val) {
				this.sliceshare = val.show
			},
			// 打开微信分享啊
			reinvite() {
				const shareCode = nanoid() + this.userId
				const jumptime = Date.parse(new Date()) / 1000
				let dataWXform = {
					href: "https://mdev.zuihuibi.cn/cffp/pages/courseDetail/courseDetail?fileId=" + this.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&",
					title: this.courseInfo.fileTitle,
					summary: `加入我们开启学习之旅`,
					imageUrl: this.courseInfo.displayImage,
					fileId: this.fileId,
					shareCode: shareCode
				}
				this.$refs.sharewx.open(dataWXform)
			},
			shareToggle() {
				this.sliceshare = true
				this.$refs.share.open()
			},
			sharechange(val) {
				console.log(val, 423)
				uni.navigateTo({
					url: val.item.link
				})
			},
			// 订单保存
			saveOrder() {
				if (this.loginType === 'visitor') {
					uni.navigateTo({
						url: '/components/login/login'
					})
				} else {
					if (this.coursesharing == '1') {
						this.h5jump()
					} else {
						this.jumppurchase()
					}
				}
			},
			h5jump() {
				let h5userId = uni.getStorageSync('cffp_userId');
				if (h5userId) {
					this.jumppurchase()
				} else {
					this.sharelogin = true
				}
			},
			jumppurchase() {
				const param = {
					productType: '1',
					productId: this.courseInfo.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					shareUserId: this.shareUserId,
					shareReadId: this.shareReadId,
					shareCode: this.shareCode,
					dataSource: this.coursesharing == 1 ? '2' : this.dataSource
				}
				api.saveOrder(param).then(res => {
					if (res['success']) {
						this.orderId = res['data']['id'];
						if (this.coursesharing == '1') {
							this.userId = uni.getStorageSync('cffp_userId')
						}
						uni.navigateTo({
							url: `/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}&userId=${this.userId}`
						})
					} else {
						uni.showToast({
							title: res['message'],
							duration: 2000
						});
						return;
					}
				})
			},
			// 切换tab
			switchTab(type) {
				this.tabType = type;
				if (type === 3) {
					this.lecturerQuery();
				} else if (type == 2) {
					this.relatedCoursesList()
				} else {
					this.courseDetail()
				}
			},
			// 讲师信息查询
			lecturerQuery() {
				api.lecturerQuery({
					id: this.lecturerId
				}).then(res => {
					if (res['success']) {
						this.lecturerInfo = res['data']['lecturerInfos'][0];
					} else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			// 课程详情页面
			courseDetail() {
				api.courseDetail({
					fileId: this.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					packFileId: this.courseInfo.packFileId
				}).then(res => {
					console.log(res, 1011111111)
					if (res['success']) {
						this.courseInfo = res['data']['data'];
						this.lecturerId = res['data']['data']['fileLecturerId'];
						this.lecturerQuery();
						this.relatedCoursesList();
						if (uni.getStorageSync('h5_coursesharing')) {
							this.coursesharing = uni.getStorageSync('h5_coursesharing')
							this.getshareData()
						}
						if (this.courseInfo.status == 2) {
							this.findVideoPlayback();
						} else {
							this.isRenderVideo = true;
						}
					}
				})
			},
			// 相关课程查询
			relatedCoursesList() {
				api.relatedCoursesList({
					fileId: this.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					orderId: this.courseInfo.orderId,
					packFileId: this.courseInfo.packFileId
				}).then(res => {
					if (res['success']) {
						this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
						this.nonRequiredCount = res['data']['data']['nonRequiredCount'];
						this.requiredCount = res['data']['data']['requiredCount'];
					}
				})
			},
			// 秒转时分秒格式
			secondsTransferPipe(value) {
				return dataHandling.secondsTransferPipe(value)
			},
			async play(item) {
				console.log('play')
				// 相关列表点击播放
				if (this.courseInfo.status == 1) {
					// 不可播放
					uni.showToast({
						title: '购买才可观看哦~',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.videoContext.pause();
					if (this.fileId != item.fileId) {
						// 当点击的课程和当前播放的课程不一致时，执行此方法
						uni.showLoading({
							title: '加载中'
						});
						this.newCourseInfo = {
							fileId: item.fileId,
							packFileId: item.packFileId,
						}
						if (this.isPauseFlag) {
							this.pause()
						}
					}
				}
			},
			saveVideoPlayback() {
				console.log('saveVideoPlayback')
				// 视频播放轨迹保存
				const param = {
					id: this.playbackId ? this.playbackId : null,
					systemType: 1,
					userId: this.userId,
					fileId: this.fileId,
					packFileId: this.courseInfo.packFileId,
					totalTime: Math.floor(this.totalTime),
					viewTime: Math.floor(this.viewTime),
					playbackStatus: this.viewTime >= this.totalTime ? '2' : '1'
				}
				return new Promise((resolve, reject) => {
					if (this.viewTime == 0) {
						resolve('success');
						return;
					}
					api.saveVideoPlayback(param).then(res => {
						if (res['success']) {
							this.playbackId = res['data']['id'];
							console.log('save已经执行完毕');
							resolve('success');
						} else {
							reject('fail')
						}
					}).catch((err) => {
						reject('fail')
					})
				})

			},
			findVideoPlayback() {
				console.log('findVideoPlayback')
				// 查询视频播放最新记录
				const param = {
					systemType: 1,
					userId: this.userId,
					fileId: this.fileId,
					packFileId: this.courseInfo.packFileId,
				}
				api.findVideoPlayback(param).then(res => {
					if (res['success']) {
						this.videoPlaybackInfo = res['data'];
						console.log('查询视频播放轨迹结果=====', this.videoPlaybackInfo)
						this.viewTime = this.videoPlaybackInfo.viewTime
						this.viewTime = this.videoPlaybackInfo.viewTime ? this.videoPlaybackInfo.viewTime : 0;
						this.totalTime = this.videoPlaybackInfo.totalTime ? this.videoPlaybackInfo.totalTime : 0;
						this.packFileId = this.videoPlaybackInfo.id ? this.videoPlaybackInfo.id : null;
						this.isRenderVideo = true;
						// 跳转到指定位置
						this.videoContext.seek(this.viewTime);
						uni.hideLoading();
					} else {
						this.isRenderVideo = true;
						this.totalTime = this.viewTime = 0;
						// 跳转到指定位置
						this.videoContext.seek(thie.viewTime);
						uni.hideLoading();
					}
				})
			},
			// 点击播放
			playVideo(e) {
				console.log('playVideo', this.totalTime, this.viewTime)
				this.isPauseFlag = false;
				if (this.viewTime >= this.totalTime) {
					this.viewTime = 0;
					this.videoContext.seek(this.viewTime);
				}
				// 开始/继续播放
				if (this.courseInfo.status === 2) {
					if (this.timer) {
						clearInterval(this.timer)
					}
					this.timer = setInterval(() => {
						this.saveVideoPlayback()
					}, 20 * 1000)
				}
			},
			// // 暂停播放
			async pause() {
				if (this.courseInfo.status != 1) {
					console.log('pause')
					this.isPauseFlag = true;
					if (this.timer) {
						clearInterval(this.timer)
					}
					const result = await this.saveVideoPlayback()
					if (result == 'success' && this.newCourseInfo.fileId) {
						console.log('新的课程要进行赋值查询了')
						this.fileId = this.newCourseInfo.fileId;
						this.courseInfo.packFileId = this.newCourseInfo.packFileId;
						this.playbackId = null;
						this.courseDetail();
					}
				}
			},
			timeupdate(e) {
				this.totalTime = e.detail.duration;
				// 播放进度变化
				this.viewTime = e.detail.currentTime > this.totalTime ? this.totalTime : e.detail.currentTime;
				if (this.courseInfo.status === 1) {
					// 如果是试听，那么当观看时间大于等于试听时间的时候，强制暂停，并出弹窗
					if (this.viewTime >= this.courseInfo.auditionTime) {
						this.videoContext.pause();
						// // 不可播放
						uni.showModal({
							content: '购买之后才可继续播放哦~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						this.videoContext.seek(0);
					}
				}
			},
			// 用户阅读
			getuserRead(type) {
				let UserReadRequestVO = {
					userId: uni.getStorageSync('cffp_userId'),
					serialsNo: this.serialsNo || 1,
					shareCode: this.shareCode || 1,
					shareUrl: window.location.href
				}
				api.userRead(UserReadRequestVO).then(res => {
					if (res['success']) {
						this.shareReadId = res.data.id
						if (type == 1) {
							this.jumppurchase()
						}
					}
				})
			},
			// H5 自定义分享
			getshareData() {
				let data = {
					title: this.courseInfo.fileTitle,
					desc: '加入我们开启学习之旅',
					link: window.location.href, //分享链接
					imgUrl: this.courseInfo.displayImage, //图片
				}
				var url = window.location.href.split('#')[0]
				hshare(data, url)
			},
			// 唤醒app 测试
			JsApiTicketApi() {
				let WxConfigRequestVO = {
					url: window.location.href.split('#')[0],
					systemType: '1'
				}
				api.Wxshare(WxConfigRequestVO).then(res => {
					console.log(res, '第三步');
					jWeixin.config({
						debug: false, //调试的时候需要 在app上回弹出errmg:config ok 的时候就证明没问题了 这时候就可以改为false
						appId: res.data.appId, //appid
						timestamp: res.data.timestamp, //时间戳
						nonceStr: res.data.nonceStr, //随机串 
						signature: res.data.signature, //签名
						jsApiList: res.data.jsApiList //必填 是下面需要用到的方法集合
					})
					if (callback) {
						callback()
					}
				})
			},
		},


		onLoad(option) {
			this.fileId = option.fileId;
			this.courseInfo.packFileId = option.packFileId
			if (option.coursesharing) {
				this.userId = ''
				this.coursesharing = option.coursesharing
				// this.isWeixin = true; // 是微信端
				// this.JsApiTicketApi();
				this.serialsNo = option.serialsNo
				this.shareCode = option.shareCode
				this.shareUserId = option.shareUserId
				this.getuserRead()
				let endTime = Date.parse(new Date()) / 1000;
				let startTime = uni.getStorageSync('h5_startTime')
				if (endTime - startTime > 3600 * 24) {
					uni.setStorageSync('cffp_userId', '')
				}
				uni.setStorageSync('h5_coursesharing', this.coursesharing);
				this.getshareData()
			}
			let dataForm = uni.getStorageSync('userinfodataForm')
			this.realName = dataForm.realName
			// this.switchTab(1);
		},
		onShow() {
			this.switchTab(1);
			this.loginType = uni.getStorageSync('loginType')
		},
		// mounted() {
		// 	let _this = this;
		// 	var btn = document.getElementById('launch-btn');
		// 	alert(btn)
		// 	btn.addEventListener('launch', function(e) {
		// 		alert('success')
		// 		console.log('success');
		// 	});
		// 	btn.addEventListener('error', function(e) {
		// 		console.log('fail', e.detail);
		// 		alert('fail')
		// 		uni.showModal({
		// 			title: '系统消息',
		// 			content: '您的手机未找到当前应用，是否去下载？',
		// 			success: function(res) {
		// 				if (res.confirm) {
		// 					window.location.href = _this.versionsData.versionResources
		// 					console.log('用户点击确定');
		// 				} else if (res.cancel) {
		// 					console.log('用户点击取消');
		// 				}
		// 			}
		// 		});
		// 	});
		// },
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onUnload() {
			if (this.courseInfo.status != 1 && this.viewTime != 0) {
				this.videoContext.pause();
				this.saveVideoPlayback();
				if (this.timer) {
					clearInterval(this.timer)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.courseBannerBox {
		background-color: #ebebeb;
		display: flex;
		justify-content: center;
		z-index: 1;
	}

	.courseTitleContent {
		height: 150rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		padding: 20rpx 0rpx 20rpx 30rpx;
		box-sizing: border-box;

		.courseTitle {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;

			h4 {
				font-size: 40rpx;
			}
		}

		.dataBox {
			strong {
				font-size: 30rpx;
				color: #F15A1F;
				margin-right: 30rpx;
			}

			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.awakenApp {
		display: flex;
		align-items: center;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding-left: 10rpx;
		color: #fff;
		height: 60rpx;
		background: #20269B;
	}

	.shareheader {
		// padding-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;

		.icon-youjiantou {
			display: inline-block;
			transform: rotate(180deg);
			font-size: 30rpx;
			z-index: 1;
		}

		.share-entrance {
			width: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 30rpx;

			.image {
				width: 50rpx;
				height: 50rpx;
				// margin-top: 10rpx;
				// margin-right: 25rpx;
			}
		}

	}

	.image {
		width: 30rpx;
		height: 30rpx;
	}

	.courseProBox {
		.tab {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 30rpx 0;
			background-color: #fff;
			color: #666;
			font-size: 32rpx;

			text.actived {
				border-bottom: 2px solid #20269B;
				color: #333;
			}
		}

		.tabContent {
			padding-bottom: 200rpx;
			background-color: #fff;

			.statusBtnContent {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999;
				font-size: 20rpx;

				.iconfont {
					font-size: 60rpx;
					color: #5359CD;
				}
			}

			.lecturerContent {
				.lecturerIntro {
					display: flex;
					padding: 40rpx 50rpx;
					border-bottom: 2rpx solid #fbfbfb;

					.lecturerUrl {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						background-color: #ccc;
						overflow: hidden;
						margin-right: 40rpx;
					}

					.lecturerName {
						display: inline-block;
						background: #5359CD;
						border-radius: 10rpx;
						color: #fff;
						font-size: 28rpx;
						padding: 4rpx 20rpx;
					}

					.lecturerTitle {
						font-size: 28rpx;
						color: #5359CD;
						margin-top: 16rpx;
					}
				}

				h4 {
					padding-left: 30rpx;
					padding-top: 10rpx;
					padding-bottom: 20rpx;
					background-color: #fff;

					text {
						border-bottom: 1px solid #333;
						font-size: 30rpx;
					}
				}

				.lecturerText {
					padding: 0 28rpx;
					background-color: #fff;
					white-space: pre-wrap;
					width: 100%;
					box-sizing: border-box;
				}

			}

			.courseIntroContent,
			.relationCourseListsContent {
				padding: 0 28rpx;
				background-color: #fff;
				white-space: pre-wrap;
				width: 100%;
				box-sizing: border-box;
			}

			.relationCourseListsContent {
				.courseType {
					background-color: #5359CD;
					color: #fff;
					border-radius: 2rpx;
					padding: 2rpx 10rpx;
					font-size: 16rpx;
					margin-left: 10rpx;
				}

				.totalCourseCount {
					color: #20269B;
					font-size: 24rpx;
					padding: 8rpx 0;
					border: 1px solid #fbfbfb;
					border-left: none;
					border-right: none;
				}

				.courseItemContent {
					padding: 16rpx 0;
					border-bottom: 1px solid #fbfbfb;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.courseInfoContent {
						width: 75%;

						h4 {
							color: #666;
						}

						.timeContent {
							color: #999;
							padding-left: 28rpx;

						}
					}
				}

			}

			.buyBox {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				border-radius: 80rpx;
				background-color: #20269B;
				color: #fff;
				font-size: 36rpx;
				padding: 20rpx 90rpx;
				text-align: center;
				max-width: 60%;
				margin: 0 auto;
			}
		}
	}
</style>
