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="handelTab">
            <el-tab-pane v-for="tab in newList" :key="tab.paperId" :label="tab.paperName" :name="tab.paperId + ''">
              <div v-if="tab.paperName == '每日一练'" style="background: #f8f8fa; padding: 20px">
                <template v-if="tab.examInfo">
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <div class="day-box">
                        <div>
                          <p>
                            打卡天数<span>{{ tab.examInfo.recordCount }}</span>天
                          </p>
                          <p>
                            打卡进度超过了{{ tab.examInfo.recordPercentage }}的学员
                          </p>
                        </div>
                        <div @click="handelPunchClock(tab)">
                          {{ tab.examInfo.examRecord ? "今日已打卡" : "今日打卡" }}
                        </div>
                        <img src="../../../../assets/basket.png" alt="" />
                      </div>
                      <div class="clock-in-box">
                        <div class="clock-in-box-item">
                          <p class="clock-title">明日打卡任务</p>
                          <div class="clock-task">
                            {{ tab.examInfo.examNameBelow || "暂无" }}
                          </div>
                        </div>
                        <div class="clock-in-box-item">
                          <p class="clock-title">打卡记录</p>
                          <div class="clock-calendar">
                            <el-calendar :first-day-of-week="7">
                              <template slot="dateCell" slot-scope="{ date, data }">
                                <p v-if="!isSelected(data.day)" :class="isToday(data.day) ? 'date-today' : ''">
                                  {{ data.day.split("-").slice(2).join("-") }}
                                </p>
                                <p v-else class="is-Select">
                                  <img src="../../../../assets/tick.png" alt="" />
                                </p>
                              </template>
                            </el-calendar>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="ranki-list">
                        <p class="ranki-list-title">打卡PK榜</p>
                        <ul>
                          <li style="font-size: 12px;">
                            <p>排名</p>
                            <p>用户ID</p>
                            <p>打卡天数</p>
                          </li>
                          <li v-for="(item, index) in  rankiList" :key="index">
                            <p>{{ index > 8 ? index + 1 : '0' + (index + 1) }}</p>
                            <p>
                              <el-image :src="$tools.splitImgHost(item.avatar)">
                                <div slot="error" class="image-slot">
                                  <i class="el-icon-picture-outline"></i>
                                </div>
                              </el-image>
                              {{ item.userName }}
                            </p>
                            <p style="color: #222222;">{{ item.recordCount }}</p>
                          </li>
                        </ul>
                      </div>
                    </el-col>
                  </el-row>

                </template>
                <div class="no-data" v-else>
                  <div>
                    <img src="../../../../assets/no-data.png" alt="" />
                    <p>暂无题库，请前往购买</p>
                  </div>
                </div>
              </div>
              <div v-else-if="tab.paperName == '随机练习'" style="background: #f8f8fa; padding: 20px">
                <div class="random-box">
                  <div class="random-box-top">
                    <p class="random-box-title">试卷情况</p>
                    <div class="random-box-top-num">
                      <img style="margin-right: 12px" src="../../../../assets/testpaper.png" alt="" />
                      <div>
                        <p>{{ tab.examInfo ? tab.examInfo.doNum : "-" }}</p>
                        <p>已完成提数</p>
                      </div>
                      <div class="line"></div>
                      <div>
                        <p>{{ tab.examInfo ? tab.examInfo.totalNum : "-" }}</p>
                        <p>总提数</p>
                      </div>
                      <div class="line"></div>
                      <div>
                        <p>
                          {{
                              tab.examInfo
                                ? toFixed(
                                  (tab.examInfo.rightNum /
                                    tab.examInfo.totalNum) *
                                  100
                                )
                                : "-"
                          }}%
                        </p>
                        <p>正确率</p>
                      </div>
                    </div>
                  </div>
                  <div class="random-box-bom">
                    <p class="random-box-title">做题数量</p>
                    <div class="sle-num-box">
                      <div :class="activeNum == val ? 'actvie' : ''" v-for="val in numList" :key="val"
                        @click="handelNum(val)">
                        {{ val }}
                      </div>
                    </div>
                    <div class="random-box-bom-btn" @click="beginExam(tab.examInfo)">
                      开始做题
                    </div>
                  </div>
                </div>
              </div>
              <div class="goods-menu" v-else>
                <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 }}
                        <span style="float: right; color: #99a0a7; font-weight: 400">{{ item.showList ? "收起∧" : "展开∨" }}
                        </span>
                      </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 }}
                              <i v-if="chapter.showList" class="el-icon-arrow-up"
                                style="float: right; margin-right: 20px"></i>
                              <i v-else class="el-icon-arrow-down" style="float: right; margin-right: 20px"></i>
                            </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 }}
                                  <span v-if="section.newRecordStatus" class="upStudyStyle">上次做到</span>
                                </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 }}
                              <i v-if="item.showList" class="el-icon-arrow-up"
                                style="float: right; margin-right: 20px"></i>
                              <i v-else class="el-icon-arrow-down" style="float: right; margin-right: 20px"></i>
                            </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 }}
                                  <span v-if="section.newRecordStatus" class="upStudyStyle">上次做到</span>
                                </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 }}
                              <span v-if="item.newRecordStatus" class="upStudyStyle">上次做到</span>
                            </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-tabs>
        </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: {},
      bankList: [],
      collectSelect: "",
      wrongSelect: "",
      hasClickList: [],
      collectTypeList: [],
      collectExamList: [],
      wrongTypeList: [],
      wrongExamList: [],
      collectTotal: 0,
      wrongTotal: 0,
      needOpen: true, //是否需要打开第一章节
      recordItem: null,
      numList: [5, 10, 15, 20, 50, 100],
      activeNum: 5,
      punchList: [],
      rankiList: []
    };
  },
  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: {
    toFixed(num) {
      if (num) {
        let str = String(num).indexOf(".");

        if (str != -1) {
          return +num.toFixed(2);
        } else {
          return num;
        }
      } else {
        return 0;
      }
    },
    initData(data, recordItem) {
      this.recordItem = recordItem;
      this.orderGoodsId = data.orderGoodsId;
      this.goodsId = data.goodsId;
      this.getExamType(data.goodsId);
      // if (this.recordItem) {
      //   this.getRecordItem();
      // } else {
      //   await this.goodsBank();
      // }
    },
    getRecordItem() {
      this.$request
        .goodsBank({
          orderGoodsId: this.recordItem.orderGoodsId,
          goodsId: this.recordItem.goodsId,
          paperId: this.activeName * 1 || undefined,
        })
        .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) => {
                        res.data.sort((a, b) => {
                          return a.sort - b.sort;
                        });
                        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) {
              this.$request
                .bankExamExamList({
                  orderGoodsId: this.orderGoodsId,
                  moduleExamId: 0,
                  chapterExamId: this.bankList[DW].majorId,
                  goodsId: this.goodsId,
                })
                .then((res) => {
                  res.data.sort((a, b) => {
                    return a.sort - b.sort;
                  });
                  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;
          // this.newList = [{ paperId: 0, paperName: "全部" }, ...res.data];
          // if (parseInt(this.activeName) > 0) {
          //   this.tabChange({ name: this.activeName });
          // }
          // 从结果页返回
          let examType = this.$route.query.examType;
          if (examType) {
            let item = this.newList.find(
              (e) => e.paperName == ["每日一练", "随机练习"][examType - 1]
            );
            this.activeName =
              (item ? item.paperId : this.newList[0].paperId) + "";
          } else {
            this.activeName = this.newList[0].paperId + "";
          }
          this.handelTab();
          resolve();
        });
      });
    },
    go(path, query = {}) {
      console.log(path, query);
      this.$router.push({
        path,
        query,
      });
    },
    beginExam({ rightNum, totalNum }) {
      if (rightNum == totalNum) {
        return this.$message.success("题目已经做完了!");
      }
      this.$router.push({
        path: "/bank-exam/" + this.goodsId,
        query: {
          orderGoodsId: this.orderGoodsId,
          number: this.activeNum,
          moduleId: 0,
          chapterId: 0,
          examId: 0,
        },
      });
    },
    handelNum(val) {
      this.activeNum = val;
      // console.log(val, this.goodsId, this.orderGoodsId)
    },
    /**
     * 获取课程目录
     */
    handelTab() {
      let item = this.newList.find((tab) => tab.paperId == this.activeName);
      if (item.paperName == "每日一练") {
        this.$request.getToDayExam(this.goodsId).then((res) => {
          this.$set(item, "examInfo", res.data);
          if (res.data) {
            this.$request.getPunchRecord({ goodsId: this.goodsId }).then((res) => {
              this.punchList = res.data;
            });
            this.$request.getRankiList(this.goodsId).then((res) => {
              this.rankiList = res.data;
            });
          }
        });
        return;
      } else if (item.paperName == "随机练习") {
        this.$request.getRandomExam(this.orderGoodsId).then((res) => {
          this.$set(item, "examInfo", res.data);
        });
        return;
      }
      this.goodsBank();
    },
    goodsBank() {
      return new Promise((resolve, reject) => {
        this.$request
          .goodsBank({
            orderGoodsId: this.orderGoodsId,
            goodsId: this.goodsId,
            paperId: this.activeName * 1 || undefined,
          })
          .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,
            paperId: this.activeName * 1 || undefined,
          })
          .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,
            paperId: this.activeName * 1 || undefined,
          })
          .then((res) => {
            res.data.sort((a, b) => {
              return a.sort - b.sort;
            });
            chapter.showList = !chapter.showList;
            chapter.list = res.data;
            resolve();
          });
      });
    },
    // 新增用户视频学习日志
    studyLog(courseId, moduleId, chapterId, examId) {
      this.$axios({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: this.goodsId,
          courseId: courseId,
          moduleId: moduleId || 0,
          chapterId: chapterId || 0,
          sectionId: examId || 0,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: 2, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: this.orderGoodsId,
        },
      }).then((res) => {
        console.log("题库的用户学习日志:", res);
      });
    },
    /**
     * 去做题
     */
    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,
        },
      });
      this.studyLog(0, moduleId, chapterId, section.examId);
    },
    handelPunchClock({ examInfo }) {
      this.$router.push({
        path: "/bank-exam/" + this.goodsId,
        query: {
          examId: examInfo.examId,
          moduleId: examInfo.moduleExamId,
          chapterId: examInfo.chapterExamId,
          orderGoodsId: this.orderGoodsId,
          examType: 1,
        },
      });
    },
    isSelected(date) {
      if (!this.punchList.length) {
        return false;
      }
      return this.punchList.some(
        (e) => e.recordTime == new Date(date).setHours(0, 0, 0, 0) / 1000
      );
    },
    isToday(date) {
      return (
        new Date(date).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
      );
    },
    /**
     * 继续做题
     */
    continueDo(section, chapterId, moduleId) {
      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,
        },
      });
      this.studyLog(0, moduleId, chapterId, section.examId);
    },

    /**
     * 重做
     * @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,
            },
          });
        });
      this.studyLog(0, moduleId, chapterId, section.examId);
    },

    /**
     * 查询试卷历史做题次数
     */
    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) => {
            this.examListNew = res.data;
          });
      }
      if (this.hasClickList.indexOf(e.name) != -1) {
        return;
      }

      this.hasClickList.push(e.name);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.upStudyStyle {
  background-color: #f2f7ff;
  border: 1px solid #3f8dfd;
  color: #3f8dfd;
  padding: 3px 4px;
  border-radius: 4px;
}

