<template>
<div>
  <div class="con-title">课程详情</div>
  <div class="detail-box">
    <div class="box-thd">
      <div class="title">{{headerInfo.title}}
        <template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapterId'>
          <el-button class="rbtn" type="primary" size="mini" @click='startLearn' :data-cid='headerInfo.id' :data-sid='headerInfo.sid' :data-vid='tabs[1].chapterList.currentChapterId'>继续学习</el-button>
        </template>
        <template v-else-if='headerInfo.isStart'>
          <el-button class="rbtn" type="primary" size="mini" @click='startLearn' :data-cid='headerInfo.id' :data-sid='headerInfo.sid' :data-vid='tabs[1].chapterList.course[0].chapters[0].vid'>开始学习</el-button>
        </template>
        <template v-else>
          <el-button class="rbtn" type="primary" size="mini" @click='wantThisCourse' :data-cid='headerInfo.id' :data-sid='headerInfo.sid'>选课</el-button>
        </template>
      </div>
      <div class="tags">
        <template v-for="(item1, index) in headerInfo.arrTab">
          <span v-bind:key="index" class='tabs-item'>{{item1}}</span>
        </template>
      </div>
      <div class="time">{{headerInfo.time}} {{headerInfo.status}}</div>
      <div style="float: left; width: 100%; height: 1px;"></div>
      <div class="progress">
        学习进度&emsp;<el-progress :percentage="headerInfo.progress" color="#b49441"></el-progress>
      </div>
    </div>
    <div class="box-tbd">
      <div class="left-pic">
        <template v-if="headerInfo.bgSrc">
          <img :src="headerInfo.bgSrc" alt="">
        </template>
        <template v-else>
          <div class="no-img"><i class="el-icon-self-13"></i></div>
        </template>
      </div>
      <div class="right-content" v-html="tabs[0].content.text"></div>
    </div>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="15" :md="17" :lg="18" :xl="20">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="课程内容" name="1">
            <div class='course-list'>
              <template v-for="(_item, index) in tabs[1].chapterList.course">
                <div v-bind:key="index" :class='["content-group", (!_item.chapters.length ? "no-child" : ""), (_item.isUp ? "up" : "")]'>
                  <div class='title' @click='clickJumpOrStatus($event)' :data-index='index' :data-status='!!_item.chapters.length'>{{_item.title}}
                    <i :class="['side', (_item.chapters.length ? '' : 'none'), (_item.isUp ? 'el-icon-arrow-down' : 'el-icon-arrow-up')]"></i>
                  </div>
                  <template v-for="(item1, index1) in _item.chapters">
                    <div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'>
                      <div class='name' :data-vid='item1.vid' :data-cid='item1.cid' :data-sid='item1.sid' :data-hasVA='item1.time' :data-name='item1.name' @click='jumpToOtherVA' :data-index='index' :data-index1='index1'>
                        {{item1.name}}
                        <div class='time'>{{item1.time}}</div>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程讨论" name="2">
            <div>开发中</div>
          </el-tab-pane>
          <el-tab-pane label="课程考核" name="3">
            <div class='course-assess'>
              <div class='title'>最终成绩：{{tabs[3].assess.score && (tabs[3].assess.score + '分') || '暂无'}}</div>
              <div class='topic'>
                <div class='line'></div>
                <div class='tit'>课程考核标准</div>
              </div>
              <div class='detail'>
                <div class='detail-rich' v-html='tabs[3].richText'></div>
              </div>
              <div class='topic'>
                <div class='line'></div>
                <div class='tit'>学习进度及成绩</div>
              </div>
              <div class='table-title'>课程“音视频”观看统计（ 累计学习时长：{{tabs[3].assess.duration}}，完成率：{{tabs[3].assess.progress}} ）</div>
              <div class='table'>
                <div class='th'>
                  <div class='col3-td1'>章节</div>
                  <div class='col3-td2'>学习时长</div>
                  <div class='col3-td3'>百分比</div>
                </div>
                <template v-for='(item1, index) in tabs[3].assess.video'>
                  <div v-bind:key="index" class='tb'>
                    <div class='tt'>{{item1.title}}</div>
                    <template v-for='(item2, index) in item1.arr'>
                      <div v-bind:key="index" class='rd'>
                        <div class='col3-td1'>{{item2.name}}</div>
                        <div class='col3-td2'>{{item2.time}}</div>
                        <div class='col3-td3'>{{item2.progress}}</div>
                      </div>
                    </template>
                  </div>
                </template>
                <template v-if='!tabs[3].assess.video.length'>
                  <div style='width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center;'>暂无数据</div>
                </template>
              </div>
              <div class='table-title'>试题及主观题</div>
              <div class='table'>
                <div class='th'>
                  <div class='col2-td1'>章节</div>
                  <div class='col2-td2'>得分</div>
                </div>
                <template v-for='(item1, index) in tabs[3].assess.homewrok'>
                  <div v-bind:key="index" class='tb'>
                    <div class='tt'>{{item1.title}}</div>
                    <template v-for='(item2, index) in item1.arr'>
                      <div v-bind:key="index" class='rd'>
                        <div class='col2-td1'>{{item2.name}}</div>
                        <div class='col2-td2'>{{item2.score}}</div>
                      </div>
                    </template>
                  </div>
                </template>
                <template v-if='!tabs[3].assess.homewrok.length'>
                  <div style='width: 100%; font-size: 30rpx; margin: 40rpx auto 10rpx auto; text-align: center;'>暂无数据</div>
                </template>
              </div>
              <div class='table-title'>大作业</div>
              <div class='status-text'>状 态：{{tabs[3].assess.essay.status}}</div>
              <div class='status-text'>得 分：{{tabs[3].assess.essay.score}}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :xs="24" :sm="9" :md="7" :lg="6" :xl="4">
        <el-tabs v-model="activeName1" @tab-click="handleClick">
          <el-tab-pane label="课程讲师" name="1">
            <template v-for='(item1, index) in tabs[0].content.teachers'>
              <div v-bind:key='index' class='list-teacher'>
                <img class="img" :src="item1.src" alt="">
                <div class='ctx'>
                  <div class='top-ctx'>
                    <div class='name'>{{item1.name}}</div>
                  </div>
                  <div class='bottom-ctx'>
                    <div class='t1'>{{item1.edu}}</div>
                    <div class='t2'>{{item1.job}}</div>
                    <div class='t3'>{{item1.unit}}</div>
                  </div>
                </div>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '1',
      activeName1: '1',
      headerInfo: {
        id: '',
        sid: '',
        bgSrc: '',
        title: '这里是一条长的标题不要超过25个汉字标题不要超过个汉字25个汉字',
        time: '2016-09-10至2017-01-10',
        status: '已发布',
        arrTab: ['3学分', '必修课', '线上课程', '第一学期'],
        isStart: true, // 是否为开始学习按钮 或者 选课按钮
        progress: 50 // 改成整数
      },
      tabs: [{
        title: '课程简介',
        isShow: true,
        content: {
          text: '<p><b>组织心理学</b>是研究组织中人的心理与行为规律的一门科学，是心理学的一个重要分支，也是心理学在管理学方面的一个交叉应用学科。<b>组织心理学</b>通过探讨个体、群体以及结构对组织，<b>组织心理学</b>是研究组织中人的心理与行为规律的一门科学，是心理学的一个重要分支，也是心理学在管理学方面的一个交叉应用学科。<b>组织心理学</b>通过探讨个体、群体以及结构对组织。<p><p><b>组织心理学</b>是研究组织中人的心理与行为规律的一门科学，是心理学的一个重要分支，也是心理学在管理学方面的一个交叉应用学科。<b>组织心理学</b>通过探讨个体、群体以及结构对组织。</p>',
          teachers: [{
            src: '',
            name: '讲师姓名',
            edu: '学历',
            job: '职称',
            unit: '讲师所在单位'
          }, {
            src: '',
            name: '讲师姓名',
            edu: '学历',
            job: '职称',
            unit: '讲师所在单位'
          }]
        }
      }, {
        title: '课程内容',
        isShow: false,
        chapterList: {
          currentChapterId: '11', // 当前章节id
          course: [{
            title: '第一章：重要概念',
            isUp: true,
            chapters: [
              { id: '11', time: '28:18', name: '1.1 现值（PV）和终值（FV）' },
              { id: '12', time: '19:09', name: '1.2 净现值（NPV）及实际收益率' }
            ]
          }, {
            title: '第二章：证券估值',
            isUp: true,
            chapters: [
              { id: '21', time: '27:49', name: '2.1 债券和股票的现金流贴现估值方法' },
              { id: '22', time: '16:04', name: '2.2 债券评级及债券协议' },
              { id: '23', time: '', name: '公司金融第二周测验' },
              { id: '24', time: '', name: '公司金融第二周作业' }
            ]
          }, {
            title: '课程大作业',
            isUp: true,
            chapters: []
          }, {
            title: '课程资料',
            isUp: true,
            chapters: []
          }]
        }
      }, {
        title: '课程讨论',
        isShow: false
      }, {
        title: '课程考核',
        isShow: false,
        richText: "<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分，满分100分，低于60分为不及格，需重修此门课程。</div> <img class='b1' src='https://e-learning.ezijing.com/static/assets/img/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现：总分100分（占科目总成绩的30%）</div> <div class='p'>1、每个视频观看完成度50分：以后台数据统计为准，全部看完视频满分50分，其它酌情给分。</div> <div class='em'>注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程讨论及反馈建设性问题50分：课程讨论以后台数据为准，反馈问题以教务老师问题统计为准，满分50分，酌情给分。</div> <div class='h2'>每章试题：总分100分（占科目总成绩的30%）</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%，则此项得分：80%*100*30%=24分)</div> <div class='h2'>结业大作业：总分100分（占科目总成绩的40%）</div> <div class='p'>结业大作业满分为100分，以助教老师给分为准。</div>",
        assess: {
          score: '20',
          duration: '00:01:20',
          progress: '0/10',
          video: [{
            title: '第一章 市场营销原理导论',
            arr: [{
              name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
              time: '12:08',
              progress: '100%'
            }]
          }],
          homewrok: [{
            title: '第一章 市场营销原理导论',
            arr: [{
              name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
              score: 20
            }]
          }],
          essay: {
            status: '未提交',
            score: '暂无'
          }
        }
      }]
    }
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    clickJumpOrStatus (e) {
      let data = e.currentTarget.dataset
      let flag = data.status
      if (flag) {
        let index = data.index
        let json = this.tabs
        let temp = json[1].chapterList.course[index]
        temp.isUp = !temp.isUp
      } else {
        /* 跳转 */
        // wx.showToast({ title: '请上PC使用该功能', icon: 'none' })
      }
    },
    jumpToOtherVA () {},
    startLearn () {},
    wantThisCourse () {}
  }
}
</script>


