<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.currentChapter'>
          <el-button class="rbtn" type="primary" size="mini" @click='startLearn(tabs[1].chapterList.currentChapter)'>继续学习</el-button>
        </template>
        <template v-else-if='headerInfo.isStart'>
          <el-button class="rbtn" type="primary" size="mini" @click='startLearn(firstVideo)'>开始学习</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">
            <template v-if="isCourseDis === '1'">
              <img style="width: 100%;" src="@/assets/images/jcxx.jpg" alt="">
            </template>
            <template v-else>
              <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.start_time }} {{ item1.live.statusStr }}</div>
                          </template>
                          <template v-else>
                            <div class='time'>{{item1.time}}</div>
                          </template>
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </template>
          </el-tab-pane>
          <el-tab-pane label="教材提问" name="2" v-if="isCourseDis === '1'">
            <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-if="item.questioner.uid == $GLOBAL.UserInfo.id" v-bind:key="index" class='item-list lhhId' @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>
                </template>
                <template v-if='!discussList.length && !domLength'>
                  <div class='no-data'>暂无相关讨论</div>
                </template> -->
                <discuss :params="params"></discuss>
              </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="课程考核1" 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-id='item2.id' :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>
          </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>
</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 {
      params: {
        path: `/${this.cid}`,
        request: 'getCourseDiscussList',
        dataJson: {
          limit: 10,
          offset: 0,
          sort: '',
          is_myself: true
        }
      },
      isCourseDis: this.getQueryString('v'),
      domLength: 0,
      ckeditor: null,
      activeName: '1',
      activeName1: '1',
      passCount: 0, // 隐藏功能， 退课专用
      headerInfo: {}, // 后台数据返回
      tabs: [{
        title: '课程简介',
        isShow: false,
        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: '暂无'
          }
        }
      }],
      // tabs: [{
      //   title: '课程简介',
      //   isShow: false,
      //   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' }
        ]
      },
      isOpenNewTabFlag: false,
      arrFn: [],
      cloudClassUrls: {},
      timeHeart: null,
      firstVideo: {}
    }
  },
  mounted () {
    /* 获取云课堂所有地址 */
    cAction.Player.getCloudUrl().then(json => {
      this.cloudClassUrls = json
    })

    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)
      // 设置开始学习的视频
      const courseList = json.tabs1ChapterList.course
      for (let i = 0; i < courseList.length; i++) {
        const children = courseList[i].chapters || []
        if (this.firstVideo && this.firstVideo.vid) {
          break
        }
        for (let k = 0; k < children.length; k++) {
          const item = children[k]
          if (item.vid && item.video_provider) {
            this.firstVideo = item
            break
          }
        }
      }

      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)
    this.arrFn = this.initBindKeyfn()
  },
  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 }
    if (this.arrFn.length) { this.destroyKeyfn(this.arrFn) }
  },
  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/ck/form/ckeditor-upload',
        fileTools_requestHeaders: { tenant: 'sofia' },
        // 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 => {
        /* 更新直播状态 */
        this.tabs[1].chapterList.course = json.tabs1ChapterList.course.map(item => {
          const found = this.tabs[1].chapterList.course.find(rawItem => rawItem.id === item.id)
          item.isUp = found ? found.isUp : item.isUp
          return item
        })
      })
      // 暂不处理，新增章节不能实时更新，需要手动刷新
      // .catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    /**
     * 课程内容 - 列表展开或者跳转
     */
    clickJumpOrStatus (index, data) {
      const flag = !!data.chapters.length
      if (flag) {
        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 { sid, cid } = data
        // 课程大作业
        if (data.id === 'course_work' && !this.headerInfo.survey) {
          this.$message('请先填写教学评估，然后完成大作业。')
          return
        }
        // 教学评估
        if (data.id === 'teach_evaluation') {
          const { sid, cid } = this.$route.params
          this.$router.push({ name: 'survey', params: { sid, cid } })
          return
        }
        this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id } })
      }
    },
    /* 直接跳转打开新页面 */
    openNewTab (sid, cid, _id) {
      cAction.Player.getChapterList(cid, sid, _id).then(json => {
        this.live = (json.curJson && json.curJson.live) || {}
        if (this.live.id) {
          if (this.live.live_status === 2 && this.live.enable_record && this.live.record_url) {
            this.live.url = this.live.record_url
          } else {
            this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
            this.live.url = 'https://view.csslcloud.net/api/view/index?roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + (this.live.viewer_name || '匿名') + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
          }
          // this.CCLiveInit(this.live)
          this.isOpenNewTabFlag = false
          window.open(this.live.url)
        }
      }).catch(e => { this.$message.error(e.message) }).finally(() => { })
    },
    initBindKeyfn () {
      const _fn1 = (e) => {
        if (e.keyCode === 70) {
          this.isOpenNewTabFlag = true
        }
      }
      const _fn2 = (e) => {
        if (e.keyCode === 70) {
          this.isOpenNewTabFlag = false
        }
      }
      document.addEventListener('keydown', _fn1, false)
      document.addEventListener('keyup', _fn2, false)
      return [_fn1, _fn2]
    },
    destroyKeyfn (arr) {
      document.removeEventListener('keydown', arr[0])
      document.removeEventListener('keyup', arr[1])
    },
    /**
     * 跳转到对应音视频播放页
     */
    jumpToOtherVA (data) {
      /* 如果未选课，不能查看课程内容 */
      if (!this.headerInfo.isStart) {
        this.$message.error('先选课，才能学习')
        return
      }
      const { sid, cid, vid, type } = data
      /* 进入详情页，不管是哪个，都存localstorage */
      window.localStorage.setItem('headerInfo', JSON.stringify(this.headerInfo))
      if (type === 1) {
        return
      }
      // cc直播
      if (type === 5) {
        const live = data.live
        const status = live.live_status
        if (status === 2 && !live.enable_record) {
          this.$message.error(live.statusStr)
          return
        }

        /* 判别如果为 云课堂记录 id 则直接进入 云课堂 */
        if (this.cloudClassUrls[vid]) {
          const viewerName = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
          const url = this.cloudClassUrls[vid] + '&viewername=' + viewerName + '&autoLogin=true'
          window.open(url)
          return
        }
        // 新窗口打开
        if (this.isOpenNewTabFlag) {
          this.openNewTab(sid, cid, vid)
          return
        }
      }
      // zoom直播
      if (type === 8) {
        window.open(data.live.record_url || data.live.join_url)
        return
      }
      this.$router.push({ name: 'viewerCourseChapter', params: { sid, cid, id: data.id } })
    },
    /**
     * 开始学习或继续学习 - 跳转到对应音视频播放页
     */
    startLearn (data) {
      if (data.id) {
        this.$router.push({ name: 'viewerCourseChapter', params: { sid: this.sid, cid: this.cid, id: data.id } })
      } else {
        this.$message.error('当前暂无点播课程')
      }
    },
    /**
     * 退课 - 隐藏功能，点击 标题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 _cid = data.cid
      const _vid = data.vid
      const _duration = data.duration
      const _id = data.id
      /* 字母 o */
      if (e.keyCode === 79) {
        /* 直接跳转 进入 继续学习 */
        this.$router.push({ name: 'viewerCourseChapter', params: { cid: _cid, id: _id } })
      }
      /* 字母 f */
      if (e.keyCode === 70) {
        /* 直接 调用接口 完成 本课程学习 */
        cAction.Player.updateProgress({
          d: cTool.other.getIdt(),
          i: cTool.other.getIdt(),
          c: _cid,
          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
              this.params = {
                path: `/${this.cid}`,
                request: 'getCourseDiscussList',
                dataJson: {
                  limit: 10,
                  offset: 0,
                  is_myself: true
                }
              }
              // 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.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)' })
      this.params = {
        path: `/${this.cid}`,
        request: 'getCourseDiscussList',
        dataJson: {
          limit: 10,
          offset: 0,
          sort: this.sort[index].isShow ? str : '',
          is_myself: true
        }
      }
      // cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json => {
      //   this.discussList = json
      // }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
    },
    getQueryString (name) {
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
      const r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2]); return null
    }
  }
}
</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>
