saas_pc/src/pages/course-detail/components/CourseTree.vue

<template>
  <div class="course_tree">
    <div v-for="(courseItem, courseIndex) in treeList" :key="courseIndex">
      <div v-if="courseItem.courseList" class="teacherList_name">
        <div
          v-for="tea in courseItem.courseList"
          :key="tea.courseId"
          class="names"
          :class="{ nactive: tea.courseId == courseItem.courseId }"
          @click="activeFunc(tea.courseId, courseIndex)"
        >
          {{ tea.aliasName }}
        </div>
      </div>
      <div
        class="item__title"
        @click="getMenuList(courseItem)"
        v-if="treeList.length != 1"
      >
        <i
          :class="{
            'el-icon-caret-right': !courseItem.showList,
            'el-icon-caret-bottom': courseItem.showList
          }"
        ></i>
        {{ courseItem.courseName }}
      </div>
      <div
        v-if="courseItem.showList"
        :style="{ paddingLeft: treeList.length != 1 ? '12px' : '0' }"
      >
        <div class="item" v-for="(menu, index) in courseItem.list" :key="index">
          <template v-if="menu.type == 1">
            <div
              class="item__title"
              @click="openModule(menu)"
              style="padding:0px 8px;"
            >
              <i
                :class="{
                  'el-icon-caret-right': !menu.showList,
                  'el-icon-caret-bottom': menu.showList
                }"
              ></i>
              <div class="MenuNames">
                {{ menu.menuName }}
              </div>
              <el-tag v-if="menu.commonSign == 1" size="mini">公共章</el-tag>
              <span
                class="btn_status"
                style="height: 20px;line-height: 20px;font-weight: 400;"
                :class="'btn_status_' + getNewModuleStudyStatus(menu, true)"
                >{{ getNewModuleStudyStatus(menu) }}</span
              >
            </div>
            <div class="item__content">
              <div class="bank-chapter" v-if="menu.showList">
                <div
                  class="bank-chapter__item"
                  v-for="chapter in menu.list"
                  :key="chapter.id"
                >
                  <div
                    v-if="chapter.type == 1"
                    class="bank-chapter__item__text"
                    @click="openChapter(chapter)"
                  >
                    <i
                      :class="{
                        'el-icon-caret-right': !chapter.showList,
                        'el-icon-caret-bottom': chapter.showList
                      }"
                    ></i
                    >{{ chapter.name }}

                    <el-tag v-if="chapter.commonSign == 1" size="mini"
                      >公共章</el-tag
                    >
                    <span
                      class="btn_status"
                      :class="
                        'btn_status_' + getNewChapterStudyStatus(chapter, true)
                      "
                      >{{ getNewChapterStudyStatus(chapter) }}</span
                    >
                  </div>

                  <div
                    class="bank-section"
                    v-if="chapter.showList && chapter.type == 1"
                  >
                    <div
                      :id="'section-' + section.typeId"
                      class="bank-section__item"
                      :class="{
                        active: isActive(section)
                      }"
                      v-for="(section, sectionIndex) in chapter.list"
                      :key="sectionIndex"
                      @click="getResource(section, 1, courseIndex)"
                    >
                      <template v-if="section.type != 2">
                        <template>
                          <div
                            class="note note--blue"
                            v-if="section.sectionType == 1"
                          >
                            视频
                          </div>
                          <div class="note" v-if="section.sectionType == 2">
                            直播
                          </div>
                          <div
                            class="note note--yellow"
                            v-if="section.sectionType == 3"
                          >
                            回放
                          </div>
                          <div class="bank-section__item__text">
                            {{ section.name }}
                            <div
                              style="font-size: 12px"
                              v-if="section.liveStartTime > nowTime"
                            >
                              <span>{{
                                $tools.timestampToTime(
                                  section.liveStartTime,
                                  (isDay = false)
                                )
                              }}</span>
                              -
                              <span>{{
                                $tools.timestampToTime(
                                  section.liveEndTime,
                                  (isDay = false)
                                )
                              }}</span>
                            </div>
                          </div>
                        </template>

                        <div class="lear-state" v-if="isActive(section)">
                          <img src="@/assets/learing.gif" alt="" />
                        </div>
                        <template v-if="section.durationTime > 0">
                          <div class="during">
                            {{ $tools.secondToDate(section.durationTime) }}
                          </div>
                        </template>
                        <template>
                          <div class="btn" v-if="section.rebuild > 0">
                            待重修
                          </div>
                          <template v-else>
                            <div
                              class="btn btn--green"
                              v-if="section.learning == 1"
                            >
                              已学完
                            </div>
                          </template>
                        </template>
                        <template
                          v-if="
                            section.liveStartTime && section.sectionType == 2
                          "
                        >
                          <div
                            class="live-btn live-btn--blue"
                            v-if="section.liveStartTime > nowTime"
                          >
                            待开播
                          </div>
                          <div
                            class="live-btn live-btn--yellow"
                            v-if="
                              section.liveStartTime <= nowTime &&
                                section.liveEndTime > nowTime
                            "
                          >
                            直播中
                          </div>
                          <div
                            class="live-btn"
                            v-if="section.liveEndTime < nowTime"
                          >
                            已结束
                          </div>
                        </template>

                        <template
                          v-if="checkSection(section.sectionId, 'sectionExam')"
                        >
                          <div
                            class="exercises"
                            @click.stop="
                              handelPracticeOrRxam(
                                section,
                                2,
                                courseItem.courseId
                              )
                            "
                          >
                            习题
                            <i class="el-icon-arrow-right icons"></i>
                          </div>
                        </template>
                      </template>

                      <template v-if="section.type == 2">
                        <template>
                          <div class="test-btn" v-if="section.doType == 1">
                            练习
                          </div>
                          <div class="test-btn" v-if="section.doType != 1">
                            考试
                          </div>
                        </template>
                        <div class="bank-section__item__text">
                          {{ section.name }}
                        </div>
                        <template>
                          <div class="btn" v-if="section.rebuild > 0">
                            待重修
                          </div>
                          <template v-else>
                            <div
                              class="btn btn--green"
                              v-if="section.learning == 1"
                            >
                              合格
                            </div>
                            <div
                              class="btn btn--red"
                              v-if="section.learning == 0"
                            >
                              不及格(需重考)
                            </div>
                            <div
                              class="btn btn--green"
                              v-if="section.rebuild > 0"
                            >
                              待重测
                            </div>
                          </template>
                        </template>
                      </template>
                    </div>
                  </div>
                  <div
                    v-if="chapter.type == 2"
                    class="bank-section__item"
                    @click="getResource(chapter, 3, courseIndex)"
                  >
                    <template>
                      <template>
                        <div class="test-btn" v-if="chapter.doType == 1">
                          练习
                        </div>
                        <div class="test-btn" v-if="chapter.doType != 1">
                          考试
                        </div>
                      </template>
                      <div class="bank-section__item__text">
                        {{ chapter.name }}
                      </div>
                      <template>
                        <div class="btn" v-if="chapter.rebuild > 0">待重修</div>
                        <template v-else>
                          <div
                            class="btn btn--green"
                            v-if="chapter.learning == 1"
                          >
                            合格
                          </div>
                          <div
                            class="btn btn--red"
                            v-if="chapter.learning == 0"
                          >
                            不及格(需重考)
                          </div></template
                        >
                      </template>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template v-if="menu.type == 2">
            <div class="item__content">
              <div class="bank-chapter">
                <div class="bank-chapter__item">
                  <div
                    class="bank-chapter__item__text"
                    @click="openChapter(menu)"
                  >
                    <i
                      :class="{
                        'el-icon-caret-right': !menu.showList,
                        'el-icon-caret-bottom': menu.showList
                      }"
                    ></i
                    >{{ menu.menuName }}

                    <el-tag v-if="menu.commonSign == 1" size="mini"
                      >公共章</el-tag
                    >
                    <span
                      class="btn_status"
                      :class="
                        'btn_status_' + getNewChapterStudyStatus(menu, true)
                      "
                      >{{ getNewChapterStudyStatus(menu) }}</span
                    >
                  </div>

                  <div class="bank-section" v-if="menu.showList">
                    <div
                      class="bank-section__item"
                      :class="{
                        active: isActive(section)
                      }"
                      v-for="(section, sectionIndex) in menu.list"
                      :key="sectionIndex"
                      @click="getResource(section, 1, courseIndex)"
                      :id="'section-' + section.typeId"
                    >
                      <template v-if="section.type != 2">
                        <template>
                          <div
                            class="note note--blue"
                            v-if="section.sectionType == 1"
                          >
                            视频
                          </div>
                          <div class="note" v-if="section.sectionType == 2">
                            直播
                          </div>
                          <div
                            class="note note--yellow"
                            v-if="section.sectionType == 3"
                          >
                            回放
                          </div>
                        </template>
                        <div class="bank-section__item__text">
                          {{ section.name }}
                          <div
                            style="font-size: 12px"
                            v-if="section.liveStartTime > nowTime"
                          >
                            <span>{{
                              $tools.timestampToTime(
                                section.liveStartTime,
                                (isDay = false)
                              )
                            }}</span>
                            -
                            <span>{{
                              $tools.timestampToTime(
                                section.liveEndTime,
                                (isDay = false)
                              )
                            }}</span>
                          </div>
                        </div>
                        <div class="lear-state" v-if="isActive(section)">
                          <img src="@/assets/learing.gif" alt="" />
                        </div>
                        <template v-if="section.durationTime > 0">
                          <div class="during">
                            {{ $tools.secondToDate(section.durationTime) }}
                          </div>
                        </template>
                        <template>
                          <div class="btn" v-if="section.rebuild > 0">
                            待重修
                          </div>
                          <template v-else>
                            <div
                              class="btn btn--green"
                              v-if="section.learning == 1"
                            >
                              已学完
                            </div>
                          </template>
                        </template>
                        <template
                          v-if="
                            section.liveStartTime && section.sectionType == 2
                          "
                        >
                          <div
                            class="live-btn live-btn--blue"
                            v-if="section.liveStartTime > nowTime"
                          >
                            待开播
                          </div>
                          <div
                            class="live-btn live-btn--yellow"
                            v-if="
                              section.liveStartTime <= nowTime &&
                                section.liveEndTime > nowTime
                            "
                          >
                            直播中
                          </div>
                          <div
                            class="live-btn"
                            v-if="section.liveEndTime < nowTime"
                          >
                            已结束
                          </div>
                        </template>

                        <template
                          v-if="checkSection(section.sectionId, 'sectionExam')"
                        >
                          <div
                            class="exercises"
                            @click.stop="
                              handelPracticeOrRxam(
                                section,
                                2,
                                courseItem.courseId
                              )
                            "
                          >
                            习题
                            <i class="el-icon-arrow-right icons"></i>
                          </div>
                        </template>
                      </template>

                      <template v-if="section.type == 2">
                        <template>
                          <div class="test-btn" v-if="section.doType == 1">
                            练习
                          </div>
                          <div class="test-btn" v-if="section.doType != 1">
                            考试
                          </div>
                        </template>
                        <div class="bank-section__item__text">
                          {{ section.name }}
                        </div>
                        <template>
                          <div class="btn" v-if="section.rebuild > 0">
                            待重修
                          </div>
                          <template v-else>
                            <div
                              class="btn btn--green"
                              v-if="section.learning == 1"
                            >
                              合格
                            </div>
                            <div
                              class="btn btn--red"
                              v-if="section.learning == 0"
                            >
                              不及格(需重考)
                            </div>
                            <div
                              class="btn btn--green"
                              v-if="section.rebuild > 0"
                            >
                              待重测
                            </div>
                          </template>
                        </template>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template v-if="menu.type == 3">
            <div class="item__content">
              <div class="bank-section">
                <div
                  :id="'section-' + menu.typeId"
                  class="bank-section__item"
                  :class="{
                    active: isActive(menu)
                  }"
                  @click="getResource(menu, 1, courseIndex)"
                >
                  <template>
                    <div class="note note--blue" v-if="menu.sectionType == 1">
                      视频
                    </div>
                    <div class="note" v-if="menu.sectionType == 2">直播</div>
                    <div class="note note--yellow" v-if="menu.sectionType == 3">
                      回放
                    </div>
                    <div class="bank-section__item__text">
                      {{ menu.name }}
                      <div
                        style="font-size: 12px"
                        v-if="menu.liveStartTime > nowTime"
                      >
                        <span>{{
                          $tools.timestampToTime(
                            menu.liveStartTime,
                            (isDay = false)
                          )
                        }}</span>
                        -
                        <span>{{
                          $tools.timestampToTime(
                            menu.liveEndTime,
                            (isDay = false)
                          )
                        }}</span>
                      </div>
                    </div>
                  </template>
                  <div class="lear-state" v-if="isActive(menu)">
                    <img src="@/assets/learing.gif" alt="" />
                  </div>
                  <template v-if="menu.durationTime > 0">
                    <div class="during">
                      {{ $tools.secondToDate(menu.durationTime) }}
                    </div>
                  </template>
                  <template>
                    <div class="btn" v-if="menu.rebuild > 0">待重修</div>
                    <template v-else>
                      <div class="btn btn--green" v-if="menu.learning == 1">
                        已学完
                      </div>
                    </template>
                  </template>
                  <template v-if="menu.liveStartTime && menu.sectionType == 2">
                    <div
                      class="live-btn live-btn--blue"
                      v-if="menu.liveStartTime > nowTime"
                    >
                      待开播
                    </div>
                    <div
                      class="live-btn live-btn--yellow"
                      v-if="
                        menu.liveStartTime <= nowTime &&
                          menu.liveEndTime > nowTime
                      "
                    >
                      直播中
                    </div>
                    <div class="live-btn" v-if="menu.liveEndTime < nowTime">
                      已结束
                    </div>
                  </template>

                  <template v-if="checkSection(menu.menuId, 'sectionExamList')">
                    <div
                      class="exercises"
                      @click.stop="
                        handelPracticeOrRxam(menu, 3, courseItem.courseId)
                      "
                    >
                      习题
                      <i class="el-icon-arrow-right icons"></i>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <el-dialog
      title="温馨提示"
      width="380px"
      @open="getAllSectionList"
      center
      class="tip-dialog"
      :visible.sync="dialogPalyVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <template v-if="isLastVideo == 0">
        <p>当前视频已学完，继续学习下一个视频？</p>
        <div class="btn1">
          <el-button type="info" plain round @click="dialogPalyVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="comfirm" round>确定</el-button>
        </div>
      </template>
      <template v-else-if="isLastVideo == 2">
        <p>
          本章视频已学习完成，继续进行下一个考试？
        </p>
        <div class="btn2" style="display: flex;">
          <el-button type="primary" round @click="dialogPalyVisible = false"
            >取消</el-button
          >
          <el-button type="primary" round @click="gotoExamination"
            >确定</el-button
          >
        </div>
      </template>
      <template v-else>
        <p>
          恭喜您课程学习全部完成，教务会在1-3个工作日内完成学习初审，请耐心等待。
        </p>
        <div class="btn2">
          <el-button type="primary" round @click="jumpPage">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    courseList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    goodsLearningOrder: {
      type: Number
    },
    sectionMaxNum: {
      type: Number
    },
    sectionItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rebuild: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      teaIndex: 0,
      nowTime: 0,
      treeList: [],
      sectionExam: [],
      sectionExamList: [],
      dialogPalyVisible: false,
      allSectionList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    jumpPage() {
      this.$router.replace({
        path: "person-center/my-course"
      });
    },
    gotoExamination() {
      let A = this.allSectionList.findIndex(
        i =>
          i.moduleId == this.sectionItem.moduleId &&
          i.chapterId == this.sectionItem.chapterId &&
          i.sectionId == this.sectionItem.sectionId
      );
      if (A !== -1) {
        var a = "section-" + this.allSectionList[A + 1].examId;
        const btn = document.getElementById(a);
        btn.onclick = () => {
          //
        };
        const event = new MouseEvent("click", {
          view: window,
          bubbles: true,
          cancelable: true
        });
        btn.dispatchEvent(event);
        console.log(a);
      }
      return;
    },
    async init() {
      this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
      await this.getAllSectionList();
      this.treeList = await this.getDoubleTeacherList();
      let sectionItem = await this.backNextItem(
        this.treeList.find(e => e.courseId == this.activeCourseId),
        0,
        false
      );
      if (this.query.sectionType == 1 && !!this.query.rebuild == this.rebuild) {
        this.toPlay(sectionItem);
      }
      //生成唯一ID定位Start
      document.getElementsByClassName("lear-state")[0].scrollIntoView(true);
      //生成唯一ID定位End
    },
    activeFunc(courseId, index) {
      let { courseId: nowCourseId, courseList } = this.treeList[index];
      if (courseId == nowCourseId) {
        return;
      }
      let course = this.courseList.find(e => e.courseId == courseId);
      if (course) {
        course.courseList = courseList;
        course.list = [];
        course.showList = false;
      }
      this.treeList.splice(index, 1, JSON.parse(JSON.stringify(course)));
      this.getMenuList(this.treeList[index]);
    },
    getMenuList(course, isFresh = false) {
      let { showList, courseId, list } = course;
      if (!isFresh) {
        course.showList = !showList;
        if (list.length) return;
      }
      this.$request
        .reSectionExamList({
          chapterId: 0,
          courseId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId
        })
        .then(res => {
          this.sectionExamList = res.data;
        });
      return this.$request
        .reMenuList({
          courseId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId
        })
        .then(res => {
          for (let i = 0; i < res.rows.length; i++) {
            let item = res.rows[i];
            item.id = item.menuId;
            item.name = item.menuName;
            item.menuType = item.type;
            item.showList = false;
            item.list = [];
            item.parent = course;
          }
          course.list = res.rows;
          return Promise.resolve(res.rows);
        });
    },
    openModule(module, isFresh = false) {
      console.log("openModule");
      let { list, isRebuild, id, courseId, showList } = module;
      if (!isFresh) {
        module.showList = !showList;
        if (list.length) return;
      }
      return this.$request
        .reChapterList({
          moduleId: id,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
          courseId: courseId,
          rebuild: isRebuild ? 1 : undefined
        })
        .then(res => {
          for (let i = 0; i < res.data.length; i++) {
            let item = res.data[i];
            item.id = item.chapterId;
            item.showList = false;
            item.list = [];
            item.parent = module;
            isRebuild ? (item.isRebuild = 1) : (item.menuType = 2);
          }
          module.list = res.data;
          return Promise.resolve(res.data);
        });
    },
    openChapter(chapter, isFresh = false) {
      let {
        chapterId,
        menuId,
        list,
        moduleId,
        id,
        isRebuild,
        courseId,
        showList
      } = chapter;
      if (!isFresh) {
        chapter.showList = !showList;
        if (list.length) return;
      }

      this.$request
        .reSectionExamList({
          chapterId: chapterId || menuId,
          courseId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId
        })
        .then(res => {
          this.sectionExam = [...this.sectionExam, ...res.data];
        });
      return this.$request
        .reSectionList({
          chapterId: id,
          gradeId: this.gradeId,
          courseId,
          rebuild: isRebuild ? 1 : undefined,
          moduleId: moduleId || 0,
          orderGoodsId: this.orderGoodsId
        })
        .then(res => {
          chapter.canLearn = res.data
            .filter(item => item.type != 2)
            .every(item => item.learning == 1);
          res.data.forEach(section => {
            section.parent = chapter;
            section.courseId = courseId;
          });
          chapter.list = res.data;
          return Promise.resolve(chapter.list);
        });
    },
    getAllSectionList() {
      return this.$request
        .studyrecordgoodsAllListWithExam({
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
          goodsId: this.goodsId,
          rebuild: this.rebuild
        })
        .then(res => {
          let { skipPort } = this.query;
          if (skipPort) {
            let { moduleId, chapterId, sectionId } = res.data[0];
            const query = JSON.parse(JSON.stringify(this.$route.query));
            query.moduleId = moduleId;
            query.chapterId = chapterId;
            query.sectionId = sectionId;
            query.skipPort = undefined;
            console.log("route", { path: this.$route.path, query });
            this.$router.push({ path: this.$route.path, query });
          }
          this.allSectionList = res.data.filter(i => i.doType != 1);
          return Promise.resolve(res.data);
        });
    },
    /**
     * 判断是否是当前播放的节
     */
    isActive(section) {
      let moduleId = section.moduleId || 0;
      let chapterId = section.chapterId || 0;
      let sectionId = section.sectionId || section.menuId;
      let moduleId1 = this.sectionItem.moduleId || 0;
      let chapterId1 = this.sectionItem.chapterId || 0;
      let sectionId1 = this.sectionItem.sectionId || this.sectionItem.menuId;
      return (
        moduleId == moduleId1 &&
        chapterId == chapterId1 &&
        sectionId == sectionId1
      );
    },
    comfirm() {
      this.dialogPalyVisible = false;
      this.playNextVideo();
    },
    // 自动播放下一个视频
    async playNextVideo(sectionItem = this.sectionItem) {
      let { menuId, parent, courseId, projectId } = sectionItem;
      let list = (menuId
        ? this.treeList.find(e => e.courseId == courseId).list
        : projectId
        ? this.treeList
        : parent.list
      ).filter(e => !e.doType);
      let index = list.findIndex(e => e.id == sectionItem.id);
      let nextItem = {};
      if (list.length - 1 > index) {
        nextItem = list[index + 1];
        this.toPlay(
          await this.backNextItem(nextItem, projectId ? 0 : nextItem.menuType)
        );
      } else {
        this.playNextVideo(parent);
      }
    },
    // 获取模块/章/节
    async backNextItem(nextItem, type, isNext = true) {
      if (type == undefined || type == 3) return nextItem;
      let key = ["getMenuList", "openModule", "openChapter"][type];
      let list = nextItem.list.length
        ? nextItem.list
        : await this[key](nextItem);
      if (isNext) {
        nextItem = type == 2 ? list.find(e => e.type == 1) : list[0];
      } else {
        // 初始化 获取播放位置
        let { moduleId, chapterId, sectionId } = this.query;
        nextItem = list.find(e => {
          if (moduleId * 1 && type == 0) {
            return e.menuId == moduleId;
          }
          if (chapterId * 1 && type < 2) {
            return e[moduleId * 1 ? "chapterId" : "menuId"] == chapterId;
          }
          return (
            e[moduleId * 1 || chapterId * 1 ? "sectionId" : "id"] == sectionId
          );
        });
      }
      return this.backNextItem(nextItem, nextItem.menuType, isNext);
    },
    async getResource(section, type, courseIndex) {
      if (section.doType != 1 && section.learning == 1 && section.type == 2) {
        this.$message.warning("考试已通过，请勿重复考试");
        return false;
      }
      if (
        section.type != 2 &&
        this.isActive(section) &&
        section.sectionType != 3 &&
        section.sectionType != 2
      ) {
        return;
      }
      if (
        !(await this.orderTopTobottom(section, type, courseIndex)) &&
        section.sectionType != 2
      ) {
        console.log(section, type, courseIndex);
        this.clickLock = false;
        this.$message({
          type: "warning",
          message:
            section.type == 2
              ? "请学完视频课程再进行练习和测试"
              : "请按顺序学习视频课程"
        });
        return false;
      }
      //视频 回放
      if (section.sectionType == 1 || section.sectionType == 3) {
        if (!section.recordingUrl) {
          this.$message({
            type: "warning",
            message: `暂无播放地址数据`
          });
          return false;
        }
      }
      // 直播
      if (section.sectionType == 2) {
        if (!section.liveUrl) {
          this.$message({
            type: "warning",
            message: `暂无直播地址数据`
          });
          return false;
        }
        let data = await this.studyRecordGetChannelBasicInfo(section.liveUrl);
        if (data.watchStatus == "end" || data.watchStatus == "playback") {
          this.$message({
            type: "warning",
            message: `直播已结束`
          });
          return false;
        }

        if (data.watchStatus == "waiting") {
          this.$message({
            type: "warning",
            message: `直播未开始`
          });
          return false;
        }
      }
      // 学习次数
      if (!(await this.exceedLearnNum(section))) {
        return false;
      }
      section.type == 2
        ? this.toCourseExam(section, type, courseIndex)
        : this.toPlay(section);
    },
    async toCourseExam(section, type, courseIndex) {
      //试卷
      // 学习次数
      let num =
        this.goodsLearningOrder != 2 || section.rebuild
          ? await this.bankRecordDoNum(section.typeId)
          : section.doNum;
      if (
        (section.answerNum - num > 0 && section.answerNum > 0) ||
        section.answerNum == 0
      ) {
        this.$router.push({
          path: "/course-exam/" + this.goodsId,
          query: {
            courseId: this.treeList[courseIndex].courseId,
            gradeId: this.gradeId,
            moduleId: section.moduleId || 0,
            sectionId: section.sectionId || 0,
            examId: section.typeId,
            learning: section.learning,
            type: type,
            chapterId: section.chapterId || 0,
            nextStatus: "next", //是否继续播放课程
            orderGoodsId: this.orderGoodsId
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + section.answerNum + "次"
        });
        return;
      }
    },
    // 节卷不需要控制
    handelPracticeOrRxam(section, type, courseId) {
      if (type == 3) {
        //节卷
        let data = this.sectionExamList.filter(
          x => x.sectionId == section.menuId
        );
        if (data && data.length > 0) {
          section = data[0];
        }
      } else if (type == 2) {
        //节卷
        let data = this.sectionExam.filter(
          x => x.sectionId == section.sectionId
        );

        if (data && data.length > 0) {
          section = data[0];
        }
      }
      this.$router.push({
        path: "/course-exam/" + this.goodsId,
        query: {
          courseId,
          gradeId: this.gradeId,
          moduleId: section.moduleId || 0,
          sectionId: section.sectionId || 0,
          examId: section.typeId,
          learning: section.learning,
          type: type,
          chapterId: section.chapterId || 0,
          nextStatus: "next", //是否继续播放课程
          orderGoodsId: this.orderGoodsId
        }
      });
    },
    async exceedLearnNum(section) {
      let learnNum = await this.goodsTodayStudySectionNum();
      let hasLearn = await this.gradeCheckGoodsStudy(
        section.type == 2 ? section.typeId : section
      );
      if (this.sectionMaxNum > 0) {
        if (learnNum >= this.sectionMaxNum && !hasLearn) {
          this.$message({
            type: "warning",
            message: `每天最多学习${this.sectionMaxNum}节`
          });
          return false;
        }
      }
      return true;
    },
    goodsTodayStudySectionNum() {
      return new Promise(resolve => {
        this.$request
          .goodsTodayStudySectionNum({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
            orderGoodsId: this.orderGoodsId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    gradeCheckGoodsStudy(option) {
      return new Promise(resolve => {
        this.$request
          .gradeCheckGoodsStudy({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
            orderGoodsId: this.orderGoodsId,
            moduleId: option.moduleId || 0,
            chapterId: option.chapterId || 0,
            sectionId: option.sectionId || option.menuId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    bankRecordDoNum(section) {
      return new Promise(resolve => {
        this.$request
          .bankRecordDoNum({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
            orderGoodsId: this.orderGoodsId,
            chapterId: section.chapterId,
            courseId: this.courseId,
            moduleId: 0,
            examId: section.typeId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    toPlay(section) {
      this.$emit("getResource", section, this.rebuild);
    },
    //获取商品双师资模板
    getDoubleTeacherList() {
      let rows = JSON.parse(JSON.stringify(this.courseList));
      rows.forEach(e => {
        e.list = [];
        e.showList = false;
        e.id = e.courseId;
      });
      return this.$request
        .courseTeacherList({
          goodsId: this.$route.params.goodsId
        })
        .then(({ data }) => {
          data.forEach(ele => {
            rows.forEach((e, i) => {
              let actvieIndex = ele.courseIds.indexOf(this.activeCourseId);
              let index = ele.courseIds.indexOf(e.courseId);
              if (actvieIndex != -1 && index != -1) {
                if (e.courseId == this.activeCourseId) {
                  e.courseList = ele.courseList;
                } else {
                  delete rows[i];
                }
              } else {
                if (index == 0) {
                  e.courseList = ele.courseList;
                }
                if (index > 0) {
                  delete rows[i];
                }
              }
            });
          });
          console.log(
            "rows.filter(e => e)",
            rows.filter(e => e)
          );
          return Promise.resolve(rows.filter(e => e));
        });
    },
    async orderTopTobottom(section, type, courseIndex) {
      // let { rebuild, moduleId, chapterId } = section;
      let { rebuild, moduleId, chapterId, parentId, menuId } = section;

      if (this.goodsLearningOrder != 2) {
        return true;
      }
      if (this.treeList.length > 1 && courseIndex > 0) {
        let isAllLear = this.treeList
          .filter((e, i) => i < courseIndex)
          .every(ele => ele.stuAllNum == ele.secAllNum);
        if (!isAllLear) return false;
      }
      let list = await this.studyRecordMenuAllList(
        this.treeList[courseIndex].courseId
      );
      type = type == 1 && section.type == 2 ? 2 : type;
      if (type == 1) {
        if (parentId >= 0 && menuId >= 0) {
          var index = list.findIndex(e => {
            return parentId
              ? e.moduleId == moduleId &&
                  e.chapterId == chapterId &&
                  e.id == section.sectionId
              : e.id == menuId;
          });
        } else {
          var index = list.findIndex(
            e =>
              e.moduleId == moduleId &&
              e.chapterId == chapterId &&
              e.id == section.sectionId
          );
        }
        list = list.slice(0, index);
      } else if (type != 3) {
        list = list.filter(
          e => e.moduleId == moduleId && e.chapterId == chapterId
        );
        var index = list.findIndex(
          e =>
            e.moduleId == moduleId &&
            e.chapterId == chapterId &&
            e.examId == section.typeId
        );
        list = list.slice(0, index);
      }
      return list.every(item => item.studyStatus == 1);
    },
    studyRecordMenuAllList(courseId) {
      return new Promise(resolve => {
        this.$request
          .studyRecordMenuAllListWithExam({
            courseId,
            gradeId: this.gradeId,
            orderGoodsId: this.orderGoodsId,
            goodsId: this.goodsId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    //校验节是否有试卷
    checkSection(sectionId, key) {
      let _data = this[key];
      if (_data.length == 0) {
        return false;
      }
      return _data.some(section => section.sectionId == sectionId);
    },
    // 刷新数据
    refreshList() {
      let { parent, menuId } = this.sectionItem;
      if (menuId) {
        this.getMenuList(playCourse, true);
      } else {
        this.openChapter(parent, true);
      }
    },
    studyRecordGetChannelBasicInfo(channelId) {
      return new Promise(resolve => {
        this.$request
          .studyRecordGetChannelBasicInfo({
            channelId
          })
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {});
      });
    }
  },
  computed: {
    getNewChapterStudyStatus: function() {
      return function(item, style_type) {
        const Array1 = this.allSectionList.filter(
          i =>
            (i.chapterId == item.chapterId || i.chapterId == item.menuId) &&
            (i.moduleId == item.moduleId || i.moduleId == 0)
        );
        var str = "";
        console.log("chapter", this.sectionItem, item);
        if (Array1.every(i => i.studyStatus == 1)) {
          item.studyStatus = 1;
          str = style_type ? 1 : "已学完";
        } else {
          item.studyStatus = -1;
          str = style_type ? -1 : "待学习";
        }
        if (
          (item.menuId == this.sectionItem.chapterId &&
            0 == this.sectionItem.moduleId) ||
          (item.chapterId == this.sectionItem.chapterId &&
            item.moduleId == this.sectionItem.moduleId)
        ) {
          item.studyStatus = 0;
          str = style_type ? 0 : "学习中";
        }
        return str;
      };
    },
    getNewModuleStudyStatus: function() {
      return function(item, style_type) {
        const Array1 = this.allSectionList.filter(
          i => i.moduleId == item.menuId || i.moduleId == 0
        );
        var str = "";
        if (Array1.every(i => i.studyStatus == 1)) {
          item.studyStatus = 1;
          str = style_type ? 1 : "已学完";
        } else {
          item.studyStatus = -1;
          str = style_type ? -1 : "待学习";
        }
        if (item.menuId == this.sectionItem.moduleId) {
          item.studyStatus = 0;
          str = style_type ? 0 : "学习中";
        }
        return str;
      };
    },
    query() {
      return this.$route.query;
    },
    gradeId() {
      return this.query.gradeId;
    },
    activeCourseId() {
      let courseId = this.query.courseId;
      if (!courseId && this.treeList.length) {
        courseId = this.treeList[0].courseId;
      }
      return courseId;
    },
    goodsId() {
      return this.$route.params.goodsId;
    },
    playCourseId() {
      return this.sectionItem.courseId;
    },
    playCourse() {
      return this.treeList.find(e => e.courseId == this.playCourseId);
    },
    isLastVideo() {
      try {
        let sectionId =
          this.sectionItem.sectionId || this.sectionItem.menuId || 0;
        let chapterId = this.sectionItem.chapterId || 0;
        let courseId = this.sectionItem.courseId || 0;
        let lastVideo = this.allSectionList.slice(-1)[0];
        if (
          sectionId == lastVideo.sectionId &&
          chapterId == lastVideo.chapterId &&
          courseId == lastVideo.courseId
        ) {
          return 1;
        } else {
          const index = this.allSectionList.findIndex(
            i =>
              i.sectionId == sectionId &&
              i.chapterId == chapterId &&
              i.courseId == courseId
          );
          if (
            this.allSectionList[index + 1].type == 4 ||
            this.allSectionList[index + 1].type == 5
          ) {
            return 2;
          } else {
            return 0;
          }
        }
      } catch (error) {
        return 0;
      }
    },
    orderGoodsId() {
      return this.query.orderGoodsId;
    }
  }
};
</script>

<style scoped lang="scss">
.btn_status {
  float: right;
  padding: 0px 4px;
  font-size: 12px;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
.btn_status_-1 {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
}
.btn_status_1 {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
}
.btn_status_0 {
  background-color: #fdf6ec;
  border-color: #faecd8;
  color: #e6a23c;
}
.item__title {
  display: flex;
  align-items: center;

  & > .MenuNames {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.course_tree {
  height: 380px;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .item {
    &__title {
      padding-left: 12px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #fff;

      .el-icon-caret-right,
      .el-icon-caret-bottom {
        color: #999;
      }
    }

    &__content {
      .bank-chapter {
        &__item {
          color: #fff;
          font-size: 14px;

          &__text {
            padding: 8px 8px 8px 24px;
            cursor: pointer;
            flex: 1;

            .el-icon-caret-right,
            .el-icon-caret-bottom {
              color: #999;
            }
          }
        }
      }

      .bank-section {
        &__item {
          user-select: none;
          color: #fff;
          font-size: 14px;
          display: flex;
          align-items: center;

          .lear-state {
            height: 20px;
            padding-right: 8px;

            img {
              width: 20px;
              height: 20px;
              // margin-right: 4px;
            }
          }

          &.active {
            background: #132b4d;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #3f8dfd;
          }

          &__text {
            flex: 1;
            padding: 8px 8px 8px 12px;
            // height: 40px;
            max-height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;

            .el-icon-caret-right,
            .el-icon-caret-bottom {
              color: #999;
            }
            & > div > span {
              font-size: 12px !important;
            }
          }

          .test-btn {
            margin-left: 10px;
            width: 32px;
            height: 20px;
            background: #007aff;
            border-radius: 4px;
            line-height: 18px;
            color: #fff;
            text-align: center;
          }

          .note {
            margin-left: 10px;
            width: 32px;
            height: 20px;
            border: 1px solid #ff3b30;
            border-radius: 4px;
            line-height: 18px;
            color: #ff3b30;
            text-align: center;

            &--yellow {
              border-color: #ff9500;
              color: #ff9500;
            }

            &--blue {
              border-color: #3f8dfd;
              color: #3f8dfd;
            }
          }

          .during {
            color: #999;
            margin-right: 10px;
          }

          .btn {
            margin-right: 12px;
            padding: 0 2px;
            height: 20px;
            border: 1px solid #ff3b30;
            background: #ff3b30;
            border-radius: 4px;
            line-height: 18px;
            color: #fff;
            text-align: center;

            &--green {
              border: 1px solid #34c759;
              background: #34c759;
            }
          }

          .live-btn {
            margin-left: 20px;
            width: 60px;
            height: 20px;
            border-radius: 4px;
            background: #eeeeee;
            line-height: 18px;
            color: #666666;
            text-align: center;

            &--yellow {
              background: #fff7eb;
              color: #ff9500;
            }

            &--blue {
              border-color: #ebf4ff;
              color: #007aff;
            }
          }

          .exercises {
            cursor: pointer;
            font-size: 14px;
            color: #498afe;
          }
        }
      }
    }
  }

  .teacherList_name {
    display: flex;
    margin-left: 20px;
    margin-top: 10px;

    .names {
      font-size: 13px;
      color: #383838;
      margin-right: 8px;
      cursor: pointer;
      background: #818181;
      border-radius: 4px;
      padding: 3px 6px;

      &.nactive {
        background: #cccccc;
      }
    }
  }
  .tip-dialog {
    /deep/ {
      .el-dialog__body {
        padding: 6px 40px 44px;
      }

      .el-dialog__header {
        padding-top: 36px;
      }

      .el-dialog__title {
        font-weight: bold;
        color: #222222;
      }
    }

    p {
      color: #666666;
      font-size: 16px;
      text-align: center;
    }

    .btn1 {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;

      .el-button {
        width: 140px;
      }
    }

    .btn2 {
      width: 200px;
      margin: 32px auto 0;

      .el-button {
        width: 200px;
      }
    }
  }
}
</style>