<template>
  <div>
    <div class="con-title">{{ $t('pages.learn.courseDetail.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)"
              >{{ $t('pages.learn.courseDetail.Keeplearning') }}</el-button
            >
          </template>
          <template v-else-if="headerInfo.isStart">
            <el-button class="rbtn" type="primary" size="mini" @click="startLearn(firstVideo)">{{
              $t('pages.learn.courseDetail.Startlearning')
            }}</el-button>
          </template>
          <template v-else>
            <el-button class="rbtn" type="primary" size="mini" @click="wantThisCourse">{{
              $t('pages.learn.courseDetail.Courseselection')
            }}</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">
          {{ $t('pages.learn.courseDetail.Videoviewingprogress') }}&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="$t('pages.learn.courseDetail.Coursecontent')" 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(index, _item)">
                      {{ _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)"
                        >
                          {{ item1.name }}
                          <template v-if="[5, 8].includes(item1.type)">
                            <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>
            </el-tab-pane>
            <el-tab-pane :label="$t('pages.learn.courseDetail.Coursediscussion')" 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">
                      {{ $t('pages.learn.courseDetail.Publishingissues') }}
                    </div>
                  </div>
                  <div
                    :class="['item-order', sort[0].isShow ? 'on' : '']"
                    @click="sortFn"
                    :data-index="0"
                    :data-str="sort[0].str"
                  >
                    {{ $t('pages.learn.courseDetail.Sortbytime') }}
                  </div>
                  <div
                    :class="['item-order', sort[1].isShow ? 'on' : '']"
                    @click="sortFn"
                    :data-index="1"
                    :data-str="sort[1].str"
                  >
                    {{ $t('pages.learn.courseDetail.Sortbyvote') }}
                  </div>
                </div>
                <div class="discuss-scroll" bindscrolltolower="loadmore" bindscrolltoupper="updatenew">
                  <discuss :params="params"></discuss>
                </div>
              </template>
              <template v-else>
                <div class="publish">
                  <div style="overflow: hidden">
                    <div class="right-goback-txt">
                      {{ $t('pages.learn.courseDetail.Releaseissues') }}
                    </div>
                    <el-button type="text" @click="gobackDiscuss">{{
                      $t('pages.learn.courseDetail.Returntoquestionlist')
                    }}</el-button>
                  </div>
                  <el-form ref="setPublishform" :model="publish" :rules="publishRules" label-position="top">
                    <el-form-item :label="$t('pages.learn.courseDetail.title1')" prop="title">
                      <el-input
                        v-model="publish.title"
                        type="text"
                        :placeholder="$t('pages.learn.courseDetail.inputtitle1')"
                      ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('pages.learn.courseDetail.Textcontent')" prop="contents">
                      <v-editor v-model="publish.contents"></v-editor>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmitPublish">{{
                        $t('pages.learn.courseDetail.Releaseissues')
                      }}</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-tab-pane>
            <el-tab-pane :label="$t('pages.learn.courseDetail.Courseassessment')" name="3">
              <div class="course-assess">
                <div class="title">
                  {{ $t('pages.learn.courseDetail.Finalresult') }}
                  {{
                    (tabs[3].assess.score && tabs[3].assess.score + $t('pages.learn.courseDetail.point')) ||
                    $t('pages.learn.courseDetail.no')
                  }}
                </div>
                <div class="topic">
                  <div class="line"></div>
                  <div class="tit">
                    {{ $t('pages.learn.courseDetail.Courseassessmentstandard') }}
                  </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">
                    {{ $t('pages.learn.courseDetail.Learningprogressachievements') }}
                  </div>
                </div>
                <div class="table-title">
                  {{ $t('pages.learn.courseDetail.title2') }}{{ tabs[3].assess.duration
                  }}{{ $t('pages.learn.courseDetail.Completionrate') }}{{ tabs[3].assess.progress }} ）
                </div>
                <div class="table">
                  <div class="th">
                    <div class="col3-td1">
                      {{ $t('pages.learn.courseDetail.chapter') }}
                    </div>
                    <div class="col3-td2">
                      {{ $t('pages.learn.courseDetail.Lengthofstudy') }}
                    </div>
                    <div class="col3-td3">
                      {{ $t('pages.learn.courseDetail.percent') }}
                    </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">
                      {{ $t('pages.learn.courseDetail.Nodataavailable') }}
                    </div>
                  </template>
                </div>
                <div class="table-title">
                  {{ $t('pages.learn.courseDetail.subjectivequestions') }}
                </div>
                <div class="table">
                  <div class="th">
                    <div class="col3-td1">
                      {{ $t('pages.learn.courseDetail.chapter') }}
                    </div>
                    <div class="col3-td2">
                      {{ $t('pages.learn.courseDetail.Submissiontime') }}
                    </div>
                    <div class="col3-td3">
                      {{ $t('pages.learn.courseDetail.score') }}
                    </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">
                      {{ $t('pages.learn.courseDetail.Nodataavailable') }}
                    </div>
                  </template>
                </div>
                <div class="table-title">{{ $t('pages.learn.courseDetail.Bighomework') }}</div>
                <div class="status-text">
                  {{ $t('pages.learn.courseDetail.Status') }}{{ tabs[3].assess.essay.status }}
                </div>
                <div class="status-text" v-if="tabs[3].assess.essay.created_time">
                  {{ $t('pages.learn.courseDetail.Submissiontime') }}：{{ tabs[3].assess.essay.created_time }}
                </div>
                <div class="status-text">
                  {{ $t('pages.learn.courseDetail.score2') }}{{ 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="$t('pages.learn.courseDetail.Courselecturer')" 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 VEditor from '@/components/ckeditor'

export default {
  components: { VEditor },
  props: {
    sid: {
      type: String,
      require: false
    },
    cid: {
      type: String,
      require: false
    }
  },
  data() {
    return {
      params: {
        path: `/${this.sid}/${this.cid}`,
        request: 'getCourseDiscussList',
        page: {
          limit: 10,
          offset: 0
        }
      },
      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: '课程讨论',
          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: this.$t('pages.learn.courseDetail.inputtitle1'), trigger: 'blur' }],
        contents: [{ required: true, message: this.$t('pages.learn.courseDetail.inputTextcontent'), 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)
    if (this.timeHeart) {
      clearInterval(this.timeHeart)
      this.timeHeart = null
    }
    if (this.arrFn.length) {
      this.destroyKeyfn(this.arrFn)
    }
  },
  updated() {
    this.resizeRoot()
  },
  methods: {
    handleClick(tab, event) {
      /* console.log(tab, event) */
    },
    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.$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 === 3 && 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 hasRecordUrl = live.enable_record && live.record_url
        if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
          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) {
        const live = data.live
        const hasRecordUrl = live.enable_record && live.record_url
        if ([3, 5].includes(live.live_status) && !hasRecordUrl) {
          this.$message.error(live.statusStr)
          return
        }
        window.open(data.live.record_url || data.live.join_url)
        return
      }
      this.$router.push({
        name: 'viewerCourseChapter',
        params: {
          sid,
          cid,
          id: data.id
        },
        query: {
          offset: data.offset
        }
      })
    },
    /**
     * 开始学习或继续学习 - 跳转到对应音视频播放页
     */
    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 _sid = data.sid
      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: {
            sid: _sid,
            cid: _cid,
            id: _id
          }
        })
      }
      /* 字母 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) {
          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.$t('pages.learn.courseDetail.publishSuccessTips') })
              this.isPublicShow = false
              this.params = {
                path: `/${this.sid}/${this.cid}`,
                request: 'getCourseDiscussList',
                page: { limit: 10, offset: 0 }
              }
              this.$refs.setPublishform.resetFields()
              // 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()
            })
        }
      })
    },
    /**
     * 跳转到对应 问题详情页
     */
    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)' })
      this.params = {
        path: `/${this.sid}/${this.cid}`,
        request: 'getCourseDiscussList',
        dataJson: {
          limit: 10,
          offset: 0,
          sort: this.sort[index].isShow ? str : ''
        }
      }
      // 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.5rem;
    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.2rem 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>
