<!doctype html>
<div>
  <el-row :gutter="30" v-if="$route.query.costype == '7'">
    <el-col :span="17">
      <div class="cosdetail-left">
        <div class="camp-data">
          <ks-title title="目录" :underline="false" />
          <div class="camp-list" v-if="camplist && camplist.length">
            <div class="camp-item" v-for="(item,i) in camplist" :key="i">
              <div class="first-catalogue">{{item.periodname}}</div>
              <ul class="second-catalogue" v-if="item.child && item.child.length">
                <li v-for="(site,s) in item.child" :key="s">
                  <a :href="site.task_url" target="_blank" class="second-catalogue-btn">进入学习</a>
                  <div class="second-catalogue-top">
                    <span class="second-catalogue-num">{{s<9?'0'+(s+1):(s+1)}}</span>
                    <span class="second-catalogue-label" :class="(site.type_name!='文章'&& site.type_name!='试卷')&&'blue-font'">{{site.type_name}}</span>
                    <span class="second-catalogue-title">{{site.title}}</span>
                    <span class="second-catalogue-font" v-if="site.must_learn">必修</span>
                  </div>
                  <div class="second-catalogue-bottom">
                    <span>{{site.sum_credit}}学分</span>
                    <span :class="site.learn==1&&'success-color'">{{(site.learn==0&&'未学习')||(site.learn==1&&'正在学习')||'已学完'}}</span>
                  </div>
      
                </li>
              </ul>
            </div>
          </div>
          <ks-empty msg="暂无内容" v-else />
        </div>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="cosdetail-right2">
        <div class="camp-period">营期</div>
          <ul>
              <li v-for="(item,i) in rightcamplist" :class="{campcurr:currid===item.campid}" @click="campDirectoryList(item.campid)">
                  <div class="camp-name">{{item.campname}}</div>
                  <div class="camp-time">{{item.begintime}} ~{{item.endtime}}</div>
                  <div class="camp-intro">
                      <span>总学分：{{item.sum_credit}}</span>
                      <span>通过学分：{{item.pass_credit}}</span>
                  </div>
                  <div class="camp-credit">
                      已得学分：{{item.credit}}（<font :class="Number(item.credit)>=Number(item.pass_credit)?'green-font':'red-font'">{{Number(item.credit)>=Number(item.pass_credit)?'已通过':'未通过'}}</font>）
                  </div>
              </li>
          </ul>
      </div>
    </el-col>
  </el-row>
  <div class="periodtable" v-else>
    <div class="class-data" v-if="$route.query.costype == '8'">
      <ks-title title="课程" :underline="true" />
      <div class="class-tab clearfix">
        <ul class="fl">
          <li v-for="item in classtab" :key="item.type" :class="{classcurr:item.type==classcurr}" @click="getClassCourse(item.type)">{{item.label}}</li>
        </ul>
      </div>
      <div class="column-list class-course-list" style="margin-top:0px;" v-if="classcurr==0 && classcourse && classcourse.length">
          <div class="column-item" v-for="(item,i) in classcourse" :key="item.courseid">
            <div class="column-item__image">
                <a :href="item.view_url" target="_blank"><ks-image :src="item.photourl" /></a>
                <span>{{item.teachWay==1?'点播':'直播'}}课程</span>
            </div>
            <div class="column-item__word">
                <h2><a :href="item.view_url" target="_blank">{{item.name}}</a></h2>
                <div class="work-label" v-if="item.workcount&&item.workcount>0">你有未完成的作业</div>
                <div v-if="item.teachWay == 0">
                    <span class="ks-mr36">最新课程：<i>{{item.opendate}}</i><i>{{item.lastlearn_periodnam}}</i></span>
                </div>
                <div v-else-if="item.teachWay == 1">
                    <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname" class="stu-color">学习至  </i><i>{{item.lastlearn_periodname}}</i></span>
                    <div class="column-item__keshi">
                        <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                    </div>
                </div>
                <div v-else-if="item.teachWay == 2">
                    <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname" class="stu-color">学习至  </i><i>{{item.lastlearn_periodname}}</i></span>
                    <div class="column-item__keshi">
                        <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                    </div>
                </div>
                <div v-else-if="item.teachWay == 5">
                    <span>最新直播：<i>{{item.livestatu_title}}</i><i>{{item.lastlearn_periodname}}</i></span>
                    <div class="column-item__keshi">
                        <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                    </div>
                </div>
            </div>
            <div class="column-item__btn" v-if="item.teachWay == 1 || item.teachWay == 2" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                <!-- <a :href="item.learn_url"><el-button size="medium" round :type="Number(item.has_learnpercent)==100 ? '' : 'primary'">{{(Number(item.has_learnpercent) == 0 && "开始学习")||(Number(item.has_learnpercent)==100 &&"继续学习")||"继续学习"}}</el-button></a> -->
                <el-button size="medium" round :type="Number(item.has_learnpercent)==100 ? '' : 'primary'"  @click="$router.push('/user/course/'+item.courseid+'?costype='+item.teachWay)">{{(Number(item.has_learnpercent) == 0 && "开始学习")||(Number(item.has_learnpercent)==100 &&"继续学习")||"继续学习"}}</el-button>
            </div>
            <div class="column-item__btn" v-else-if="item.teachWay == 5" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                <!-- <a :href="item.learn_url" target="_blank"><el-button size="medium" type="primary" round>进入直播</el-button></a> -->
                <el-button size="medium" round @click="$router.push('/user/course/'+item.courseid+'?costype='+item.teachWay)">进入学习</el-button>
            </div>
          </div>
      </div>
      <div class="column-list class-course-list" style="margin-top:0px;" v-else-if="classcurr==1 && classfacecourse && classfacecourse.length">
          <div class="column-item" v-for="(item,i) in classfacecourse" :key="item.courseid">
            <div class="column-item__image">
                <a :href="item.view_url" target="_blank"><ks-image :src="item.photourl" /></a>
                <span>面授课程</span>
            </div>
            <div class="column-item__word">
                <h2><a :href="item.view_url" target="_blank">{{item.name}}</a></h2>
                <div class="work-label" v-if="item.workcount&&item.workcount>0">你有未完成的作业</div>
                <div v-if="item.teachWay == 0">
                    <span class="ks-mr36">最新课程：<i>{{item.opendate}}</i><i>{{item.lastlearn_periodnam}}</i></span>
                </div>
            </div>
            <div class="column-item__btn" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                <!-- <a :href="item.view_url" target="_blank"><el-button size="medium" round>课程详情</el-button></a> -->
                <el-button size="medium" round @click="$router.push('/user/course/'+item.courseid+'?costype='+item.teachWay)">进入学习</el-button>
            </div>
          </div>
      </div>
      <ks-empty msg="暂无课程" v-else />
    </div>
    <div class="column-data" v-else-if="$route.query.costype == '3'">
      <ks-title title="课程" :underline="true" />
      <div class="column-list" v-if="columncourse && columncourse.length">
          <div class="column-item" v-for="(item,i) in columncourse" :key="item.courseid">
              <div class="column-item__image">
                  <a :href="item.view_url" target="_blank"><ks-image :src="item.photourl" /></a>
                  <span>{{item.teachway_name}}课程</span>
              </div>
              <div class="column-item__word">
                  <h2><a :href="item.view_url" target="_blank">{{item.name}}</a></h2>
                  <div class="work-label" v-if="item.workcount&&item.workcount>0">你有未完成的作业</div>
                  <div v-if="item.teachway == 0">
                      <span class="ks-mr36">最新课程：<i>{{item.opendate}}</i><i>{{item.lastlearn_periodname}}</i></span>
                  </div>
                  <div v-else-if="item.teachway == 1">
                      <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname" class="stu-color">学习至 </i><i>{{item.lastlearn_periodname}}</i></span>
                      <div class="column-item__keshi" v-if="item.total_periodnum">
                          <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                      </div>
                  </div>
                  <div v-else-if="item.teachway == 2">
                      <span>{{item.lastdate}}<i v-if="item.lastlearn_periodname" class="stu-color">学习至 </i><i>{{item.lastlearn_periodname}}</i></span>
                      <div class="column-item__keshi" v-if="item.total_periodnum">
                          <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                      </div>
                  </div>
                  <div v-else-if="item.teachway == 5">
                      <span>最新直播：<i>{{item.livestatu_title}}</i><i>{{item.lastlearn_periodname}}</i></span>
                      <div class="column-item__keshi" v-if="item.total_periodnum">
                          <el-progress :percentage="Number(item.has_learnpercent)" :show-text="false"></el-progress>已学习：{{item.has_learnperiodnum}}/{{item.total_periodnum}}课时
                      </div>
                  </div>
              </div>
              <div class="column-item__btn" v-if="item.teachway == 0" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                  <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                  <a :href="item.view_url" target="_blank"><el-button size="medium" round>课程详情</el-button></a>
              </div>
              <div class="column-item__btn" v-else-if="item.teachway == 1 || item.teachway == 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.has_learnpercent)==100 ? '' : 'primary'" @click="$router.push('/user/course/'+item.courseid+'?costype='+item.teachway)">{{(Number(item.has_learnpercent) == 0 && "开始学习")||(Number(item.has_learnpercent)==100 &&"继续学习")||"继续学习"}}</el-button>
              </div>
              <div class="column-item__btn" v-else-if="item.teachway == 5" :style="item.learnlimit?'margin-top:-31px;':'margin-top:-19px;'">
                  <p v-if="item.learnlimit">{{item.learnlimit}}</p>
                  <a :href="item.view_url" target="_blank"><el-button size="medium" type="primary" round>进入直播</el-button></a>
              </div>
          </div>
      </div>
      <ks-empty msg="暂无课程" v-else />
    </div>
    <div class="course-data" v-else>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first" v-if="$route.query.costype == '2' || $route.query.costype == '5'"></el-tab-pane>
        <el-tab-pane label="直播" name="second" v-if="$route.query.costype == '5' || $route.query.costype == '2'"></el-tab-pane>
        <el-tab-pane label="回放" name="third" v-if="$route.query.costype == '5' || $route.query.costype == '2'"></el-tab-pane>
        <el-tab-pane :label="$route.query.costype == '2'?'视频':'目录'" name="four" v-if="$route.query.costype == '1' || $route.query.costype == '2'"></el-tab-pane>
        <el-tab-pane :label="$route.query.costype == '2'?'面授':'目录'" name="find" v-if="$route.query.costype == '0' || $route.query.costype == '2'"></el-tab-pane>
      </el-tabs>
      <catalog :courseid="$route.params.id" :costype="periodstype" v-if="$route.query.costype == '0'" courseType="face"></catalog>
      <catalog :courseid="$route.params.id" :costype="periodstype" v-else></catalog>
    </div>
    
  </div>
  
</div>