<template>
  <div class="box">
    <div v-if="courseList.length" class="box__body">
      <div
        v-for="(course, cindex) in courseList"
        class="course-list-item"
        :key="cindex + 'two'"
      >
        <div class="doubles">
          <div class="course-list-item__title" @click="openCourse(course)">
            <i
              :class="{
                'el-icon-caret-right': !course.showList,
                'el-icon-caret-bottom': course.showList,
              }"
            ></i>
            {{ course.courseName }}
          </div>
        </div>
        <template v-if="course.showList">
          <div class="item" v-for="(item, index) in course.list" :key="index">
            <template v-if="item.type == 1">
              <div class="item__title" @click="openModule(item)">
                <i
                  :class="{
                    'el-icon-caret-right': !item.showList,
                    'el-icon-caret-bottom': item.showList,
                  }"
                ></i>
                {{ item.name }}
              </div>
              <div class="item__content">
                <div class="bank-chapter" v-if="item.showList">
                  <div
                    class="bank-chapter__item"
                    v-for="(chapter, chapterIndex) in item.list"
                    :key="chapterIndex"
                  >
                    <div
                      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 }}
                    </div>

                    <div class="bank-section" v-if="chapter.showList">
                      <div
                        class="bank-section__item"
                        v-for="(section, sectionIndex) in chapter.list"
                        :key="sectionIndex"
                      >
                        <div class="bank-section__item__text">
                          {{ section.name }}
                        </div>
                        <div v-if="section.tryListen" class="btn">试看</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

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

                    <div class="bank-section" v-if="item.showList">
                      <div
                        class="bank-section__item"
                        v-for="(section, sectionIndex) in item.list"
                        :key="sectionIndex"
                      >
                        <div class="bank-section__item__text">
                          {{ section.name }}
                        </div>
                        <div v-if="section.tryListen" class="btn">试看</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <template v-if="item.type == 3">
              <div class="item__content">
                <div class="bank-section">
                  <div class="bank-section__item">
                    <div class="bank-section__item__text">
                      {{ item.name }}
                    </div>
                    <div v-if="item.tryListen" class="btn">试看</div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>
      
  <script>
export default {
  props: {
    goodsId: {
      type: Number,
      default: 0,
    },
    goodsAuditionConfigIdList: {
      type: Array,
      default: () => []
    }
    
  },
  data() {
    return {
      courseList: [],
      needOpen: true, //是否需要一进来展开第一章节
      menuIndex: [], //需要展开的章节索引值
      // goodsAuditionConfigIdList: [], //试听列表
    };
  },
  mounted() {
    this.goodsCourseList();
  },
  watch: {
    'goodsId': {
      handler: function() {
        this.goodsCourseList();
      }
    }
  },
  methods: {
    /**
     * 获取课程章节列表
     */
     goodsCourseList() {
      this.$api
        .goodsCourseList(this.goodsId)
        .then(async (res) => {
          res.rows.forEach((item) => {
            item.showList = false;
            item.list = [];
          });

          this.courseList = res.rows;
          if (this.needOpen) {
            for (let i = 0; i < this.courseList.length; i++) {
              let menuIndexOrFalse = await this.getCourseMenus(
                this.courseList[i]
              );
              if (menuIndexOrFalse !== false) {
                this.menuIndex = [i, menuIndexOrFalse];
                this.openCourse(this.courseList[i]);
                break;
              }
            }
            console.log(this.courseList, "this.courseList");
          }
        });
    },
    /**
     * 点击课程大目录
     */
    openCourse(course) {
      course.showList = !course.showList;
      if (!course.list.length) {
        this.getMenuList(course);
      }
    },
    /**
     * 获取模块列表
     */
    getMenuList(item) {
      this.$api.menuList({ courseId: item.courseId }).then((res) => {
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];
          item.showList = false;
          item.id = item.menuId;
          item.name = item.menuName;

          if (item.type == 3) {
            //判断是否试听
            item.tryListen = false;
            if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
              item.tryListen = true;
            }
          } else {
            item.list = [];
          }
        }
        item.list = res.rows;

        if (this.needOpen) {
          if (item.list[this.menuIndex[1]].type == 1) {
            this.openModule(item.list[this.menuIndex[1]]);
          } else if (item.list[this.menuIndex[1]].type == 2) {
            this.needOpen = false;
            this.openChapter(item.list[this.menuIndex[1]]);
          }
        }
      });
    },
    /**
     * 展开模块卷
     */
    openModule(Module) {
      console.log("点击模块卷");
      this.$set(Module, "showList", !Module.showList);
      if (!Module.list.length) {
        this.getChapterList(Module);
      }
    },
    getChapterList(Module) {
      this.$api.chapterList(Module.id).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.menuType = 2;
        }
        Module.list = res.data;
        console.log(Module.list, "Module.list");
        if (this.needOpen) {
          this.needOpen = false;
          this.openChapter(Module.list[0]);
        }
      });
    },
    /**
     * 展开章卷
     */
    openChapter(chapter) {
      console.log(chapter, "点开章卷");
      this.$set(chapter, "showList", !chapter.showList);

      if (!chapter.list.length) {
        this.getSectionList(chapter);
      }
    },

    getSectionList(chapter) {
      this.$api.sectionList(chapter.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.sectionId;
          item.menuType = 3;
          //判断是否试听
          item.tryListen = false;
          if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
            item.tryListen = true;
          }
        }
        chapter.list = res.data;
      });
    },
    
    getCourseMenus(item) {
      return new Promise((resolve) => {
        this.$api.menuList({ courseId: item.courseId }).then((res) => {
          console.log(res.rows, "i");
          if (res.code == 200) {
            for (let i = 0; i < res.rows.length; i++) {
              if (res.rows[i].type == 1 || res.rows[i].type == 2) {
                resolve(i);
                break;
              }
            }
          }
        });
      });
    },
  },
};
</script>
      
<style scoped lang="scss">
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.box {
  width: 100%;
  &__body {
    .course-list-item {
      padding: 16px;
      background: #f5f7fa;
      border-radius: 10px;
      margin-bottom: 10px;
      .doubles {
        display: flex;
        align-items: center;
      }

      &__title {
        font-size: 18px;
        color: #333;
        font-weight: bold;
        cursor: pointer;
      }

      .item {
        overflow: hidden;
        background: #fff;
        margin-top: 12px;

        &__title {
          padding: 10px 0;
          cursor: pointer;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;

          .note {
            display: inline-block;
            margin-left: 20px;
            width: 40px;
            height: 24px;
            border: 1px solid #ff3b30;
            border-radius: 8px;
            line-height: 22px;
            color: #ff3b30;
            text-align: center;
          }
        }

        &__content {
          background: #fff;

          .bank-chapter {
            margin-left: 4px;

            &__item {
              padding-top: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid #eeeeee;
              font-size: 16px;

              &__text {
                cursor: pointer;
                flex: 1;
              }
            }
          }

          .bank-section {
            margin-left: 40px;

            &__item {
              padding-top: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid #eeeeee;
              font-size: 16px;
              display: flex;

              &__text {
                flex: 1;
              }

              .btn {
                margin-right: 20px;
                width: 40px;
                height: 24px;
                border: 1px solid #ff3b30;
                border-radius: 8px;
                line-height: 22px;
                color: #ff3b30;
                text-align: center;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
</style>
      