<template>
		<page-meta :page-style="'overflow:'+(showEditBlank?'hidden':'visible')"></page-meta>
	<view class="">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<template v-show="!screenLoading">
			<z-nav-bar title="教学内容"></z-nav-bar>
			<view
				class="contentBox curriculum_box"
				:style="`
					height:calc(100% - ${60 + statusBarHeight}px !important;
					width:100%;
					overflow-x: hidden; ${isFullScreen ? 'background:#000' : ''}
				`"
			>
				<!-- 课程视频及章节信息 -->
				<CommonCourseVideo
					:video-list="videoArray"
					:current-index="currentCateIndex !== null ? currentCateIndex : 0"
					:course="{courseTitle:options.navTitle, chapterTitle: curriculumData.title, catalogueId: curriculumData.catalogueId || '', courseId: curriculumData.courseId || options.courseId || ''}"
					:cover="options.curriculumImgUrl || ''"
					:http="$http"
					:user-info="userInfo"
				/>
				
				<view class="" style="border-top: 2px solid #2979ff;">
					<view class="coursePart flexbox" v-if="tabList.length > 1">
						<view :class="['item','flex_box',curTab == index ? 'active': '' ]"
							v-for="(item, index) in tabList" :key="index" @click="tabClick(item,index)">
							<view class=""><text>{{item.name}}</text></view>
						</view>
					</view>
				</view>
				<view v-show="curTab == 0">
					<!-- <scroll-view :style="`height:calc(100% - 200px - 40rpx) ;`" scroll-y="true" class="scroll-Y"	style="background-color: #fff"> -->
					<view class="PM_font" style="padding: 20rpx; font-size: 40rpx; color: #333">章节简介</view>
					<view class="scroll-view-item">
						<common-rich-detail :detailInfo="{ ...curriculumData, title: '' }">
							<template #richHeadImg>
								<image v-if="curriculumData.imgUrl" @click="previewImage(curriculumData.imgUrl)"
									:src="curriculumData.imgUrl" mode="widthFix" class="headImage"></image>

								<!-- <image :src="detailInfo.imgUrl" v-if="detailInfo.imgUrl" mode="widthFix" class="headImage"></image> -->
							</template>
						</common-rich-detail>
					</view>
					<!-- </scroll-view> -->
					<p class="aui-text-danger" style="text-align: center">
						本课程版权归天津众妙之门科技有限公司所有，翻版必究!
					</p>
				</view>
				<view v-show="curTab == 1" style="padding: 20rpx;">
					<view class="">
						<view class="PM_font" style="padding: 20rpx; font-size: 40rpx; color: #333">题目内容</view>
						<view v-if="curriculumData.questions != ''" class="">
							<view class="" v-html="curriculumData.questions"></view>							
							<view class="haveAnswer" v-if="myAnswer.id">
								<!-- 有答案 -->
								<view class=" flex_box flex_between" style="padding: 20rpx; align-items: center;">
									<view class="">
										<text class="PM_font" style="padding: 20rpx 0; font-size: 40rpx; color: #333">我的见解</text>
											<text class="classLink" @click="gotoClass(classList[0])" v-if="classList[0].id">@{{classList[0].title}}</text>
									</view>								
									<view class="rightBtn" @click="showBlank(myAnswer)" v-if="myAnswer.scoreSuccess == 0 && myAnswer.scoreInfo == '' && classList[0].state == '1'">
										<text>修改</text>
									</view>
									<view class="score" v-if="myAnswer.scoreSuccess == 0 && myAnswer.scoreInfo != ''">
										<text>正在评分</text>
									</view>
									<view class="score" v-if="myAnswer.scoreSuccess > 2">
										<text>{{myAnswer.score}}分</text>
									</view>
								</view>								
								<view class="htmlText" v-html="myAnswer.content"></view>
								<!-- {{myAnswer.fileList.length}} -->
								<view class="imgBox flex_box" v-if="myAnswer.fileList.length > 0">
									<view class="item" v-for="(item, index) in myAnswer.fileList" :key="index">
										<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
									</view>
								</view>
								<view class="timeInfo">
									{{myAnswer.createTime}}
								</view>
								
							</view>
							
							<view :class="['noanser', isInClass ? '' : 'lock']" v-else-if="classList.length > 0">
								<view class="lockView flex_box">
									<view class="">
										<view class="">
											<text>加入小班学习后，即可发表您的见解, 更有相关领域的前辈为您解惑，帮助您更系统地学习本课程</text>
										</view>
										<view class="btnBox">
											<button size="mini" @click="goClassLIst('/pages/miniClass/courseClassList')">去加入小班</button>
										</view>
									</view>									
								</view>
								<template v-if="classList.length > 0 && classList[0].state == '1'">
									<view class="welc">
										<text>欢迎留下你的见解</text>
										<text  class="className1"  @click="gotoClass(classList[0])" >提交到{{classList[0].title}}</text>
									</view>
									<view class="flex_box flex_center " style="align-items: center;">
										<text class="btn" @click="showBlank()">写见解</text>									
									</view>
								</template>
							</view>
						</view>
						<view class="" v-else>
							<u-divider text="暂无思考题"></u-divider>
						</view>
					</view>

				</view>
				<u-popup key="1" :show="showEditBlank" :round="10" @close="closePup" ref="" @touchmove.stop="" >
					<view class="" style="padding: 40rpx; max-height: 80vh; overflow-y:scroll">
						<view class="answerBox">
							<view class="PM_font" style="padding: 20rpx; font-size: 40rpx; color: #333">见解提交</view>
							<scroll-view scroll-top="" scroll-y="true" class="scroll-Y" style="max-height: 400rpx; margin: 20rpx 0;">
							<view class="container">
								<view class="page-body">
									<view class='wrapper'>
										<view class="editor-wrapper">
											<editor @input="editorIput" 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>
								</view>
							</view>												
							</scroll-view>						
							<view class="input_box">
								<text class="input_tit" style="display: block;margin-bottom: 15rpx;">上传图片:</text>
								<view class="in" style="border: none;" @click="checkPermision">
									<u-upload :fileList="fileList1" @afterRead="addPic" @delete="deletePic" multiple
										:maxCount="9" width="60" height="60" :previewFullImage="true">
									</u-upload>
								</view>
							</view>
							
							<view class="btn_box">
								<button @click="onSubmit" v-if="isClick">提 交</button>
								<button  v-else style="opacity: 0.6;">提 交</button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</template>

		<view style="
        background-color: red;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      " v-show="screenLoading">
		</view>
	</view>
</template>

<script>
	import permission from "@/js_sdk/wa-permission/permission.js"
	import courseDescription from "@/pages/component/commonComponents/list";
	import curriculumMp3 from "./mp3Detail.vue";
	import price from "./price/index.vue";
	import debounce from "@/common/debounce.js";
	import $http from "@/config/requestConfig.js";
	import {
		mapState
	} from "vuex";

	export default {
		components: {
			courseDescription, //课程说明
			price, //课程价格
			curriculumMp3, //mp3
		},
		data() {
			return {
				isClick:true,
				classList:[],    // 进行中的小班
				isInClass:false,   // 是否加入了班级
				showEditBlank: false,
				answerForm: {
					relationId: undefined,
					type: "1", //类型0任务1课后题
					display: "1", //0不展示1展示
					content: "",
					img: "",
					id: undefined

				},
				fileList1: [],
				tabList: [{
						name: '章节介绍',
						id: '0'
					},
					{
						name: '思考题',
						id: '2'
					}
				],
				rules: {
					content: {
						rules: [{
								required: true,
								errorMessage: '请输入回答内容',
							}

						]
					},

				},
				activeStyle: {
					color: '#333',
					fontWeight: 'bold',
					// transform: 'scale(1.2)',
					backgroundColor: '#fff !important'

				},
				curTab: 0,
				changeVideoLock: false, // 切换键锁
				isFullScreen: false,
				screenLoading: false,
				isfresh: false,
				currentCateIndex: 0,
				currentVideo: {},
				secondCountDown: 10,
				countDownTimer: undefined,
				videoList: {},
				isOpenMp3: false,
				praise: "",
				reward: "",
				commentLst: [],
				correlationiList: [],
				options: {},
				videoArrayHW: [],
				videoArray: [],
				relatedCoursesList: [], //相关课程
				medicalCasesList: [], //相关医案
				curriculumData: {},
				curriculumInfo: {},
				fdButtonStyle: {
					width: "120rpx",
					"border-color": "#000",
					color: "#000",
					float: "right",
					"margin-right": "20rpx",
					"margin-left": "30rpx",
				},
				modalInfo: {},

				show: false,
				playData: {},
				
				taiHuClassInfo: {},
				searchValue: "",
				ordersTabs: [{
						name: "视频教学",

						type: "1",
					},
					{
						name: "文章简介",
						type: "2",
					},
				], // 一级分类标题1
				cateList: [], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				dataList: [], // 方剂标题
				allDataList: [], // 方剂标题
				currentStatusIndex: 0, // 当前选中的一级分类

				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				showSearchList: false,
				userMes: {}, // 用户信息
				searchDisable: false, // 搜索不可用
				limitShow: false,
				limitTitle: "提示",
				limitContent: "",
				scrollViewHeight: 0,
				noRecored: null, // 是否为试听资源
				urlList: {
					detail: "sociology/course/getCourseCatalogueChapterDetail",
					curriculumInfo: "app/phone.do?getCourseInfo",
				},

				readOnly: false,
				formats: {},
				myAnswer: {}, // 我的思考题回答 
				oldContent:'',  // 老的内容
				
			};
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
			// #endif
			this.answerForm.relationId = options.id
			this.options = options;
			console.log('shoudao de zhi',this.options );
			this.noRecored = options.noRecored
			console.log('this.noRecored=>', this.noRecored)
			this.screenLoading = false;

			this.currentCateIndex = this.options.videoIndex ?
				this.options.videoIndex :
				0;
			// #ifdef APP-PLUS
			plus.screen.unlockOrientation(); // 解除锁定屏幕方向
			plus.screen.lockOrientation("portrait-primary");

			this.getCourseDescriptionData();
			this.getMyQuestAnswer(options.id)
			uni.loadFontFace({
				family: 'Pacifico',
				source: 'url("https://sungd.github.io/Pacifico.ttf")'
			})
			// this.getUserInfo()
			// this.getCateList()
		},
		beforeDestroy() {
			console.log('页面卸载')
			this.hideNextVideo()
		},
		onUnload() {
		},
		onHide() {
			console.log('回去了 .....................');
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.isClick=true;
			// #endif
			this.getClassList()
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			editorIput(e){				
			},
			hideNextVideo() {
				if (this.countDownTimer) {
					clearInterval(this.countDownTimer)
					this.countDownTimer = undefined
				}
			},
			moveHandle() {
				    return false;
				},
			showBlank(val) {				
				// this.noScroll()
				console.log('zouzheli .....................');
				if (val) {
					this.answerForm = val					
					// this.editorCtx = val.content
					// this.fileList1 = [...val.fileList]
				} else {
					this.answerForm = {						 
						relationId: this.options.id,
							type: "1", //类型0任务1课后题
							display: "1", //0不展示1展示
							content: "",
							img: "",
							id: undefined
						}
						// this.editorCtx = ''
						// this.fileList1 = []
					// console.log('this.answerForm++++', this.answerForm);
				}
				// 赋值给编辑器
				this.onEditorReady()	
				this.isClick=true			
				this.showEditBlank = true
			},
			gotoClass(item){
				uni.navigateTo({
					url: `/pages/miniClass/classInfo?id=${item.id}`
				});
			},
			async closePup() {
				// this.canScroll()
				this.showEditBlank = false
				let data = await this.getHtml();
				var _data = data.html.replace(/<.*?>/g, "")
				if (!_data || _data == '') {
					uni.showToast({
						title: '请输入您的答案',
						icon: 'none'
					})
					return
				}
				this.oldContent = data.html
				// this.answerForm = {
				// 	relationId: undefined,
				// 	type: "1", //类型0任务1课后题
				// 	display: "1", //0不展示1展示
				// 	content: "",
				// 	img: "",
				// 	id: undefined

				// }
				// this.fileList1 = []
			},
			getMyQuestAnswer(chapterId) {
				$http.request({
						url: "common/class/getQuesReplyInfo",
						method: "POST",
						data: {
							"relationId": chapterId,
							"userId": this.userInfo.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						if (res.code == 0 && res.classTaskAndQuesReply != null) {
							this.myAnswer = res.classTaskAndQuesReply	
							this.oldContent = this.myAnswer.content
							console.log('回复的内容',this.oldContent);
							// // 赋值给编辑器
							// this.onEditorReady()
							this.myAnswer.fileList = []
							if (res.classTaskAndQuesReply.img != '') {
								var imgList = res.classTaskAndQuesReply.img.split(',')
								imgList.forEach((item, index) => {
									this.myAnswer.fileList.push({
										url: item
									})
									this.fileList1.push({
										url: item
									})
								})
							}
						} else {
							this.fileList1 = []
							this.myAnswer = {}
							this.answerForm = {}
							this.editorCtx = ''
						}
						console.log('我的思考题提交情况', res);
					}).catch(e => {
						console.log('我的思考题提交情况报错', e);
						// uni.showToast({
						// 	title: '操作失败',
						// 	icon: 'error'
						// })
					});
			},
			async checkPermision() {
				var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
				if (result != 1) {
					return false
				}
			},
			addPic(e) {
				let that = this;
				console.log("添加图片", that.fileList1);
				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) => {
							// console.log("添加图片", this.fileList1);
							that.fileList1.push({
								url: JSON.parse(res.data).url,
							});
							console.log(that.fileList1, "that.uploadPicLIst");
						},
						fail: (error) => {
							console.log("上传失败", error);
						},
					});
				}
			},
			deletePic(event) {
				this.fileList1.splice(event.index, 1)
			},
			radioChange(e) {
				if (this.answerForm.display == e.detail.value) {
					return
				}
				this.answerForm.display = e.detail.value
			},
			async onSubmit() {	if(!this.isClick){
				return false
			}
				debounce(async () => {
				let data = await this.getHtml();				
				var _data = data.html.replace(/<.*?>/g, "")
				if (!_data || _data == '') {
					uni.showToast({
						title: '请输入您的答案',
						icon: 'none'
					})
					return
				}
				this.answerForm.content = data.html
				if (this.fileList1.length > 0) {
					let _list = this.fileList1
					_list = _list.map(item => item.url)
					// console.log('this.fileList1',_list);
					this.answerForm.img = _list.join(',')
				} else {
					this.answerForm.img = ''
				}
				var _url = ""
				this.answerForm.id ? _url =
					'common/class/editClassTaskAndQuesReply' : _url = 'common/class/addClassTaskAndQuesReply'
				// this.form.id ?  _url =
				// 	'common/class/editClassTaskReply'  : _url = 'common/class/addClassTaskReply'
				var data1 = {
					'classId': this.answerForm.id ? undefined : this.classList[0].id,
					"relationId": this.answerForm.id ? undefined : this.curriculumData.id,
					"id": this.answerForm.id,
					"type": this.answerForm.type, //类型0任务1课后题
					"display": this.answerForm.display, //0不展示1展示
					"content": this.answerForm.content,
					"img": this.answerForm.img
				}

				console.log('提交的data', data1);
				this.isClick=false;
				$http.request({
						url: _url,
						method: "POST",
						data: data1,
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						uni.showToast({
							title: '操作成功！',
							icon: 'success'
						})
						this.fileList1 = []
						setTimeout(() => {
							this.isClick=true;
							this.getMyQuestAnswer(this.curriculumData.id)
							this.closePup()
							// this.pPage = 0
							// this.zuoyeList = []
							// this.getTaskInfo()
							// this.getZuoyeList()
						}, 200)
					}).catch(e => {
						this.isClick=true;
						uni.showToast({
							title: '操作失败',
							icon: 'error'
						})
					});
				},300)
				// console.log('data',data.html.replace(/<.*?>/g,""));
			},
			getHtml() {
				return new Promise((resolve, reject) => {
					this.editorCtx.getContents({
						success: (res) => {
							resolve(res);
						},
						fail: (error) => {
							reject(err);
						},
					});
				});
			},
			goClassLIst(url){
				uni.navigateTo({
					url: `${url}?courseId=${this.options.courseId}&courseTitle=${this.options.navTitle}`,
				});
			},
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					console.log('编辑器实例', res.context);
					if (this.oldContent == '') return
					res.context.setContents({
						html: this.oldContent
					})
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			// format(e) {
			// 	let {
			// 		name,
			// 		value
			// 	} = e.target.dataset
			// 	if (!name) return
			// 	// console.log('format', name, value)
			// 	this.editorCtx.format(name, value)
			// },
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},

			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			tabClick(item, index) {
				if (this.curTab == index) {
					return
				}
				this.curTab = index
				if (this.curTab == 1) {
					uni.loadFontFace({
						family: 'Pacifico',
						source: 'url("https://sungd.github.io/Pacifico.ttf")'
					})
				}
			},

			//课程详情
			async gotoDetail(v, index) {
				console.log(
					this.cateList[this.currentCateIndex],
					8888888888888888888888888
				);

				if (
					this.cateList[this.currentCateIndex].isBuy == 1 ||
					v.isAudition == 1 ||
					this.vip.type != "0"
				) {
					uni.navigateTo({
						// url: '../bookShop/commodityDetail?id=' + item.id
						url: `/pages/curriculum/order/curriculum/detail?navTitle=${this.options.navTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&detailOid=${v.detailOid}`,
					});
				} else {
					this.$commonJS.showToast("请先购买课程");
				}
			},
			changeScreenLoading(status) {
				this.screenLoading = status;
			},
			changeScreen(status) {
				this.isFullScreen = status;
			},
			ordersTabCLi(data) {
				console.log("i at line 312:", data);
				this.currentCateIndex = data.index;
				this.$forceUpdate();
			},
			hancleModalCancel() {
				this.show = false;
			},
			handleClickMore(v, i, status) {
				console.log("i at line 357:", i);
				this.$set(this.correlationiList[i], "isOpen", status);
				// [i].=!this.correlationiList[i].isOpen;
			},
			hancleModalConfirm() {
				var data = {
					values: {
						customerType: "D",
						token: uni.getStorageSync("token"),
						customerOid: uni.getStorageSync("customerOid"),
						...this.taiHuClassInfo,
					},
				};

			},

			//课程详情
			gotoDetail(v) {
				console.log(v);
				uni.navigateTo({
					// url: '../bookShop/commodityDetail?id=' + item.id
					url: `/pages/curriculum/order/curriculum/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
				});
			},
			//相关课程
			goCourseDescription(v) {
				console.log(v);
				uni.navigateTo({
					// url: '../bookShop/commodityDetail?id=' + item.id
					url: `/pages/curriculum/order/curriculum/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
				});
			},
			getCourseDescriptionData() {
				var data = {
					id: this.options.id,
					load: false,
					// id: "16457",
				};
				var that = this;
				console.log(this.$store.state, "11111111111");

				$http
					.request({
						url: `${this.urlList.detail}`,
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data,
						header: {
							//默认 无 说明：请求头
							"Content-Type": "application/json",
						},
					})
					.then(async (res) => {
						that.curriculumData = res.data.detail;
						that.videoArray = res.data.videos;
						console.log('视频列表：', that.videoArray);
						//判断没有视频的情况
						if(that.videoArray.length==0){
							
						}
						console.log("that.videoArray at line 这是关联的视频519---------------:",  that.videoArray.length);
						var isHaveHistorySeekVideo = that.videoArray.findIndex(
							(e) => e.id == res.data.current
						);
						console.log(
							"获取课程章节详情",
							isHaveHistorySeekVideo, that.curriculumData
						);
						that.currentCateIndex =
							isHaveHistorySeekVideo != -1 ? isHaveHistorySeekVideo : 0;
						if (that.videoArray.length > 0) {
							this.currentVideo = that.videoArray[that.currentCateIndex];
							console.log('默认播放的index', that.currentCateIndex, this.currentVideo.id, that.videoArray);
						}
						var videoArray = [];
						var videoArrayHW = [];

					});
			},
			getPriceData() {
				var that = this;
				setTimeout(() => {
					that.$nextTick(() => {
						that.$refs.priceDetail.getData();
					});
				}, 100);
			},
			// 检查是有权限使用搜索功能
			checkDisable() {
				console.log("点击了");
			},
			// 判断用户是否加入了小班
			getClassList(){
				console.log('是否进入了班级列表查询',this.options);
				$http.request({
						url: '/common/class/getClassByUser',
						method: "POST",
						data: {
							"courseId": this.options.courseId,
							    // "state": "", //小班状态0待开班1已开班2完成
							    // "type": "" // 班类型 0小班 1联合班 2精英班
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						this.classList = []
						 console.log('获取班级列表',res.result);
						if(res.code == 0){
							if(res.result != null && res.result.id){
									this.isInClass = true	
									this.classList.push(res.result)
							}else{
								this.isInClass = false
								this.classList = []
							}
						}
						console.log('获取班级列表++++++',this.isInClass);
					}).catch(e => {
						console.log('获取班级列表失败',e);
					});
			},
			// 获取用户详情
			getUserInfo() {
				// 用户详情
				if (this.userInfo.id != undefined) {
					this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
						this.userMes = res.user;
						this.getCateList();
						console.log(this.userMes, "呼呼");
					});
				}
			},

			async handleselectCate(item, index) {
				this.dataList = [];
				var data = [];
				console.log(item, index, 99999);
				var that = this;

				// curriculumInfo

				this.$http
					.post(this.urlList.curriculumInfo, {
						customerType: "D",
						token: uni.getStorageSync("token"),
						customerOid: uni.getStorageSync("customerOid"),
						oid: item.coid,
					})
					.then(async (res) => {
						that.curriculumInfo = res.obj;
						that.dataList = res.obj.courseList;

						// socket.init();
					});


				console.log(this.allDataList, this.dataList, "1688");


				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;


				return data;
			},
			async setOneCateIndex(item, index) {
				this.allDataList = [];
				console.log(index, 99999);
				var that = this;

				this.currentStatusIndex = index;
				// this.currentCateIndex = 0

				this.searchValue = "";
				this.searchList = [];
				this.showSearchList = false;
				this.$nextTick(async () => {
					await that.getCourseDescriptionData();

					this.$forceUpdate();
				});

			},

			transformData(inputData) {
				const result = {};
				inputData.forEach((item) => {
					const {
						letter
					} = item;
					if (!result[letter]) {
						result[letter] = [];
					}
					result[letter].push(item);
				});
				// const finalResult = Object.keys(result).map(key => ({ [key]: result[key] }));
				return result;
			},

			getCateList(id) {
				id ? "" : (id = 0);
				this.twoCateList = [];
				this.curTwoCateIndex = 0;

			},

			// 放大图片
			previewImage(url) {
				console.log("这是点击了图片啊啊啊啊", url);
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ["很抱歉，暂不支持保存图片到本地"],
						success: function(res) {
							// console.log(res,'+++++')
						},
					},
				});
			},

		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/style/mixin.scss";	

	.ql-container {
		box-sizing: border-box;
		// padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		min-height: 300rpx;

		font-size: 14px;
		font-style: normal !important;
		line-height: 1.5;
		overflow-y: scroll;
		border: 1px solid #eee
	}

	.ql-active {
		color: #06c;
	}


	// .u-grid-list {
	// 	// height: 40rpx;
	// }

	.searchList {
		.item {
			font-size: 28rpx;
			padding: 20rpx;
			border-bottom: 1px solid #dadbde;
		}
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
	}
	.timeInfo{font-size: 28rpx; color: #838383; text-align: right; margin: 16rpx 0;}
	.imgBox {
		flex-wrap: wrap;

		.item {
			width: 20%;
			margin-right: 10rpx;
			border: 1px solid #eee;
			padding: 0 !important;

			image {
				width: 100%;
			}
		}
	}

	.haveAnswer {
		background-color: #f1f1f1;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 20rpx;
		.htmlText {
			margin-bottom: 20rpx;
		}

	}
	.noanser.lock { position: relative; align-items: center;
		.lockView{ min-height:100;  display: block !important; padding: 20rpx; color: #fff; border-radius: 10rpx;
			position: absolute; top: 0; left: 0; z-index: 2; width: 100%; background-color: rgba(0, 0, 0, .8);
			.btnBox{
				padding-top: 20rpx;
			}
		}
	}
	.noanser { margin-top: 20rpx; margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: rgba(255, 255, 255, .6);
		text-align: center;
		// border-bottom: 1px solid #eee;
		.welc{ display: block; border-top: 1px solid #eee; margin-bottom: 20rpx; padding-top: 20rpx;}
		.lockView{display: none;}
		.className1{color: #06c;}
		.btn {
			display: inline-block;
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			background-color: $themeColor;
			color: #fff;
		}
	}
// .noanser{
// 	display: block;
// 	content: '加入小班学习后，即可答题';
// 	background-color:rgba(255, 255, 255, .4);
// }
	.contentBox {
		height: 100vh;

		.statusList {
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 20rpx 0;
				font-size: 34rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: $themeColor;
				color: #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}
		}

		.twoCateList {
			font-size: 28rpx;
			margin-top: 20rpx;

			.grid-text {
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.cur {
				color: $themeColor;
			}

			// .u-grid-list{border: 0.5px solid #dadbde;}
		}

		.dataList {
			font-size: 26rpx;
			// margin-top: 20rpx;
			// padding: 32rpx 0rpx;
			border-radius: 10rpx;
			background-color: #f8f9fa;
			box-sizing: border-box;

			.JFtitleItem {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				width: 100%;
				border-bottom: 0.5px solid #f8f9fa;
			}

			.wmzhimg {
				width: 220rpx;
				height: 220rpx;
			}
		}
	}
.classLink{color: #06c;}
	.coursePart {
		margin-top: 20rpx;
		@include ptop_bottm(10px);
		border-radius: 20rpx 20rpx 0 0;
		@include pleft_right(10px);
		align-items: flex-end;
		// @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: 16rpx 0;
			margin-right: 10rpx;
			border-radius: 20rpx 20rpx 0 0;
			border: 1px solid #fff;
			border-bottom: none;
			background-color: rgba(0, 0, 0, .4);

			text {
				font-size: 30rpx;
			}
		}

		.item:last-child {
			margin-right: 0;
		}

		.item.active {
			// background-color: #fbfbff;
			background-color: $themeColor;
			color: #fff;
			padding: 20rpx 0 !important;

			text {
				font-size: 36rpx !important;
			}
		}
	}
	.score{color: #06c;}
	.rightBtn {
		float: right;

		text {
			display: inline-block;
			border: 1px solid #06c;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
			color: #06c;
		}

	}

	.btn_box {
		margin-top: 70rpx;
		padding-bottom: 20rpx;

		button {
			font-size: 32rpx;
			@include theme('btn_bg');
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}

	.search_box {
		margin: 0 auto;
		overflow: hidden;
		align-items: center;
		width: calc(100% - 10px);
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.search {
			height: 56upx;
			display: flex;
			width: 86%;
			margin: 0 auto;
			align-items: center;
			padding: 0upx 40upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0 0px 10px 1px $themeColor;
		}

		.prompt {
			color: #838383;
			font-size: 24rpx;
		}

		.icon_search {
			background-image: url("@/static/icon/map_ic_search.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}

	.flexbox {
		display: flex;
	}

	.uni-modal .uni-modal__bd {
		text-align: left;
	}

	.limiTy {
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.chImage {
		height: 100rpx;
	}

	.dataList {
		height: 100%;
	}

	.titleList2 {
		height: calc(100% - 150rpx);
	}

	.priceDetail {
		height: calc(100% - 180rpx) !important;
		padding: 0rpx 0;
		box-sizing: border-box;
	}

	.componentPage {
		height: calc(100% - 90rpx) !important;
	}

	.dateReminder {
		width: 100%;
		font-size: 24rpx;
		text-align: right;
		line-height: 40rpx;
	}

	.fdButtonBox {
		border: 1rpx solid $themeColor;
		background-color: $themeColor;
		color: #fff;
		// width: 100%;
		float: right;
		padding: 4rpx 14rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;

		// margin-top: 20rpx;
		// display: flex;
		// align-items: center;
	}

	// .headImage {
	// 	// height: 400rpx !important;
	// }

	// .commonDetailPage {}

	.curriulum_box {
		margin-top: 20rpx;
		width: 100%;

		.curriulum_title_box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			background-color: #fff;

			.curriulum_title {
				width: calc(100% - 80rpx);

				font-size: 32rpx;
				line-height: 40rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	// /deep/.titleItem {
	// 	// width: calc(100% - 120rpx) !important;
	// }

	/deep/.scroll-view-item:nth-child(2n-1) {
		background-color: transparent !important;
	}

	.dataList {
		height: auto !important;
	}

	.small_class_teaching_box {
		width: 100%;
		margin-top: 20rpx;
		background: #b7e0e2;

		.small_class_teaching_top {
			padding: 20rpx 20rpx 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background: #EDFCF7;
			color: #8f8e8e;

			// box-shadow: 0px 0px 6rpx 0px #E9DCCC;
			.icon1 {
				width: 50rpx;
				height: 50rpx;
			}

			.small_class_teaching_top_left {
				display: flex;
				align-items: center;
				color: #018f89;

				font-family: MicrosoftYaHei;
			}
		}

		.small_class_teaching_content {
			margin-top: 20rpx;
			// background: #EDFCF7;
			padding-bottom: 10rpx;

			.top {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #fff;

				.top_item {
					width: 23%;
					font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
					font-weight: normal;
					font-size: 34rpx;
					color: #018f89;
					line-height: 80rpx;
					background: #cef8ea;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 0px 6rpx 0px #e9dccc;
				}
			}

			.schedule {
				width: 100%;
				overflow: hidden;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				align-items: center;
				color: #018f89;

				font-family: MicrosoftYaHei;

				.icon_box {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 0rpx;

					.icon1 {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.progress_box {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.progress_icon {
						width: calc(100% - 240rpx);
					}

					.icon1 {
						width: 60rpx;
						height: 60rpx;
						margin: 0 20rpx;
					}

					.icon2 {
						width: 140rpx;
						height: 100rpx;
						position: absolute;
						right: 0;
						// margin-top: -20rpx;
					}
				}
			}
		}
	}

	.related_courses_box {
		background-color: #fff;

		.small_class_teaching_content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.related_courses_name {
		display: inline-block;
		width: calc(100% - 150rpx) !important;

		.aui-text-danger {
			// display: inline-block;
			float: right;
		}
	}

	.curriculum_box {
		.curriculum_title {
			padding: 20rpx 40rpx 0;
			font-size: 38rpx;
			line-height: 66rpx;
			font-weight: bold;
			text-align: center;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}
	}

	// .common_curriculum_list{

	.curriculum_content {
		background-color: #fff;
		padding-bottom: 40rpx;

		.richDetail {
			height: auto !important;
			margin-bottom: 20rpx;
		}
	}

	.dianzan_box {
		width: calc(100% - 80rpx);
		margin: 0 auto;
		padding: 20rpx 20rpx;
		color: #6e6e6e;
		font-weight: 600;
		text-align: justify;
		background: #f4fffb;

		border-radius: 10rpx;
		box-shadow: 0px 0px 6rpx 0px #e9dccc;
	}

	.dashang_box {
		color: #ff5521;
		background: #fff7f4;
		box-shadow: 0px 0px 6rpx 0px rgba(255, 85, 33, 0.4);
	}

	.correlation_box {
		background-color: #fff;
		padding-bottom: 40rpx;

		.title {
			font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
			font-weight: normal;
			font-size: 40rpx;
			color: #018f89;
		}

		.more {
			font-size: 24rpx;
		}

		.close {
			text-align: center;
			color: #b0b0b0;
			line-height: 40rpx;
			margin-top: 10rpx;
			// padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
