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

<template>
  <div id="courseTree">
    <el-empty description="暂无课程" v-if="courseList.length === 0"></el-empty>
    <ul v-else class="courseTree">
      <li v-for="(item1, index1) in courseDataList" :key="index1">
        <div
          class="menu_box"
          @click="openMenu(item1)"
          :class="isActive(item1) ? 'active' : ''"
        >
          <div class="left level1">
            <el-tag
              size="mini"
              effect="dark"
              :type="getTypeStyle(item1)"
              v-if="item1.type == 3 || item1.type == -1"
              >{{ changeName(item1) }}</el-tag
            >
            <span v-else>
              {{ changeName(item1) }}
            </span>
          </div>
          <div class="center">
            {{ item1.name }}
            <el-tag v-if="item1.type == 2 && item1.commonSign == 1" size="mini"
              >公共章</el-tag
            >
            <p v-if="liveShowTimeData(item1)" class="live_style">
              <span>{{
                $tools.timestampToTime(item1.liveStartTime, (isDay = false))
              }}</span>
              -
              <span>{{
                $tools.timestampToTime(item1.liveEndTime, (isDay = false))
              }}</span>
            </p>
          </div>
          <div class="right">
            <template v-if="item1.type == 3">
              <img
                v-if="isActive(item1)"
                src="@/assets/learing.gif"
                alt=""
                class="activeImg_style"
              />
              <div class="during" v-if="item1.sectionType !== 2">
                {{ $tools.secondToDate(item1.durationTime) }}
              </div>
              <template v-if="BackSTATUS(item1)['name']">
                <el-tag
                  size="mini"
                  effect="light"
                  :type="BackSTATUS(item1)['style']"
                  >{{ BackSTATUS(item1)["name"] }}</el-tag
                >
              </template>
              <el-tag
                size="mini"
                effect="dark"
                v-if="item1.examList.length > 0"
                @click.stop="doExam(item1.examList[0], 2)"
                >习题</el-tag
              >
            </template>
            <template v-else-if="item1.type == -1">
              <template v-if="BackExamStatus(item1)['name']">
                <el-tag
                  size="mini"
                  effect="light"
                  :type="BackExamStatus(item1)['style']"
                  >{{ BackExamStatus(item1)["name"] }}</el-tag
                >
              </template>
            </template>
            <el-tag
              v-else
              v-show="allSectionList.length > 0"
              size="mini"
              effect="light"
              :type="getStudyStatus(item1)['style']"
              >{{ getStudyStatus(item1)["name"] }}</el-tag
            >
          </div>
        </div>
        <ul
          v-if="item1.children && item1.children.length > 0 && item1.showStatus"
        >
          <li v-for="(item2, index2) in item1.children" :key="index2">
            <div
              class="menu_box"
              @click="openMenu(item2)"
              :class="isActive(item2) ? 'active' : ''"
            >
              <div class="left level2">
                <el-tag
                  size="mini"
                  effect="dark"
                  :type="getTypeStyle(item2)"
                  v-if="item2.type == 3 || item2.type == -1"
                  >{{ changeName(item2) }}</el-tag
                >
                <span v-else>
                  {{ changeName(item2) }}
                </span>
              </div>
              <div class="center">
                {{ item2.name }}
                <el-tag
                  v-if="item2.type == 2 && item2.commonSign == 1"
                  size="mini"
                  >公共章</el-tag
                >
                <p v-if="liveShowTimeData(item2)" class="live_style">
                  <span>{{
                    $tools.timestampToTime(item2.liveStartTime, (isDay = false))
                  }}</span>
                  -
                  <span>{{
                    $tools.timestampToTime(item2.liveEndTime, (isDay = false))
                  }}</span>
                </p>
              </div>
              <div class="right">
                <template v-if="item2.type == 3">
                  <img
                    v-if="isActive(item2)"
                    src="@/assets/learing.gif"
                    alt=""
                    class="activeImg_style"
                  />
                  <div class="during" v-if="item2.sectionType !== 2">
                    {{ $tools.secondToDate(item2.durationTime) }}
                  </div>
                  <template v-if="BackSTATUS(item2)['name']">
                    <el-tag
                      size="mini"
                      effect="light"
                      :type="BackSTATUS(item2)['style']"
                      >{{ BackSTATUS(item2)["name"] }}</el-tag
                    >
                  </template>
                  <el-tag
                    size="mini"
                    effect="dark"
                    v-if="item2.examList.length > 0"
                    @click.stop="doExam(item2.examList[0], 2)"
                    >习题</el-tag
                  >
                </template>
                <template v-else-if="item2.type == -1">
                  <template v-if="BackExamStatus(item2)['name']">
                    <el-tag
                      size="mini"
                      effect="light"
                      :type="BackExamStatus(item2)['style']"
                      >{{ BackExamStatus(item2)["name"] }}</el-tag
                    >
                  </template>
                </template>
                <el-tag
                  v-else
                  v-show="allSectionList.length > 0"
                  size="mini"
                  effect="light"
                  :type="getStudyStatus(item2)['style']"
                  >{{ getStudyStatus(item2)["name"] }}</el-tag
                >
              </div>
            </div>
            <ul
              v-if="
                item2.children && item2.children.length > 0 && item2.showStatus
              "
            >
              <li v-for="(item3, index3) in item2.children" :key="index3">
                <div
                  class="menu_box"
                  @click="openMenu(item3)"
                  :class="isActive(item3) ? 'active' : ''"
                >
                  <div class="left level3">
                    <el-tag
                      size="mini"
                      effect="dark"
                      :type="getTypeStyle(item3)"
                      v-if="item3.type == 3 || item3.type == -1"
                      >{{ changeName(item3) }}</el-tag
                    >
                    <span v-else>
                      {{ changeName(item3) }}
                    </span>
                  </div>
                  <div class="center">
                    {{ item3.name }}
                    <p v-if="liveShowTimeData(item3)" class="live_style">
                      <span>{{
                        $tools.timestampToTime(
                          item3.liveStartTime,
                          (isDay = false)
                        )
                      }}</span>
                      -
                      <span>{{
                        $tools.timestampToTime(
                          item3.liveEndTime,
                          (isDay = false)
                        )
                      }}</span>
                    </p>
                  </div>
                  <div class="right">
                    <template v-if="item3.type == 3">
                      <img
                        v-if="isActive(item3)"
                        src="@/assets/learing.gif"
                        alt=""
                        class="activeImg_style"
                      />
                      <div class="during" v-if="item3.sectionType !== 2">
                        {{ $tools.secondToDate(item3.durationTime) }}
                      </div>
                      <template v-if="BackSTATUS(item3)['name']">
                        <el-tag
                          size="mini"
                          effect="light"
                          :type="BackSTATUS(item3)['style']"
                          >{{ BackSTATUS(item3)["name"] }}</el-tag
                        >
                      </template>
                      <el-tag
                        size="mini"
                        effect="dark"
                        v-if="item3.examList.length > 0"
                        @click.stop="doExam(item3.examList[0], 2)"
                        >习题</el-tag
                      >
                    </template>
                    <template v-else-if="item3.type == -1">
                      <template v-if="BackExamStatus(item3)['name']">
                        <el-tag
                          size="mini"
                          effect="light"
                          :type="BackExamStatus(item3)['style']"
                          >{{ BackExamStatus(item3)["name"] }}</el-tag
                        >
                      </template>
                    </template>
                    <el-tag
                      v-else
                      size="mini"
                      effect="dark"
                      v-show="allSectionList.length > 0"
                      >{{ getStudyStatus(item3)["name"] }}</el-tag
                    >
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ["getGoodsData", "getBusinessData"],
  props: {
    rebuild: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    activeSection: {
      type: Object,
      default: () => {
        return {};
      } //当前节数据
    }
  },
  data() {
    return {
      courseList: [], //商品的课程列表
      courseDataList: [], //课程内容
      allSectionList: [], //商品下所有节和试卷
      repeatShowTips: true, //是否显示跳转提示
      nowTime: 0 //当前时间
    };
  },
  computed: {
    goodsData() {
      return this.getGoodsData();
    },
    businessData() {
      return this.getBusinessData();
    },
    changeName: function() {
      return function(item) {
        var str = "";
        if (item.type == 3) {
          switch (item.sectionType) {
            case 1:
              str = "视频";
              break;
            case 2:
              str = "直播";
              break;
            case 3:
              str = "回放";
              break;

            default:
              break;
          }
        } else if (item.type == -1) {
          if (item.doType == 1) {
            str = "练习";
          } else {
            str = "考试";
          }
        } else {
          if (item.showStatus) {
            str = "▼";
          } else {
            str = "▶";
          }
        }
        return str;
      };
    },
    getTypeStyle: function() {
      return function(item) {
        if (item.type == 3) {
          if (item.sectionType == 2) {
            return "danger";
          }
          if (item.sectionType == 3) {
            return "warning";
          }
        } else {
          return "";
        }
      };
    },
    BackSTATUS: function() {
      return function(item) {
        if (item.sectionType == 1) {
          if (item.rebuild > 0) {
            return {
              name: "待重修",
              style: "danger"
            };
          } else if (item.learning == 1) {
            return {
              name: "已学完",
              style: "success"
            };
          }
        }
        if (item.sectionType == 2) {
          if (item.liveStartTime > this.nowTime) {
            return {
              name: "待开播",
              style: "warning"
            };
          } else if (
            item.liveStartTime <= this.nowTime &&
            item.liveEndTime > this.nowTime
          ) {
            return {
              name: "直播中",
              style: "success"
            };
          } else if (item.liveEndTime < this.nowTime) {
            return {
              name: "已结束",
              style: "danger"
            };
          }
        }
        return {};
      };
    },
    BackExamStatus: function() {
      return function(item) {
        if (item.rebuild > 0) {
          return {
            name: "待重测",
            style: "danger"
          };
        } else if (item.learning == 1) {
          return {
            name: "合格",
            style: "success"
          };
        } else if (item.learning == 0) {
          return {
            name: "不及格(需重考)",
            style: "danger"
          };
        }
        return {};
      };
    },
    isActive: function() {
      return function(item) {
        return (
          item.courseId == this.activeSection.courseId &&
          item.moduleId == this.activeSection.moduleId &&
          item.chapterId == this.activeSection.chapterId &&
          item.sectionId == this.activeSection.sectionId
        );
      };
    },
    getStudyStatus: function() {
      return function(item) {
        if (item.type == 1) {
          var STATUSARRAY = this.allSectionList.filter(i => {
            return i.moduleId == item.moduleId;
          });
          if (
            STATUSARRAY.findIndex(
              i =>
                i.moduleId == this.activeSection.moduleId &&
                i.chapterId == this.activeSection.chapterId &&
                i.sectionId == this.activeSection.sectionId &&
                i.studyStatus != 1
            ) !== -1
          ) {
            return {
              name: "学习中",
              style: "warning"
            };
          }
        }
        if (item.type == 2) {
          var STATUSARRAY = this.allSectionList.filter(i => {
            return i.moduleId == item.moduleId && i.chapterId == item.chapterId;
          });
          if (
            STATUSARRAY.findIndex(
              i =>
                i.moduleId == this.activeSection.moduleId &&
                i.chapterId == this.activeSection.chapterId &&
                i.sectionId == this.activeSection.sectionId &&
                i.studyStatus != 1
            ) !== -1
          ) {
            return {
              name: "学习中",
              style: "warning"
            };
          }
        }
        if (STATUSARRAY.every(i => i.studyStatus == 1)) {
          return {
            name: "已学完",
            style: "success"
          };
        } else {
          return {
            name: "待学习",
            style: ""
          };
        }
      };
    }
  },
  created() {
    this.init();
    this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
  },
  mounted() {
    this.$bus.$on("BackVideoFunc", () => {
      this.BackVideoFunc(); //已学完，重新定位
    });
  },
  methods: {
    // 新增用户视频学习日志
    studyLog(item, studyItem) {
      this.$axios({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: this.goodsData.goodsId,
          orderGoodsId: this.goodsData.orderGoodsId,
          courseId: this.courseList[0].courseId,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: this.goodsData.goodsType // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
        }
      }).then(res => {
      });
    },
    //是否显示直播时间范围
    liveShowTimeData(item) {
      if (item.type == 3 && item.sectionType == 2) {
        if (
          item.liveStartTime &&
          item.liveEndTime &&
          item.liveStartTime > this.nowTime
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    async init() {
      await this.getGoodsCourseList(); //获取商品课程列表
      await this.getCourseData(this.courseList[0].courseId); //获取课程内容
      await this.getAllSectionList(); //获取所有节列表
      this.studyLog(); // 新增用户视频学习日志
      /**播放逻辑 */
      if (!(this.rebuild > 0)) {
        this.playBackLogic();
      }
    },
    //获取商品课程列表
    getGoodsCourseList() {
      return new Promise((resolve, reject) => {
        this.$request
          .courseCourseList({
            orderGoodsId: this.goodsData.orderGoodsId,
            goodsId: this.goodsData.goodsId,
            gradeId: this.goodsData.gradeId
          })
          .then(res => {
            if (res.rows && res.rows.length > 0) {
              this.courseList = res.rows;
              resolve();
            } else {
              reject();
            }
          })
          .catch(() => {
            reject();
          });
      });
    },
    //获取课程内容
    getCourseData(id) {
      return new Promise(async (resolve, reject) => {
        const examRes = await this.$request.reSectionExamList({
          chapterId: 0,
          courseId: id,
          gradeId: this.goodsData.gradeId,
          orderGoodsId: this.goodsData.orderGoodsId
        }); //获取节关联练习试卷
        this.$request
          .reMenuList({
            courseId: id,
            gradeId: this.goodsData.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
            rebuild: this.rebuild
          })
          .then(res => {
            this.courseDataList = res.rows.map(i => {
              return {
                level: 1,
                type: i.type,
                name: i.menuName,
                courseId: i.courseId,
                commonSign: i.commonSign || null,
                moduleId: i.type == 1 ? i.menuId : 0,
                chapterId: i.type == 2 ? i.menuId : 0,
                sectionId: i.type == 3 ? i.menuId : 0,
                sectionType: i.type == 3 ? i.sectionType : null,
                durationTime: i.type == 3 ? i.durationTime : null,
                recordingUrl: i.type == 3 ? i.recordingUrl : null,
                liveUrl: i.type == 3 ? i.liveUrl : null,
                liveStartTime: i.sectionType == 2 ? i.liveStartTime : null,
                liveEndTime: i.sectionType == 2 ? i.liveEndTime : null,
                showStatus: false, //展开状态
                children: null, //子列表
                learning: i.type == 3 ? i.learning : null,
                examList:
                  i.type == 3
                    ? examRes.data.filter(item => item.sectionId == i.menuId)
                    : [] //关联试卷
              };
            });
            resolve();
          });
      });
    },
    //展开模块
    openModule(item, status = false, renewal = false) {
      if (item.children && item.children.length > 0) {
        item.showStatus = status ? true : !item.showStatus;
      }
      if (!(item.children && item.children.length > 0) || renewal) {
        return new Promise(resolve => {
          this.$request
            .reChapterList({
              moduleId: item.moduleId,
              gradeId: this.goodsData.gradeId,
              courseId: this.courseList[0].courseId,
              orderGoodsId: this.goodsData.orderGoodsId,
              rebuild: this.rebuild
            })
            .then(res => {
              this.$set(item, "showStatus", true);
              this.$set(
                item,
                "children",
                res.data.map(i => {
                  if (i.id) {
                    return {
                      level: item.level + 1,
                      type: 2,
                      name: i.name,
                      commonSign: i.commonSign || null,
                      courseId: i.courseId,
                      moduleId: i.moduleId,
                      chapterId: i.chapterId,
                      sectionId: 0,
                      sectionType: null,
                      durationTime: null,
                      recordingUrl: null,
                      showStatus: false, //展开状态
                      children: null, //子列表
                      examList: [] //关联试卷
                    };
                  } else {
                    return Object.assign(i, {
                      type: -1,
                      chapterId: 0,
                      examType: 3
                    }); //examType:1章卷，2节卷，3模块卷
                  }
                })
              );
              resolve(item.children);
            });
        });
      }
    },
    //展开章
    /**
     * status = true ? '强制展开'
     * renewal = true ? '重新获取数据'
     */
    openChapter(item, status = false, renewal = false) {
      if (item.children && item.children.length > 0) {
        item.showStatus = item.showStatus = status ? true : !item.showStatus;
      }
      if (!(item.children && item.children.length > 0) || renewal) {
        return new Promise(async resolve => {
          const examRes = await this.$request.reSectionExamList({
            moduleId: item.moduleId,
            chapterId: item.chapterId,
            courseId: item.courseId,
            gradeId: this.goodsData.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId
          }); //获取节关联练习试卷
          this.$request
            .reSectionList({
              chapterId: item.chapterId,
              gradeId: this.goodsData.gradeId,
              courseId: item.courseId,
              rebuild: this.rebuild,
              moduleId: item.moduleId,
              orderGoodsId: this.goodsData.orderGoodsId
            })
            .then(res => {
              this.$set(item, "showStatus", true);
              this.$set(
                item,
                "children",
                res.data.map(i => {
                  if (i.id) {
                    return {
                      level: item.level + 1,
                      type: 3,
                      name: i.name,
                      courseId: item.courseId,
                      moduleId: i.moduleId,
                      chapterId: i.chapterId,
                      sectionId: i.sectionId,
                      sectionType: i.sectionType,
                      durationTime: i.durationTime,
                      recordingUrl: i.recordingUrl,
                      liveUrl: i.liveUrl,
                      liveStartTime:
                        i.sectionType == 2 ? i.liveStartTime : null,
                      liveEndTime: i.sectionType == 2 ? i.liveEndTime : null,
                      learning: i.learning,
                      rebuild: i.rebuild,
                      showStatus: false, //展开状态
                      children: null, //子列表
                      examList:
                        examRes.data.filter(
                          item => item.sectionId == i.sectionId
                        ) || [] //关联试卷
                    };
                  } else {
                    return Object.assign(i, { type: -1, examType: 1 }); //examType:1章卷，2节卷，3模块卷
                  }
                })
              );
              resolve();
            });
        });
      }
    },
    //获取所有节列表
    getAllSectionList() {
      return new Promise((resolve, reject) => {
        this.$request
          .studyrecordgoodsAllListWithExam({
            gradeId: this.goodsData.gradeId,
            goodsId: this.goodsData.goodsId,
            courseId: this.courseList[0].courseId,
            orderGoodsId: this.goodsData.orderGoodsId,
            rebuild: this.rebuild
          })
          .then(res => {
            let ary = res.data.map(i => {
              if (i.type === 3) {
                return {
                  type: 3,
                  name: i.sectionName,
                  courseId: i.courseId,
                  moduleId: i.moduleId,
                  chapterId: i.chapterId,
                  sectionId: i.sectionId,
                  sectionType: i.sectionType,
                  recordingUrl: i.recordingUrl,
                  studyStatus: i.studyStatus,
                  learning: i.studyStatus
                };
              } else {
                return Object.assign(i, {
                  type: -1,
                  typeId: i.examId,
                  chapterId: i.chapterId || 0
                });
              }
            });
            this.allSectionList = ary.filter(i => i.sectionType != 2);
            resolve();
          })
          .catch(err => {
            if (err.code == 601) {
              //资料审核不通过，请前往重新填写
              this.$confirm(err.msg, "提示", {
                confirmButtonText: "确定",
                closeOnClickModal: false,
                closeOnPressEscape: false,
                distinguishCancelAndClose: false,
                showClose: false,
                showCancelButton: false
              })
                .then(_ => {
                  //停止执行-退出页面
                  this.$router.back(-1);
                })
                .catch(_ => {
                  //停止执行-退出页面
                  this.$router.back(-1);
                });
            }
          });
      });
    },
    //点击菜单
    async openMenu(item) {
      if (item.type == 1) {
        await this.openModule(item); //展开模块
      } else if (item.type == 2) {
        await this.openChapter(item); //展开章
      } else {
        try {
          await this.waitCheckStatus(item); //检查是否可以继续执行
          if (item.type == 3) {
            if (item.sectionType == 1) {
              this.watchSection(item);
            } else {
              this.watchJumpSection(item);
            }
          }
          if (item.type == -1) {
            this.doExam(item);
          }
        } catch (error) {
          console.error("菜单展开逻辑报错：",error);
        }
      }
    },
    //检查是否可以继续执行
    waitCheckStatus(item) {
      return new Promise(async (resolve, reject) => {
        if (
          item.type == 3 &&
          ((item.sectionType == 1 && !item.recordingUrl) ||
            (item.sectionType == 2 && !item.liveUrl) ||
            (item.sectionType == 3 && !item.recordingUrl))
        ) {
          this.$message({
            type: "warning",
            message: `暂无播放地址数据`
          });
          return reject();
        }
        if (item.type == -1 && item.doType != 1 && item.learning == 1) {
          this.$message.warning("考试已通过，请勿重复考试");
          return reject();
        }
        if (!this.orderTopTobottom(item)) {
          this.$message({
            type: "warning",
            message:
              item.type == -1
                ? "请学完视频课程再进行练习和测试"
                : "请按顺序学习视频课程"
          });
          return reject();
        }
        // 检查学习次数
        if (!(await this.exceedLearnNum(item))) {
          return reject();
        }
        resolve();
      });
    },
    //播放视频节
    watchSection(item) {
      if (this.isActive(item)) return;
      this.$emit("update:activeSection", item);
      setTimeout(() => {
        this.$bus.$emit("toPlay", item);
      }, 100);
      let query = {
        gradeId: this.goodsData.gradeId,
        orderGoodsId: this.goodsData.orderGoodsId,
        courseId: item.courseId,
        moduleId: item.moduleId || 0,
        chapterId: item.chapterId || 0,
        sectionId: item.sectionId || 0
      };
      this.$router.replace({ path: this.$route.path, query });
    },
    //回放或直播
    async watchJumpSection(item) {
      if (item.sectionType == 2) {
        let data = await this.studyRecordGetChannelBasicInfo(item.liveUrl);
        if (data.watchStatus == "end" || data.watchStatus == "playback") {
          this.$message({
            type: "warning",
            message: `直播已结束`
          });
          return;
        }

        if (data.watchStatus == "waiting") {
          this.$message({
            type: "warning",
            message: `直播未开始`
          });
          return;
        }
      }
      this.$confirm(
        `确定前往观看${
          item.sectionType == 2 ? " [直播] " : " [回放] "
        }${item.sectionName || item.name}?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          var query = {
            goodsName: this.goodsData.name,
            goodsId: this.goodsData.goodsId,
            gradeId: this.goodsData.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
            courseId: item.courseId,
            sectionId: item.sectionId,
            chapterId: item.chapterId,
            moduleId: item.moduleId,
            sectionType: item.sectionType,
            vid: item.recordingUrl // 回放vid
          };
          this.$router.push({
            path: "/living-room/" + item.liveUrl,
            query
          });
        })
        .catch(() => {});
    },
    //判断跳转试卷
    async doExam(item, type) {
      if (this.repeatShowTips) {
        this.$confirm("是否跳转做题页面?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.jumpExam(item, type);
          })
          .catch(() => {});
      } else {
        this.repeatShowTips = true;
        this.jumpExam(item, type);
      }
    },
    //跳转试卷页面
    jumpExam(item, type) {
      this.$router.push({
        path: "/course-exam/" + this.goodsData.goodsId,
        query: {
          orderGoodsId: this.goodsData.orderGoodsId,
          gradeId: this.goodsData.gradeId,
          courseId: this.courseList[0].courseId,
          moduleId: item.moduleId || 0,
          chapterId: item.chapterId || 0,
          sectionId: item.sectionId || 0,
          examId: item.typeId,
          learning: item.learning,
          type: type || item.examType,
          nextStatus: "next" //是否继续播放课程
        }
      });
    },
    //查看直播状态
    studyRecordGetChannelBasicInfo(channelId) {
      return new Promise(resolve => {
        this.$request
          .studyRecordGetChannelBasicInfo({
            channelId
          })
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      });
    },
    //限制播放顺序
    orderTopTobottom(item) {
      if (this.businessData.goodsLearningOrder != 2 || item.sectionType == 2) {
        return true;
      }
      const Findex = this.allSectionList.findIndex(i => {
        if (item.type == 3) {
          return (
            i.type == item.type &&
            i.moduleId == item.moduleId &&
            i.chapterId == item.chapterId &&
            i.sectionId == item.sectionId
          );
        } else {
          return (
            i.type == item.type &&
            i.typeId == item.typeId &&
            i.moduleId == item.moduleId &&
            i.chapterId == item.chapterId
          );
        }
      });
      if (Findex == -1) {
        return true;
      } else {
        const Ary = this.allSectionList.slice(0, Findex);
        if (Ary.length == 0) {
          return true;
        } else {
          return Ary.every(i => i.studyStatus == 1 && !(i.rebuild > 0));
        }
      }
    },
    // 检查学习次数
    async exceedLearnNum(section) {
      let learnNum = await this.goodsTodayStudySectionNum();
      let hasLearn = await this.gradeCheckGoodsStudy(section);
      if (
        this.goodsData.sectionMaxNum > 0 &&
        learnNum >= this.goodsData.sectionMaxNum &&
        !hasLearn
      ) {
        this.$message({
          type: "warning",
          message: `每天最多学习${this.goodsData.sectionMaxNum}节`
        });
        return false;
      }
      return true;
    },
    goodsTodayStudySectionNum() {
      return new Promise(resolve => {
        this.$request
          .goodsTodayStudySectionNum({
            goodsId: this.goodsData.goodsId,
            orderGoodsId: this.goodsData.orderGoodsId,
            gradeId: this.goodsData.gradeId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    gradeCheckGoodsStudy(option) {
      return new Promise(resolve => {
        let data = {
          type: option.type == -1 ? 2 : 1,
          goodsId: this.goodsData.goodsId,
          gradeId: this.goodsData.gradeId,
          orderGoodsId: this.goodsData.orderGoodsId,
          moduleId: option.moduleId || 0,
          chapterId: option.chapterId || 0
        };
        if (option.type == -1) {
          data.examId = option.typeId;
        } else {
          data.sectionId = option.sectionId;
        }
        this.$request.gradeCheckGoodsStudy(data).then(res => {
          resolve(res.data);
        });
      });
    },
    bankRecordDoNum(section) {
      return new Promise(resolve => {
        this.$request
          .bankRecordDoNum({
            goodsId: this.goodsData.goodsId,
            orderGoodsId: this.goodsData.orderGoodsId,
            gradeId: this.goodsData.gradeId,
            courseId: this.courseList[0].courseId,
            moduleId: 0,
            chapterId: section.chapterId,
            examId: section.typeId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    //播放逻辑
    async playBackLogic() {
      const { courseId, moduleId, chapterId, sectionId } = this.$route.query;
      if (courseId >= 0 && moduleId >= 0 && chapterId >= 0 && sectionId >= 0) {
        let data = this.allSectionList.find(
          e =>
            e.courseId == courseId &&
            e.moduleId == moduleId &&
            e.chapterId == chapterId &&
            e.sectionId == sectionId
        );
        this.openMenu(data);
        this.unfoldFunc(data); //展开定位列表
      } else {
        this.$request
          .studyRecordQueryLiveLast({
            gradeId: this.goodsData.gradeId,
            orderGoodsId: this.goodsData.orderGoodsId,
            courseId: this.courseList[0].courseId
          })
          .then(res => {
            let data = res.data;
            if (data && data.endTime > parseInt(new Date().getTime() / 1000)) {
              this.$confirm(
                "当前无法学习，" +
                  this.$tools.timestampToTime(data.endTime, false) +
                  "过后可继续学习",
                "提示",
                {
                  confirmButtonText: "确定",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  showCancelButton: false,
                  distinguishCancelAndClose: false,
                  showClose: false
                }
              )
                .then(_ => {
                  this.$router.back(-1);
                })
                .catch(_ => {});
              return;
            }
            if (!data.sectionId) {
              data = this.allSectionList[0];
            } else {
              data.type = 3;
            }
            if (
              data.learning == 1 &&
              this.businessData.goodsLearningOrder == 2
            ) {
              let next = this.allSectionList.find(e => e.studyStatus != 1);
              next && (data = next);
            }
            this.openMenu(data);
            this.unfoldFunc(data); //展开定位列表
          });
      }
    },
    //展开定位列表
    unfoldFunc(item, status = false, Renewal = false) {
      return new Promise(async resolve => {
        var scrollTopFunc = () => {
          var scrollTop = document.getElementsByClassName("activeImg_style")[0]
            .offsetTop;
          document.getElementsByClassName(
            "courseTree"
          )[0].scrollTop = scrollTop;
        }; //滚动到当前播放位置
        if (item.moduleId) {
          let moduleChildren = await this.openModule(
            this.courseDataList.find(i => i.moduleId == item.moduleId),
            status,
            Renewal
          );
          if (item.chapterId) {
            await this.openChapter(
              moduleChildren.find(i => i.chapterId == item.chapterId),
              status,
              Renewal
            );
            scrollTopFunc();
          }
        }
        if (!item.moduleId && item.chapterId) {
          await this.openChapter(
            this.courseDataList.find(i => i.chapterId == item.chapterId),
            status,
            Renewal
          );
          scrollTopFunc();
        }
        resolve();
      });
    },
    //已学完，重新定位
    async BackVideoFunc() {
      let hasNoStudyStatus = this.allSectionList.find(i => i.studyStatus == -1); //更新前是否存在未学完的课程
      await this.getAllSectionList(); //获取所有节列表
      await this.unfoldFunc(this.activeSection, true, true);
      if (this.businessData.goodsLearningOrder == 2) {
        var ary = this.allSectionList.find(i => i.studyStatus != 1);
      } else {
        var ary = null;
        let index = this.allSectionList.findIndex(
          i =>
            i.courseId == this.activeSection.courseId &&
            i.moduleId == this.activeSection.moduleId &&
            i.chapterId == this.activeSection.chapterId &&
            i.sectionId == this.activeSection.sectionId
        );
        this.$emit(
          "update:activeSection",
          Object.assign({}, this.allSectionList[index])
        ); //重新赋值当前节数据
        ary = this.allSectionList[index + 1];
        if (ary && ary.studyStatus == 1) {
          ary = null;
          hasNoStudyStatus = null;
        }
      }
      if (ary) {
        if (ary.type != 3) {
          this.$confirm(
            "本章视频已学习完成，继续进行下一个考试？",
            "温馨提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              this.repeatShowTips = false; //是否显示跳转提示
              this.openMenu(ary);
              this.unfoldFunc(ary, true, true);
            })
            .catch(() => {});
        } else {
          this.$confirm("当前视频已学完，继续学习下一个视频？", "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.openMenu(ary);
              this.unfoldFunc(ary, true, true);
            })
            .catch(() => {});
        }
      } else {
        if (hasNoStudyStatus) {
          this.$alert(
            "恭喜您课程学习全部完成，教务会在1-3个工作日内完成学习初审，请耐心等待。",
            "温馨提示",
            {
              confirmButtonText: "确定",
              showClose: false,
              callback: action => {
                if (action == "confirm") {
                  this.jumpPage();
                }
              }
            }
          );
        }
      }
    },
    //回到个人中心
    jumpPage() {
      this.$router.replace({
        path: "/person-center/my-course"
      });
    }
  },
  beforeDestroy() {
    this.$bus.$off("BackVideoFunc");
  }
};
</script>

<style lang="scss" scoped>
.active {
  background-color: rgb(107, 107, 107) !important;
}
.activeImg_style {
  width: 20px;
  height: 30px;
}
.courseTree {
  height: 416px;
  overflow: auto;
  user-select: none;

  &::-webkit-scrollbar {
    width: 5px;
    height: 9px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    background-color: inherit;
    border: none;
    border-radius: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    position: relative;
    right: 2px;
    background-color: #c6c6cd;
    width: 6px;
  }
}
.level1 {
  padding-left: 0px;
}
.level2 {
  padding-left: 10px;
}
.level3 {
  padding-left: 20px;
}
.menu_box {
  margin-top: 4px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  min-height: 30px;
  max-height: 60px;
  color: #fff;
  cursor: pointer;
  &:hover {
    background-color: rgb(81, 81, 81);
  }
  & > .left {
    flex-shrink: 0;
    padding-right: 10px;
  }
  & > .center {
    flex: 1;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  & > .right {
    & > .during {
      margin-right: 4px;
    }
    display: flex;
    align-items: center;
    // width: 80px;
    flex-shrink: 0;
  }
}
.live_style {
  & > span {
    font-size: 12px;
  }
}
</style>