<template>
	<view style="background-color: #fff;">
		<view class="listbox-top" style="background-color: #fff;">

			<view class="searchView" style="margin-right: 200rpx;" v-show="tabIndex===0">
				<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
					placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="##F2F5F7">
				</u-search>
				<!-- firstType = 0;endType = 0;boeStatus = '';typeListData='' -->
				<view class="textbtns" @click="()=>{showSearch = true;}">
					<text>筛选</text> 
					<image style="width: 26rpx;height: 26rpx;margin-left: 10rpx;" src="../../static/images/search.png"></image>
				</view>
			</view>
			<view class="searchView" v-show="tabIndex===1">
				<u-search :clearabled="true" @search="searchData()" @clear="searchData()"
					placeholder="搜索关键字" v-model="autonomy.keyword" :showAction="false" shape="square" bgColor="##F2F5F7">
				</u-search>
			</view>
		</view>
		<view class="tabbar" style="position: relative;padding-bottom: 20upx;">
			<view class="tabbar-item" style="text-align: right;margin-right: 26upx;margin-left: 42upx;" @click="clicktab(0)" :class="{'active':tabIndex===0}">
				<u-badge :type="type" max="99" :value="value" class="tabber-co"></u-badge>我的必修
			    <view class="border-bottom-one"></view>
			</view>
			<view class="tabbar-item" style="text-align: left;margin-left: 26upx;"  @click="clicktab(1)" :class="{'active':tabIndex===1}">
				我的选修<view class="border-bottom-two"></view>
			</view>
			<!-- <view class="tabbar-item" style="text-align: left;margin-left: 52upx;"  @click="clicktab(2)" :class="{'active':tabIndex===2}">
				成长路径<view class="border-bottom-two"></view>
			</view> -->
		</view>
		<!-- 筛选状态 -->
		<!-- <view class="addition" v-show="tabIndex===0">
			<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
				<text>筛选</text> 
				<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
			</view>
			<view class="sea-show" v-show="statusSelectShow">
				<view  v-for="(status,index) in statustList" :key="index" :class="[boeStatus === status.value? 'sea-active':'','sea-index']" @click="taskStatus(status.value)">
					{{status.name}}
				</view>
			</view>
		</view> -->
		<view class="addition" v-show="tabIndex===1">
			<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
				<text>筛选</text> 
				<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
			</view>
			<view class="sea-show" v-show="statusSelectShow">
				<view  v-for="(status,index) in autonomyStatustList" :key="index" :class="[Applistatus === status.value? 'sea-active':'','sea-index']"   @click="autonomyStatus(status.value)">
					{{status.name}}
				</view>
			</view>
		</view>
		<!-- 学习任务 -->
		<view class="listbox" v-show="tabIndex===0">
			
			<view class="sea-show" v-show="loadstatusSelecShow">
				<text v-for="(item,index) in statustList" :key="index"
					:class="[item.value === boeStatus?'sea-active':'','sea-index' ]"
					@click="loadchooseStatust(item.value)">{{item.name}}</text>
			</view>
			<view class="course content" v-for="(task,idx) in couresList" :key="idx" @click="loaddetail(task)">
				<view class="course-info">
					<view class="course-info-left">
						<course-image :course="task" width="256upx" height="148upx"></course-image>
						<view class="text">{{task.cmtask_type != 4 ?task.cmtask_type == 5?'专业力必修':'定制化学习':'领导力必修'}}</view>
						<view class="course-text">
							<view class="course-title  one-line-ellipsis" style="margin-bottom: auto"><text
									style="font-size: 32upx; font-weight: 500;" v-html="task.cmtask_name"></text>
							</view>
							<view class="task-bottom">
								<!-- <view class="course-aut">
									<author-info :avatar="task.avatar" :name="task.authorName" :info="task.orgInfo" :sex="task.sex"></author-info>
								</view> -->
								<view class="coures-staus">
									<text v-if="task.cmtask_user_status == 0">未开始</text>
									<text v-if="task.cmtask_user_status == 1">进行中</text>
									<text v-if="task.cmtask_user_status == 2">已完成</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 60upx;">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
		<!-- 自主学习 -->
		<view class="listbox" v-show="tabIndex===1">
			<view v-if="studyList.length == 0 && isOne" class="zan-wu">您还没有学习课程，快去学习吧～</view>
			<u-toast ref="articleToast"></u-toast>
			<view class="course content" v-for="(c, idxs) in studyList" :key="idxs" @click="toStudy(c)">
				<view class="course-info">
					<view class="course-info-left">
						<view style="position: relative;">
							<course-image class="uc-course-type" :course="c" width="265upx" height="154upx"></course-image>
							<text class="uc-course-type-text" v-if="c.courseType == 10">录播</text>
							<text class="uc-course-type-text" v-if="c.courseType == 20">录播</text>
							<text class="uc-course-type-text" v-if="c.courseType == 30">线下课</text>
							<text class="uc-course-type-text" v-if="c.courseType == 40" >学习项目</text>
						</view>
						<view class="course-text" style="justify-content: space-between;position: relative;">
							<view class="course-title  one-line-ellipsis" style="width: 90%;">
								<text style="font-size: 30upx; font-weight: bold;" v-html="$keywordActiveShow(c.courseName, autonomy.keyword)"></text>
							</view>
							<view class="coures-midd">
							</view>
							<view class="rowbtn" >
								<!-- <image @click.native.stop="removecour(c)" style="width: 100%;height: 100%;position: relative"
									src="../../static/images/icon/more.png" alt="">
								<view class="delcoures" v-show="c.delcour" @click.native.stop="rowbtn(c)">
									<u-icon style="line-height: 90upx;" name="trash" label="删除课程"></u-icon>
								</view> -->
							</view>
							<view class="coures-bottom coures-midd">
								<view v-if="c.teacherName" class="course-author">
									{{c.teacherName}}
								</view>
								<view class="coures-staus">
									<text v-html="displayWord(c)"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 用了display:none隐藏，后期不需要删除 -->
			<view style="margin-top: 60upx;">
				<uni-load-more :status="studyLoadStatus"></uni-load-more>
			</view>
		</view>
	<!-- 	<view class="learn" v-show="tabIndex===2" v-if="Object.keys(detailData).length">
			<view class="learn_header">
				<view class="learn_left">
					<text class="text">我的成长路径</text>
					<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
					<view class="up_content" v-show="upContent">
						<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</view>
						<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
					</view>
				</view>
				<view class="learn_right">
					<text class="text">什么是成长路径</text>
					<image @click="onLearnModal" class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="learn_body">
				<view class="body_job">
					<view class="name">{{detailData.growName || ''}}</view>
					<view class="job">
						<view class="text_name">{{detailData.organizationName || ''}}</view>
						<text> 学习状态：<text :style="{color: ['#FFD500','#9FFF84','#FFFFFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
					</view>
					<view class="plan_item">
						<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
						<text class="text" @click="planDown = true">共享文档</text>
						<view class="plan_down" v-show="planDown">
							<image @click="planDown = false" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
							<view class="header">
								共享文档
							</view>
							<view class="body">
								<view class="left">
									<image class="img" src="" mode=""></image>
									<text class="text">人工智能启蒙讲解讲义.pptx</text>
								</view>
								<view class="right">
									下载
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="body_item" v-if="detailData.remark">
					<view class="body_top">
						<image class="img" src="../../static/images/learnpath/explain.png" mode=""></image>
						<text class="text">说明</text>
					</view>
					<view class="body_down">
						<view class="text_ele">
						{{detailData.remark || ''}}
						</view>
					</view>
				</view>
				<view class="body_item">
					<view class="body_top">
						<image class="img" src="../../static/images/learnpath/plan.png" mode=""></image>
						<text class="text">学习进度</text>
					</view>
					<view class="body_plan">
						<view class="plan_left">
							<view class="left">
								<view style="margin-bottom: 24rpx;">总任务：</view>
								<view>当前任务：</view>
							</view>
							<view class="right">
								<view class="text" style="margin-bottom: 24rpx;">{{detailData.taskNum}}门</view>
								<view class="text">{{detailData.currentTaskName}}</view>
							</view>
						</view>
						<view class="plan_right">
							<view>总进度</view>
							<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
							<view class="line">
								<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
							</view>
							<view class="semi-circle-progress">
							  <view class="progress-bar">
								  <view class="item">
								  	<view class="pro">{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
									<view class="text">总进度</view>
								  </view>
							  </view>
							  <view class="pro_line" :style="{ '--progress': (100-Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="go_learn" @click="goLearn(detailData)">
					{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}
				</view>
			</view>
		</view> -->
	<!-- 	<view class="learn" v-show="tabIndex===2" v-else>
			<u-empty
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
					style="height: 75vh;"
			>
			</u-empty>
		</view> -->
		<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy"	ref="uModal" :asyncClose="true">
			您确定要重新学习吗？
		</u-modal>
		<u-modal :show="btnsShow" @confirm="del()" @cancel="closeBtns()" :showCancelButton="true" confirmText="删除" ref="uModal" content='您确认要删除此课程吗'></u-modal>
		<!-- <u-popup :show="btnsShow" @close="closeBtns">
			<view>
				<view @click="del()" class="big-button" style="color: #db0000;">删除</view>
				<view @click="closeBtns()" class="big-button">取消</view>
			</view> -->
		<!-- </u-popup> -->
		<u-overlay :show="overlayShow && isOneStady === 0">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="overlay-box">
					<view class="box-cen">
						<view @click="jupe(lastStudy)" class="course-left">
							<text v-if="lastStudy.courseType==10" class="course-type">录播</text>
							<text v-if="lastStudy.courseType==20" class="course-type">录播</text>
							<text v-if="lastStudy.courseType=='online-course'" class="course-type">录播</text>
							<text v-if="lastStudy.courseType=='face-course'" class="course-type">面授班</text>
							<text v-if="lastStudy.courseType=='project'" class="course-type">学习项目</text>
							<course-image :course="lastStudy" width="164upx" height="102upx"></course-image>
						</view>
						<view @click="jupe(lastStudy)" class="box-title">
							<text>您上次学习到：</text>
							<text class="title-name">{{lastStudy.courseName}}</text>
						</view>
						<text class="box-icon" @click="closeShow()">
							<u-icon name="close" @click="closeShow()" style="margin-left: 20rpx;"></u-icon>
						</text>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- <u-overlay :show="xuanShow">
			<view class="warp xuan">
				<view class="xuan-info">
					<view class="xuan-close">
						<u-icon name="close" @click="xuanClose()" class="xuan-icon"></u-icon>
					</view>
					<view class="xuan-box">
						<image style="width:325px;height: 407px;" src="/static/images/xuan-bg1.png"></image>
					</view>
					<view class="xuan-btn" @click="xuanClose()">
						<image style="width:160px;height: 17px;" src="/static/images/xuan-btn.png"></image>
					</view>
				</view>
			</view>
		</u-overlay> -->
		<u-modal :show="learnModal" :showConfirmButton="false" width="200px">
			<view class="item_modal">
				<view class="item_title">
					成长路径说明
				</view>
				<view class="item_text">
					本功能针对学员所在组织、岗位、职级自动匹配成长路径，完成本路径方可晋升
				</view>
				<view class="item_btn" @click="learnModal = false">
					我已阅读
				</view>
				<view class="item_check">
					<u-checkbox-group>
						<u-checkbox v-model="checked" :checked="isChecked" shape="square" label="下次进入不在弹窗" @change="checkedBox"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-modal>
		<u-popup :show="showSearch" mode="top">
			<view class="popup_item">
				<u-icon @click="showSearch = false" style="width: 30rpx;height: 30rpx;position: absolute;left: 20rpx;top: 40rpx;" name="arrow-left"></u-icon>
				<view class="searchView" style="margin-left: 70rpx;" v-show="tabIndex===0">
					<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
						placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="##F2F5F7">
					</u-search>
				</view>
				<view class="item">
					<view class="title">类型</view>
					<view class="list">
						<view :class="firstType == index? 'active_btn': ''" @click="activeItem(item)" class="btn" v-for="(item,index) in typeData" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">状态</view>
					<view class="list">
						<view :class="endType == index? 'active_btn': ''" @click="activeItemTwo(item)" class="btn" v-for="(item,index) in statusData" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="btn left" @click="showSearch = false">
						取消
					</view>
					<view class="btn right" @click="loadBoeData(true)">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import apicourseStudy from "../../api/modules/courseStudy.js"
	import apiCoursePortal from '@/api/modules/coursePortal.js'
	import apiBoeCourse from '@/api/boe/course.js';
	import apiManage from '@/api/manage/manage.js';
	import { formatDate } from '@/utils/tools.js';
	import apiUser from '@/api/system/user.js'
	import { mapGetters } from 'vuex'
	import { getList } from "@/api/modules/growth.js"
	export default {
		computed: {
			...mapGetters(['userInfo', 'isOneStady'])
		},
		data() {
			return {
				firstType: 0,
				endType: 0,
				typeListData: '',
				typeData: [
					{name: '全部',value: 1,data:''},
					{name: '领导力必修',value: 2,data:0},
					{name: '专业力必修',value: 3,data:2},
					{name: '定制化学习',value: 4,data:1},
					// {name: '通用力学习',value: 5},
				],
				statusData: [
					{name: '全部',value: 1},
					{name: '未开始',value: 2},
					{name: '进行中',value: 3},
					{name: '已完成',value: 4},
				],
				showSearch: false,
				detailData: {},
				planDown: false,
				upContent: false,
				checked: false,
				isChecked: false,
				learnModal: false,
				Applistatus:'',
				autonomyStatusShow: false,
				delData: {},
				btnsShow: false, // 我报名的删除弹出
				//xuanShow: false,
				boeStatus: '',
				authorInfo: {},
				lastStudy: {},
				overlayShow: false,
				isOne: true,//是否是第一次加载
				isSelect: 0,
				autonomy: { // 自主学习 筛选
					status: 0,
					type: '',
					keyword: ''
				},
				loadstatusSelecShow: false,
				loadstatus: '',
				loadstatusBtnName: '状态',
				hiskeyword: '',
				loadkeyword: '',
				learkeyword: '',
				formatDate,
				keyword: '',
				couresList: '',
				switch: '',
				hisswitch: '',
				classType: '',
				hisclassType: '',
				historyList: '',
				studyList: [], 
				studyPageIndex:1,
				studyPageSize:10,
				studyPages:1,
				studyCount:0,
				studyLoadStatus:'more',
				studyData: [], //自主学习备份数据
				type: "error",
				value: 0,
				tabIndex: 0, //当前tab索引
				loadStatus: 'more', //more,loading,noMore
				studyResetShow: false,
				statusBtnName: '状态',
				statusSelectShow: false,
				statusSelecShow: false,
				loadstatus: '',
				statustList: [
					{name: '全部',value: ''},
					{name: '未开始',value: 0},
					{name: '进行中',value: 1},
					{name: '已完成',value: 2}
				],
				autonomyStatustList: [
					{name: '全部',value: ''},
					{name: '未开始',value: 0},
					{name: '进行中',value: 1},
					{name: '已完成',value: 2}
				],
				windowHeight: 0,
				taskPageIndex: 1,
				taskPageSize: 10,
				taskHasMore: true,
				taskCount: 0,
			}
		},
		onShow() {
			// this.tabIndex = this.studyTab;
			//this.getLearning()
			//this.history()
			//this.loadBoeData();
			//删除cookies
			//document.cookie = "mytest=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
		},
		onLoad() {
			let $this = this;
			uni.getSystemInfo({
				success: (res) => {
					$this.windowHeight = res.windowHeight;
				}
			});
			uni.onWindowResize((res) => {
				if (res.size.windowHeight < $this.windowHeight) {
					// $this.tooter = false;
					uni.hideTabBar()
				} else {
					uni.showTabBar()
					// $this.tooter = true;
				}
			})
		},
		mounted() {
		 window.addEventListener('click',this.reSetList);
		 apiManage.getTaskNum().then(res => {
			 if(res.code==200){
				this.value=res.data.todoTaskCounts;
				if(this.value>0){
					this.loadBoeData(true);
				}else{
					this.tabIndex = 1;//切换到我报名的
					this.getLearning(true);
				}
			 }
		  });
		  // getList(this.userInfo.aid).then(res=>{
		  // 	if(res.code == 200 ){
		  // 		this.detailData = res.data
				// if(Object.keys(this.detailData).length){
				// 	if(res.data.studyStatus == 1){
				// 		this.detailData.studyStatus = 2
				// 	}else if(res.data.studyStatus == 2){
				// 		this.detailData.studyStatus = 1
				// 	}
				// this.detailData.cmtask_name = this.detailData.growName
				// this.detailData.cmtask_user_status = this.detailData.studyStatus
				// }
		  // 	}
		  // })
		},
		onPullDownRefresh() {
			this.onReachBottom();
		},
		onReachBottom() {
			this.loadStatus = 'loading'; //more,loading,noMore
			let $this = this;
			if (this.tabIndex == 0) {
				if (this.taskHasMore) {
					this.taskPageIndex++;
					this.loadBoeData(false);
				}
			}else if(this.tabIndex == 1){
				if(this.studyPageIndex<this.studyPages){
					this.studyPageIndex++;
					this.getLearning(false);
				}else{
					
				}
			}
			setTimeout(function() {
				$this.loadStatus = 'noMore';
			}, 500);
		},
		watch: {
			checked(){
				this.outLearnModal()
			}
		},
		methods: {
			activeItem(item){
				this.firstType = item.value - 1
				this.typeListData = item.data
			},
			activeItemTwo(item){
				this.endType = item.value - 1
				this.boeStatus = item.value - 2
			},
			goLearn() {
				uni.navigateTo({
					url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName + '&isAllPath=' + true
					
				});
			},
			contentOn() {
				this.upContent = true
			},
			contentOut() {
				this.upContent = false
			},
			onLearnModal() {
				this.learnModal = true
				this.isChecked = localStorage.getItem("checkedTrue") === "false"
			},
			checkedBox(value){
				this.checked = value
			},
			outLearnModal() {
				// this.learnModal = false
				localStorage.setItem("checkedTrue",!this.checked)
			},
			reSetList() {
				this.studyList.forEach(item=>{
					item.delcour = false;
				})
			},
			removecour(item){
				this.reSetList();
				item.delcour = !item.delcour
			},
			rowbtn(row) {
				this.delData = row;
				this.btnsShow = true;
			},
			del() {
				if (this.delData.source==1) {
					apiBoeCourse.newDelLearning(this.delData.courseId).then(res => {
						if (res.status == 200) {
							this.$refs.articleToast.show({
								message: '删除成功',
								type: 'success'
							});
							var delIndex=-1;
							this.studyList.forEach((item, index) => {
								if (item.id === this.delData.id) {
									delIndex=index;
								}
							})
							if(delIndex>-1){
								this.studyList.splice(delIndex, 1);
							}
							
						} else {
							this.$refs.articleToast.show({
								message: '删除失败，请稍后再试',
								type: 'error'
							});
						}
					});
				} else if(this.delData.source==2)  {
					apicourseStudy.deleteSignUp(this.delData.id, this.delData.courseId).then(res => {
						this.btnsShow = false;
						if (res.status = 200) {
							this.$refs.articleToast.show({
								message: '删除成功',
								type: 'success'
							});
							var delIndex=-1;
							this.studyList.forEach((item, index) => {
								if (item.id === this.delData.id) {
									delIndex=index;
								}
							})
							if(delIndex>-1){
								this.studyList.splice(delIndex, 1);
							}
						} else {
							this.$refs.articleToast.show({
								message: '删除失败，请稍后再试',
								type: 'error'
							});
						}
					})
				}else if(this.delData.source==3){
					var reqData={ pid:item.courseId, student:item.accountId  }
					apiManage.userDeleteStudy(reqData).then(res=>{
					   if(res.code==200){
						   this.$refs.articleToast.show({message: '删除成功',type: 'success'});
							var delIndex=-1;
							this.studyList.forEach((item, index) => {
								if (item.id === this.delData.id) {
									delIndex=index;
								}
							})
							if(delIndex>-1){
								this.studyList.splice(delIndex, 1);
							}
					   }else{
					     this.$refs.articleToast.show({message: '删除失败，请稍后再试',type: 'error'});
					   }
					})
				}else{
					console.log('不支持的数据来源')
				}

			},

			// showOneStady() {
			// 	if (this.isOneStady === 0) {
			// 		this.getLastStudy();
			// 	}
			// },
			// xuanClose() {
			// 	this.xuanShow = false;
			// 	this.showOneStady();
			// },
			closeShow() {
				this.overlayShow = false;
				this.$store.dispatch('SetIdentity', 1);
			},
			jupe(lastStudy) {
				if (isNaN(lastStudy.courseType)) {
					uni.navigateTo({
						url: '/pages/study/studydetail?id=' + lastStudy.courseId + '&type=' + lastStudy.courseType
					});
				} else {
					uni.navigateTo({
						url: '/pages/resource/courseDetail?id=' + lastStudy.courseId
					});
				}
			},
			getLastStudy() {
				apicourseStudy.lastStudy().then(res => {
					if (res.status === 200) {
						this.lastStudy = res.result;
						if (res.result != '' && res.result.courseId) {
							this.overlayShow = true;
						}
					} else {
						this.$message.error(res.message);
					}
				})
			},
			autonomyStatus(num) {
				this.Applistatus = num;
				this.autonomy.status = num;
				this.statusSelectShow = false;
				this.getLearning(true);
			},
			taskStatus(num) {
				this.boeStatus = num;
				this.statusSelectShow = false;
				this.loadBoeData(true);
			},
			closeBtns() {
				this.btnsShow = false;
			},
			searchData() {
				let list = this.studyData;
				let type;
				let wei;
				if (this.autonomy.type == 'online-course') {
					type = 20;
					wei = 10;
				}
				if (this.autonomy.type === 0 && this.autonomy.status === 0 && this.autonomy.keyword === '') {
					this.studyList = this.studyData;
					return;
				}
				if (this.autonomy.type !== '') {
					list = list.filter(item => {
						if (item.courseType === this.autonomy.type || type === 20 || wei === 10) {
							return item;
						}
					});
				}
				if (this.autonomy.status !== 0) {
					list = list.filter(item => {
						if (item.status == this.autonomy.status) {
							return item;
						}
					});
				}
				if (this.autonomy.keyword !== '') {
					list = list.filter(item => {
						return item.courseName.toLowerCase()
							.indexOf(this.autonomy.keyword.toLowerCase()) > -1;
					});
				}
				this.studyList = list;
			},
			// 学习任务跳转详情 
			loaddetail(task) {
				// if('growId' in task){
				// 	uni.navigateTo({
				// 		url:'/pages/learnPath/growPage'
				// 	})
				// 	return
				// }
				// uni.navigateTo({
				// 	url: '/pages/study/loaddetail?id=' + task.cmtask_id
				// });
				let taskUrl='';
				if(task.cmtask_type==1){ //学习路径图
				   let params=encodeURIComponent('routerId='+task.cmtask_id);
				   if(this.$config.context=='/mobile-release'){
					   taskUrl='/pages/forward?to=/student-h5-release/pathdetails&params='+params;
				   }else{
					   taskUrl='/pages/forward?to=/student-h5/pathdetails&params='+params;
				   }
				  
				}else if(task.cmtask_type==2){ //学习项目
				   let params=encodeURIComponent('projectId='+task.cmtask_id);
				   if(this.$config.context=='/mobile-release'){
						taskUrl='/pages/forward?to=/student-h5-release/projectdetails&params='+params;
				   }else{
					   taskUrl='/pages/forward?to=/student-h5/projectdetails&params='+params;
				   }
				}else if(task.cmtask_type==3){
				   taskUrl='/pages/study/loaddetail?id=' + task.cmtask_id
				}else if(task.cmtask_type==4){
					let params=encodeURIComponent('projectId='+task.cmtask_id);
					if(this.$config.context=='/mobile-release'){
						taskUrl='/pages/forward?to=/student-h5-release/projectdetails&params='+params;
					}else{
						taskUrl='/pages/forward?to=/student-h5/projectdetails&params='+params;
					}
				}else if(task.cmtask_type==5){
					taskUrl='/pages/learnPath/growPage'
				}
				uni.navigateTo({
					url: taskUrl
				});
			},
			
			loadBoeData(flag) {
				if(this.boeStatus == -1){
					this.boeStatus = ''
				}
				this.showSearch = false
				if (flag) {
					this.taskPageIndex = 1; //回到首页
					this.couresList = [];
				}
				this.loadStatus='loading';
				let params = {
					pageNo: this.taskPageIndex,
					pageSize: this.taskPageSize,
					cmtask_user_status: this.boeStatus,
					cmtask_name: this.loadkeyword,
					type: this.typeListData
				}
				if (this.cmtask_name) {
					params.cmtask_name = this.keyWord;
				}
				// if(this.typeListData == 2){
				// 	if(Object.keys(this.detailData).length){
				// 		if(this.boeStatus === '' || this.boeStatus == this.detailData.studyStatus){
				// 			this.couresList.push(this.detailData)
				// 		}
				// 	}
				// 	this.taskHasMore = true;
				// 	this.loadStatus='noMore';	
				// 	return
				// }
				
				apiManage.userTaskList(params).then(res => {
					if(res.code==200){
						res.data.records.forEach(r=>{
							//r.cmtask_imgurl='/upload/static/images/course/courseDefault.png';
							if (r.cmtask_imgurl && r.cmtask_imgurl.startsWith('/upload')) {
							    r.cmtask_imgurl = this.$config.fileUrl + r.cmtask_imgurl.substring(7);
							}
							// console.log('aaa='+r.cmtask_imgurl);
						})
						this.taskCount = parseInt(res.data.total);
						this.couresList.push(...res.data.records);
						// if(Object.keys(this.detailData).length&&this.detailData.growName.includes(this.loadkeyword)&&(this.boeStatus===''||this.detailData.studyStatus==this.boeStatus)){
						// 	this.couresList.unshift(this.detailData)
						// }
						if (this.taskCount > this.taskPageIndex * this.taskPageSize) {
							this.taskHasMore = true;
							this.loadStatus='more';
						} else {
							this.taskHasMore = false;
							this.loadStatus='noMore';
						}
						if(this.couresList.length == 0){
							this.taskHasMore = false;
							this.loadStatus='noMore';
						}
						//检查是否是第一次加载，这里的控制已经移到 初次加载中了
						// if (this.isOne && res.data.records.length == 0) {
						// 	this.tabIndex = 1;
						// }
						this.isOne = false;
					}else{
						uni.showToast({
							title: '获取任务失败',
							icon: 'none'
						});
						this.taskHasMore = false;
						this.loadStatus='noMore';
					}
					
				
				}).catch(err => {
				
				})
	
			},
			loadUserInfos(list, userIds) {
				const noReapetIds = [...new Set(userIds)];
				apiUser.getByIds(noReapetIds).then(res => {
					if (res.status == 200) {
						list.forEach(item => {
							res.result.some(author => {
								if (author.aid == item.sysCreateAid) {
									let { aid, avatar, name, orgInfo, code ,sex} = author;
									item.name = name;
									item.aid = aid;
									item.orgInfo = orgInfo;
									item.code = code;
									item.avatar = avatar;
									item.sex =sex;
									return true;
								}
								return false;
							});
						});
					} else {
						uni.showToast({
							title: '获取数据失败',
							icon: 'none'
						});
					}
				
					setTimeout(function() {
						uni.hideLoading();
					}, 100);
				});
			},
			message() {
				uni.navigateTo({
					url: './message'
				})
			},
			clicktab(idx) {
				this.tabIndex = idx;
				if (this.tabIndex == 1 && this.studyList.length == 0) {
					this.getLearning()
				} else if (this.tabIndex == 2) {
					getList(this.userInfo.aid).then(res=>{
						if(res.code == 200 ){
							this.detailData = res.data
							if(Object.keys(this.detailData).length&&localStorage.getItem("checkedTrue")!=null){
								this.learnModal = localStorage.getItem("checkedTrue") === "true"
								this.isChecked = localStorage.getItem("checkedTrue") === "false"
							}else{
								this.learnModal = true
							}
						}
					})
					//this.history()
				} else if (this.tabIndex == 0 && this.couresList.length == 0) {
					this.loadBoeData()
				}
			},
			loadCouserTeacher(list, ids) { //临时解决方案，单独的查询课程教师
				let that = this;
				//先查课程关联教师iD
				apiCoursePortal.getTeacherByCourseIDs(ids).then(cres => {
					if (cres.status == 200) {
						let userIds = [];
						list.forEach((item, index) => {
							cres.result.some(courseTeahcer => {
								if (courseTeahcer.courseId == item.courseId) {
									if (courseTeahcer.teacherIds) {
										// userIds.push(courseTeahcer.teacherIds[0]);                  
										// item.authorInfo.aid=courseTeahcer.teacherIds[0];
										item.teacherName = courseTeahcer.names[0];
									}
									return true;
								} else {
									return false;
								}
							})
						});
						// that.loadCourseAuthorInfo(list,userIds);
					}
				})
			},
			async getLearning(flag) {
				if(flag){
					this.studyPageIndex=1;
					this.studyList=[];
				}
				this.studyLoadStatus='loading'
				uni.showLoading({title: '加载中...' });
		
				let lear = {
					pageIndex: this.studyPageIndex, //第几页
					pageSize: this.studyPageSize,
					courseName: this.learkeyword,
					status: this.Applistatus,
				}
				await apicourseStudy.myStudyListFromES(lear).then(res=>{
					if (res.status == 200) {
						let courseIds = [];
						res.result.list.forEach(item=>{
							item.delcour = false;
							item.teachersName = '';
							courseIds.push(item.courseId);
						})
						this.loadCouserTeacher(res.result.list, courseIds);
						this.studyCount=res.result.count;
						this.studyPages=res.result.totalPages;
						if(this.studyPageIndex<this.studyPages){
							this.studyLoadStatus = 'more';
						}else{
							this.studyLoadStatus = 'noMore';
						}
						this.studyList.push(...res.result.list);
						
					}else{
						this.loadStatus = 'noMore';
						console.log('查询学习的课程错误'+res.message);
					}
					
				})
				uni.hideLoading();
				
			},
			filterConversion(data) {
				let list = [];
				data.forEach((item, index) => {
					let status = null;
					if (item.status == '0') {
						status = 1;
					} else if (item.status == '1') {
						status = 2;
					} else if (item.status == '2') {
						status = 9;
					}
					let num = item.completeProgress.replace('%', "");
					item.completeProgress = Number(num);
					list.push({
						courseImage: item.cover[0].url,
						courseName: item.title,
						teachersName: '',
						courseType: item.type,
						id: item.id,
						isOld: true,
						progress: item.completeProgress,
						status: status,
						kid:item.ms_timeline_kid
					})
				})
				return list;

			},
			cancelResetStudy() {
				this.studyResetShow = false;
			},
			resetStudy() {
				this.studyResetShow = false;
			},
			toStudy(citem) {
				if (citem.source==1) {
					uni.navigateTo({
						url: '/pages/study/studydetail?id=' + citem.id + '&type=' + citem.courseType
					});
				}else if (citem.source==2){
					uni.navigateTo({
						url: '/pages/study/courseStudy?studyId=' + citem.id + '&id=' + citem.courseId
					})
				}else if (citem.source==3){
					let params=encodeURIComponent('courseId='+citem.courseId);
					uni.navigateTo({
						url:'/pages/forward?to=/manageApi/stu/project/redirectDetail&params='+params
					});
				}else{
					console.log('不支持的数据来源 '+citem.source)
				}
			},
			displayWord(data) {
				if (data.progress == 0) {
					return '未开始'
				} else if (data.progress == 100) {
					return '已完成'
				} else {
					return '进行中'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-modal{
		width: 288px !important;
		border-radius: 28upx;
	}
	/deep/ .u-modal__content{
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
		padding: 33px 25px 33px 25px;
		background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
	}
	.popup_item{
		padding-top: 20rpx;
		.item{
			margin-top: 60rpx;
			.title{
				margin-bottom: 30rpx;
				margin-left: 30rpx;
			}
			.list{
				display: flex;
				margin: 0 20rpx 0 20rpx ;
				justify-content: space-between;
				align-items: center;
				.btn{
					width: 130rpx;
					height: 60rpx;
					font-size: 10px;
					text-align: center;
					line-height: 60rpx;
					border-radius: 5px;
					background-color: #F9F9F9;
					color: #A7ACBA;
				}
				.active_btn{
					background-color: #3162FA;
					color: #ffffff;
				}
			}
		}
		.footer{
			width: 100%;
			margin-top: 100rpx;
			display: flex;
			.btn{
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
			.left{
				color: #000000;
				background-color: #fff;
				border-top: 1px solid #A7ACBA;
			}
			.right{
				color: #ffffff;
				background-color: #3161FA;
				border-top: 1px solid #3161FA;
			}
		}
	}
	.item_modal{
		
		.item_title{
			margin: 0 auto;
			margin-top: -22rpx;
			height: 50rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			margin-bottom: 38rpx;
		}
		.item_text{
			height: 96rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 40rpx;
		}
		.item_btn{
			width: 220rpx;
			height: 68rpx;
			background: linear-gradient( 90deg, #5390FD 0%, #3162FA 100%);
			border-radius: 8rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 68rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 56rpx;
		}
		.item_check{
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 28rpx;
			margin-bottom: -14rpx;
		}
	}
	.learn{
		height: 80vh;
		.line{
			width: 100%;
			height: 20rpx;
			background: #F9F9F9;
		}
		.learn_header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			.learn_left{
				position: relative;
				margin-left: 36rpx;
				.text{
					width: 192rpx;
					height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: left;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.image{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
				.up_content{
					width: 712rpx;
					height: 264rpx;
					background: url("../../static/images/learnpath/downImg.png") no-repeat;
					background-size: 100%;
					position: absolute;
					top: 20rpx;
					left: -50rpx;
					z-index: 600;
					.text{
						width: 488rpx;
						height: 120rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 40rpx;
						margin: 74rpx 152rpx 70rpx 72rpx;
						overflow: hidden;
						word-break:break-all;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
					}
					.down{
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						right: 52rpx;
						top: 64rpx;
					}
				}
			}
			.learn_right{
				width: 300rpx;
				height: 54rpx;
				background: #387DF7;
				box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(56,125,247,0.34);
				border-radius: 40rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.text{
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.image{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}
		}
		.learn_body{
			.body_job{
				background: linear-gradient( 180deg, #3161FA 0%, #5195FF 100%);
				border-radius: 8rpx;
				border: 2rpx solid #E4EDFE;
				margin: 24rpx 28rpx 40rpx 30rpx;
				padding: 40rpx 28rpx 32rpx 40rpx;
				position: relative;
				.name{
					// height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.job{
					// height: 40rpx;
					flex-wrap: wrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					display: flex;
					justify-content: space-between;
					.text_name{
						width: 360rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.plan_item{
					position: absolute;
					top: 216rpx;
					right: 0;
					.image{
						width: 42rpx;
						height: 36rpx;
						margin-right: 20rpx;
						vertical-align: middle;
					}
					.text{
						height: 44rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #409EFF;
						line-height: 44rpx;
						vertical-align: middle;
					}
					.plan_down{
						position: absolute;
						z-index: 900;
						right: -44rpx;
						top: 26rpx;
						width: 780rpx;
						max-height: 756rpx;
						background: url("../../static/images/learnpath/downppt.png") no-repeat;
						background-size: 100%;
						margin-bottom: 36rpx;
						padding-bottom: 36rpx;
						.down{
							width: 52rpx;
							height: 52rpx;
							position: absolute;
							top: 60rpx;
							right: 66rpx;
						}
						.header{
							margin: 0 auto;
							margin-top: 80rpx;
							width: 144rpx;
							height: 56rpx;
							font-weight: 600;
							font-size: 36rpx;
							color: #202020;
							line-height: 56rpx;
							margin-bottom: 22rpx;
						}
						.body{
							display: flex;
							justify-content: space-between;
							.left{
								margin-left: 80rpx;
								.img{
									width: 40rpx;
									height: 40rpx;
									margin-right: 24rpx;
								}
								.text{
									height: 40rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #666666;
									line-height: 40rpx;
								}
							}
							.right{
								text-align: center;
								width: 140rpx;
								height: 56rpx;
								line-height: 56rpx;
								border-radius: 8rpx;
								border: 2rpx solid #387DF7;
								font-weight: 400;
								font-size: 28rpx;
								color: #387DF7;
								margin-right: 80rpx;
							}
						}
					}
				}
			}
		}
		.body_item{
			margin-bottom: 30rpx;
			margin-left: 34rpx;
			.body_top{
				.img{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				.text{
					height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					vertical-align: middle;
				}
			}
			.body_down{
				margin: 24rpx 30rpx 30rpx 28rpx;
				padding: 22rpx 38rpx 26rpx 40rpx;
				max-height: 328rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: left;
				.text_ele{
					overflow: hidden;
					word-break:break-all;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 6;
				}
			}
			.body_plan{
				margin: 32rpx 30rpx 30rpx 28rpx;
				height: 228rpx;
				background: linear-gradient( 186deg, #E5EDFB 0%, #F7F9FC 100%);
				border-radius: 8rpx;
				display: flex;
				.plan_left{
					margin: 62rpx 70rpx 60rpx 48rpx;
					display: flex;
					.left{
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #848593;
						line-height: 40rpx;
						margin-right: 12rpx;
					}
					.right{
						height: 42rpx;
						font-weight: 600;
						font-size: 30rpx;
						color: #3B3C4A;
						line-height: 42rpx;
						.text{
							width: 122rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							
						}
					}
				}
				.plan_right{
					margin-right: -50px;
					.semi-circle-progress {
					    width: 340rpx;
					    height: 120rpx;
						position: relative;
					    overflow: hidden;
					}
					.progress-bar{
						width: 50%;
						height: 150%;
						border-radius: 50%;
						border: 24rpx solid #DFDFE4 ;
						display: flex;
						justify-content: center;
						.item{
							margin-top: 16rpx;
							text-align: center;
							.pro{
								font-weight: 600;
								font-size: 36rpx;
								color: #2E72F2;
							}
							.text{
								font-weight: 400;
								font-size: 28rpx;
								color: #A7ACBA;
							}
						}
					}
					.pro_line{
						width: 50%;
						height: 150%;
						border-radius: 50%;
						border: 24rpx solid #2E72F2;
						position: absolute;
						top: 0;
						clip-path: inset(0 0 0 var(--progress));
						// clip-path: inset(0 0 0 50%);
						transform: rotate(180deg);
					}
					// display: flex;
					// justify-content: center;
					// align-items: center;
					    margin-top: 46rpx;
					.line{
						width: 184rpx;
						height: 1rpx;
					}
				}
			}
		}
		.go_learn{
			width: 472rpx;
			height: 96rpx;
			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin: 0 auto;
			line-height: 96rpx;
			text-align: center;
			margin-bottom: 22rpx;
		}
	}
	.delcoures{
		position: absolute;
		width: 180upx;
		top: 40upx;
		right: 0;
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.08);
		border-radius: 8upx;
		z-index: 77;
		padding: 30upx 30upx;
		color: #333333;
	}
	.addition {
		position: absolute;
		right: 10upx;
		top: 136upx;
		.textbtn {
			display: flex;
			width: 108upx;
			color: #4f4f4f;
			font-size: 28upx;
		}
		.sea-show {
			width: 130upx;
			position: absolute;
			top: 80upx;
			right: 0;
			background: #FFFFFF;
			box-shadow: 0px 2upx 8upx 4upx rgba(0,0,0,0.07);
			border-radius: 12upx;
			padding: 20upx 60upx;
			z-index: 99;
			.sea-active{
				color: #387DF7 !important;
			}
			.sea-index{
				font-size: 28upx;
				color: #666666;
				line-height: 60upx;
				text-align: center;
			}
			.sea-index:last-child{
				margin-right: 0;
			}
			
		}
	}
	.listbox-top {
		height: 92upx;
		padding-top: 28upx;
		background: #fff;
		.top-ten {
			// margin-top: 20upx;
			margin-left: 24upx;
			text-align: center;
		}
	}
	.searchView {
		position: relative;
		margin-left: 32upx;
		line-height: 62upx;
		height: 72upx;
		margin-right: 110upx;
		border-radius: 76upx;
		display: flex;
		background-color: #F2F5F7;
		::v-deep .u-search {
			width: 195px;
			border-radius: 76upx !important;
		}
		.textbtns{
			width: 146rpx;
			position: absolute;
			right: -172rpx;
			top: 4rpx;
			color: #ffffff;
			background-color: #3162FA;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.course-aut{
		font-size: 24upx;
		color: #333333;
	}
	.task-bottom{
		display: flex;
	}
	
	.coures-staus {
		flex: 1;
		font-size: 28upx;
		color: #777980;
	}

	.big-button {
		text-align: center;
		line-height: 80upx;
		border-top: 1px solid #ebebeb;
	}

	.coures-midd {
		position: relative;
		display: flex;

		.course-author {
			margin-right: 30upx;
			font-size: 28upx;
		}

		.coures-button {
			flex: 1;

			.toStudyText {
				position: absolute;
				right: 0;
				bottom: 0;
				// top: 28px;
				padding: 6px 14px;

				background-color: #EEEEEE;
				border-radius: 40px;
			}

		}

		.course-titles {

			font-weight: bold;
			font-size: 32upx;
			color: #343434;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 20upx;
			// display: -webkit-box;
			// white-space:pre-wrap;
			// overflow: hidden;
			// text-overflow:ellipsis;
			// -webkit-box-orient: vertical;
			// -webkit-line-clamp: 1;
			// box-sizing: border-box;
		}
	}

	// .xuan {
	// 	width: 325px;
	// 	margin: 0px auto;
	// 	padding-top: 130px;

	// 	.xuan-info {
	// 		height: 480px;
	// 		background: #99beff;
	// 		position: relative;

	// 		.xuan-close {
	// 			position: absolute;
	// 			right: 10px;
	// 			top: 5px;
	// 			z-index: 19;
	// 		}

	// 		.xuan-box {
	// 			width: 325px;
	// 			height: 407px;
	// 		}

	// 		.xuan-btn {
	// 			margin-top: 10px;
	// 			padding-left: 30px;
	// 			width: 100%;
	// 			height: 40px;
	// 		}
	// 	}
	// }

	.sea-show {
		padding: 20upx 30upx 10upx 30upx;

		.sea-active {
			color: #679cfc;
		}
		.sea-index {
			font-size: 26rpx;
			// margin-right: 16rpx;
			background-color: #fff;
		}
	}

	.courseimage {
		course-image {
			border-radius: 8rpx;
		}
	}

	.uni-progress-bar {
		border-radius: 5upx;
	}

	.Micro {
		width: 70rpx;
		height: 41rpx;
		margin-right: 8rpx;
		text-align: center;
		background-color: #588afc;
		color: #fff;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 41rpx;
	}

	.Recording {
		width: 70rpx;
		height: 41rpx;
		margin-right: 8rpx;
		text-align: center;
		background-color: #ffb30f;
		color: #fff;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 41rpx;
	}

	.uc-course-type3 {
		width: 70rpx;
		height: 41rpx;
		margin-right: 8rpx;
		text-align: center;
		background-color: #08a890;
		color: #fff;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 41rpx;
	}

	.uc-course-type4 {
		width: 110rpx;
		height: 41rpx;
		margin-right: 8rpx;
		text-align: center;
		background-color: #75aefe;
		color: #fff;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 41rpx;
	}

	/deep/ .course-left {
		// width: 262upx;
		// height: 147upx;
		// width: 209upx;
		// height: 60px;
		// margin-top: 10upx;
		position: relative;

		uni-image {
			border-radius: 8px;
		}

		.course-type {
			position: absolute;
			bottom: 8px;
			right: 0px;
			text-align: center;
			line-height: 15px;
			background-color: #7f7f7f;
			font-size: 10px;
			opacity: 0.7;
			color: #FFFFFF;
			z-index: 88;
			padding: 1px 5px;
			border-radius: 10px 0px 0px 10px;
		}
	}

	.overlay-box {
		position: fixed !important;
		// height: 270upx;
		// width: 690upx;
		width: 718upx;
		// margin: auto 30upx;
		// margin: 0 auto;
		left: 50%;
		transform: translate(-50%);
		// width: 100%;
		background: #ffffff;
		border-radius: 20upx;
		// margin-top: 124%;
		bottom: 120upx;
		padding: 30upx 35upx;
		box-sizing: border-box;

		.box-title {
			margin-left: 20upx;

			.title-name {
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
			}

			uni-text {
				color: #343434;
				font-size: 32upx;
				font-weight: 600;

				&:last-of-type {
					color: #616161;
					font-size: 26upx;
					font-weight: 400;
					margin-bottom: 6upx;
				}
			}

			// text-align: center;

			// .box-icon {
			// 	// float: right;
			// 	color: #eee;
			// }
		}

		.box-cen {
			// width:209upx;
			// height:118upx;
			display: flex;

			// margin-top: 43upx;
			.box-title {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.box-icon {
				width: 30px;
				height: 30px;
				text-align: right;
				margin-left: auto;
				//padding: 10rpx;
			}
		}

		.cen-title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}

	.zan-wu {
		text-align: center;
		color: #666666;
	}

	.one-line-ellipsis {
		word-break: break-all;
		display: -webkit-box;
		// white-space:pre-wrap;
		overflow: hidden;
		// text-overflow:ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		box-sizing: border-box;
	}

	.tabbar {
		height: 50px;
		line-height: 50px;
		display: flex;
		justify-content: center;
		color: #666;
        font-size: 32upx;
		.tabbar-item {
			// flex: 1;
			position: relative;
			.border-bottom-one{
				width: 120upx;
				position: absolute;
				right: 28upx;
				height: 8upx;
				background: #387DF7;
				border-radius: 8upx;
				display: none;
			}
			.border-bottom-two{
				width: 120upx;
				position: absolute;
				left: 22upx;
				height: 8upx;
				background: #387DF7;
				border-radius: 8upx;
				display: none;
			}
		}
		.tabber-co {
			position: absolute;
			right: -30upx;
			margin-top: 20upx;
		}
		.active {
			color: #387DF7;
			font-size: 44upx;
			font-weight: 500;
			.border-bottom-two{
				display: block;
			}
			.border-bottom-one{
				display: block;
			}
		}
	}
	.listbox {
		background-color: #F9f9f9;
		.course-info-text {
			padding: 15upx;
			margin-bottom: 15upx;

			.isSelect {
				margin-right: 15upx;
				color: #fff;
				padding: 10upx;
				background: #75aefe;
				border: 1upx solid #669bfc;
				font-size: 14upx;
			}

			.info-text {
				margin-right: 15upx;
				border: 1upx solid #ccc;
				font-size: 14upx;
				padding: 10upx;
				background-color: #fff;
			}
		}

		
	}

	.content {
		padding: 20upx 30upx;
		margin-bottom: 10px;
		border-radius: 7upx;
	}

	.rowbtn {
		width: 30upx;
		height: 30upx;
		position: absolute;
		top: 0;
		right:-10upx;
		// margin-top: 10upx;
		// margin-right: 25rpx;
	}

	.coures-bottom {
		display: flex;




	}


	.course {

		// padding: 40upx 30upx;
		.course-title {
			font-weight: bold;
			font-size: 32upx;

			.title-text {
				color: #000000;
			}
		}



		.course-info {

			// display: flex;
			// justify-content: space-between;


			/deep/ .course-info-left {
				position: relative;
				display: flex;
				// line-height: 40upx;
				margin-top: 5px;
				align-items: center;
				.text{
					position: absolute;
					bottom: 10px;
					left: 0;
					text-align: center;
					line-height: 15px;
					background-color: #7f7f7f;
					font-size: 10px;
					opacity: 0.7;
					color: #FFFFFF;
					z-index: 88;
					padding: 1px 5px;
					border-radius: 0px 10px 10px 0px;
				}
				uni-image {
					// width: 152upx;
					// height: 88upx;
					border-radius: 16upx;
				}

				.uc-course-type-text {
					position: absolute;
					bottom: 10px;
					right: 0;
					text-align: center;
					line-height: 15px;
					background-color: #7f7f7f;
					font-size: 10px;
					opacity: 0.7;
					color: #FFFFFF;
					z-index: 88;
					padding: 1px 5px;
					border-radius: 10px 0px 0px 10px;
				}

				.course-text {
					display: flex;
					height: 140upx;
					margin-top: -6px;
					flex-direction: column;
					justify-content: flex-end;
					
					margin-left: 10px;
					margin-right: 1px;
					width: 100%;
					position: relative;
					// margin-top: 10upx;

					.course-btn {
						// margin-top: 30upx;
						justify-content: space-between;
						display: flex;
						margin-bottom: 6upx;

						.btn-wz {
							font-size: 24upx;
							color: #bfbfbf;
						}

						.btn-bai {
							font-weight: 600;
							font-size: 36upx;
							color: #2a2c31;
						}
					}
				}
			}
		}
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
	}

	/deep/.u-line-progress__background {
		height: 0px;
	}

	.textbtn {
		background-color: #ffffff;
		padding: 16upx 20upx;
		color: #666;
		border-radius: 8upx;
		font-size: 28upx;
	}
</style>
