<template>
	<view class="course-card">
		<view class="course-item">
			<view style="width:287rpx;">
				<view class="course-name">
					{{currentCourse?currentCourse.CourseName:'暂无课程'}}
				</view>
				<view v-if="currentCourse">
					<van-progress :percentage="(parseFloat(currentCourse.CompleteNum)/parseFloat(currentCourse.TotalClassNum))*100" :show-pivot="false" track-color="#EFEFEF" color="#282828"
						stroke-width="5" />
					<view class="course-progress">
						上课进度 {{currentCourse.CompleteNum}}/{{currentCourse.TotalClassNum}}
					</view>
					<view class="course-opera">
						<van-button @click="exchangeItemHandler" class-prefix="iconfont" icon=" icon-qiehuan1" round type="default" size="mini"
							custom-style="color:#E23B4A;font-size: 24rpx;padding-left:10rpx;padding-right:10px;">切换课程
					
						</van-button>
					</view>
				</view>
			</view>
			<image class="illustration"
				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902313000_814.png"
				mode="widthFix"></image>

		</view>
		<image class="end"
			src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_413.png"
			mode="widthFix"></image>
			
		<van-popup
		  :show="showItems"
		  round
		  position="bottom"
		  @click-overlay="hideExchangeBoxHandler(null)"
		  custom-style="height: 75%"
		>
			<view class="exchange-items">
				<view class="title-box">
					<text class="main-title">课程选择</text>
					<text class="sub-title">(共有{{courses.AllCourseList.length}}门课程)</text>
				</view>
				<view class="courseCard-search" v-if="courses.AllCourseList.length>0">
					<van-search
						:value="Keywords"
						shape="round"
						style="border-radius: 20rpx;"
						input-align="center"
						background="#F6F6F6"
						@change="searchHandler"
						placeholder="请输入搜索关键词"
						/>
						<!-- <input v-model="Keywords" placeholder="请输入搜索关键词"/> -->
				</view>
				<view class="courseCard-title" v-if="courses.AllCourseList.length>0 && Keywords==''">
					<view class="workSituation-title-box flex">
						<view class="workSituation-title"
						:class="{'active':currentIndex==index}"
						v-for="(t,index) in titleList" :key="index"
						@click="toggleTitle(index)">
							<text class="name">{{t.name}}</text>
							<view class="num">({{t.data.length}})</view>
							<view class="current-title-box flex" v-show="tabNme==t.name">
								<text class="name">{{t.name}}</text>
								<view class="num">({{t.data.length}})</view> 
							</view>
						</view>
					</view>
				</view>
				<view class="items" v-if="titleList[currentIndex].data.length>0 && Keywords==''">
					<template v-for="(x,i) in titleList[currentIndex].data" >
					<view class="item-course" v-if="x.CourseName.indexOf(Keywords)!=-1" :key="i">
						<view class="course-pic">
							<image :src="x.CoverImg!=''?x.CoverImg:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653901833000_638.png'" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="one_line course-name">
								{{x.CourseName}}
							</view>
							<van-progress :percentage="(parseFloat(x.CompleteNum)/parseFloat(x.TotalClassNum))*100" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 {{x.CompleteNum}}/{{x.TotalClassNum}}
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler(x)" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
					</template>
				</view>
				<view class="items" v-if="titleList[0].data.length>0 && Keywords!=''">
					<template v-for="(x,i) in titleList[0].data" >
					<view class="item-course" v-if="x.CourseName.indexOf(Keywords)!=-1" :key="i">
						<view class="course-pic">
							<image :src="x.CoverImg!=''?x.CoverImg:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653901833000_638.png'" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="one_line course-name">
								{{x.CourseName}}
							</view>
							<van-progress :percentage="(parseFloat(x.CompleteNum)/parseFloat(x.TotalClassNum))*100" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 {{x.CompleteNum}}/{{x.TotalClassNum}}
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler(x)" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
					</template>
				</view>
			</view>
		</van-popup>

	</view>
	
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		defineEmits
	} from "vue";
	import {getTeacherCourse} from '../../../api/index'
	export default {
		props: {},
		emits:['change','changePopStatus'],
		setup(props,ctx) {
			const Keywords=ref('')
			let data = reactive({
				statusBarHeight: 24,
				showItems:false,
				titleList:[
                    {name:'全部课程',data:[]},
                    {name:'进行中',data:[]},
                    {name:'已完成',data:[]},
                ],
                currentIndex:0,
				courses:{},
				currentCourse:null,
				
			});
			let methods={
				toggleTitle(t) {
                    data.currentIndex = t
                },
				exchangeItemHandler(){
					data.showItems=true
					ctx.emit('changePopStatus',1)
				},
				hideExchangeBoxHandler(item){
					if(item){
						data.currentCourse=item
						ctx.emit('change',item.courseId,item.CourseName)
					}
					data.showItems=false
					ctx.emit('changePopStatus',0)
				},
				queryTecherCourse(){
					getTeacherCourse().then(r=>{
						data.courses=r.Data
						data.titleList[0].data=r.Data.AllCourseList
						data.titleList[1].data=r.Data.NotFinishList
						data.titleList[2].data=r.Data.FinishList
						data.currentCourse=r.Data.AllCourseList.length>0?r.Data.AllCourseList[0]:null
						ctx.emit('change',data.currentCourse?data.currentCourse.courseId:0,data.currentCourse?data.currentCourse.CourseName:'')
						
					})
				},
				searchHandler(e){
					Keywords.value=e.detail
				}
			}
			methods.queryTecherCourse()
			return {
				...toRefs(data),
				Keywords,
				...methods
			};
		},
	};
