<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
		<view class="curseImg">
			<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
			<image v-else :src="course.image" mode="widthFix"></image>
		</view>
		<view class="containerBg1">
			<!-- <view class="vipSee"> -->
			<view class="vipSee" v-if="userInfo.vip != 0">
				<text>VIP畅学权益生效中</text>
			</view>
			<view class="courseTitle flexbox" v-if="course.id">
				<view class="" v-if="userInfo.vip != 0">
					<view class="" style="width: calc(100% - 170rpx);">
						<text class="title">{{course.title}}</text>
					</view>
					<view class="learnBtn">
						<view>继续学习</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="">
						<text class="title">{{course.title}}</text>
					</view>
				</view>

			</view>
			<view class="containerBg" v-if="course.content && course.content != ''">
				<view class="prof">
					<uni-section style="background: transparent;" title="课程介绍" type="line"></uni-section>
					<view class="" v-html="course.content">
					</view>
				</view>
			</view>			
			<!-- <view class="containerBg"> -->
			<view class="coursePart flexbox" 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 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon> -->
					<!-- <u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon> -->
					<view class="">{{item.title}}</view>
				</view>
			</view>		
			<view class="buyBox flexbox" v-if="this.librayList.length > 0 && this.librayList[this.curIndex].isBuy == 0">
				<!-- 普通未购买 -->
				<view class="item" style="font-size: 24rpx;">
					<text>您还未购买此课程目录，开通 <text style="font-weight: bold;">超级VIP</text>或购买课程均可观看课程</text>
				</view>
				<view class="item tbn flexbox">
					<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
						<u-icon name="bag" color="#fff" size="28"></u-icon>
						<text>立即购买</text>
					</view>
					<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
			
						<uni-icons type="vip" size="28" color="#fff"></uni-icons>
						<text>开通超级VIP</text>
					</view>
				</view>
			
			</view>
			<view :class="['courseList',fold ? 'fold' : '']" 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="去学习" @click="goToLearn()"></uni-tag>
						</view>
						<view class="flexbox" v-else>
							<text>课程观看有效期截止到：{{librayList[curIndex].endTime}} </text><uni-tag type="primary"
								@click="goToLearn()" text="继续学习"></uni-tag>
						</view>
					</view>
				</view>
				<uni-section style="background: transparent;" title="章节列表" type="line"></uni-section>
				
				<view class="item" v-for="(item, index) in courseList" :key="index" >
					<view class="" @click.stop="chooseChapter(item, index)">
						<text >{{item.title}}</text>
						<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
							size="mini" type="primary" />						
					</view>					
					<view class="flexbox shitingLIst" style="" v-if="item.tryListen.length > 0">					
						<view class="item flexbox" v-for="(item2,index2) in item.tryListen" :key="index2">
							<u-icon name="play-circle-fill" color="#2979ff" size="28"></u-icon>
							<text>试听{{index2+1}}</text>
						</view>
					</view>
				</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>
			<u-divider v-else text="暂无数据"></u-divider>
			<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
			<!-- <template v-slot:right>
								查看更多 >>
							</template> -->
			<!-- </uni-section> -->
			<view class="linkPro" v-if="tjProList.length > 0">
				<uni-section class="mb-10 graybg" title="相关书籍" type="line">
					<!-- <template v-slot:right>
						<span class="more" @click="pageJupm()">查看更多 >></span>
					</template> -->
				</uni-section>
				<view class="list supermarketBox">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="item" v-for="(item, index) in tjProList" :key="index"
							@click="onPageJump('/pages/bookShop/commodityDetail',item.productId)">
							<view class="imgcontainer">
								<image :src="item.productImages" mode="aspectFit"></image>
							</view>
							<view class="name">
								{{item.productName}}
							</view>

							<view class="price" v-if="item.activityPrice && item.activityPrice > 0">
								￥{{item.activityPrice}}
							</view>
							<view class="price" v-else>
								￥{{item.price}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<uni-section class="mb-10 graybg" title="留言板" type="line">
				<template v-slot:right>
					<view class="flexbox " style="align-items: center;" @click="addSay()">
						<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
						<text>发布留言</text>
					</view>
				</template>
			</uni-section>
			<view class="liuyanBox">
				<view class="" v-if="sayList.length > 0">
					<commentsList :sayList="sayList" @support="support" @showSayModule="showSayModule"></commentsList>
				</view>
				<u-divider v-show="status == 2" text="已加载全部"></u-divider>
				<u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
				<u-divider v-show="status == 1" text="加载中..."></u-divider>
			</view>
			<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
				<view class="proListPrice" v-if="proPriceList.length > 0">
					<view class="title">
						请选择
					</view>
					<view class="list">
						<view :class="['item',curProId == item.productId ? 'active' : '']"
							v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
							{{item.productName}} - ￥{{item.price}}
						</view>
					</view>
					<view class="tbn flexbox" style="padding-bottom: 20px;">
						<view class="saveBtnss buybtn flexbox" @click="">
							<u-icon name="bag" color="#fff" size="28"></u-icon>
							<text>立即购买</text>
						</view>
						<view class="saveBtnss gouwuche flexbox" @click="">
							<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
							<text>加入购物车</text>
						</view>
					</view>
				</view>
			</u-popup>
			<view>
				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
					:iconStyle="iconStyle"></u-back-top>
			</view>
			<!-- </view> -->
			<!-- 评论弹出 -->
			<u-popup key="2" :show="sayVisible" :round="10" @close="sayclose">
				<view class="contentBox" style="padding: 20rpx;">
					<view class="" v-if="fatherSay.id != undefined">
						<view class="" style="font-size: 26rpx; margin-bottom: 20rpx;">
							<text>回复@：{{fatherSay.user.name}} 的留言</text>
						</view>
					</view>
					<view class="input_addIcon flexbox">
						<view class="editorBox">
							<editor id="editor" class="ql-container" placeholder="~ 和谐社会 友善发言 ~" show-img-size
								show-img-toolbar show-img-resize @statuschange="onStatusChange" :read-only="readOnly"
								@ready="onEditorReady">
							</editor>
						</view>
						<view class="icon flexbox">
							<u-icon v-show="!showEdit " @click="chooseImg" name="plus" color="#2979ff"
								size="28"></u-icon>
							<u-icon v-show="showEdit " @click="editEditor" name="edit-pen" color="#2979ff"
								size="28"></u-icon>
						</view>
					</view>
					<!-- 选择表情还是图片 -->
					<view class="chooseImgType flexbox" v-if="showImgType">
						<view class="emojiBtn item flexbox" @click="addEmoji">
							<view class="">
								<view class="img">
									<image src="@/static/biaoqing.png" mode="aspectFit"></image>
								</view>
								<view class="ss">
									<text class="addEmoji">表情</text>
								</view>
							</view>

						</view>
						<view class="picBtn item flexbox" v-show="uploadPicLIst.length < 3">
							<view class="" style="">
								<u-upload @afterRead="addPic" @delete="deletePic" multiple :maxCount="3" width="40"
									height="40" :previewFullImage="true">
								</u-upload>
							</view>

							<!-- <view class="">
								<uni-icons type="image" size="30" style="color: #666;"></uni-icons>
							</view>							
							<view class="ss">
							<text >图片</text>
							</view> -->

						</view>
					</view>
					<!-- 上传的图片 -->
					<view class="" v-if="uploadPicLIst.length > 0">
						<view class="" style="text-align: right;">
							<text style="font-size: 24rpx; color: #999;">最多可上传3张图片哦</text>
						</view>

						<view class="upimgList flexbox">
							<view class="item" v-for="(item, index) in uploadPicLIst" :key="index">
								<view class="imgbox" style="overflow: hidden;">
									<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
								</view>
								<span @click="deletePic(item,index)">×</span>
							</view>
						</view>
					</view>
					<!-- 表情 -->
					<view class="emoji" v-if="showEmoji">
						<!-- <text class="" @click="closeEmoji">关闭</text> -->
						<emotion @emotion="handleEmj" :height="220" :windowWidth="windowWidth">
						</emotion>
					</view>
					<view class="sbmitBox">
						<button @click="submitSay" type="default">发 布</button>
					</view>
				</view>

			</u-popup>
			<public-module></public-module>
			<z-navigation></z-navigation>
			<!-- <music-play :playData="playData"></music-play> -->
		</view>
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import commentsList from '@/components/commentsList.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: true,
				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: {},
				fatherIndex: null,
				supportFlag: 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.getData(e.id)
			this.getSayList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (this.scrollTop > 500) {
				this.fixed = true
			} else {
				this.fixed = false
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();

		},
		onReachBottom() {
			console.log('触底');
			if (this.status != 2) {
				this.pPage++
				this.getSayList()
			}
		},
		components: {
			// musicPlay
			emotion,
			commentsList

		},
		//方法
		methods: {
			getUserInfo() {
				// 用户详情
				// if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMsg = res.user
					});
				// }
			},
			// 评论
			showSayModule(data) {
				console.log(data, '父级收到值了');
				this.fatherSay = data.item
				this.fatherIndex = data.index
				console.log(this.fatherSay, this.fatherIndex, '父级收到值了');
				this.sayVisible = true
			},
			// 点赞
			support(data) {
				console.log(data, '父级收到值了吗？');
				let _obj = {
					...data
				} // index,index1,val

				if (this.supportFlag) {
					uni.showToast({
						title: '操作太快了，歇一下吧~',
						icon: 'non'
					})
					return
				}
				this.supportFlag = true
				if (!_obj.val.support) {
					$http.request({
							url: "common/courseGuestbook/addCourseGuestbookSupport",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: {
								"userId": this.userInfo.id,
								"guestbookId": _obj.val.id,
							},
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(res => {
							// console.log('sayList =>', res);	
							uni.showToast({
								title: "点赞成功",
								icon: 'success'
							})
							if (_obj.index1 == 'one') { // 一级
								this.sayList[_obj.index].support = true
								this.sayList[_obj.index].supportCount++
							}
							if (_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one') {
								this.sayList[_obj.index1].Bchildren[_obj.index].support = true
								this.sayList[_obj.index1].Bchildren[_obj.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": _obj.val.id,
							},
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(res => {
							// console.log('sayList =>', res);	
							uni.showToast({
								title: "取消成功",
								icon: 'success'
							})
							if (index1 == 'one') { // 一级
								this.sayList[_obj.index].support = false
								this.sayList[_obj.index].supportCount--
							}
							if (_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one') {
								this.sayList[_obj.index1].Bchildren[_obj.index].support = false
								this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--
							}
							this.supportFlag = false
						}).catch(e => {
							uni.showToast({
								title: "取消失败",
								icon: 'error'
							})
							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(data, this.htmlContent, 'this.htmlContent--++++');

				if ((this.htmlContent == '' || this.htmlContent == '<p><br></p>') && this.uploadPicLIst.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '您未输入内容哦'
					})
					return
				}
				return false
				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.fatherIndex, 'this.fatherIndex');
				// 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.fatherIndex], 'this.fatherSay.cIndex------------')
					if (this.fatherIndex != undefined && this.fatherIndex != null) { // 二级
						this.sayList[this.fatherIndex].children.push(_obj)
						this.sayList[this.fatherIndex].Bchildren.unshift(_obj)

					} else { // 一级
						this.sayList.unshift(_obj)
						console.log(_obj, '_obj返回的一级')
					}
					this.sayVisible = false
					this.fatherSay = {}
					this.fatherIndex = null
					// this.getSayList()
					// 获得的新实例，插入到数组的前面

				}).catch(e => {
					uni.showToast({
						icon: 'error',
						title: '提交失败'
					})
					console.log('提交报错', e);
				})
			},
			// 查询课程的评论
			getSayList() {
				this.status = 1
				if (this.loadFlag) {
					console.log('有未完成的进程');
					return
				}
				this.loadFlag = true				
				$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')
					}
				})
			},
			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 = {}
				this.fatherIndex = null
			},
			goToLearn() {
				uni.navigateTo({
					url: `/pages/course/myCourseLearn?id=${this.course.id}`
				})
			},
			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
							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.curId
						},
						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
							} else {
								this.proPriceList = []
							}
						}

					}).catch(e => {
						console.log(e, '获取商品列表报错')
					});

				this.pricespop = true
			},
			closePup() {
				this.pricespop = false
				this.proPriceList = []
			},
			choosePrice(item) {
				// console.log(item, 'choosePrice')
				this.curProId = item.productId
			},
			async chooseChapter(item, index) {				
				if (item.isAudition == 1) {
					// 未购买仅试听
					// let data = null
					this.courseList[index].tryListen = await this.getPath(item, index)					
					console.log(this.courseList, '1*********')
					
					// 					uni.navigateTo({
					// 						url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
					// =${this.curId}&chapterId=${item.id}`
					// 					})

				}

			},
			async getPath(item, index) {
				var datas
				await $http.request({
					url: "sociology/course/getCourseCatalogueChapterDetail",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data: {
						"id": item.id
					},
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					datas = res.data.videos
					console.log(res);

				})
				return datas
			},
			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
			},
			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) {
								res.chapterList.map(item => {
									item.tryListen = []
								})
								this.courseList = res.chapterList
								// console.log('status', res)
							} else {
								this.courseList = []
							}
						}

					}).catch(e => {
						console.log(e, '获取章节列表数据报错')
					});
			},
			// 跳转
			onPageJump(url, id) {
				uni.navigateTo({
					url: `${url}?id=${id}`
				});
			},

		},
	};
