<template>
	<view style="background-color: #f4f7ff;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="在学习"></z-nav-bar>		
		<view class="containerBg1">
			<!-- <view class="vipSee"> -->
			<view :class="[userMsg && userMsg.vip != 0 ? 'vipBox' : '']" style="padding:0 10px;">		
			
			<view class="courseTitle flexbox" v-if="course.id">
				<view class="vipSee" v-if="userMsg && userMsg.vip != 0">
					<text>VIP畅学权益生效中</text>
				</view>
				<view class="curseImg flexbox imgcontainer" style="align-items: center;">
					<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
					<image v-else :src="course.image" mode="widthFix"></image>
				</view>
				<view class="" style="width: calc(100% - 180rpx);">
					<view class="">
						<text class="title">{{course.title}}</text>
						<br/>
						<text style="color: #55aaff; padding-left: 10rpx; font-size: 26rpx;" @click="onPageJump('/pages/course/courseDetail',course.id)">课程介绍 >></text>
						<!-- <uni-tag type="primary" text=""></uni-tag> -->
					</view>				
				</view>
			</view>	
			</view>
			<view :class="['coursePart','flexbox',fixed ? 'fixed' : '']" v-if="librayList.length > 1">
				<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
					:key="index" @click="clicklib(item,index)">
					<u-icon v-if="item.isBuy == 0 && userMsg.vip == 0" name="lock" color="#258feb" size="28"></u-icon>
					<u-icon v-if="item.isBuy == 0 && userMsg.vip == 0" name="lock" color="#fff" size="28"></u-icon>
					<view class="">{{item.title}}</view>
				</view>
			</view>
			<view :class="['courseList',fold ? 'fold' : '', librayList[curIndex].isBuy == 0 && userMsg.vip == 0 ? 'lock' : '']" v-if="courseList.length > 0">
			<!-- 目录是否已经购买 -->
			<!-- 0:普通 1超级 2医学 3国学 -->
			<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
				<view class="" >
					<view class="flexbox" v-if="librayList[curIndex].startTime == null">
						<text >当前目录还未开始学习</text>
						<!-- <uni-tag type="warning" text="去学习"></uni-tag> -->
					</view>
					<view class="flexbox" v-else>
						<text >课程观看有效期截止到：{{librayList[curIndex].endTime}} </text>
						<!-- <uni-tag type="primary" text="继续学习" @click="onPageJump('')"></uni-tag> -->
					</view>					
				</view>
			</view>			
				<view class="item" v-for="(item, index) in courseList" :key="index" @click="gotoDetail(item, index)">
					<text>{{item.title}}</text>
					<uni-tag  v-if="item.isLearned == 0" style="margin-left: 10rpx;" :inverted="true" text="未学"
						size="mini" type="primary" />
					<uni-tag  v-if="item.isLearned == 1" style="margin-left: 10rpx;" :inverted="true" text="已学"
							size="mini" type="success" />
				</view>
				<!-- <view class="showAll zhezhe" v-show="fold">
					<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double"
							color="#258feb" size="28"></u-icon></view>
					<text>查看全部</text>
				</view>
				<view class="showFew zhezhe" v-show="!fold">
					<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double"
							color="#258feb" size="28"></u-icon></view>
					<text>收 起</text>
				</view> -->								
				<view class="buyBox flexbox" style="flex-wrap: wrap;" v-if="librayList[curIndex].isBuy == 0 && userMsg.vip == 0">
					<!-- 普通未购买 -->
					<view class="item">
						<view class="" style="">
							<!-- <text> -->
								您未购买此目录课程或已到期，购买后或开通 <i style="font-weight: bold; font-style:normal">超级VIP</i> 即可学习本目录课程
								<!-- </text> -->
								</view>
								<view class="tag-view">
								
						
						<uni-tag @click="goBuy()" text="购买课程" type="warning" style="larg" /> 
							<uni-tag @click="onPageJump('/pages/mine/vip/index')" style="margin-left: 20rpx;" text="开通VIP" type="success" />
						</view> 
					</view>					
				</view>
			</view>
			<u-divider v-else text="暂无数据"></u-divider>			
			<uni-section class="mb-10 completionBg" title="学习进度" type="line" v-if="librayList.length > 0 && librayList[curIndex].completion > 0">
				<view class="progress-box">
				<progress :percent="librayList[curIndex].completion" show-info stroke-width="3" />
				</view>				
			</uni-section>
			<view>
				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
					:iconStyle="iconStyle"></u-back-top>
			</view>
			<!-- </view> -->
			<!-- 评论弹出 -->			
			<public-module></public-module>
			<z-navigation></z-navigation>
			<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
			
			<!-- <music-play :playData="playData"></music-play> -->
		</view>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import buyPup from '@/components/buyPup.vue'
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
				catalogueId: null,
				// fixed: false,
				bgiStyle: {
					background: '#fff'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#258feb',
				},
				tjProList: [],
				userMsg: {}, // 用户信息
				scrollTop: 0,
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					transform: 'scale(1.2)',
					// backgroundColor: '#258feb'

				},
				pricespop: false,
				subList: [],
				scrollable: false,
				pageTitle: null,
				courseList: [],
				course: {},
				librayList: [], // 目录列表
				curId: null,
				curIndex: 0,
				proPriceList: [],
				fold: false,
				curProId: null,
				sayVisible: false,

				// 评论
				readOnly: false,
				formats: {},
				htmlContent: '', // 内容
				showEmoji: false,
				showImgType: false,
				showEdit: false,
				showPicsList: false,
				windowWidth: 0,
				uploadPicLIst: [], // 上传的图片列表
				courseId: null,
				sayList: [],
				pPage: 1,
				totalP: 0,
				status: 88,
				loadFlag: false,
				fatherSay:{},
				supportFlag:false,
				fixed: false,
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			// this.pageTitle = e.title
			console.log(e, '传入分类id')
			this.getUserInfo()
			this.courseId = e.id
			// this.getCateList(this.courseId)
				
			// this.getSayList()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 100) {
				// console.log('高度符合');
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			plus.screen.unlockOrientation();
			plus.screen.lockOrientation("portrait-primary");
			this.getData(this.courseId)		
		},
		onReachBottom() {
			console.log('触底');
			// if (this.status != 2) {
			// 	this.pPage++
			// 	this.getSayList()
			// }
		},
		components: {
			// musicPlay
			emotion,
			buyPup

		},
		//方法
		methods: {
			
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},
			gotoDetail(v, video, index) {
			  console.log("v at line 668:", v);			  
			  uni.navigateTo({
			    // url: '../bookShop/commodityDetail?id=' + item.id
			    url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoId=${video.id}`,
			  });			  
			},
			// 加载更多子评论
			showMoreChildren(i,val){
				console.log('更多评论');
				if(val.children.length <= val.Bchildren.length){
					uni.showToast({
						title:'没有更多了哦',
						icon:'none'
					})
					return
				}
				let _list = []
				let _cc = [...val.children]				
				_list = _cc.slice(val.Bchildren.length, val.Bchildren.length + 6)
				this.sayList[i].Bchildren = this.sayList[i].Bchildren.concat(_list)
			},
			// 点赞
			support(index1,index,val){
				console.log(index1,index,val);				
				if(this.supportFlag){
					uni.showToast({
						title:'操作太快了，歇一下吧~',
						icon:'non'
					})
					return 
				}
				this.supportFlag = true
				if(!val.support){
				$http.request({
					url: "common/courseGuestbook/addCourseGuestbookSupport",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						  "userId": this.userInfo.id,
						   "guestbookId":val.id ,
						},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				})				
				.then(res => {
					// console.log('sayList =>', res);	
					uni.showToast({
						title:"点赞成功",
						icon:'success'
					})
					if(index1 == 'one'){ // 一级
						this.sayList[index].support = true
						this.sayList[index].supportCount++
					}
					if(index1 != undefined && index1 != null && index1 != 'one'){
						this.sayList[index1].Bchildren[index].support = true
						this.sayList[index1].Bchildren[index].supportCount++
					}
					this.supportFlag = false
				}).catch(e => {
					uni.showToast({
						title:"点赞失败",
						icon:'error'
					})
					console.log(e,'e')
					this.supportFlag = false
				})
				}else{
					$http.request({
						url: "common/courseGuestbook/cancelCourseGuestbookSupport",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							  "userId": this.userInfo.id,
							   "guestbookId":val.id ,
							},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})				
					.then(res => {
						// console.log('sayList =>', res);	
						uni.showToast({
							title:"取消成功",
							icon:'success'
						})
						if(index1 == 'one'){ // 一级
							this.sayList[index].support = false
							this.sayList[index].supportCount--
						}
						if(index1 != undefined && index1 != null && index1 != 'one'){
							this.sayList[index1].Bchildren[index].support = false
							this.sayList[index1].Bchildren[index].supportCount--
						}
						this.supportFlag = false
					}).catch(e => {
						uni.showToast({
							title:"取消失败",
							icon:'error'
						})
						 // console.log('888888888888888');
						this.supportFlag = false
					})
				}
				
			},
			// 获取内容
			getHtml(){
					return new Promise((resolve,reject) => {
						this.editorCtx.getContents({
							success:(res)=>{
								resolve(res)
							},
							fail:(error)=>{
								reject(err)
							}
						})
					})
					
				},			
			// 提交
			 async submitSay() {
				// await console.log(this.getHtml())
				 let data = await this.getHtml()
				 this.htmlContent = data.html
				 console.log(this.htmlContent,'this.htmlContent--++++');
				
				if (this.htmlContent == '' && this.uploadPicLIst.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '您未输入内容哦'
					})
					return
				}
				let images = ''
				if (this.uploadPicLIst.length > 0) {
					let list = this.uploadPicLIst.map(item => item.url)

					images = list.join()
				}
				console.log(images, 'images')
				let forUserId = null
				let pid = 0
				forUserId = this.userInfo.id
				if(this.fatherSay.id != undefined){
					forUserId = this.fatherSay.user.id
					pid = this.fatherSay.id
				}
				console.log(this.fatherSay.cIndex,'this.fatherSay.cIndex');
				// return false
				$http.request({
					url: "common/courseGuestbook/addCourseGuestbook",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"type": 0, //类型0课程1章节
						"courseId": this.courseId,
						"chapterId": "",
						"pid": pid,
						"userId": this.userInfo.id,
						"forUserId": forUserId,
						"content": this.htmlContent, //内容
						"images": images //图片的合集，逗号分隔
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0) {
						this.htmlContent = ''
						this.uploadPicLIst = []
						this.editorCtx.clear()
						uni.showToast({
							icon: 'success',
							title: '提交成功'
						})
					}
					let _obj = {...res.courseGuestbook}
					_obj.children = []
					_obj.Bchildren = []
					if (_obj.images != '') {
											_obj.imgList = _obj.images.split(',')									
										}else{
											_obj.imgList = []
										}
										
										console.log(this.sayList[this.fatherSay.cIndex],'this.fatherSay.cIndex------------')
										if(this.fatherSay.cIndex != undefined && this.fatherSay.cIndex != null ){ // 二级
											this.sayList[this.fatherSay.cIndex].Bchildren.unshift(_obj)
											
										}else{ // 一级
											this.sayList.unshift(_obj)
										}					
					this.sayVisible = false
					this.fatherSay = {}
					// this.getSayList()
					// 获得的新实例，插入到数组的前面
					
				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '提交失败'
					})
					console.log('提交报错',e);
				})
			},
			// 查询课程的评论
			getSayList() {
				if (this.loadFlag) {
					console.log('有未完成的进程');
					return
				}
				this.loadFlag = true
				this.status = 1
				$http.request({
					url: "common/courseGuestbook/getCourseGuestbookList",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"limit": 15,
						"page": this.pPage,
						"courseId": this.courseId,
						"chapterId": "",
						"userId": this.userInfo.id //登陆人id，用与判断评论是否被登陆人点赞
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					console.log('sayList =>', res);
					if (res.code == 0) {
						if (res.page.records.length > 0) {
							let myList = res.page.records
							this.totalP = res.page.total
							myList.map((item) => {
								if (item.images != '') {
									item.imgList = item.images.split(',')									
								}
								if(item.children.length > 0){
									item.Bchildren = item.children.slice(0,5)
								}else{
									item.Bchildren = []
								}
							})
							this.sayList = this.sayList.concat(myList)
							console.log('this.sayList处理后 =》 ', this.sayList)
							if (res.page.pages > this.pPage) {
								this.status = 0
							} else {
								this.status = 2
							}
						} else {
							this.status = 3 // 暂无数据
						}
					}
					this.loadFlag = false
				}).catch(e => {
					console.log('获取留言失败');
					this.loadFlag = false
				})
			},
			// previewImage(url) {
			// 	console.log(url)
			// 	uni.previewImage({
			// 		urls: [url],
			// 		longPressActions: {
			// 			itemList: ['很抱歉，暂不支持保存图片到本地'],
			// 			success: function(res) {
			// 				// console.log(res,'+++++')
			// 			}
			// 		}
			// 	});
			// },
			deletePic(val, i) {
				console.log('删除图片');
				this.uploadPicLIst.splice(i, 1)
			},
			addPic(e) {
				console.log('添加图片');
				let that = this
				for (var i = 0; i < e.file.length; i++) {
					//console.log(i,e.file[i].url)
					uni.uploadFile({
						url: this.$baseUrl + 'oss/fileoss',
						filePath: e.file[i].url,
						//files:e.file,
						name: 'file',
						formData: {},
						success: (res) => {
							that.uploadPicLIst.push({
								url: JSON.parse(res.data).url
							})
							// this.showPicsList = true
							console.log(that.uploadPicLIst, 'that.uploadPicLIst')
						},
						fail: (error) => {
							console.log('上传失败', error)
						}
					});
				}
			},
			// 获得输入的表情数组
			handleEmj(i) {
				console.log(i, 'i---------');
				this.editorCtx.insertImage({
					src: i.emotion,
					alt: '图像',
					success: function() {
						console.log('insert image success')
					}
				})
				if (i.emotioni == '[em_98]') {
					//匹配最后一个表情符号并删除11。
					// this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
					// if (this.emoji.length > 0) {
					// 	this.emoji = this.emoji.slice(0, -1)
					// }
				} else {

					// this.emoji.push({
					// 	'tag': i.emotion,
					// 	'name': i.emotioni
					// })					
					// this.formData.content += i.emotioni;
				}
			},
			chooseImg() {
				this.showImgType = true
				this.showEdit = true
				uni.hideKeyboard() // 隐藏键盘
			},
			editEditor() {
				this.showImgType = false
				this.showEdit = false
				this.showEmoji = false
				// 显示键盘
			},
			closeEmoji() {
				this.showEmoji = false
				this.showEdit = false
			},
			addEmoji() {
				this.showEmoji = true
				this.showImgType = false
				// this.showEdit = true
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				// // #ifdef MP-BAIDU
				// this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// // #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					// this.editorCtx.clear()
					this.editorCtx.setContents(res.context)
				}).exec()
				// #endif
			},
			// end
			addSay(fIndex,item) {				
				this.sayVisible = true				 
				if(item){
					this.fatherSay = item
					this.fatherSay.cIndex = fIndex
				}
				console.log('fatherSay =>',this.fatherSay);
			},
			sayclose() {
				this.sayVisible = false
				this.fatherSay = {}
			},			
			getData(id) {
				$http.request({
						url: "sociology/course/getCourseDetail",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then( res => {
						if (res.code == 0) {
							this.course = res.data.course
							this.pageTitle = this.course.title
							this.librayList = res.data.catalogues
							// this.librayList.map(async item => {
							// 	item.courseList = await this.getChapters(item.id)
							// })							
							// console.log(this.librayList,'this.librayList')
							if (this.librayList.length > 0) {
								this.catalogueId = this.librayList[0].id
								this.curId = this.librayList[0].id
								this.curIndex = 0
								if(res.data.shopProductList && res.data.shopProductList.length > 0){
									this.tjProList = res.data.shopProductList
								}else{
									this.tjProList
								}
								this.getChapterList(this.catalogueId)
							}
						}

					}).catch(e => {
						console.log(e, '获取目录数据报错')
					});

			},
			
			goBuy() {
				$http.request({
						url: "sociology/product/getProductListForCourse",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": this.librayList[this.curIndex].id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.productList.length > 0) {
								this.proPriceList = res.productList
								// this.curProId = this.proPriceList[0].productId
								this.pricespop = true
							} else {
								this.proPriceList = []
								uni.showToast({
									title: '课程未绑定商品',
									icon: 'none'
								})
							}
						}

					}).catch(e => {
						console.log(e, '获取商品列表报错')
						uni.showToast({
							title: '获取商品失败',
							icon: 'none'
						})
					});

				
			},
			oprate(data) {
				console.log(data, '得到的内容')
				if (data.name == 'buy') {
					this.buy(data.item)
				} else if (data.name == 'gouwuche') {
					this.addCart(data.item)
				}
			},	
			// 获取购物车数据
			addCart(val) {
				console.log(val)
				if (val.productStock == 0) {
					uni.showToast({
						title: '商品库存不足',
						icon: "none"
					});
				} else {
					console.log(this.userInfo, '222')
					this.$http
						.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
						.then(res => {
							// console.log(
							this.cartList = res.cartList
							this.isAddLink(val)
						})
				}
			},
			// 加入到购物车
			isAddLink(item) {
				// 统计商品信息
				let data = {
					"userId": this.userInfo.id,
					"productId": item.productId,
					"productAmount": 1,
					"price": item.activityPrice && item.activityPrice != 0 ? item.activityPrice : item.price
				}
				// 判断列表是否为空
				if (this.cartList.length > 0) {
					let flag = ''
					let shagnpin = {}
					// 循环购物车列表
					flag = this.cartList.some((item, index) => {
						if (item.productId == data.productId) {
							shagnpin = item
							shagnpin.productAmount += 1
							return true
						}
					})
					if (flag) {
						// 已在购物车中添加
						$http.request({
							url: "book/ordercart/update",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: shagnpin,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					} else {
						// 加入购物车
						$http.request({
							url: "book/ordercart/save",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data,
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						}).then(res => {
							if (res.code == 0) {
								this.upoShow = false
								uni.showToast({
									title: '加入购物车成功',
									duration: 1000,
								});
							}
						})
					}
			
				} else {
					// 购物车列表为空时直接加入购物车
					$http.request({
						url: "book/ordercart/save",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					}).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '加入购物车成功',
								duration: 1000,
							});
						}
					})
				}
			},
			closePup() {
				this.pricespop = false
				this.proPriceList = []
			},
			buy(val) {
				var mynavData = JSON.stringify({
					goods: [{
						productImages: val.productImages,
						productId: val.productId,
						productName: val.productName,
						price: val.activityPrice && val.activityPrice != 0 ? val.activityPrice : val.price,
						goodsType: val.goodsType,
					}, ],
					navTitle: val.productName,
					title: val.productName,
					typeId: 0,
				}); // 这里转换成 字符串
			
				uni.navigateTo({
					url: `/pages/goods/order/index?data=${mynavData}`,
				});
			},
			choosePrice(item) {
				console.log(item, 'choosePrice')
				this.curProId = item.productId				
			},
			chooseChapter(item, index) {	
					uni.navigateTo({
						url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
=${this.curId}&chapterId=${item.id}`
					})
			},			
			clicklib(item, index) {				
				if (item.id == this.curId) {
					return
				}
				this.curIndex = index
				this.curId = item.id
				this.getChapterList(item.id)
			},
			toZhedie() {
				this.fold = true
			},
			tozhankai() {
				this.fold = false
			},
			async getChapters(id) {
				let list = []
				await $http.request({
						url: "sociology/course/getCourseCatalogueChapterList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.chapterList.length > 0) {
								list = res.chapterList
								// console.log('status', res)
							} else {
								list = []
							}
						}
			
					}).catch(e => {
						console.log(e, '获取章节列表数据报错')
					});
					return list
			},
			getChapterList(id) {
				$http.request({
						url: "sociology/course/getCourseCatalogueChapterList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"id": id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0) {
							if (res.chapterList.length > 0) {
								this.courseList = res.chapterList
								console.log('status++++++++++++++', this.courseList)
							} else {
								this.courseList = []
							}
						}

					}).catch(e => {
						console.log(e, '获取章节列表数据报错')
					});
			},
			// 跳转
			onPageJump(url,id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},
			getBackGround(src){
				return `background: url(${src});background-size: contain;`
			},
			formatRichText(html) { //控制图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:40rpx;height:40rpx;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	
	.endBox{ 
		// @include theme("vipbtnbg");
		background-color: #d3f9e8;
		// color: #fff;
	font-size: 26rpx; margin: 20rpx 0;
	padding: 10rpx 20rpx;
	.flexbox{justify-content: space-between;}
	}
	::v-deep .progress-box{
		.uni-progress-bar{height: 10rpx !important; background-color: #fff !important;}
	}
	::v-deep .contentBox {
		
		.ql-editor {
			
			font-size: 26rpx;
			font-style: normal;
			min-height: 50rpx !important;
			padding: 20rpx;
		}

		img {
			width: 20px;
		}

		.u-upload__button {
			margin: 0 auto;
		}
	}
	.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
	.loadMore{text-align: center; margin-bottom: 20rpx;
		text{color: $themeColor; font-size: 26rpx;}
	}
	.boxB{margin-left: 60rpx; margin-top: 20rpx;  background-color: #f7f8f9;
		padding-top: 20rpx;  padding-left:10rpx;
		.imgbox{
			width: 40rpx !important;
			height: 40rpx !important;
		}
		.contentBox{width: calc(100% - 60rpx);}
		// .img{	width: 60rpx;
		// 	height: 60rpx;		
		// 	image{width:60rpx; height: 60rpx; border-radius: 100%;}
		// }
	}
	.chooseImgType {
		margin-top: 20rpx;

		.item {
			text-align: center;
			margin-right: 20rpx;
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			width: 60px;
			border: 1px solid #eee;
			height: 60px;
			text-align: center;
			border-radius: 20rpx;
			background-color: #f4f5f7;

			// background-color: red;
			text {
				font-size: 24rpx;
				display: inline-block;
				width: 100%;
				margin-top: -10rpx;
			}

			.img {
				margin: 0 auto;
			}

			.ss {
				line-height: 20rpx;
				color: #666;
			}
		}

	}

	.sbmitBox {
		button {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			@include theme("btn_bg");
			color: #fff;
		}
	}

	.upimgList {
		margin-top: 15px;

		.item {
			border: 1px solid #eee;
			padding: 10rpx;
			margin-right: 20rpx;
			width: 100rpx;
			height: 100rpx;
			position: relative; overflow: hidden;

			image {
				width: 100%;
				height: 100rpx;
			}

			span {
				display: inline-block;
				width: 20px;
				height: 20px;
				position: absolute;
				right: -10px;
				top: -10px;
				z-index: 1;
				border: 1px solid #eee;
				border-radius: 20rpx;
				background-color: #fff;
				line-height: 20px;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.emojiBtn {

		.img {
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 50rpx;
			}
		}
	}

	.editorBox {
		width: calc(100vw - 100rpx);
	}

	.ql-container {
		min-height: 50rpx !important;
		height: auto !important;
		border: 1px solid #eee;
		border-radius: 50rpx;
	}

	.contentBox {
		padding: 0 20rpx;

		.icon {
			width: 80rpx;
			justify-content: center;
			margin-left: 10rpx;
			height: 80rpx;
			align-items: center;
			border: 1px solid #eee;
			border-radius: 50rpx;
		}

		.addEmoji {
			margin-right: 20rpx;
		}

		.imagesList { margin-top: 20rpx;
			.item {
				margin-right: 20rpx;
			}
		}
	}

	// 

	.liuyanBox {
		padding: 0 20rpx;
		margin-top: 20rpx;
		.contentBoxfirstLeve{
			width: calc(100% - 70rpx);
		}
	}
.fixed {
		position: fixed; top: 70rpx;
		z-index: 1; width: 100%; background-color: #fff;
	}
	.vipBox{ 
		
		.courseTitle{position: relative;overflow: hidden;
		border: 2px solid #b39aff;	
			// background-image: linear-gradient(90deg, #ccc3fa 0%, #9fc3fb 100%);
		}
	}
.vipSee{ 
	position: absolute; right:0; bottom:0; 
	font-size: 24rpx;
	background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
	// @include theme("btn_bg"); 
	color: #fff; padding: 10rpx; border-radius: 50rpx 0 0 50rpx;
	
	}
	
	
	.leve {
		margin-bottom: 20rpx;

		.imgbox {
			border: 1px solid #eee;
			margin-right: 10rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%; overflow: hidden;
		}

		.img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;

			image {
				width: 100%;
				height: 80rpx;
			}
		}

		.contentBox {
			font-size: 24rpx;

			.name {
				color: #999;
				@include toe();
			}

			.content {
				color: #333;
				font-size: 26rpx;
				margin-top: 10rpx;
			}

			.others {
				margin-top: 10rpx;
				color: #999;
				align-items: center;

				.dianzan {
					align-items: center;
				}

				.pinglun {
					align-items: center;
					margin-left: 10rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.progress-box{padding: 20rpx; padding-top: 10rpx;}
	.showFew {
		.icon_item1 {
			-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
		}
	}

	.showAll {
		.icon_item {
			-moz-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
		}
	}

	.fold {
		// 折叠状态
		height: 800rpx;
		overflow: hidden;
	}

	.linkPro {
		.more {
			font-size: 24rpx;
			color: #666;
		}
	}

	.zhezhe {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		z-index: 1;
		position: absolute;
		bottom: 0;
		left: 0;
		background-position: left bottom;
		background-image: url(@/static/zhedieBg.png);
		background-repeat: repeat-x;

		.icon {
			justify-content: center;
		}

		text {
			color: $themeColor ;
			font-size: 26rpx;
		}
	}
	.completionBg{background-image: url(@/static/bg1.jpg);}
	.graybg {
		background-color: $containerColor;
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
		margin-top: 12rpx;

		.item {
			padding: 10rpx;
			overflow: hidden;
			display: inline-block;
			padding-bottom: 0;
			width: 210rpx !important;
			margin-right: 8rpx;
			border-radius: 10rpx;


			image {
				display: block;
				width: 100%;
				height: 260rpx;
			}


			.bookName {
				display: block;
				margin-top: 6rpx;
				color: #666;
				font-size: 24rpx;
				white-space: nowrap;
				overflow-x: hidden;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.proListPrice {
		text-align: center;

		.title {
			font-size: 28rpx;
			margin: 10px 0;
		}

		.list {
			padding: 0 10px;
			padding-bottom: 20rpx;

			.item {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 10rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				border: 1px solid #eee;
			}

			.item.active {
				color: $themeColor;
				border: 1px solid $themeColor;
			}

			.item:last-child {
				// border-bottom: none
			}
		}

		.tbn {
			justify-content: center;
		}

		.buybtn {
			background-color: #00d8df;
			margin: 0;
			margin-right: 20rpx;

			text {
				color: #fff;
			}
		}

		.saveBtnss {
			align-items: center;
			justify-content: center;
			height: 80rpx;

			// width: 46%;
			overflow: hidden;
			border-radius: 50rpx;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;

			}
		}

		.gouwuche {
			border: 1px solid #666;
			padding-right: 20rpx;

			text {
				// color: #fff;
			}
		}
	}

	.vipBtn {
		@include theme("vipbtnbg");
		border-radius: 100rpx;
		justify-content: center;
		width: 150px;
		color: #fff;
		margin: 10rpx auto;
	}

	.buyBox {
		position:absolute;
		z-index: 2;
		height: 800rpx;
		bottom: 100rpx;
		left: 0;
		top: 0;
		justify-content: center; align-items: center;
		padding: 20rpx 10rpx;
		width: 100%;
		font-size: 28rpx;		
		background: rgba(255, 255, 255, 0.9);

		.item {
			width: 100%;
			text-align: center;
			line-height:60rpx !important; border: none !important;
						text{
							white-space: wrap !important;
						}
		}

		.tbn {
			align-items: center;
		}

		.buybtn {
			color: #fff;
		}
	}

	.supermarketBox {
		@include pleft_right(5px) .borderbb {
			background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
			@include pleft_right(10px);
			border-radius: 20rpx;
			@include ptop_bottm(10px);
			@include mshadow(10px, 1);

		}

		.name {
			font-size: 24rpx;
			@include toe();
			margin-top: 10rpx;
		}

		.price {
			// text-align: center;
			font-size: 26rpx;
			font-weight: bold;
			color: $themeColor;
			padding-top: 10rpx;
		}

		.tips {
			margin-top: 10px;
			background-color: #e9f0ff;
			padding: 5px;
			border-radius: 5px;
			font-size: 24rpx;


			text {
				font-weight: bold;
				color: $themeColor;
			}
		}

	}

	.curseImg {width:150rpx;
			height: 100rpx; margin-right: 20rpx;
		image {
			width:150rpx;
			height: 200rpx;
		}
	}

	.courseList {
		position: relative;
		overflow: hidden;
		// background-color: #fff;
		// padding: 0 20rpx;
		background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);

		.item {
			padding: 0 20rpx;
			font-size: 26rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-bottom: 1px solid #ececec;

			text {
				@include toe()
			}
		}
	}
	.courseList.lock{height: 800rpx; overflow: hidden !important; position: relative;}

	.containerBg1 {
		// border-top: 1px solid #fff;
		margin-top: 20rpx;
		// position: relative;
		z-index: 1;
		// border-radius: 30rpx 30rpx 0 0;
		// background-color: #fff;
		overflow: hidden;
	}

	.containerBg {
		background-color: $containerColor;
		overflow: hidden;
		padding: 0 20rpx
	}

	.buyBox {}

	.coursePart {
		margin-top: 20rpx;
		margin-top: 20rpx;
		padding: 0 20rpx;
		padding-top: 20rpx;
		// background-image: url(@/static/bg1.jpg);		
		// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
		background-color: $themeColor;

		.item {
			justify-content: center;
			align-items: center;
			color: #fff;
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			view {}
		}

		.item.active {
			background-color: #fbfbff;
			color: $themeColor;
			border-radius: 20rpx 20rpx 0 0;
		}

	}


	.btnContainer {
		border-top: 1px solid #cac6e1;
		margin-top: 20rpx;
		padding-top: 20rpx;
		justify-content: space-between;



		margin-bottom: 20rpx;
	}

	.buybtn {
		border-radius: 100rpx;
		justify-content: center;
		width: 150px;
		margin: 10rpx auto;
		@include theme("btn_bg")
	}

	.priceBox {
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		padding: 10px;
		margin-bottom: 10px;
		justify-content: space-between;
		// border-top: 1rpx solid #e7e7e7;
		// border-bottom: 1rpx solid #e7e7e7;
		padding: 10px 0;

		.price {
			width: 100%;
			text-align: center;
		}

		.price:first-child {
			border-right: 1px solid #cac6e1;
		}
	}

	.prof {
		font-size: 26rpx;
		line-height: 50rpx;
		padding: 10rpx 0;
		color: #333;
		margin-bottom: 20rpx;
	}

	.courseTitle { 
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		@include ptop_bottm(10px);
		@include pleft_right(10px);
		// color: #fff;
		border: 2px solid #a3bbe0;
		@include mshadow(10px, 1)
		
		.title {
			// display: block;
			font-size: 30rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
		}

		.saveBtn {
			align-items: center;
			justify-content: center;
			height: 80rpx;
			background-color: #00d8df;
			// width: 46%;
			overflow: hidden;
			border-radius: 30rpx;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	.flexbox {
		display: flex;
	}

	.imgcontainer {
		background-color: $imgBg;
	}
</style>