</script>

<style scoped>
	.num{
        font-size: 20rpx;
        display: inline-block;
        margin-top: 5rpx;
    }
    .current-title-box{
        color: #FFFFFF;
        background: #282828;
        padding: 26rpx 36rpx;
        width: 80%;
        position: absolute;
        left: -18%;
        right: 0;
        top: -28rpx;
        border-radius: 39rpx;
        justify-content: center;
    }
    .workSituation-title.active{
        position: relative;
		font-weight: bold;
		color:#FFF;
		background-color: #282828;
		
    }
    .workSituation-title{
        flex: 1;
        color: #282828;
        font-size: 26rpx;
        border-radius: 30rpx;
        text-align: center;
		line-height: 60rpx;
    }
    .workSituation-title-box{
        margin: 0 50rpx;
        height: 64rpx;
        background: #F0F0F0;
        border-radius: 30rpx;
    }
	.courseCard-search{
		margin: 40rpx 0;
		padding: 0 30rpx;
		overflow: hidden;
		/* background: #FFFFFF; */
	}
	.course-card {
		padding: 70rpx 50rpx 0 50rpx;
	}

	.course-card .course-item {
		height: 294rpx;
		background: linear-gradient(37deg, #C91727, #E64150);
		padding: 40rpx 35rpx;
		border-radius: 50rpx;
		position: relative;
		box-sizing: border-box;
	}

	.course-card .course-item .illustration {
		position: absolute;
		left: 350rpx;
		top: -11rpx;
		width: 340rpx;
		height: 294rpx;
	}

	.course-card .end {
		width: 550rpx;
		margin: 0 auto;
		display: block;
		height: 20rpx;
	}

	.course-card .course-item .course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 42rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 20rpx;
		height: 80rpx;
		overflow: hidden;
	}

	.course-card .course-item .course-progress {
		font-size: 20rpx;
		font-weight: 400;
		color: #FDC4CA;
		line-height: 45rpx;
	}

	.course-card .course-item .course-opera {
		margin-top: 20rpx;
	}
	.course-card .exchange-items{
		padding:50rpx 0;
		padding-bottom: 0;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #F6F6F6;
	}
	.course-card .exchange-items .title-box{
		padding:0 50rpx;
	}
	.course-card .exchange-items .title-box .main-title{
		font-size: 36rpx;
		font-weight: 800;
		color:#282828;
	}
	.course-card .exchange-items .title-box .sub-title{
		font-size: 26rpx;
		font-weight: normal;
		color:#6F6F6F;
		margin-left: 10rpx;
	}
	.course-card .exchange-items .items{
		width: 100%;
		flex:1;
		overflow-y:auto;
		margin-top:40rpx;
		padding:0 50rpx;
		box-sizing: border-box;
	}
	.course-card .exchange-items .items .item-course{
		margin-bottom: 50rpx;
		padding:40rpx 36rpx;
		display: flex;
		align-items: flex-start;
		background-color: #FFF;
		border-radius: 30rpx;
	}
	.course-card .exchange-items .items .item-course .course-pic{
		width: 100rpx;
		height: 140rpx;
		margin-right: 36rpx;
		overflow: hidden;
		
	}
	.course-card .exchange-items .items .item-course .course-pic image{
		width:100%;
		height: 100%;
	}
	.course-card .exchange-items .items .item-course .content{
		flex:1;
		width: 1px;
	}
	.course-card .exchange-items .items .item-course .content .course-name{
		font-size: 30rpx;
		font-weight: bold;
		color: #282828;
		line-height: 42rpx;
		margin-bottom: 20rpx;
	}
	.course-card .exchange-items .items .item-course .content .course-progress{
		color: #282828;
		font-weight: 400;
		font-size: 20rpx;
		margin-top: 4rpx;
		margin-bottom: 10rpx;
	}
</style>