</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 .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;

			.imgbox {
				height: 100rpx;
				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);
		}
	}

	.vipSee {
		@include theme("btn_bg");
		color: #fff;
		padding: 20rpx;
	}


	.leve {
		margin-bottom: 20rpx;

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

		.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;
				}
			}
		}
	}

	.showFew {
		.icon_item1 {
			-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
		}
	}

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

	.fold {
		// 折叠状态
		height: 500rpx;
		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;
		}
	}

	.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: fixed;
		// z-index: 2;
		// bottom: 100rpx;
		// left: 0;
		@include pleft_right(4px);
		// @include mshadow(10px, 1);
		padding: 20rpx 10rpx;
		width: 100%;
		font-size: 28rpx;
		flex-wrap: wrap;
		background-image: linear-gradient(60deg, #e0e9f6 0%,#ece6fa 30%,#d7e8f0 60%, #fff 100%);
		// background: rgba(255, 255, 255, 0.9);

		.item {
			width: 100%;
			text-align: center; line-height: 70rpx !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 {
		image {
			width: 100%;
			height: 500rpx;
		}
	}

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

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

			text {
				@include toe()
			}
		}
	}

	.containerBg1 {
		border-top: 1px solid #fff;
		margin-top: -30rpx;
		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;
		@include ptop_bottm(10px);
		border-radius: 20rpx 20rpx 0 0;
		@include pleft_right(10px);

		@include mshadow(10px, 1);
		margin-top: 20rpx;
		padding: 0 20rpx;
		padding-top: 20rpx;
		background-color: $themeColor;

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

			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 {
		justify-content: space-between;
		overflow: hidden;
		background-image: url(@/static/bg1.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
		padding: 0 20rpx;

		.learnBtn {
			margin-bottom: 20rpx;
			width: 150rpx;
			;
			text-align: center;
			border: 1px solid $themeColor;
			color: $themeColor;
			line-height: 60rpx;
			height: 60rpx;
			font-size: 28rpx;
			margin-top: 40rpx;
		}

		.price {
			color: #ff582e;
			font-size: 32rpx;

			i {
				font-style: normal;
				font-size: 60rpx;
				font-weight: bold
			}
		}



		.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;
			}
		}
	}
	.shitingLIst{ background-color: #fff; padding:20rpx; margin-bottom: 20rpx;
		.item{align-items: center; border: none !important; line-height: 30rpx !important; margin-right: 20rpx;}
	}
	.flexbox {
		display: flex;
	}

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