<template>
	<view class="course-card">
		<view class="course-item" v-if="currentCourse">
			<view style="width:287rpx;">
				<view class="course-name">
					{{ currentCourse.CourseName}}
				</view>
				<van-progress :percentage="calcPercentage(currentCourse)" :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>
			<template v-if="currentCourse.CoverImg">
				<image class="illustration" :src="currentCourse.CoverImg" mode="widthFix"></image>
			</template>
			<template v-else>
				<image class="illustration" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_494.png"
				 mode="widthFix"></image>
			</template>

		</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" custom-style="height: 60%">
			<view class="exchange-items">
				<view class="title-box">
					<text class="main-title">课程选择</text>
					<text class="sub-title">(共有{{stuCourseList.length}}门课程)</text>
				</view>
				<view class="items">
					<template v-for="(item,index) in stuCourseList">
						<view class="item-course">
							<view class="course-pic">
								<image v-if="item.CoverImg" :src="item.CoverImg" mode="aspectFill"></image>
								<image v-else src="https://www.kfzimg.com/G06/M00/B5/48/p4YBAFsJY12AK0n7AAEM2KDUHRw535_n.jpg" mode="aspectFill"></image>
							</view>
							<view class="content">
								<view class="one_line course-name">
									{{item.CourseName}}
								</view>
								<van-progress :percentage="calcPercentage(item)" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								 stroke-width="5" />
								<view class="course-progress">
									上课进度 {{item.CompleteNum}}/{{item.TotalClassNum}}
								</view>
								<view style="text-align: right;">
									<van-button @click="hideExchangeBoxHandler(item)" 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,
	} from "vue";
	export default {
		props: ["stuCourseList"],
		setup(props, context) {
			let data = reactive({
				statusBarHeight: 24,
				showItems: false,
				currentCourse: {}
			});

			let methods = {
				exchangeItemHandler() {
					data.showItems = true
				},
				//点击切换课程
				hideExchangeBoxHandler(item) {
					//调用父页面方法
					this.$parent.getStuHomeWorkAndExam(item.courseId);
					this.currentCourse = item;
					data.showItems = false
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/index/workSituation?tabNme=' + '作业情况' +'&courseId=' + item.courseId
						});	
					},500)
					
				},
				//计算完成百分比
				calcPercentage(item) {
					let percent = 0;
					if (item) {
						if (item.TotalClassNum > 0) {
							percent = Number(item.CompleteNum / item.TotalClassNum) * 100
						}
					}
					return percent;
				},
			};
            //监听属性数组
			watch(() => props["stuCourseList"], (newValue, oldValue) => {
				if (newValue != oldValue && newValue && newValue.length > 0) {
					data.currentCourse = newValue[0];
				}
			}, {
				deep: true,
			});

			return {
				...toRefs(data),
				...methods
			};
		},
	};
</script>

<style scoped>
	.course-card {
		padding: 70rpx 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;
	}

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

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