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 }}
          </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">
                {{ $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
              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 }}
              </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">
                    {{ $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
                  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 }}
                  </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">
                        {{ $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">{{
                      getStudyStatus(item3)
                    }}</el-tag>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ["getGoodsData", "getBusinessData"],
  data() {
    return {
      courseList: [], //商品的课程列表
      courseDataList: [], //课程内容
      allSectionList: [], //商品下所有节和试卷
      activeSection: {}, //当前节数据
      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.learing == 1) {
          return {
            name: "合格",
            style: "success"
          };
        } else if (item.learing == 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
            ) !== -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
            ) !== -1
          ) {
            return {
              name: "学习中",
              style: "warning"
            };
          }
        }

        if (STATUSARRAY.every(i => i.studyStatus == 1)) {
          if (STATUSARRAY.findIndex(i => i.rebuild == 1) !== -1) {
            return {
              name: "待重修",
              style: "danger"
            };
          } else {
            return {
              name: "已学完",
              style: "success"
            };
          }
        } else if (STATUSARRAY.every(i => i.studyStatus == -1)) {
          return {
            name: "待学习",
            style: ""
          };
        }

        // 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;
      };
    }
  },
  created() {
    this.init();
    this.nowTime = Number(new Date().getTime() / 1000).toFixed(0);
  },
  methods: {
    async init() {
      await this.getGoodsCourseList(); //获取商品课程列表
      await this.getCourseData(this.courseList[0].courseId); //获取课程内容
      await this.getAllSectionList(); //获取所有节列表
      /**播放逻辑 */
      this.playBackLogic();
    },
    //获取商品课程列表
    getGoodsCourseList() {
      return new Promise((resolve, reject) => {
        this.$request
          .courseCourseList({
            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
          })
          .then(res => {
            this.courseDataList = res.rows.map(i => {
              return {
                level: 1,
                type: i.type,
                name: i.menuName,
                courseId: i.courseId,
                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,
                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) {
      if (item.children && item.children.length > 0) {
        item.showStatus = !item.showStatus;
      } else {
        return new Promise(resolve => {
          this.$request
            .reChapterList({
              moduleId: item.moduleId,
              gradeId: this.goodsData.gradeId,
              courseId: this.courseDataList[0].courseId,
              orderGoodsId: this.goodsData.orderGoodsId
              // rebuild: isRebuild ? 1 : undefined
            })
            .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,
                      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);
            });
        });
      }
    },
    //展开章
    openChapter(item) {
      if (item.children && item.children.length > 0) {
        item.showStatus = !item.showStatus;
      } else {
        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: isRebuild ? 1 : undefined,
              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,
                      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
                };
              } else {
                return Object.assign(i, {
                  type: -1,
                  typeId: i.examId,
                  chapterId: i.chapterId || 0
                });
              }
            });
            this.allSectionList = ary.filter(i => i.sectionType != 2);
            resolve();
          });
      });
    },
    //点击菜单
    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.log(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 &&
          !(item.rebuild > 0)
        ) {
          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.$bus.$emit("toPlay", item);
      this.$emit("backActiveSection", item);
      this.activeSection = item;
      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.toPlaySection(item);
    },
    toPlaySection(item) {},
    //跳转试卷
    async doExam(section, type) {
      // 试卷学习次数
      let num =
        this.businessData.goodsLearningOrder != 2 || section.rebuild
          ? await this.bankRecordDoNum(section)
          : section.doNum;
      if (
        (section.answerNum - num > 0 && section.answerNum > 0) ||
        section.answerNum == 0
      ) {
        this.$confirm("是否跳转做题页面?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$router.push({
              path: "/course-exam/" + this.goodsData.goodsId,
              query: {
                gradeId: this.goodsData.gradeId,
                courseId: this.courseList[0].courseId,
                moduleId: section.moduleId || 0,
                chapterId: section.chapterId || 0,
                sectionId: section.sectionId || 0,
                examId: section.typeId,
                learning: section.learning,
                type: type || section.examType,
                nextStatus: "next", //是否继续播放课程
                orderGoodsId: this.goodsData.orderGoodsId
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + section.answerNum + "次"
        });
        return;
      }
    },
    //查看直播状态
    studyRecordGetChannelBasicInfo(channelId) {
      return new Promise(resolve => {
        this.$request
          .studyRecordGetChannelBasicInfo({
            channelId
          })
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {});
      });
    },
    //限制播放顺序
    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,
            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,
          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,
            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.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); //展开定位列表
          });
      }
    },
    //展开定位列表
    async unfoldFunc(item) {
      if (item.moduleId) {
        var ary = this.courseDataList.find(i => i.moduleId == item.moduleId);
        let moduleChildren = await this.openModule(ary);
        if (item.chapterId) {
          await this.openChapter(
            moduleChildren.find(i => i.chapterId == item.chapterId)
          );
        }
      }
      if (!item.moduleId && item.chapterId) {
        var ary = this.courseDataList.find(i => i.chapterId == item.chapterId);
        await this.openChapter(ary);
      }
    }
  }
};
</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;
  }
}
</style>