<template>
	<view class="course-card">
		<view class="course-item">
			<view style="width:287rpx;">
				<view class="course-name">
					成都2022科学益智L4-05乐思会
				</view>
				<van-progress percentage="75" :show-pivot="false" track-color="#EFEFEF" color="#282828"
					stroke-width="5" />
				<view class="course-progress">
					上课进度 5/12
				</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>
			<image class="illustration"
				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_494.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"
		  custom-style="height: 75%"
		>
			<view class="exchange-items">
				<view class="title-box">
					<text class="main-title">课程选择</text>
					<text class="sub-title">(共有3门课程)</text>
				</view>
				<view class="courseCard-search">
					<van-search
						v-model="Keywords"
						shape="round"
						style="border-radius: 20rpx;"
						input-align="center"
						background="#F6F6F6"
						placeholder="请输入搜索关键词"
						/>
						<!-- <input v-model="Keywords" placeholder="请输入搜索关键词"/> -->
				</view>
				<view class="courseCard-title">
					<view class="workSituation-title-box flex">
						<view class="workSituation-title flex"
						:class="tabNme==t.name?'active':''"
						v-for="(t,index) in titleList" :key="index"
						@click="toggleTitle(t.name)">
							<text class="name">{{t.name}}</text>
							<view class="num">({{t.num}})</view>
							<view class="current-title-box flex" v-show="tabNme==t.name">
								<text class="name">{{t.name}}</text>
								<view class="num">({{t.num}})</view> 
							</view>
						</view>
					</view>
				</view>
				<view class="items">
					<view class="item-course">
						<view class="course-pic">
							<image 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">
								高中物理鸿志班（二期周五下午上课）
							</view>
							<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 5/12
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
					<view class="item-course">
						<view class="course-pic">
							<image 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">
								高中物理鸿志班（二期周五下午上课）
							</view>
							<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 5/12
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
					<view class="item-course">
						<view class="course-pic">
							<image 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">
								高中物理鸿志班（二期周五下午上课）
							</view>
							<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 5/12
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
					<view class="item-course">
						<view class="course-pic">
							<image 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">
								高中物理鸿志班（二期周五下午上课）
							</view>
							<van-progress percentage="46" :show-pivot="false" track-color="#EFEFEF" color="#282828"
								stroke-width="5" />
							<view class="course-progress">
								上课进度 5/12
							</view>
							<view style="text-align: right;">
								<van-button @click="hideExchangeBoxHandler" color="#C91727" round size="mini"
									custom-style="color:#FFF;font-size: 24rpx;padding-left:16rpx;padding-right:10px;">
									选择课程
								</van-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>

	</view>
	
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
	} from "vue";
	export default {
		props: {},
		setup() {
			let data = reactive({
				statusBarHeight: 24,
				showItems:false,
				Keywords:'',
				titleList:[
                    {name:'全部课程',num:18},
                    {name:'进行中',num:5},
                    {name:'已完成',num:18},
                ],
                tabNme:'进行中'
			});
			let methods={
				toggleTitle(t) {
                    data.tabNme = t
                },
				exchangeItemHandler(){
					data.showItems=true
				},
				hideExchangeBoxHandler(){
					data.showItems=false
				}
			}
			return {
				...toRefs(data),
				...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;
    }
    .workSituation-title{
        flex: 1;
        color: #282828;
        font-size: 26rpx;
        font-weight: bold;
        align-items: center;
        letter-spacing: 1px;
    }
    .workSituation-title-box{
        margin: 0 50rpx;
        padding: 17rpx 0 17rpx 28rpx;
        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;
	}

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