<template>
  <div class="box">
    <div v-if="bankList.length" class="box__body">
      <div
        v-for="(item, index) in bankList"
        class="course-list-item"
        :key="index + 'two'"
      >
        <div class="doubles">
          <div class="course-list-item__title" @click="moduleExam(item)">
            <i
              :class="{
                'el-icon-caret-right': !item.showList,
                'el-icon-caret-bottom': item.showList,
              }"
            ></i>
            {{ item.name }}
          </div>
        </div>
        <template v-if="item.showList">
          <div
            class="item"
            v-for="(chapter, chapterIndex) in item.list"
            :key="chapterIndex"
          >
            <template>
              <div class="item__title" @click="chapterExam(chapter)">
                <i
                  :class="{
                    'el-icon-caret-right': !chapter.showList,
                    'el-icon-caret-bottom': chapter.showList,
                  }"
                ></i>
                {{ chapter.name }}
              </div>
              <div class="item__content">
                <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.examName }}
                    </div>
                    <div v-if="isTest(section.examId)" class="btn">试做</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="chapterExam(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.examName }}
                        </div>
                        <div v-if="isTest(section.examId)" 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.examName }}
                    </div>
                    <div v-if="isTest(item.id)" 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,
    },
    //试听列表
    goodsExamConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      bankList: [],
      needOpen: true, //是否需要一进来展开第一章节
      menuIndex: [], //需要展开的章节索引值
    };
  },
  mounted() {
    this.getGoodsBankList();
  },
  watch: {
    goodsId: {
      handler: function () {
        console.log( "题库11111");
        this.getGoodsBankList();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 是否是试做
     */
    isTest(id) {
      return this.goodsExamConfig.find((item) => item.examId == id);
    },
    /**
     * 获取课程列表
     */
    getGoodsBankList() {
      this.$api.goodsBankList({ goodsId: this.goodsId }).then((res) => {
        res.data.forEach((item) => {
          if (item.type == 2 || item.type == 1) {
            item.showList = false;
            item.list = [];
          }
        });
        this.bankList = res.data;
        this.showAllCharpter();
      });
    },

    /**
     * 展开模块卷
     */
    moduleExam(Module) {
      if (Module.list.length) {
        Module.showList = !Module.showList;
        return;
      }
      this.$api
        .bankChapterList({
          moduleExamId: Module.id,
          goodsId: this.goodsId,
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.showList = false;
            item.list = [];
          });

          this.$set(Module, "showList", !Module.showList);
          Module.list = res.data;
        });
    },
    /**
     * 展开章卷
     */
    chapterExam(chapter) {
      if (chapter.list.length) {
        chapter.showList = !chapter.showList;
        return;
      }
      this.$api
        .bankExamList({
          chapterExamId: chapter.chapterExamId,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.$set(chapter, "showList", !chapter.showList);
          chapter.list = res.data;
        });
    },
    /**
     * 展示第一个章下的节内容
     */
    showAllCharpter() {
      for (let i = 0; i < this.bankList.length; i++) {
        if (this.bankList[i].type == 1) {
          //第一个是模块直接展开，再展开章下面的节
          this.$api
            .bankChapterList({
              moduleExamId: this.bankList[i].id,
            })
            .then((res) => {
              res.data.forEach((re) => {
                re.list = [];
              });
              this.$set(this.bankList[i], "showList", true);
              this.$set(this.bankList[i], "list", res.data);
              this.chapterExam(this.bankList[i].list[0]);
            });
          break;
        } else if (this.bankList[i].type == 2) {
          //第一个章展开下面的节
          this.chapterExam(this.bankList[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;
}

.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>
      