<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-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-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-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">
            <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/img/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-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 '@actions'
import cTool from '@tools'

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: {
        // 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>是研究组织中人的心理与行为规律的一门科学，是心理学的一个重要分支，也是心理学在管理学方面的一个交叉应用学科。',
          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 净现值（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分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='http://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: [
        // {
        //   user: {
        //     url: '',
        //     name: '用户名000',
        //     time: '2018-2-12 15:28:47'
        //   },
        //   title: '这是一个一句话问题这是一个一句话问题这是一个一句话问题标题这是一个一句话问题',
        //   text: '<p>王家有三兄弟甲、乙、丙，丙幼年时送给胡某作养子，丙结婚时，胡某为其盖了新房，后因失火致使该房屋被烧毁。丙的生父母就将自己<p>',
        //   askCnt: 20,
        //   TouCnt: 100,
        //   courseName: '在线学习课程',
        //   isShow: false
        // }
      ],
      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' }
        ]
      }
    }
  },
  mounted () {
    const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
    cAction.courseAction.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.courseAction.getCourseAssess(this.cid, this.sid).then(json1 => {
        let _courseArr = json.tabs1ChapterList.course
        /* 进行一次 对照，将 视频 vid 赋值 */
        /* BUG: 如果有某一章 都没有视频时，对照失败，从没有的那一章开始，后面全部没有vid */
        for (let i = 0; i < json1.video.length; i++) {
          let _tmp = json1.video[i].arr
          let _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.discussAction.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)
  },
  destroyed () {
    window.removeEventListener('resize', this.resizeRoot.bind(this), false)
    /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
    this.ckeditor && this.ckeditor.destroy(true)
    this.ckeditor = 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' ] }
        ]
      }))
    },
    /**
     * 课程内容 - 列表展开或者跳转
     */
    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 {
        /* 进入详情页，不管是哪个，都存localstorage */
        window.localStorage.setItem('headerInfo', JSON.stringify(this.headerInfo))

        let course = this.tabs[1].chapterList.course[data.index]
        let sid = data.sid
        let 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') {
          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}` })
          // }
        }
      }
    },
    /**
     * 跳转到对应音视频播放页
     */
    jumpToOtherVA (e) {
      /* 如果未选课，不能查看课程内容 */
      if (!this.headerInfo.isStart) {
        this.$message.error('先选课，才能学习')
        return
      }
      let _data = e.target.dataset
      let sid = _data.sid
      let cid = _data.cid
      let _id = _data.vid
      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 */
        let i1 = _data.index
        let i2 = _data.index1
        let _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}` })
          }
          return
        }
        this.$message.error('系统未知错误，001')
        return
      }
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}` })
    },
    /**
     * 开始学习或继续学习 - 跳转到对应音视频播放页
     */
    startLearn (e) {
      let _data = e.currentTarget.dataset
      let sid = _data.sid
      let cid = _data.cid
      let vid = _data.vid
      this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${vid}` })
    },
    /**
     * 退课 - 隐藏功能，点击 标题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.courseAction.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) {
      let data = e.currentTarget.dataset
      let _fn1 = this._keydownfn.bind(this, data)
      document.addEventListener('keydown', _fn1, false)
      let _fn3 = function () {
        document.removeEventListener('keydown', _fn1)
        document.removeEventListener('mouseup', _fn3)
      }
      document.addEventListener('mouseup', _fn3, false)
    },
    _keydownfn (data, e) {
      let _sid = data.sid
      let _cid = data.cid
      let _vid = data.vid
      let _duration = data.duration
      /* 字母 o */
      if (e.keyCode === 79) {
        /* 直接跳转 进入 继续学习 */
        this.$router.push({ path: `/player/${_sid}/${_cid}/chapter-video/${_vid}` })
      }
      /* 字母 f */
      if (e.keyCode === 70) {
        /* 直接 调用接口 完成 本课程学习 */
        cAction.chapterAction.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.courseAction.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 () {
      let elems = document.querySelectorAll('.ellipsis')
      let fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
      elems.forEach((_, i) => {
        _.previousSibling.style.height = 'auto'
        let height = _.previousSibling.offsetHeight
        let 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.discussAction.publishQues(this.publish).then(json => {
              this.$message({
                type: 'success',
                message: '问题发布成功'
              })
              this.isPublicShow = false
              cAction.discussAction.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) {
      let qid = e.currentTarget.dataset.id
      this.$router.push({ path: `/app/my-learn/discuss-detail/${this.sid}/${this.cid}/${qid}` })
    },
    /**
     * 排序方式
     */
    sortFn (e) {
      let index = e.currentTarget.dataset.index
      let 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.discussAction.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>