.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;
        .day-box {
          // width: 709px;
          height: 100px;
          display: flex;
          height: 110px;
          background: url("../../../../assets/BG_punch.png");
          background-size: 100% 100%;
          padding-left: 36px;
          padding-top: 16px;
          position: relative;

          div {
            &:nth-of-type(1) {
              p {
                &:nth-of-type(1) {
                  font-size: 16px;
                  font-weight: 800;
                  color: #556176;
                  line-height: 42px;

                  span {
                    font-size: 36px;
                    color: #222222;
                    padding: 0 5px;
                    // vertical-align: middle;
                  }
                }

                &:nth-of-type(2) {
                  font-size: 12px;
                  color: #808da4;
                }
              }
            }

            &:nth-of-type(2) {
              width: 123px;
              height: 36px;
              background: #3f8dfd;
              border-radius: 30px;
              text-align: center;
              line-height: 36px;
              font-size: 15px;
              font-weight: bold;
              color: #ffffff;
              margin-top: 20px;
              margin-left: 32px;
              cursor: pointer;
            }
          }

          img {
            width: 92px;
            height: 92px;
            position: absolute;
            right: 24px;
          }
        }

        .ranki-list {
          padding: 20px 16px 0;
          background: #FFFFFF;

          .ranki-list-title {
            color: #484848;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #E9E9E9;
            padding-bottom: 14px;
          }

          ul {
            height: 520px;

            li {
              height: 30px;
              line-height: 30px;
              display: flex;
              color: #6C7386;
              margin-bottom: 16px;

              p {
                &:nth-of-type(1) {
                  width: 42px;
                  padding-left: 16px;
                }

                &:nth-of-type(2) {
                  flex: 1;
                  margin-left: 24px;
                  display: flex;
                  align-items: center;

                  .el-image {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-right: 12px;
                  }
                }

                &:nth-of-type(3) {
                  padding-right: 16px;

                }
              }

              &:nth-of-type(1) {
                height: 40px;
                line-height: 40px;
                background: #F8F8FA;
                color: #888691;
                margin-bottom: 8px;

                p {
                  font-size: 13px;
                }
              }
            }
          }
        }

        .no-data {
          padding: 90px 0;

          div {
            width: 150px;
            margin: 0 auto;
            color: #888691;
            text-align: center;

            img {
              display: block;
              margin: 0 auto;
            }
          }
        }

        .clock-in-box {
          display: flex;
          justify-content: space-between;
          margin-top: 12px;
          padding: 20px 16px 0;
          background: #ffffff;

          .clock-in-box-item {
            width: 49%;

            .clock-title {
              font-weight: bold;
              color: #484848;
              font-size: 14px;
              margin-bottom: 20px;
            }

            .clock-calendar {
              border: 1px solid #eee;

              .date-today {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: 0 auto;
                background: #409eff;
                color: #fff;
              }

              /deep/ {
                .el-calendar-day {
                  height: 44px;
                  line-height: 30px;
                  text-align: center;
                }

                .el-calendar__body {
                  padding: 20px;
                }

                .el-calendar__button-group {
                  display: none;
                }

                td {
                  border: 0;
                }
              }

              .is-Select {
                width: 30px;
                height: 30px;
                background: #e8f6ff;
                border-radius: 50%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .clock-task {
              background: #f8f8fa;
              font-weight: 800;
              color: #556176;
              font-size: 16px;
              padding: 25px 60px;
              text-align: center;
            }
          }
        }

        .random-box {
          .random-box-title {
            font-weight: bold;
            color: #222222;
            font-size: 16px;
          }

          .random-box-top {
            height: 146px;
            background: #ffffff;
            padding: 20px;

            .random-box-top-num {
              margin-top: 12px;
              display: flex;
              align-items: center;

              div {
                width: 128px;
                text-align: center;

                p {
                  &:nth-of-type(1) {
                    font-size: 24px;
                    color: #222222;
                    margin-bottom: 4px;
                  }

                  &:nth-of-type(2) {
                    font-size: 12px;
                    color: #808da4;
                  }
                }
              }

              .line {
                width: 1px;
                height: 36px;
                background: #d9d9d9;
              }
            }
          }

          .random-box-bom {
            margin-top: 20px;
            background: #ffffff;
            padding: 20px 20px 60px;

            .sle-num-box {
              margin: 32px 0 40px;
              display: flex;
              justify-content: space-around;

              div {
                width: 148px;
                height: 48px;
                background: #f8f8fa;
                border-radius: 6px 6px 6px 6px;
                text-align: center;
                line-height: 48px;
                font-size: 20px;
                color: #222222;
                cursor: pointer;
              }

              .actvie {
                background: #e8f6ff;
                color: #3f8dfd;
              }
            }

            .random-box-bom-btn {
              width: 315px;
              height: 44px;
              background: #3f8dfd;
              border-radius: 8px 8px 8px 8px;
              cursor: pointer;
              margin: 0 auto;
              text-align: center;
              line-height: 44px;
              font-size: 16px;
              font-weight: bold;
              color: #ffffff;
            }
          }
        }

        /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;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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