<style lang="scss" scoped>
.con-title {
  padding: 0 30px;
  font-size: 16px;
  line-height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
body .el-tab-pane { padding-top: 0; }
.detail-box {
  margin: 0.3rem;
  color: #313131;
  overflow: hidden;
  .box-thd {
    margin-bottom: 0.1rem;
    overflow: hidden;
    .title {
      font-size: 0.22rem;
      line-height: 1.5;
      font-weight: 700;
      .rbtn {
        float: right;
      }
    }
    .tags {
      float: left;
      margin: 0.1rem 0.2rem 0.05rem 0;
      font-size: 0.14rem;
      span {
        padding: 0 0.1rem;
        margin: 0;
        border-right: 1px solid #313131;
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
          border: none;
        }
      }
    }
    .time {
      float: left;
      margin: 0.1rem 0 0.05rem 0;
      font-size: 0.14rem;
    }
    .progress {
      float: left;
      width: 100%;
      font-size: 14px;
      .el-progress {
        width: 30%;
        display: inline-block;
        vertical-align: text-bottom;
      }
    }
  }
  .box-tbd {
    margin-bottom: 0.2rem;
    overflow: hidden;
    .left-pic {
      float: left;
      width: 1.8rem;
      overflow: hidden;
      .no-img {
        width: 100%;
        height: 1rem;
        text-align: center;
        line-height: 1.1rem;
        border: 1px solid #c9c9c9;
        i {
          font-size: 0.4rem;
          color: #c9c9c9;
        }
      }
      img {
        display: block;
        width: 100%;
      }
    }
    .right-content {
      margin-left: 2rem;
      line-height: 1.5;
      font-size: 14px;
    }
  }
  /* 课程列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
  .course-list { padding: 0.2rem 0 0.1rem 0; background: #ffffff; }
  .course-list .none { display: none; }
  .course-list .content-group { padding: 0 0.2rem; }
  .course-list .content-group.no-child { margin-bottom: 0.1rem; }
  .course-list .content-group.up { margin-bottom: 0.1rem; }
  .course-list .content-group.up .body { display: none; }
  .course-list .content-group .title { position: relative; padding: 0.1rem 0.54rem 0.1rem 0.2rem; color: #313131; font-size: 0.16rem; line-height: 0.24rem; background: #e5e5e5; user-select: none; cursor: pointer; }
  .course-list .content-group .title .side { position: absolute; top: 50%; right: 0.24rem; transform: translateY(-50%); }
  .course-list .content-group .body { position: relative; padding: 0 0.2rem; font-size: 0.16rem; line-height: 0.24rem; color: #505050; }
  .course-list .content-group .body.on .name { color: #b2183e; }
  .course-list .content-group .body .name { padding: 0.1rem 0.8rem 0.1rem 0.2rem; border-left: 0.02rem solid #c9c9c9; }
  .course-list .content-group .body .name:before { width: 0.2rem; height: 0.2rem; border-radius: 0.32rem; border: 0.02rem solid #c9c9c9; background: #e5e5e5; position: absolute; left: 0.11rem; top: 0.12rem; content: ""; display: block; z-index: 10; }
  .course-list .content-group .body .name .time { position: absolute; right: 0.16rem; top: 0.1rem; }

  /* 老师列表内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
  .list-teacher { margin-bottom: 0.2rem; }
  .list-teacher .img { float: left; width: 30%; min-height: 0.8rem; background: #c9c9c9; }
  .list-teacher .ctx { position: relative; margin-left: 32%; min-height: 0.5rem; }
  .list-teacher .ctx .top-ctx { position: absolute; top: 0; width: 100%; overflow: hidden; }
  .list-teacher .ctx .top-ctx .tit { font-size: 14px; color: #313131; line-height: 1.5; overflow: hidden; word-break: break-all; }
  .list-teacher .ctx .bottom-ctx { display: block; padding-top: 0.2rem; width: 100%; overflow: hidden; }
  .list-teacher .ctx .bottom-ctx .t1 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; }
  .list-teacher .ctx .bottom-ctx .t2 { font-size: 12px; line-height: 1.5; color: #707070; overflow: hidden; word-break: break-all; }
  .list-teacher .ctx .bottom-ctx .t3 { font-size: 12px; color: #707070; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }

  /* 课程考核内容 直接用 wx统一样式 修改单位 并 整体 缩小了 */
  .course-assess { padding: 0.2rem; margin-bottom: 1rem; background: #ffffff; overflow: hidden; }
  .course-assess .title { color: #313131; font-size: 0.2rem; margin: 0.4rem auto 0.2rem auto; text-align: center; }
  .course-assess .topic { position: relative; width: 100%; height: 0.50rem; overflow: hidden; }
  .course-assess .topic .line { width: 3rem; height: 1px; margin: 0.25rem auto 0 auto; background: #313131; }
  .course-assess .topic .tit { position: absolute; top: 50%; left: 50%; padding: 0.1rem 0.22rem; font-size: 0.14rem; font-weight: 700; color: #313131; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .course-assess .detail { margin-bottom: 0.4rem; padding: 0 0.2rem; }
  /* 富文本不定义在这 */
  /* 统计表格 */
  .course-assess .table-title { font-size: 0.16rem; font-weight: 700; margin: 0.2rem 0.26rem 0.20rem 0.26rem; text-align: justify; color: #b49441; }
  .course-assess .table { padding: 0 0.2rem; color: #313131; padding-bottom: 0.3rem; border-bottom: 0.02rem solid #c9c9c9; }
  .course-assess .table .col3-td1 { float: left; padding-left: 0.15rem; width: 65%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; }
  .course-assess .table .col3-td2 { float: left; width: 21%; text-align: center; }
  .course-assess .table .col3-td3 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box; }
  .course-assess .table .col2-td1 { float: left; padding-left: 0.15rem; width: 86%; text-align: left; box-sizing: border-box; -webkit-box-sizing: border-box; }
  .course-assess .table .col2-td2 { float: left; width: 14%; text-align: right; box-sizing: border-box; -webkit-box-sizing: border-box;   }
  .course-assess .table .th { padding: 0 0.2rem; font-size: 0.16rem; overflow: hidden; border-bottom: 0.02rem solid #e5e5e5; line-height: 1.5; font-weight: 700; }
  .course-assess .table .tb { padding: 0 0.2rem; font-size: 0.14rem; overflow: hidden; }
  .course-assess .table .tb .tt { padding: 0.1rem 0 0.02rem 0; line-height: 0.24rem; font-weight: 700; }
  .course-assess .table .tb .rd { overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */ line-height: 0.26rem; /* padding: 10rpx 0; */ }
  /* .course-assess .table .tb .rd:last-child { border-bottom: none; } */
  .course-assess .status-text { padding-left: 0.3rem; font-size: 0.14rem; color: #000000; line-height: 1.5; }
}

@media (max-width: 767px) {
  .detail-box { margin: 0.2rem; }
  .detail-box .box-thd .progress .el-progress {
    width: 80%;
  }
  .detail-box .box-tbd .left-pic {
    width: 100%;
    margin-bottom: 0.2rem;
  }
  .detail-box .box-tbd .right-content {
    margin-left: 0;
    display: block;
  }
  /* 课程考核样式 */
  .detail-box .course-assess .detail { padding: 0; }
  .detail-box .course-assess .table { padding: 0 0 0.3rem 0; }
}
</style>
