zc_saas_pc/src/pages/person-center/my-bank/bank-detailCopy/index.vue

<template>
  <div id="bankDetailCopy" class="bank-detail">
    <section class="section">
      <div class="section__body">
        <div class="left-box">
          <el-tabs v-model="activeName" @tab-click="tabChange">
            <el-tab-pane label="全部" name="0">
              <div class="goods-menu">
                <div class="goods-menu__body">
                  <div
                    class="item"
                    v-for="(item, index) in bankList"
                    :key="index"
                  >
                    <template v-if="item.type == 1">
                      <div class="item__title" @click="moduleExam(item)">
                        {{ item.name }}
                      </div>
                      <div class="item__content" v-if="item.showList">
                        <div class="bank-chapter">
                          <div
                            class="bank-chapter__item"
                            v-for="(chapter, chapterIndex) in item.list"
                            :key="chapterIndex"
                          >
                            <div
                              class="bank-chapter__item__text"
                              @click="chapterExam(chapter, item.majorId)"
                            >
                              <span
                                style="
                                  margin-left: 21px;
                                  margin-right: 8px;
                                  color: #a7b0b8;
                                "
                                ><span v-if="chapterIndex + 1 < 10"
                                  >0{{ chapterIndex + 1 }}</span
                                ><span v-else>
                                  {{ chapterIndex + 1 }}
                                </span></span
                              >{{ 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">
                                  <span
                                    style="margin-right: 8px; color: #a7b0b8"
                                    >●</span
                                  >
                                  {{ section.examName }}
                                  <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    v-if="section.newRecordStatus"
                                    >上次做到</el-button
                                  >
                                </div>
                                <div class="btn_div">
                                  <!-- 正确率
                                  <span style="color: rgb(52, 216, 71)"
                                    >{{
                                      computedNums(
                                        section.doQuestionNum,
                                        section.questionNum
                                      )
                                    }}%</span
                                  > -->
                                  <span style="margin-left: 6px">题目数： </span
                                  ><span style="color: blue">{{
                                    section.doQuestionNum || 0
                                  }}</span>
                                  /
                                  {{ section.questionNum || 0 }}
                                </div>
                                <el-button
                                  v-if="section.recordStatus == -1"
                                  type="primary"
                                  @click="
                                    toDo(
                                      section,
                                      chapter.chapterExamId,
                                      item.majorId
                                    )
                                  "
                                  class="btn"
                                  >开始做题</el-button
                                >
                                <el-button
                                  v-if="
                                    section.recordStatus == 0 &&
                                    section.doType == 1
                                  "
                                  type="primary"
                                  @click="
                                    continueDo(
                                      section,
                                      chapter.chapterExamId,
                                      item.majorId
                                    )
                                  "
                                  class="btn"
                                  >继续做题</el-button
                                >

                                <el-button
                                  v-if="
                                    section.recordStatus == 1 ||
                                    (section.recordStatus == 0 &&
                                      section.doType == 2)
                                  "
                                  :disabled="
                                    section.answerNum > 0 &&
                                    section.doNum >= section.answerNum
                                  "
                                  type="primary"
                                  @click="
                                    doRepeat(
                                      section,
                                      chapter.chapterExamId,
                                      item.majorId
                                    )
                                  "
                                  class="btn"
                                  >重新做题</el-button
                                >
                              </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="chapterExam(item, 0)"
                            >
                              <span
                                style="
                                  margin-left: 21px;
                                  margin-right: 8px;
                                  color: #a7b0b8;
                                "
                                ><span v-if="index + 1 < 10"
                                  >0{{ index + 1 }}</span
                                ><span v-else>
                                  {{ index + 1 }}
                                </span></span
                              >{{ 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">
                                  <span
                                    style="margin-right: 8px; color: #a7b0b8"
                                    >●</span
                                  >
                                  {{ section.examName }}
                                  <el-button
                                    size="mini"
                                    type="primary"
                                    plain
                                    v-if="section.newRecordStatus"
                                    >上次做到</el-button
                                  >
                                </div>
                                <div
                                  style="width: auto; padding: 0px 14px"
                                  class="btn_div"
                                >
                                  <!-- 正确率
                                  <span style="color: rgb(52, 216, 71)"
                                    >{{
                                      computedNums(
                                        section.doQuestionNum,
                                        section.questionNum
                                      )
                                    }}%</span
                                  > -->
                                  <span style="margin-left: 6px">题目数： </span
                                  ><span style="color: blue">{{
                                    section.doQuestionNum || 0
                                  }}</span>
                                  /
                                  {{ section.questionNum || 0 }}
                                </div>
                                <el-button
                                  v-if="section.recordStatus == -1"
                                  type="primary"
                                  @click="toDo(section, item.majorId, 0)"
                                  class="btn"
                                  >开始做题</el-button
                                >
                                <el-button
                                  v-if="
                                    section.recordStatus == 0 &&
                                    section.doType == 1
                                  "
                                  type="primary"
                                  @click="continueDo(section, item.majorId, 0)"
                                  class="btn"
                                  >继续做题</el-button
                                >

                                <el-button
                                  v-if="
                                    section.recordStatus == 1 ||
                                    (section.recordStatus == 0 &&
                                      section.doType == 2)
                                  "
                                  :disabled="
                                    section.answerNum > 0 &&
                                    section.doNum >= section.answerNum
                                  "
                                  type="primary"
                                  @click="doRepeat(section, item.majorId, 0)"
                                  class="btn"
                                  >重新做题</el-button
                                >
                              </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">
                              <span style="margin-right: 8px; color: #a7b0b8"
                                >●</span
                              >
                              {{ item.name }}
                              <el-button
                                size="mini"
                                type="primary"
                                plain
                                v-if="item.newRecordStatus"
                                >上次做到</el-button
                              >
                            </div>
                            <div
                              style="width: auto; padding: 0px 14px"
                              class="btn_div"
                            >
                              <!-- 正确率
                              <span style="color: rgb(52, 216, 71)"
                                >{{
                                  computedNums(
                                    item.doQuestionNum,
                                    item.questionNum
                                  )
                                }}%</span
                              > -->
                              <span style="margin-left: 6px">题目数： </span
                              ><span style="color: blue">{{
                                item.doQuestionNum || 0
                              }}</span>
                              / {{ item.questionNum || 0 }}
                            </div>
                            <el-button
                              v-if="item.recordStatus == -1"
                              type="primary"
                              @click="toDo(item, 0, 0)"
                              class="btn"
                              >开始做题</el-button
                            >
                            <el-button
                              v-if="item.recordStatus == 0 && item.doType == 1"
                              type="primary"
                              @click="continueDo(item, 0, 0)"
                              class="btn"
                              >继续做题</el-button
                            >

                            <el-button
                              v-if="
                                item.recordStatus == 1 ||
                                (item.recordStatus == 0 && item.doType == 2)
                              "
                              :disabled="
                                item.answerNum > 0 &&
                                item.doNum >= item.answerNum
                              "
                              type="primary"
                              @click="doRepeat(item, 0, 0)"
                              class="btn"
                              >重新做题</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane
              v-for="(items, indexs) in newList"
              :key="indexs"
              :label="items.paperName"
              :name="items.paperId + ''"
            >
              <div
                v-for="(item, index) in examListNew"
                :key="index"
                class="_content"
              >
                <div class="bank-section">
                  <div class="bank-section__item">
                    <div class="bank-section__item__text">
                      <span style="margin-right: 8px; color: #a7b0b8">●</span>
                      {{ item.examName }}
                      <el-button
                        size="mini"
                        type="primary"
                        plain
                        v-if="item.newRecordStatus"
                        >上次做到</el-button
                      >
                    </div>
                    <div style="width: auto; padding: 0px 14px" class="btn_div">
                      <!-- 正确率
                              <span style="color: rgb(52, 216, 71)"
                                >{{
                                  computedNums(
                                    item.doQuestionNum,
                                    item.questionNum
                                  )
                                }}%</span
                              > -->
                      <span style="margin-left: 6px">题目数： </span
                      ><span style="color: blue">{{
                        item.doQuestionNum || 0
                      }}</span>
                      / {{ item.questionNum || 0 }}
                    </div>
                    <el-button
                      v-if="item.recordStatus == -1"
                      type="primary"
                      @click="toDo(item, 0, 0)"
                      class="btn"
                      >开始做题</el-button
                    >
                    <el-button
                      v-if="item.recordStatus == 0 && item.doType == 1"
                      type="primary"
                      @click="continueDo(item, 0, 0)"
                      class="btn"
                      >继续做题</el-button
                    >

                    <el-button
                      v-if="
                        item.recordStatus == 1 ||
                        (item.recordStatus == 0 && item.doType == 2)
                      "
                      :disabled="
                        item.answerNum > 0 && item.doNum >= item.answerNum
                      "
                      type="primary"
                      @click="doRepeat(item, 0, 0)"
                      class="btn"
                      >重新做题</el-button
                    >
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="收藏题集" name="-1">
              <div class="goods-collect">
                <div class="goods-collect__header">
                  <div class="selects">
                    <div class="selects__item">
                      <el-select
                        placeholder="请选择"
                        v-model="collectSelect"
                        @change="getCollectData"
                        clearable
                        @clear="getWrongData"
                      >
                        <el-option
                          v-for="(item, index) in selectList"
                          :key="index"
                          :label="item.paperName"
                          :value="item.paperId"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>

                  <div class="tabs">
                    <el-tabs v-model="collectName" @tab-click="getCollectData">
                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
                    </el-tabs>
                  </div>
                </div>

                <div class="goods-collect__body">
                  <div class="box">
                    <div class="title">收藏统计</div>
                    <div class="circle">
                      <el-progress
                        type="circle"
                        :width="160"
                        :stroke-width="12"
                        color="#FFC53D"
                        :format="() => collectTotal || '0'"
                        :percentage="25"
                      ></el-progress>
                    </div>
                  </div>
                  <div class="list" v-if="collectName == '1'">
                    <div
                      class="list__item"
                      v-for="(item, index) in collectExamList"
                      :key="index"
                    >
                      <div class="title">
                        {{ item.examName }}
                      </div>
                      <div class="content clearfix">
                        <div class="left">
                          收藏题<span class="red">{{ item.questionNum }}</span>
                        </div>
                        <div class="right">
                          <el-button
                            type="primary"
                            @click="
                              go('/subject/collect-bank/' + item.examId, {
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            round
                            plain
                            class="btn"
                            >重做</el-button
                          >
                          <el-button
                            type="primary"
                            @click="
                              go('/subject/collect-bank/' + item.examId, {
                                explain: 1,
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            round
                            plain
                            class="btn"
                            >解析</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="list" v-if="collectName == '2'">
                    <div
                      class="list__item"
                      v-for="(item, index) in collectTypeList"
                      :key="index"
                    >
                      <div class="title">
                        <template v-if="item.type == 1">单选题</template>
                        <template v-if="item.type == 2">多选题</template>
                        <template v-if="item.type == 3">判断题</template>
                        <template v-if="item.type == 4">案例题</template>
                        <template v-if="item.type == 5">简答题</template>
                      </div>
                      <div class="content clearfix">
                        <div class="left">
                          收藏题<span class="red">{{ item.num }}</span>
                        </div>
                        <div class="right">
                          <el-button
                            type="primary"
                            @click="
                              go('/subject/collect-type-bank/' + item.type, {
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            round
                            plain
                            class="btn"
                            >重做</el-button
                          >
                          <el-button
                            type="primary"
                            @click="
                              go('/subject/collect-type-bank/' + item.type, {
                                explain: 1,
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            round
                            plain
                            class="btn"
                            >解析</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="错题集" name="-2">
              <div class="goods-collect">
                <div class="goods-collect__header">
                  <div class="selects">
                    <div class="selects__item">
                      <el-select
                        placeholder="请选择试卷类型"
                        v-model="wrongSelect"
                        clearable
                        @clear="getWrongData"
                        @change="getWrongData"
                      >
                        <el-option
                          v-for="(item, index) in selectList"
                          :key="index"
                          :label="item.paperName"
                          :value="item.paperId"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>

                  <div class="tabs">
                    <el-tabs v-model="wrongName" @tab-click="getWrongData">
                      <el-tab-pane label="试卷归类" name="1"></el-tab-pane>
                      <el-tab-pane label="题型归类" name="2"></el-tab-pane>
                    </el-tabs>
                  </div>
                </div>

                <div class="goods-collect__body">
                  <div class="box">
                    <div class="title">错题统计</div>
                    <div class="circle">
                      <el-progress
                        type="circle"
                        :width="160"
                        :stroke-width="12"
                        color="#F5222D"
                        :format="() => wrongTotal || '0'"
                        :percentage="25"
                      ></el-progress>
                    </div>
                  </div>
                  <div class="list" v-if="wrongName == '1'">
                    <div
                      class="list__item"
                      v-for="(item, index) in wrongExamList"
                      :key="index"
                    >
                      <div class="title">
                        {{ item.examName }}
                      </div>
                      <div class="content clearfix">
                        <div class="left">
                          错题数<span class="red">{{
                            item.wrongQuestionNum
                          }}</span>
                        </div>
                        <div class="right">
                          <el-button
                            type="primary"
                            round
                            plain
                            class="btn"
                            @click="
                              go('/subject/wrong-bank/' + item.examId, {
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            >重做</el-button
                          >
                          <el-button
                            type="primary"
                            round
                            plain
                            class="btn"
                            @click="
                              go('/subject/wrong-bank/' + item.examId, {
                                explain: 1,
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            >解析</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="list" v-if="wrongName == '2'">
                    <div
                      class="list__item"
                      v-for="(item, index) in wrongTypeList"
                      :key="index"
                    >
                      <div class="title">
                        <template v-if="item.type == 1">单选题</template>
                        <template v-if="item.type == 2">多选题</template>
                        <template v-if="item.type == 3">判断题</template>
                        <template v-if="item.type == 4">案例题</template>
                        <template v-if="item.type == 5">简答题</template>
                      </div>
                      <div class="content clearfix">
                        <div class="left">
                          错题数<span class="red">{{ item.num }}</span>
                        </div>
                        <div class="right">
                          <el-button
                            type="primary"
                            round
                            plain
                            class="btn"
                            @click="
                              go('/subject/wrong-type-bank/' + item.type, {
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            >重做</el-button
                          >
                          <el-button
                            type="primary"
                            round
                            plain
                            class="btn"
                            @click="
                              go('/subject/wrong-type-bank/' + item.type, {
                                explain: 1,
                                orderGoodsId: orderGoodsId,
                              })
                            "
                            >解析</el-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="false" class="right-box">
          <div class="right-box__header">
            <div class="title">
              <div
                @click="
                  go('/person-center/my-bank/bank-statistics/' + goodsId, {
                    orderGoodsId: orderGoodsId,
                  })
                "
              >
                做题统计>
              </div>
            </div>
            <div class="content">
              <div class="left">
                <div class="title">总进度</div>
                <div class="note">
                  {{
                    goodsCount.totalNum > 0
                      ? (
                          (goodsCount.doNum / goodsCount.totalNum) *
                          100
                        ).toFixed(
                          (goodsCount.doNum / goodsCount.totalNum) * 100 == 100
                            ? 0
                            : 1
                        )
                      : 0
                  }}%
                </div>
              </div>
              <div class="right">
                <div class="title"><span class="blue">已答题</span>/未答题</div>
                <div class="note">
                  <span class="blue">{{ goodsCount.doNum }}</span
                  >/{{ goodsCount.totalNum - goodsCount.doNum }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="right-box__body"
            v-if="recommendList.goodsList && recommendList.goodsList.length"
          >
            <div class="title">
              推荐题库
              <span class="more" @click="go('/bank-list')">更多></span>
            </div>
            <ul class="list">
              <li
                class="course-item"
                v-for="(itemy, index) in compyRecommend(
                  recommendList.goodsList
                )"
                :key="index"
              >
                <GoodsItem :item="itemy"></GoodsItem>
                <!-- <div
                  class="course-item__img"
                  :style="`background-image:url(${$tools.splitImgHost(
                    itemy.coverUrl,
                    true
                  )})`"
                >
                  <div class="note" v-if="itemy.year">{{ itemy.year }}</div>
                </div>
                <div class="course-item__title">
                  {{ itemy.goodsName }}
                </div>
                <div class="course-item__desc">
                  <div class="price">￥{{ itemy.standPrice }}</div>
                  <a class="add" @click.stop="addCart(true, itemy.goodsId)"
                    >加购物车</a
                  >
                </div> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import GoodsItem from "@/components/goodsItem/index";
export default {
  name: "BankDetailCopy",
  components: {
    GoodsItem,
  },
  data() {
    return {
      newList: [],
      examListNew: [],
      orderGoodsId: "",
      activeName: "0",
      collectName: "1",
      wrongName: "1",
      goodsId: "",
      goodsDetail: {},
      goodsCount: {},
      bankList: [],
      selectList: [],
      collectSelect: "",
      wrongSelect: "",
      hasClickList: [],
      collectTypeList: [],
      collectExamList: [],
      wrongTypeList: [],
      wrongExamList: [],
      collectTotal: 0,
      wrongTotal: 0,
      recommendList: [],
      needOpen: true, //是否需要打开第一章节
      recordItem: null,
    };
  },
  mounted() {},
  computed: {
    compyRecommend: function () {
      return function (array) {
        let ary = [];
        if (array) {
          for (let i = 0; i < array.length; i++) {
            if (i >= 5) {
              break;
            } else {
              ary.push(array[i]);
            }
          }
        }
        return ary;
      };
    },
    computedNums: function () {
      return function (doNum, totalNum) {
        let ary = 0;
        ary = parseInt(doNum ? doNum : 0) / parseInt(totalNum ? totalNum : 0);
        return (ary * 100).toFixed(0);
      };
    },
  },
  methods: {
    async initData(data, recordItem) {
      this.recordItem = recordItem;
      this.orderGoodsId = data.orderGoodsId;
      this.goodsId = data.goodsId;
      await this.getExamType(data.goodsId);
      this.goodsBankQuestionNum();
      if (this.recordItem) {
        this.getRecordItem();
      } else {
        await this.goodsBank();
      }
      this.getDetail();
      this.examaperList();
    },
    getRecordItem() {
      this.$request
        .goodsBank({
          orderGoodsId: this.recordItem.orderGoodsId,
          goodsId: this.recordItem.goodsId,
        })
        .then(async (res) => {
          res.data.forEach((item) => {
            if (item.type == 2 || item.type == 1) {
              item.showList = false;
              item.list = [];
            }
          });
          this.bankList = res.data;
          // for (let i = 0; i < this.bankList.length; i++) {
          //   if (this.bankList[i].type == 1) {
          //     await this.moduleExam(this.bankList[i]);
          //     break;
          //   } else if (this.bankList[i].type == 2) {
          //     this.needOpen = false;
          //     await this.chapterExam(this.bankList[i], 0);
          //     break;
          //   }
          // }
          const DW = this.bankList.findIndex((item) => {
            if (
              item.type == 1 &&
              this.recordItem.moduleExamId > 0 &&
              this.recordItem.moduleExamId == item.majorId
            ) {
              return item;
            } else if (
              item.type == 2 &&
              !this.recordItem.moduleExamId &&
              this.recordItem.chapterExamId == item.majorId
            ) {
              return item;
            } else if (
              item.type == 3 &&
              !this.recordItem.moduleExamId &&
              !this.recordItem.chapterExamId &&
              this.recordItem.examId == item.majorId
            ) {
              return item;
            }
          });
          if (DW != -1) {
            if (this.bankList[DW].type == 1) {
              
              console.log(1)
              this.$request
                .goodsChapterList({
                  orderGoodsId: this.orderGoodsId,
                  moduleExamId: this.recordItem.moduleExamId,
                  goodsId: this.goodsId,
                })
                .then(async (res) => {
                  res.data.forEach((item) => {
                    item.showList = false;
                    item.list = [];
                  });
                  this.$set(
                    this.bankList[DW],
                    "showList",
                    !this.bankList[DW].showList
                  );
                  this.$set(this.bankList[DW], "list", res.data);
                  const DWChapter = this.bankList[DW].list.findIndex(
                    (items) => {
                      return (
                        items.chapterExamId == this.recordItem.chapterExamId
                      );
                    }
                  );
                  if (DWChapter != -1) {
                    this.$request
                      .bankExamExamList({
                        orderGoodsId: this.orderGoodsId,
                        moduleExamId: this.bankList[DW].majorId,
                        chapterExamId:
                          this.bankList[DW].list[DWChapter].chapterExamId,
                        goodsId: this.goodsId,
                      })
                      .then((res) => {
                        this.$set(
                          this.bankList[DW].list[DWChapter],
                          "showList",
                          !this.bankList[DW].list[DWChapter].showList
                        );
                        this.$set(
                          this.bankList[DW].list[DWChapter],
                          "list",
                          res.data
                        );
                        const DWChapters = this.bankList[DW].list[
                          DWChapter
                        ].list.findIndex((itemsy) => {
                          return itemsy.examId == this.recordItem.examId;
                        });
                        if (DWChapters != -1) {
                          this.$set(
                            this.bankList[DW].list[DWChapter].list[DWChapters],
                            "newRecordStatus",
                            true
                          );
                        }
                      });
                  }
                });
            } else if (this.bankList[DW].type == 2) {
              console.log(2)
              this.$request
                .bankExamExamList({
                  orderGoodsId: this.orderGoodsId,
                  moduleExamId: 0,
                  chapterExamId: this.bankList[DW].majorId,
                  goodsId: this.goodsId,
                })
                .then((res) => {
                  this.$set(
                    this.bankList[DW],
                    "showList",
                    !this.bankList[DW].showList
                  );
                  this.$set(this.bankList[DW], "list", res.data);
                  const DWChapter = this.bankList[DW].list.findIndex(
                    (items) => {
                      return items.examId == this.recordItem.examId;
                    }
                  );
                  if (DWChapter != -1) {
                    this.$set(
                      this.bankList[DW].list[DWChapter],
                      "newRecordStatus",
                      true
                    );
                  }
                });
            } else if (this.bankList[DW].type == 3) {
              console.log(3)
              this.$set(this.bankList[DW], "newRecordStatus", true);
            }
          }
          console.log("DW", DW,this.bankList);
          
        });
    },
    getExamType(id) {
      return new Promise((resolve, reject) => {
        this.$request.exampapergoodsExamPaper(id).then((res) => {
          this.newList = res.data;
          if (parseInt(this.activeName) > 0) {
            this.tabChange({ name: this.activeName });
          }
          resolve();
        });
      });
    },
    /**
     * 跳转
     */
    toGoodsDetail(item) {
      this.$router.push({
        path: "/bank-detail/" + item.goodsId,
        query: {
          orderGoodsId: item.orderGoodsId,
        },
      });
    },
    addCart(status, goodsId) {
      this.$request
        .addCart({ goodsId: status ? goodsId : this.goodsId })
        .then((res) => {
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },
    /**
     * 
     获取推荐列表
     */
    getRecommend() {
      this.$request
        .appCommonActivityRecommendList({
          businessId: this.goodsDetail.businessId,
          type: 2,
        })
        .then((res) => {
          if (res.rows.length) {
            this.recommendList = res.rows[0];
          }
        });
    },
    go(path, query = {}) {
      console.log(path, query);
      this.$router.push({
        path,
        query,
      });
    },
    examaperList() {
      this.$request.examaperList().then((res) => {
        this.selectList = res.rows;
      });
    },

    /**
     * 获取用户商品统计数据
     */
    goodsBankQuestionNum() {
      this.$request.goodsBankQuestionNum(this.orderGoodsId).then((res) => {
        this.goodsCount = res.data;
      });
    },

    getDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        this.goodsDetail = res.data;
        this.getRecommend();
      });
    },

    /**
     * 获取课程目录
     */
    goodsBank() {
      return new Promise((resolve, reject) => {
        this.$request
          .goodsBank({
            orderGoodsId: this.orderGoodsId,
            goodsId: this.goodsId,
          })
          .then(async (res) => {
            res.data.forEach((item) => {
              if (item.type == 2 || item.type == 1) {
                item.showList = false;
                item.list = [];
              }
            });
            this.bankList = res.data;
            for (let i = 0; i < this.bankList.length; i++) {
              if (this.bankList[i].type == 1) {
                await this.moduleExam(this.bankList[i]);
                break;
              } else if (this.bankList[i].type == 2) {
                this.needOpen = false;
                await this.chapterExam(this.bankList[i], 0);
                break;
              }
            }
            resolve();
          });
      });
    },

    /**
     * 展开模块卷
     */
    moduleExam(Module) {
      return new Promise((resolve, reject) => {
        if (Module.list.length) {
          Module.showList = !Module.showList;
          return;
        }
        this.$request
          .goodsChapterList({
            orderGoodsId: this.orderGoodsId,
            moduleExamId: Module.majorId,
            goodsId: this.goodsId,
          })
          .then(async (res) => {
            console.log(res, "resresres");
            res.data.forEach((item) => {
              item.showList = false;
              item.list = [];
            });
            Module.showList = !Module.showList;
            Module.list = res.data;

            if (this.needOpen) {
              this.needOpen = false;
              await this.chapterExam(Module.list[0], Module.majorId);
            }
            resolve();
          });
      });
    },
    /**
     * 展开章卷
     */
    chapterExam(chapter, moduleId = 0) {
      return new Promise((resolve, reject) => {
        if (chapter.list.length) {
          chapter.showList = !chapter.showList;
          return;
        }
        this.$request
          .bankExamExamList({
            orderGoodsId: this.orderGoodsId,
            moduleExamId: moduleId,
            chapterExamId: chapter.chapterExamId || chapter.majorId,
            goodsId: this.goodsId,
          })
          .then((res) => {
            console.log(res, "res");
            chapter.showList = !chapter.showList;
            chapter.list = res.data;
            resolve();
          });
      });
    },

    /**
     * 去做题
     */
    async toDo(section, chapterId, moduleId) {
      let count = await this.examRecordCount(section.examId || section.majorId);
      let answerNum = await this.getExamDetail(
        section.examId || section.majorId
      );
      //超过答题次数

      if (answerNum > 0 && count >= answerNum) {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + answerNum + "次!",
        });
        return;
      }

      this.$router.push({
        path: "/bank-exam/" + this.goodsId,
        query: {
          examId: section.examId || section.majorId,
          moduleId: moduleId || 0,
          chapterId: chapterId || 0,
          orderGoodsId: this.orderGoodsId,
        },
      });
    },

    /**
     * 继续做题
     */
    continueDo(section, chapterId, moduleId) {
      console.log(section);
      this.$router.push({
        path: "/bank-exam-continue/" + this.goodsId,
        query: {
          recordId: section.recordId,
          examId: section.examId || section.majorId,
          chapterId: chapterId,
          moduleId: moduleId,
          orderGoodsId: this.orderGoodsId,
        },
      });
    },

    /**
     * 重做
     * @param {Object} recordId
     * @param {Object} examId
     * @param {Object} goodsId
     * @param {Object} chapterExamId
     */
    async doRepeat(section, chapterId = 0, moduleId = 0) {
      let count = await this.examRecordCount(section.examId || section.majorId);
      let answerNum = await this.getExamDetail(
        section.examId || section.majorId
      );
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + answerNum + "次!",
        });
        return;
      }

      this.$confirm(`是否清空答案重做？`, "提示", {
        confirmButtonText: "重做",
        cancelButtonText: "查看上次",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {
          this.$router.push({
            path: "/bank-exam/" + this.goodsId,
            query: {
              examId: section.examId || section.majorId,
              moduleId: moduleId || 0,
              chapterId: chapterId || 0,
              orderGoodsId: this.orderGoodsId,
            },
          });
        })
        .catch((_) => {
          this.$router.push({
            path: "/bank-exam-all-explain/" + section.recordId,
            query: {
              examId: section.examId || section.majorId,
              moduleId: moduleId || 0,
              chapterId: chapterId || 0,
              goodsId: this.goodsId,
              orderGoodsId: this.orderGoodsId,
            },
          });
        });
    },

    /**
     * 查询试卷历史做题次数
     */
    examRecordCount(examId) {
      return new Promise((resolve) => {
        this.$request
          .examRecordCount({
            examId: examId,
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$request.getExamDetail(exam_id).then((res) => {
          resolve(res.data.answerNum);
        });
      });
    },

    getWrongData() {
      if (this.wrongName == "1") {
        //试卷归类
        this.wrongRecordList();
      } else if (this.wrongName == "2") {
        //题型归类
        this.wrongRecordTypeList();
      }
    },

    wrongRecordList() {
      this.$request
        .wrongRecordList({
          paperId: this.wrongSelect,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.wrongExamList = res.rows;
          let total = 0;
          res.rows.forEach((item) => {
            total += item.wrongQuestionNum;
          });

          this.wrongTotal = total;
        });
    },
    wrongRecordTypeList() {
      this.$request
        .wrongRecordTypeList({
          paperId: this.wrongSelect,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.wrongTypeList = res.rows;

          let total = 0;
          res.rows.forEach((item) => {
            total += item.num;
          });

          this.wrongTotal = total;
        });
    },

    getCollectData() {
      if (this.collectName == "1") {
        //试卷归类
        this.goodsCollectExamList();
      } else if (this.collectName == "2") {
        //题型归类
        this.collectQuestionTypeList();
      }
    },

    /**
     * 收藏按试卷分类
     */
    goodsCollectExamList() {
      this.$request
        .goodsCollectExamList({
          paperId: this.collectSelect,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.collectExamList = res.rows;
          let total = 0;
          res.rows.forEach((item) => {
            total += item.questionNum;
          });

          this.collectTotal = total;
        });
    },

    /**
     * 收藏按题型分类
     */
    collectQuestionTypeList() {
      this.$request
        .collectQuestionTypeList({
          paperId: this.wrongSelect,
          goodsId: this.goodsId,
        })
        .then((res) => {
          this.collectTypeList = res.rows;
          let total = 0;
          res.rows.forEach((item) => {
            total += item.num;
          });

          this.collectTotal = total;
        });
    },

    tabChange(e) {
      if (parseInt(e.name) > 0) {
        this.$request
          .bankexamgetPaperExamList({
            goodsId: this.goodsId,
            paperId: e.name,
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            console.log(res, "resssssss");
            this.examListNew = res.data;
          });
      }
      if (this.hasClickList.indexOf(e.name) != -1) {
        return;
      }

      this.hasClickList.push(e.name);

      if (e.name == "2") {
        //收藏集
        this.getCollectData();
      } else if (e.name == "3") {
        //错题集
        this.getWrongData();
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.btn_div {
  user-select: none;
  color: #666666;
  margin-right: 10px;
  padding: 0px 14px;
  height: 32px;
  line-height: 32px;
}
.bank-detail {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .left-box {
        // float: left;
        // width: 768px;

        /deep/.el-tabs__item {
          height: 98px;
          line-height: 98px;
        }
        .goods-menu {
          // padding: 0 16px 16px;
          // border-radius: 10px;
          // background: #f5f7fa;

          &__header {
            display: flex;
            padding-right: 8px;
            align-items: center;
            .title {
              padding: 10px 0;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              flex: 1;
            }

            .question-num {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              text-align: center;
              display: inline-block;
              width: 80px;
            }

            .question-do {
              width: 88px;
            }
          }

          &__body {
            .item {
              overflow: hidden;
              background: #fff;
              // padding: 0 10px;

              &__title {
                padding: 20px 21px;
                cursor: pointer;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #333333;
                background-color: #f8f8f9;

                .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 {
                margin-top: 12px;
                background: #fff;

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

                  &__item {
                    font-size: 16px;

                    &__text {
                      padding-top: 20px;
                      padding-bottom: 20px;
                      border-bottom: 1px solid #eeeeee;
                      cursor: pointer;
                      flex: 1;
                    }
                  }
                }

                .bank-section {
                  margin-left: 25px;
                  color: #99a0a7;
                  &__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: 88px;
                      height: 32px;
                      padding: 0;
                      border-radius: 16px;
                      line-height: 32px;
                      text-align: center;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
        }

        .goods-collect {
          &__header {
            .selects {
              display: flex;
              justify-content: space-between;
              &__item {
                width: 360px;
                height: 40px;
                border-radius: 8px;

                .el-select {
                  width: 100%;
                }

                /deep/ .el-input__inner {
                  background: #fafafa;
                  border: 1px solid #d9d9d9;
                }
              }
            }
          }

          &__body {
            .box {
              width: 300px;
              height: 240px;
              background: #ffffff;
              border: 1px solid #d9d9d9;
              border-radius: 8px;
              padding: 16px;

              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
              }

              .circle {
                width: 160px;
                height: 160px;
                margin: 10px auto 0;
              }
            }

            .list {
              overflow: hidden;
              &__item {
                margin-top: 16px;
                height: 98px;
                background: #f7f9fc;
                box-shadow: 0px 3px 6px 0px #e1e6ed;
                border-radius: 8px;

                .title {
                  padding: 10px 16px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #333333;
                }

                .content {
                  border-top: 1px solid #eee;
                  .left {
                    float: left;
                    margin-left: 16px;
                    margin-top: 10px;
                    padding: 4px 12px;
                    border: 1px solid #666666;
                    border-radius: 4px;
                    font-size: 14px;

                    .red {
                      margin-left: 12px;
                      color: #f5222d;
                      font-size: 14px;
                    }
                  }

                  .right {
                    float: right;
                    margin-right: 16px;
                    margin-top: 10px;
                    .btn {
                      width: 88px;
                      height: 32px;
                      border-radius: 16px;
                      text-align: center;
                      padding: 0;
                      line-height: 32px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .right-box {
        width: 300px;
        float: right;

        &__header {
          height: 98px;
          border-bottom: 2px solid #e4e7ed;

          .title {
            cursor: pointer;
            height: 32px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 32px;
          }

          .content {
            height: 64px;
            font-size: 0;
            .left {
              width: 50%;
              display: inline-block;
              border-right: 1px solid #e4e7ed;
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
              }

              .note {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #3f8dfd;
              }
            }

            .right {
              text-align: center;
              display: inline-block;
              width: 50%;
              .title {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
                .blue {
                  color: #3f8dfd;
                }
              }

              .note {
                font-size: 24px;
                font-family: Microsoft YaHei;
                color: #999999;
                .blue {
                  font-size: 24px;
                  color: #3f8dfd;
                }
              }
            }
          }
        }

        &__body {
          .title {
            margin-top: 15px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
            position: relative;

            .more {
              cursor: pointer;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              position: absolute;
              right: 0;
            }
          }

          .list {
            .course-item {
              // margin: 110px 0 0;
              // width: 300px;
              // height: 178px;
              // background: #ffffff;
              // box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
              // border-radius: 10px;
              // position: relative;
              // background: #fff;
              // padding-top: 100px;

              // &__img {
              //   width: 280px;
              //   height: 178px;
              //   background: #ffffff;
              //   box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
              //   border-radius: 10px;
              //   position: absolute;
              //   left: 10px;
              //   top: -78px;
              //   background: rgba(122, 136, 246, 1);
              //   overflow: hidden;
              //   background: no-repeat center center;
              //   background-size: 280px 178px;

              //   .note {
              //     width: 80px;
              //     height: 24px;
              //     background: #d94404;
              //     box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
              //     border-radius: 10px 0px 20px 0px;
              //     text-align: center;
              //     line-height: 24px;
              //     color: #fff;
              //   }
              // }

              // &__title {
              //   margin: 0 8px;
              //   font-size: 14px;
              //   font-family: Microsoft YaHei;
              //   font-weight: 400;
              //   color: #333333;
              //   line-height: 24px;
              // }

              // &__desc {
              //   height: 32px;
              //   position: absolute;
              //   left: 0;
              //   right: 0;
              //   bottom: 0;
              //   margin-left: 8px;
              //   display: flex;
              //   justify-content: space-between;

              //   .price {
              //     font-size: 18px;
              //     font-family: Microsoft YaHei;
              //     font-weight: bold;
              //     color: #ff2d55;
              //     line-height: 32px;
              //   }

              //   .add {
              //     display: block;
              //     width: 118px;
              //     height: 32px;
              //     line-height: 30px;
              //     background: #f2f4f7;
              //     border-radius: 10px 0px 10px 0px;
              //     font-size: 16px;
              //     color: #3f8dfd;
              //     text-align: center;

              //     &:hover {
              //       background: #3f8dfd;
              //       color: #f2f4f7;
              //     }
              //   }
              // }
            }
          }
        }
      }
    }
  }
}
._content {
  margin-top: 6px;
  background: #fff;

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

    &__item {
      font-size: 16px;

      &__text {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eeeeee;
        cursor: pointer;
        flex: 1;
      }
    }
  }

  .bank-section {
    margin-left: 25px;
    color: #99a0a7;
    &__item {
      padding-bottom: 6px;
      // border-bottom: 1px solid #eeeeee;
      font-size: 16px;
      display: flex;

      &__text {
        flex: 1;
      }

      .btn {
        margin-right: 20px;
        width: 88px;
        height: 32px;
        padding: 0;
        border-radius: 16px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>