<!DOCTYPE html>
<div style="background:#fff">
    <div class="usercourse">
        <!-- <ks-title title="我的课程" :underline="false" /> -->
        <div style="overflow: hidden;position: relative;">
            <!-- 标签页 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="我的课程" name="first">
                    <!-- 课程列表 -->
                    <div class="usercourse-list">
                        <div class="usercourse-item" v-for="(item,i) in courseList" :key="item.courseid">
                            <div class="usercourse-item__image" @click="open(item.view_url,true)">
                                <ks-image :src="item.photourl" />
                                <span>{{(item.costype == 0 && "面授课程")||(item.costype == 1 && "点播课程")||(item.costype == 2 && "组合课程")||(item.costype == 5 && "直播课程")||'未知'}}</span>
                            </div>
                            <div class="usercourse-item__word">
                                <h2 @click="open(item.view_url,true)">{{item.coursename}}</h2>
                                <div class="work-label" v-if="item.workcount&&item.workcount>0" @click="openwork(item.courseid)">你有未完成的作业</div>
                                <div v-if="item.costype == 0">
                                    <span class="ks-mr36">最新课程：<i>{{item.opendate}}</i><i>{{item.lastlearn_periodname}}</i></span>
                                    
                                </div>
                                <div v-else-if="item.costype == 1">
                                    <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname!='0'"><i v-if="item.lastlearn_periodname!='0'" class="stu-color">学习至 </i> </i><i v-if="item.lastlearn_periodname!='0'">{{item.lastlearn_periodname}}</i></span>
                                    <div class="usercourse-item__keshi">
                                        <el-progress :percentage="Number(item.learnprocess)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.countpid}}课时
                                    </div>
                                </div>
                                <div v-else-if="item.costype == 2">
                                    <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname!='0'"><i v-if="item.lastlearn_periodname!='0'" class="stu-color">学习至 </i> </i> <i v-if="item.lastlearn_periodname!='0'">{{item.lastlearn_periodname}}</i></span>
                                    <div class="usercourse-item__keshi">
                                        <el-progress :percentage="Number(item.learnprocess)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.countpid}}课时
                                    </div>
                                </div>
                                <div v-else-if="item.costype == 5">
                                    <span>最新直播：<i>{{item.date}}</i><i>{{item.periodname}}</i></span>
                                    <div class="usercourse-item__keshi">
                                        <el-progress :percentage="Number(item.learnprocess)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.countpid}}课时
                                    </div>
                                </div>
                            </div>
                            <div class="usercourse-item__btn" v-if="item.costype == 0" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                                <el-button size="medium" round  @click="$router.push('/user/course/'+item.courseid+'?costype='+item.costype)">进入学习</el-button>
                            </div>
                            <div class="usercourse-item__btn" v-else-if="item.costype == 1 || item.costype == 2" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                                <el-button size="medium" round :type="Number(item.learnprocess)==100 ? '' : 'primary'" @click="$router.push('/user/course/'+item.courseid+'?costype='+item.costype)">{{(Number(item.learnprocess) == 0 && "开始学习")||(Number(item.learnprocess)==100 &&"继续学习")||"继续学习"}}</el-button>
                            </div>
                            <div class="usercourse-item__btn" v-else-if="item.costype == 5" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                                <!-- <el-button size="medium" type="primary" round @click="open(item.view_url,true)">进入直播</el-button> -->
                                <el-button size="medium" type="primary" round @click="$router.push('/user/course/'+item.courseid+'?costype='+item.costype)">进入学习</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我的专栏" name="second">
                    <!-- 课程列表 -->
                    <div class="usercourse-list">
                        <div class="usercourse-item" v-for="(item,i) in courseList" :key="item.courseid">
                            <div class="usercourse-item__image" @click="open(item.view_url,true)">
                                <ks-image :src="item.photourl" />
                                <span>专栏</span>
                            </div>
                            <div class="usercourse-item__word">
                                <h2 @click="open(item.view_url,true)">{{item.coursename}}</h2>
                                <div>
                                    <span style="color:#8D9299">{{item.coursenum}}门课程 | {{item.sjnum}}份试卷 | {{item.shopnum}}件商品</span>
                                </div>
                            </div>
                            <div class="usercourse-item__btn" style="margin-top:-19px;">
                                <el-button size="medium" round type="primary" @click="$router.push('/user/course/'+item.courseid+'?costype='+costype)">进入专栏</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我的训练营" name="third" v-if="state.model.checkpackage">
                    <!-- 课程列表 -->
                    <div class="usercourse-list">
                        <div class="usercourse-item" v-for="(item,i) in courseList" :key="item.courseid">
                            <div class="usercourse-item__image" @click="open(item.view_url,true)">
                                <ks-image :src="item.photourl" />
                                <span>训练营</span>
                            </div>
                            <div class="usercourse-item__word">
                                <h2 @click="open(item.view_url,true)">{{item.coursename}}</h2>
                                <!-- <div class="work-label" v-if="item.workcount&&item.workcount>0" @click="openwork(item.courseid)">你有未完成的作业</div> -->
                                <span>已购 {{item.alllearnnum}} 期 | 已更新 {{item.countpid}} 期</span>
                                <div class="usercourse-item__keshi">
                                    <span>总学分：{{item.sum_credit}}分</span>
                                    <span>通过学分：{{item.pass_credit}}分</span>
                                    <span>已得学分：{{item.credit}}分</span>
                                    <span :class="Number(item.credit)>=Number(item.pass_credit)?'green-font':'red-font'">{{Number(item.credit)>=Number(item.pass_credit)?'已通过':'未通过'}}</span>
                                </div>
                            </div>
                            <div class="usercourse-item__btn" style="margin-top:-19px;">
                                <p class="applycertificate" style="cursor: pointer;" @click="applyCertificate(item.courseid)" v-if="!item.certificate && Number(item.credit)>=Number(item.pass_credit)">申请证书</p>
                                <el-button size="medium" round type="primary" @click="$router.push('/user/course/'+item.courseid+'?costype='+costype)">进入训练营</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我的班级" name="four" v-if="state.model.classroom">
                    <!-- 课程列表 -->
                    <div class="usercourse-list">
                        <div class="usercourse-item" v-for="(item,i) in courseList" :key="item.courseid">
                            <div class="usercourse-item__image" @click="open(item.view_url,true)">
                                <ks-image :src="item.photourl" />
                                <span>班级</span>
                            </div>
                            <div class="usercourse-item__word">
                                <h2 @click="open(item.view_url,true)">{{item.coursename}}</h2>
                                <div class="work-label" v-if="item.workcount&&item.workcount>0" @click="openwork(item.courseid)">你有未完成的作业</div>
                                <span>{{item.coursenum}}门课程 | {{item.workcount}}份作业 | {{item.noticenum}}条公告</span>
                                <div class="usercourse-item__keshi">
                                    班主任：{{item.teacher}}
                                </div>
                            </div>
                            <div class="usercourse-item__btn" style="margin-top:-19px;">
                                <el-button size="medium" round type="primary" @click="$router.push('/user/course/'+item.courseid+'?costype='+costype)">进入班级</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <!-- 多选框 -->
            <div class="usercourse-checkbox" v-if="activeName=='first'">
                <span>类型：</span>
                <el-select v-model="costype" placeholder="请选择" size="medium" @change="changeList">
                    <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                
                <!-- <el-checkbox v-model="chargetype" @change="changeList">不看免费</el-checkbox>
                <el-checkbox v-model="learnstatus" @change="changeList">只看未学完</el-checkbox>
                <el-checkbox v-model="expirestatus" @change="changeList">只看未过期</el-checkbox> -->
            </div>
        </div>
    </div>
    <el-pagination style="text-align: center;padding:20px 0;background: #fff" background layout="prev, pager, next" :current-page="currentPage" :total="pageCount" @current-change="getUserCourseList" v-if="courseList.length" />
    <ks-empty msg="该分类下没有课程" v-else />
</div>