<!doctype html>
<div v-if="loaded">
    <div class="cosdetail-header">
        <div class="container">
            <el-row :gutter="30">
                <el-col :span="21">
                    <div class="cosdetail-header__title">
                        <span class="course-label">{{label}}</span>
                        <span v-if="$route.query.costype=='3'">{{detail.name}}</span>
                        <span v-else-if="$route.query.costype=='7'">{{detail.name}}</span>
                        <span v-else-if="$route.query.costype=='8'">{{detail.title}}</span>
                        <span v-else>{{detail.CourseName}}</span>
                    </div>
                    <div class="cosdetail-header__desc" v-if="$route.query.costype=='3'">
                        <span class="cosdetail-header__span">授课老师：{{detail.teacher}}</span>
                        <span class="cosdetail-header__span">课程：{{detail.course_count}}门</span>
                        <span class="cosdetail-header__span">试卷：{{detail.paper_count}}份</span>
                        <span class="cosdetail-header__span">商品：{{detail.shop_count}}个</span>
                    </div>
                    <div class="cosdetail-header__desc" v-else-if="$route.query.costype=='7'">
                        <span class="cosdetail-header__span">已购{{detail.alllearnnum}}期 · 共{{detail.countpid}}期</span>
                        <span class="cosdetail-header__span">总学分：{{detail.sum_credit}}</span>
                        <span class="cosdetail-header__span">通过学分：{{detail.pass_credit}}</span>
                        <span class="cosdetail-header__span">已得学分：{{detail.credit}}</span>
                        <span class="cosdetail-header__span" :class="Number(detail.credit)>=Number(detail.pass_credit)?'green-font':'red-font'">{{Number(detail.credit)>=Number(detail.pass_credit)?'已通过':'未通过'}}</span>
                    </div>
                    <div class="cosdetail-header__desc" v-else-if="$route.query.costype=='8'">
                        <span class="cosdetail-header__span">班主任：{{detail.tname||'未知'}}</span>
                        <span class="cosdetail-header__span">课程：{{detail.coursecount}}门</span>
                        <span class="cosdetail-header__span">作业：{{detail.workcount}}份</span>
                        <span class="cosdetail-header__span">问答：{{detail.askcount}}个</span>
                        <span class="cosdetail-header__span">公告：{{detail.noticenum}}个</span>
                    </div>
                    <div class="cosdetail-header__desc" v-else>
                        <span v-if="$route.query.costype=='0'">
                            <span v-if="detail.BmEndTime">{{detail.BmEndTime}}到期</span>
                            <span v-else>永久有效</span>
                        </span>
                        <span v-else>
                            <span v-if="detail.validity">{{detail.validity}}</span>
                            <span v-else>永久有效</span>
                        </span>
                        <div class="cosdetail-header__progess" v-if="detail.Learn">
                            学习进度
                            <div class="progress"><el-progress color="#3C81F9" :show-text="false" :percentage="Math.round(Number(detail.Learn.haslearnperiodnum)/Number(detail.Learn.totalperiodnum)*100)"></el-progress></div>
                            已学习{{detail.Learn.haslearnperiodnum}}/{{detail.Learn.totalperiodnum}}课时
                        </div>
                        <span class="last-time" v-if="detail.Learn && detail.Learn.lastlearnperiodname!='0'">上次学习到：<font class="last-time__font">{{detail.Learn.lastlearnperiodname}}</font></span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="cosdetail-header__down" @click="unopen">
                        手机APP下载
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="cosdetail container">
        <el-row :gutter="30" v-if="$route.query.costype=='7'">
            <el-col :span="24">
                <router-view></router-view>
            </el-col>
        </el-row>
        <el-row :gutter="30" v-else>
            <el-col :span="17">
                <div class="cosdetail-left">
                    <router-view></router-view>
                </div>
            </el-col>
            <el-col :span="7">
                <div class="cosdetail-right">
                    <ul class="clearfix">
                        <li @click="open('UserCourseDetailData')" :class="{active:$route.name==='UserCourseDetailData'||$route.name==='UserCourseDetailFilePreview'}" v-if="$route.query.costype==0||$route.query.costype==1||$route.query.costype==2||$route.query.costype==5">
                            <div class="cosdetail-right__icon cosdetail-right__icon--data"></div>
                            <div class="cosdetail-right__name">资料</div>
                        </li>
                        <li @click="open('UserCourseDetailPeriodTable')" :class="{active:$route.name==='UserCourseDetailPeriodTable'}" v-if="$route.query.costype==3||$route.query.costype==8">
                            <div class="cosdetail-right__icon cosdetail-right__icon--course"></div>
                            <div class="cosdetail-right__name">课程</div>
                        </li>
                        <li @click="open('UserCourseDetailAnnouncement')" :class="{active:$route.name==='UserCourseDetailAnnouncement'}" v-if="$route.query.costype==8">
                            <div class="cosdetail-right__icon cosdetail-right__icon--announcement"></div>
                            <div class="cosdetail-right__name">公告</div>
                        </li>
                        <li @click="open('UserCourseDetailExam')" :class="{active:$route.name==='UserCourseDetailExam'}" v-if="$route.query.costype!=8">
                            <div class="cosdetail-right__icon cosdetail-right__icon--exam"></div>
                            <div class="cosdetail-right__name">试卷</div>
                        </li>
                        <li @click="open('UserCourseDetailShop')" :class="{active:$route.name==='UserCourseDetailShop'}" v-if="$route.query.costype==3">
                            <div class="cosdetail-right__icon cosdetail-right__icon--shop"></div>
                            <div class="cosdetail-right__name">商品</div>
                        </li>
                        <li @click="open('UserCourseDetailAsk')" :class="{active:$route.name==='UserCourseDetailAsk'}" v-if="$route.query.costype!=3">
                            <div class="cosdetail-right__icon cosdetail-right__icon--ask"></div>
                            <div class="cosdetail-right__name">答疑</div>
                        </li>
                        <li @click="open('homework')" :class="{active:$route.name==='homework'}"  v-if="$route.query.costype!=3">
                            <div class="cosdetail-right__icon cosdetail-right__icon--work"></div>
                            <div class="cosdetail-right__name">作业</div>
                        </li>
                    </ul>
                </div>
                
            </el-col>
        </el-row>
    </div>

</div>