<template>
<div>
  <div class="con-title">课程详情</div>
  <div class="detail-box">
    <div class="box-thd">
      <div class="title" @click="noWantThisCourse">{{headerInfo.title}}
        <template v-if='headerInfo.isStart && tabs[1].chapterList.currentChapterId'>
          <el-button class="rbtn" type="primary" size="mini" @click='startLearn' :data-cid='cid' :data-sid='sid' :data-type='tabs[1].chapterList.currentVideoProvider' :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='cid' :data-sid='sid' :data-type='tabs[1].chapterList.course[0].chapters[0].video_provider' :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'>选课</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-cid='_item.cid' :data-sid='_item.sid' :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-type="item1.video_provider" :data-name='item1.name' :data-index='index' :data-count='index1' @click='jumpToOtherVA'>
                        {{item1.name}}
                        <template v-if='item1.type === 5'>
                          <div class='time'>{{ item1.live.statusStr }}</div>
                        </template>
                        <template v-else>
                          <div class='time'>{{item1.time}}</div>
                        </template>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="课程讨论" name="2">
            <template v-if="!isPublicShow">
              <div class='pub-ques'>
                <div class='ask'>
                  <i class="el-icon-edit img"></i>
                  <div class="txt" @click='publishDiscuss'>发布问题 ...</div>
                </div>
                <div :class='["item-order", (sort[0].isShow ? "on" : "")]' @click='sortFn' :data-index='0' :data-str='sort[0].str'>按时间排序</div>
                <div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div>
              </div>
              <div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'>
                <template v-for='(item, index) in discussList'>
                  <div v-bind:key="index" class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'>
                    <div class='user'>
                      <template v-if="item.user.url">
                        <img class='img' :src='item.user.url' />
                      </template>
                      <template v-else>
                        <img class='img' src='@/assets/images/person-default.jpg' />
                      </template>
                      <div class='right'>
                        <div class='name'>{{item.user.name}}</div>
                        <div class='time'>{{item.user.time}}</div>
                      </div>
                    </div>
                    <div class='title'>{{item.title}}</div>
                    <div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div>
                    <div class='result'>{{item.askCnt}} 回答<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} 投票</div>
                    <!-- <div class='course-name'>{{item.courseName}}</div> -->
                  </div>
                </template>
                <template v-if='!discussList.length'>
                  <div class='no-data'>暂无相关讨论</div>
                </template>
              </div>
            </template>
            <template v-else>
              <div class='publish'>
                <div style="overflow: hidden;">
                  <div class="right-goback-txt">发布问题</div>
                  <el-button type="text" @click='gobackDiscuss'>返回问题列表</el-button>
                </div>
                <el-form ref="setPublishform" :model="publish" :rules="publishRules">
                  <el-form-item label="标题" prop="title">
                    <el-input v-model="publish.title" type="text" placeholder="请输入标题"></el-input>
                  </el-form-item>
                  <!--  v-model="publish.content" -->
                  <div style="line-height: 1.5; font-size: 0.16rem; margin-bottom: 0.2rem;">正文内容</div>
                  <textarea id="editor"></textarea>
                  <div style="height: 0.2rem;"></div>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmitPublish">发布问题</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </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' :data-sid='item1.sid' :data-cid='item1.cid' :data-vid='item2.vid' :data-type='item2.type' :data-duration='item2.duration' @mousedown="jumpVAOrfinishVA($event)">{{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='col3-td1'>章节</div>
                  <div class='col3-td2'>提交时间</div>
                  <div class='col3-td3'>得分</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='col3-td1'>{{item2.name}}</div>
                        <div class='col3-td2'>{{item2.created_time || '暂无提交'}}</div>
                        <div class='col3-td3'>{{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' v-if='tabs[3].assess.essay.created_time'>提交时间：{{tabs[3].assess.essay.created_time}}</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">
        <template v-if="tabs[0].content && tabs[0].content.teachers && tabs[0].content.teachers.length">
          <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>
        </template>
      </el-col>
    </el-row>
  </div>
</div>
  <!--  v-model="setArtContent.content" -->
  <!-- <textarea id="editor"></textarea> -->
</template>

<script>
import cAction from '@action'
import cTool from '@tool'

import CKEDITOR from 'CKEDITOR'

export default {
  components: { },
  props: {
    sid: { type: String, require: false },
    cid: { type: String, require: false }
  },
  data () {
    return {
      ckeditor: null,
      activeName: '1',
      activeName1: '1',
      passCount: 0, // 隐藏功能， 退课专用
      headerInfo: {}, // 后台数据返回
      tabs: [{
        title: '课程简介',
        isShow: true,
        content: {
          text: '<p><b>视频课程没有加载出来，请检查自己的网络环境，并重新刷新。</b>',
          teachers: [{
            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 测试课程' }
            ]
          }, {
            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分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/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: '第一章 市场营销原理导论',
            sid: '',
            cid: '',
            arr: [{
              name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
              time: '12:08',
              progress: '100%',
              vid: ''
            }]
          }],
          homewrok: [{
            title: '第一章 市场营销原理导论',
            arr: [{
              name: '1.1 什么是市场营销什么是市场营销市场营销什么是市场营销什么是市场营销',
              score: 20
            }]
          }],
          essay: {
            created_time: '',
            status: '未提交',
            score: '暂无'
          }
        }
      }],
      sort: [
        { isShow: false, str: '' },
        { isShow: false, str: 'tag' }
      ],
      discussList: [], // 后台数据返回
      param: {
        limit: 10, // 默认每页显示10条
        offset: 0, // 偏移量（未考虑传输时，产生新问题情况）
        sort: '' // 排序方式
      },
      publish: {
        course_id: this.cid,
        semester_id: this.sid,
        title: '',
        contents: ''
      },
      isPublicShow: false, // 是否显示发布问题
      publishRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      timeHeart: null
    }
  },
  mounted () {
    const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
    if (this.cid === '0' && this.sid === '0') {
      this.$message({
        message: 'URL异常，请点击“返回首页”，重新选择课程学习！！',
        type: 'info',
        duration: 10000
      })
      loading.close()
      return
    }
    cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
      this.headerInfo = json.headerInfo
      this.tabs[0].content = json.tabs0Content
      this.tabs[1].chapterList = json.tabs1ChapterList
      json.tabs3richTest && (this.tabs[3].richText = json.tabs3richTest)
      cAction.Course.getCourseAssess(this.cid, this.sid).then(json1 => {
        const _courseArr = json.tabs1ChapterList.course
        /* 进行一次 对照，将 视频 vid 赋值 */
        /* BUG: 如果有某一章 都没有视频时，对照失败，从没有的那一章开始，后面全部没有vid */
        for (let i = 0; i < json1.video.length; i++) {
          const _tmp = json1.video[i].arr
          const _tmp1 = _courseArr[i].chapters
          for (let j = 0; j < _tmp.length; j++) {
            for (let k = j; k < _tmp1.length; k++) {
              if (_tmp[j].id === _tmp1[k].id) {
                _tmp[j].vid = _tmp1[k].vid
                _tmp[j].duration = _tmp1[k].duration
                break
              }
            }
          }
        }

        this.tabs[3].assess = json1
        loading.close()
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
      cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
        this.discussList = json2
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    }).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { })
    window.addEventListener('resize', this.resizeRoot.bind(this), false)
    /* 实时刷新数据 */
    if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
    this.timeHeart = setInterval(() => {
      this.updatePages()
    }, 3000)
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeRoot.bind(this), false)
    /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
    this.ckeditor && this.ckeditor.destroy(true)
    this.ckeditor = null
    if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
  },
  updated () {
    this.resizeRoot()
    if (this.isPublicShow) {
      this.initckeditor()
    }
  },
  beforeUpdate () {
    if (!this.isPublicShow) {
      /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
      this.ckeditor && this.ckeditor.destroy(true)
      this.ckeditor = null
    }
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    /* 初始化 ckeditor */
    initckeditor () {
      !this.ckeditor && (this.ckeditor = CKEDITOR.replace('editor', {
        height: 300,
        uiColor: '#eeeeee',
        filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
        // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
        toolbar: [
          // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
          { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
          { name: 'colors', items: ['TextColor', 'BGColor'] },
          { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
          // { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
          { name: 'editing', items: ['Find', 'Replace'] },
          // { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
          '/',
          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
          { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
          { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
          { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
        ]
      }))
    },
    updatePages () {
      cAction.Course.getCourseDetail(this.cid, this.sid).then(json => {
        /* 更新直播状态 */
        const course = json.tabs1ChapterList.course
        for (let i = 0; i < course.length; i++) {
          const chapters = course[i].chapters
          for (let j = 0; j < chapters.length; j++) {
            if (chapters[j].type === 5) {
              this.tabs[1].chapterList.course[i].chapters[j].live = chapters[j].live
            }
          }
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    /**
     * 课程内容 - 列表展开或者跳转
     */
    clickJumpOrStatus (e) {
      const data = e.currentTarget.dataset
      const flag = data.status
      if (flag) {
        const index = data.index
        const json = this.tabs
        const temp = json[1].chapterList.course[index]
        temp.isUp = !temp.isUp
      } else {
        /* 进入详情页，不管是哪个，都存localstorage */
        window.localStorage.setItem('headerInfo', JSON.stringify(this.headerInfo))

        const course = this.tabs[1].chapterList.course[data.index]
        const sid = data.sid
        const cid = data.cid
        if (course.type === 'course_info') {
          this.$router.push({ path: `/player/${sid}/${cid}/course-info/course_info` })
        } else if (course.type === 'course_work') {
          if (!this.headerInfo.survey) {
            this.$message('请先填写教学评估，然后完成大作业。')
            return false
          }
          this.$router.push({ path: `/player/${sid}/${cid}/course-work/course_work` })
        } else if (course.type === 'teach_evaluation') {
          /* 暂时 不增加 手机端 */
          // let w = document.documentElement.clientWidth
          this.$router.push({ path: `/survey/${sid}/${cid}` })
          // if (w > 767) {
          //   this.$router.push({ path: `/survey/${sid}/${cid}` })
          // } else {
          //   this.$router.push({ path: `/survey-phone/${sid}/${cid}` })
          // }
        } else if (course.type === 'exam') {
          this.$router.push({ path: `/player/${sid}/${cid}/exam/${course.examId}` })
        }
      }
    },
    /**
     * 跳转到对应音视频播放页
     */
    jumpToOtherVA (e) {
      /* 如果未选课，不能查看课程内容 */
      if (!this.headerInfo.isStart) {
        this.$message.error('先选课，才能学习')
        return
      }
      let _data = e.target.dataset
      if (!/name/gi.test(e.target.className)) {
        _data = e.target.parentElement.dataset
      }
      const sid = _data.sid
      const cid = _data.cid
      const _id = _data.vid
      const type = _data.type
      if (!_data.hasva) {
        /* 进入详情页，不管是哪个，都存localstorage */
        window.localStorage.setItem('headerInfo', JSON.stringify(this.headerInfo))
        /* 如果存在 - 课后习题类型(chapterExam)， type:3、work_type:1 */
        /* 如果存在 - 课后问题类型(chapterWork)， type:3、work_type:2 */
        /* 如果存在 - 课后阅读类型(chapterRead)， type:4 */
        const i1 = _data.index
        const i2 = _data.count
        const _course = this.tabs[1].chapterList.course[i1]
        if (_course && _course.chapters[i2]) {
          if (_course.chapters[i2].type === 3) {
            if (_course.chapters[i2].work_type === 1) {
              this.$router.push({ path: `/player/${sid}/${cid}/chapter-exam/${_id}` })
            } else if (_course.chapters[i2].work_type === 2) {
              this.$router.push({ path: `/player/${sid}/${cid}/chapter-work/${_id}` })
            }
          } else if (_course.chapters[i2].type === 4) {
            this.$router.push({ path: `/player/${sid}/${cid}/chapter-read/${_id}` })
          } else if (_course.chapters[i2].type === 5) {
            const status = _course.chapters[i2].live.live_status
            if (status !== 0 && status !== 1 && status !== 103) {
              this.$message.error(_course.chapters[i2].live.statusStr)
              return
            }
            const enableRecord = _course.chapters[i2].live.enable_record
            if (status === 103 && enableRecord !== undefined && enableRecord !== null && !enableRecord) {
              this.$message.info('该直播没有回放')
              return
            }
            this.$router.push({ path: `/player/${sid}/${cid}/live/${_id}` })
          }
          return
        }
        this.$message.error('点击频率过快，系统反应不过来，请稍后再试，003')
        return
      }
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}/${type}` })
    },
    /**
     * 开始学习或继续学习 - 跳转到对应音视频播放页
     */
    startLearn (e) {
      const _data = e.currentTarget.dataset
      const sid = _data.sid
      const cid = _data.cid
      const vid = _data.vid
      const type = _data.type
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${vid}/${type}` })
    },
    /**
     * 退课 - 隐藏功能，点击 标题15次，进行退课
     */
    noWantThisCourse () {
      this.passCountTimeout && clearTimeout(this.passCountTimeout)
      this.passCountTimeout = setTimeout(() => {
        this.passCount = 0
      }, 500)
      if (this.passCount < 15) { this.passCount++; return }
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Course.outSelectCourse(this.cid, this.sid).then(json => {
        this.headerInfo.isStart = false
        loading.close()
        this.$message({ type: 'success', message: '退课成功' })
        this.passCount = 0
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    /**
     * 隐藏功能 - 在课程统计页 直接 点击进入视频学习页 或者 直接完成该课程的视频挂载
     */
    jumpVAOrfinishVA (e) {
      const data = e.currentTarget.dataset
      const _fn1 = this._keydownfn.bind(this, data)
      document.addEventListener('keydown', _fn1, false)
      const _fn3 = function () {
        document.removeEventListener('keydown', _fn1)
        document.removeEventListener('mouseup', _fn3)
      }
      document.addEventListener('mouseup', _fn3, false)
    },
    _keydownfn (data, e) {
      const _sid = data.sid
      const _cid = data.cid
      const _vid = data.vid
      const _duration = data.duration
      const type = data.type
      /* 字母 o */
      if (e.keyCode === 79) {
        /* 直接跳转 进入 继续学习 */
        this.$router.push({ path: `/player/${_sid}/${_cid}/chapter-video/${_vid}/${type}` })
      }
      /* 字母 f */
      if (e.keyCode === 70) {
        /* 直接 调用接口 完成 本课程学习 */
        cAction.Player.updateProgress({
          d: cTool.other.getIdt(),
          i: cTool.other.getIdt(),
          c: _cid,
          s: _sid,
          v: _vid,
          _p: parseInt(_duration) + 11, // 累计时间
          _m: parseInt(_duration), // 当前播放最大时间
          _c: parseInt(_duration), // 当前播放位置
          ps: '0,0' // 播放时，播放过的 帧
        }).then(json => {
          if (json.success) {
            this.$message.success('补课成功，刷新查看结果')
          }
        }).catch(e => { this.$message.error(e.message) }).finally(() => { })
      }
    },
    /**
     * 选课
     */
    wantThisCourse () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Course.selectCourse(this.cid, this.sid).then(json => {
        this.headerInfo.isStart = true
        loading.close()
        this.$message({ type: 'success', message: '选课成功' })
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    resizeRoot () {
      const elems = document.querySelectorAll('.ellipsis')
      const fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
      elems.forEach((_, i) => {
        _.previousSibling.style.height = 'auto'
        const height = _.previousSibling.offsetHeight
        const realHeight = fs * 0.18 * 1.5 * 2
        if (height > realHeight) {
          this.discussList[i] && (this.discussList[i].isShow = true)
          _.previousSibling.style.height = realHeight + 'px'
        } else {
          this.discussList[i] && (this.discussList[i].isShow = false)
        }
      })
    },
    /**
     * 发布问题 - 页面打开
     */
    publishDiscuss () {
      this.isPublicShow = true
    },
    /**
     * 返回问题列表
     */
    gobackDiscuss () {
      this.isPublicShow = false
    },
    /**
     * 问题发布 - 接口提交
     */
    onSubmitPublish () {
      this.$refs.setPublishform.validate((valid) => {
        if (valid) {
          if (!this.ckeditor.getData()) {
            this.$message.error('请输入正文内容')
          } else {
            this.publish.contents = this.ckeditor.getData()
            const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
            cAction.Discuss.publishQues(this.publish).then(json => {
              this.$message({
                type: 'success',
                message: '问题发布成功'
              })
              this.isPublicShow = false
              cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
                this.discussList = json2
              }).catch(e => { this.$message.error(e.message) }).finally(() => { })
            }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
          }
        } else {
          this.$message.error('请输入标题')
          return false
        }
      })
    },
    /**
     * 跳转到对应 问题详情页
     */
    goDiscussDetail (e) {
      const qid = e.currentTarget.dataset.id
      this.$router.push({ path: `/app/learn/discuss-detail/${this.sid}/${this.cid}/${qid}` })
    },
    /**
     * 排序方式
     */
    sortFn (e) {
      const index = e.currentTarget.dataset.index
      const str = e.currentTarget.dataset.str
      this.sort[index].isShow = !this.sort[index].isShow
      this.sort[(parseInt(index) + 1) % 2].isShow = false
      this.param.sort = this.sort[index].isShow ? str : ''

      this.param.offset = 0
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json => {
        this.discussList = json
      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    }
  }
}
</script>

<style lang="scss" scoped>
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: 45%;
        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; cursor: pointer; }
  .course-list .content-group .body:hover { background: #f3f3f3; }
  .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; overflow: hidden; }
  .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; }

  /* 课程讨论 */
  .pub-ques { padding: 0 0.26rem; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; }
  .pub-ques .ask { position: relative; float: left; margin-top: 0.22rem; width: 40%; min-width: 1rem; height: 0.42rem; border-radius: 0.28rem; border: 1rpx solid #dcdcdc; background: #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; }
  .pub-ques .ask .img { position: absolute; left: 0.15rem; font-size: 0.24rem; line-height: 0.42rem; }
  .pub-ques .ask .txt { position: absolute; left: 0.45rem; top: 0.01rem; height: 0.4rem; width: 80%; border: none; line-height: 0.4rem; font-size: 0.2rem; color: #313131; }
  .pub-ques .item-order { float: right; margin-top: 0.22rem; padding: 0 0.3rem; margin-left: 0.2rem; font-size: 0.2rem; color: #313131; text-align: center; line-height: 0.42rem; border-radius: 0.28rem; background: #ffffff; cursor: pointer; }
  .pub-ques .item-order.on { background: #b49441; color: #ffffff; }
  // .discuss-scroll { }
  .discuss-scroll .item-list:first-child { margin-top: 0.3rem; }
  .discuss-scroll .item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; }
  .discuss-scroll .item-list .user { position: relative; overflow: hidden; }
  .discuss-scroll .item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
  .discuss-scroll .item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  .discuss-scroll .item-list .user .right .name { font-size: 0.18rem; color: #313131; text-overflow: ellipsis; overflow: hidden; word-break:break-all; }
  .discuss-scroll .item-list .user .right .time { margin-top: 0.05rem; font-size: 0.16rem; color: #a0a0a0; }
  .discuss-scroll .item-list .title { margin: 0.15rem 0; font-size: 0.22rem; color: #313131; font-weight: 700; line-height: 1.5; text-align: justify; }
  .discuss-scroll .item-list .text { font-size: 0.18rem; color: #535353; line-height: 1.5; text-align: justify; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; */ word-break:break-all; overflow: hidden; }
  .discuss-scroll .item-list .ellipsis { display: none; position: absolute; right: 0.24rem; bottom: 0.68rem; padding: 0 0.15rem 0 0.05rem; color: #535353; background: #fff; font-size: 0.18rem; }
  .discuss-scroll .item-list .ellipsis.on { display: block; }
  .discuss-scroll .item-list .result { margin-top: 0.15rem; font-size: 0.16rem; color: #313131; }
  .discuss-scroll .item-list .course-name { position: absolute; right: 0.32rem; bottom: 0.28rem; font-size: 0.16rem; color: #b49441; }
  .discuss-scroll .no-data { margin: 0.2rem 0; font-size: 0.24rem; color: #112c42; line-height: 2rem; text-align: center; background: #fff; }
  /* 问题发布 */
  .publish { margin-bottom: 0.5rem; padding: 0.3rem; background: #f7f7f7; overflow: hidden; }
  .publish .right-goback-txt { float: right; font-size: 0.2rem; color: #000000; line-height: 40px; }

  /* 课程考核内容 直接用 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 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 { padding-right: 0.2rem; overflow: hidden; /* border-bottom: 1rpx solid #e5e5e5; */ line-height: 0.26rem; /* padding: 10rpx 0; */ }
  .course-assess .table .tb .rd:hover { background: #efefef; }
  /* .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>
